Skip to content

Commit 1d0bfeb

Browse files
mkaminsky11mkaminsky11
committed
dynamically loading modes
1 parent 7bc0e0f commit 1d0bfeb

File tree

7 files changed

+170
-54
lines changed

7 files changed

+170
-54
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ This is only the **FRONTEND**. There is also a backend component which is not op
1414
If you want to see the places where all of the _magic_ happens, take a look at `js/drive.js`, `js/sky.js`, and `js/tabs.js`. Enjoy!
1515

1616
### Recent Updates
17+
+ Modes dynamically loaded, instead of all at once
1718
+ Can now import and export snippets
1819
+ Open tabs now stored automatically and reloaded
1920
+ Added ability to copy snippets to clipboard
@@ -34,6 +35,7 @@ If you want to see the places where all of the _magic_ happens, take a look at `
3435
+ Fix running Javascript + Coffeescript
3536
+ ~~Import and export snippets~~ **DONE!**
3637
+ ~~Store open tabs and reload on open~~ **DONE!**
38+
+ ~~Dynamically load modes~~ **DONE!**
3739
+ Custom-made color picker (WIP)
3840
+ Chat and collaboration using our backend, so that Onedrive users can chat and collaborate as well
3941
+ Better publishing

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<link rel="stylesheet" href="lib/slider/files/slider.css"> <!--actually the color thing-->
2727
<script src="lib/slider/files/slider.js"></script>
2828
<!--link rel="stylesheet" href="lib/messenger/css/messenger.css"-->
29-
<link rel="stylesheet" href="lib/messenger/css/messenger-theme-air.css">
29+
<!--link rel="stylesheet" href="lib/messenger/css/messenger-theme-air.css"-->
3030
<link rel="stylesheet" href="fonts/font.css">
3131
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
3232
<link rel="stylesheet" href="css/style.css">

‎js/editor.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,14 +174,44 @@ function replace(){
174174
CodeMirror.commands["replace"](editor());
175175
}
176176

177+
/*
178+
REVISED MODE CHANGE:
179+
* check if mode is loaded
180+
* if it is, set it
181+
- if not, load via ajax with onload = actuallySetMode(...)
182+
- if successful
183+
* check if editor still exists, set if it does
184+
* add mode to list of loaded modes
185+
186+
*/
177187

178188
manager.setMode = function(id,mode){
189+
var res = _mode.modeLoaded(mode);
190+
if(res[0] === true){
191+
console.log("mode loaded...setting");
192+
manager.actuallySetMode(id,mode);
193+
}
194+
else{
195+
console.log("mode not loaded...now loading");
196+
if(res[1] !== null){
197+
_mode.loadMode(res[1], mode, id, function(the_id, the_mode){
198+
manager.actuallySetMode(the_id, the_mode);
199+
});
200+
}
201+
else{
202+
//the mode does not exist
203+
}
204+
}
205+
};
206+
207+
manager.actuallySetMode = function(id, mode){
179208
try{
180209
if(mode !== $("#mode-select").val()){
181210
$("#mode-select").val(mode);
182211
}
183212
}
184213
catch(e){}
214+
185215
var index = getIndex(id);
186216
editors[index].editor.setOption("extraKeys", {});
187217
editors[index].editor.setOption("gutters",["CodeMirror-linenumbers"]);

‎js/global.js‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,53 @@ var converter = new Markdown.Converter();
1010
//[name, codemirror code, file extensions seperated by | ]
1111
var modeSelect = "";
1212
var modes = CodeMirror.modeInfo;
13-
for(var i = 0; i < modes.length; i++){
14-
var _mode_name = modes[i].mode;
13+
var _mode = {};
14+
_mode.modes = modes;
15+
_mode.loaded = ["xml","javascript","clike","coffeescript","css","htmlmixed","go","markdown","php","perl","python","sass","ruby","sql","null"];
16+
17+
for(var i = 0; i < _mode.loaded.length; i++){
18+
if(_mode.loaded[i] !== "null"){
19+
var url = "https://codeyourcloud.com/lib/codemirror/mode/" + _mode.loaded[i] + "/" + _mode.loaded[i] + ".js";
20+
jQuery.ajax({
21+
url: url,
22+
dataType: 'script',
23+
success: function(){},
24+
async: true
25+
});
26+
}
27+
}
28+
29+
_mode.modeLoaded = function(mode){
30+
for(var i = 0; i < _mode.modes.length; i++){
31+
if(_mode.modes[i].mime === mode || (_mode.modes[i].mimes && _mode.modes[i].mimes.indexOf(mode) !== -1)){
32+
//found it!
33+
var _mode_name = _mode.modes[i].mode;
34+
if(_mode.loaded.indexOf(_mode_name) !== -1 || _mode_name === "null"){
35+
return [true, _mode_name];
36+
}
37+
else{
38+
return [false, _mode_name];
39+
}
40+
}
41+
}
42+
return [false, null];
43+
}
44+
_mode.loadMode = function(_mode_name, mode, id, callback){
1545
if(_mode_name !== "null"){
1646
var url = "https://codeyourcloud.com/lib/codemirror/mode/" + _mode_name + "/" + _mode_name + ".js";
1747
jQuery.ajax({
1848
url: url,
1949
dataType: 'script',
20-
success: function(){},
50+
success: function(){
51+
_mode.loaded.push(_mode_name);
52+
callback(id, mode);
53+
},
2154
async: true
2255
});
2356
}
57+
else{
58+
callback(id, mode);
59+
}
2460
}
2561

2662
var themes = [
@@ -161,4 +197,4 @@ function getParameterByName(name) {
161197

162198
function esc(text){
163199
return $("#escape").text(text).html()
164-
}
200+
}

‎js/sky.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ sky.retrieveAllFilesInFolder = function(id, callback){
9999
path: (id + "/files"),
100100
method: "GET"
101101
}).then(function(res){
102-
callback(res.data);
102+
callback(res.data, id);
103103
}, function(err){});
104104
};
105105

‎js/snippets.js‎

Lines changed: 59 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,19 @@ snippets.addCustom = function(snippet){
5353
snippets.import = function(){
5454
var input = document.getElementById("snippet-file");
5555
file = input.files[0];
56-
fr = new FileReader();
57-
fr.onload = function(){
58-
try{
59-
var json = JSON.parse(fr.result).data;
60-
for(var i = 0; i < json.length; i++){
61-
snippets.addCustom(json[i]);
62-
}
63-
}
64-
catch(e){
65-
66-
}
56+
fr = new FileReader();
57+
fr.onload = function(){
58+
try{
59+
var json = JSON.parse(fr.result).data;
60+
for(var i = 0; i < json.length; i++){
61+
snippets.addCustom(json[i]);
62+
}
63+
}
64+
catch(e){
65+
66+
}
6767
}
68-
fr.readAsText(file);
68+
fr.readAsText(file);
6969
}
7070

7171
snippets.insert = function(snippet){
@@ -93,17 +93,23 @@ snippets.insert = function(snippet){
9393
elem.querySelector("select").value = snippet.language;
9494
elem.querySelector("input").value = snippet.title;
9595

96+
var _mode_is_loaded = _mode.modeLoaded(snippet.language);
97+
var _mode_to_load = snippet.language;
98+
if(_mode_is_loaded[0] === false){
99+
_mode_to_load = "text/plain";
100+
}
101+
96102
var editor = CodeMirror(_editor, {
97-
value: snippet.content,
98-
mode: snippet.language,
99-
readOnly: true,
100-
lineNumbers: false,
101-
theme: settings.state.theme,
102-
lineWrapping: true,
103-
indentUnit: 4,
104-
indentWithTabs: true,
105-
tabSize: settings.state.tabSize,
106-
viewPort: Infinity
103+
value: snippet.content,
104+
mode: _mode_to_load,
105+
readOnly: true,
106+
lineNumbers: false,
107+
theme: settings.state.theme,
108+
lineWrapping: true,
109+
indentUnit: 4,
110+
indentWithTabs: true,
111+
tabSize: settings.state.tabSize,
112+
viewPort: Infinity
107113
});
108114

109115
//refresh on open
@@ -118,6 +124,17 @@ snippets.insert = function(snippet){
118124
}
119125
})
120126
});
127+
128+
//load mode if needed
129+
if(_mode_is_loaded[0] === false){
130+
_mode.loadMode(_mode_is_loaded[1], snippet.language, snippet["_id"], function(_id, _mode_has_loaded){
131+
for(var i = 0; i < snippets.data.length; i++){
132+
if(snippets.data[i].snippet["_id"] === _id){
133+
snippets.data[i].editor.setOption("mode",_mode_has_loaded);
134+
}
135+
}
136+
});
137+
}
121138
}
122139

123140
snippets.getValue = function(_id){
@@ -207,9 +224,23 @@ snippets.delete = function(_id){
207224

208225
snippets.languageChange = function(_id){
209226
for(var i = 0; i < snippets.data.length; i++){
210-
if(snippets.data[i].snippet["_id"] === _id){
211-
snippets.data[i].snippet.language = snippets.data[i].elem.querySelector("select").value;
212-
snippets.data[i].editor.setOption("mode", snippets.data[i].snippet.language);
213-
}
214-
}
215-
}
227+
if(snippets.data[i].snippet["_id"] === _id){
228+
snippets.data[i].snippet.language = snippets.data[i].elem.querySelector("select").value;
229+
var chosenLang = snippets.data[i].snippet.language;
230+
var _mode_is_loaded = _mode.modeLoaded(chosenLang);
231+
232+
if(_mode_is_loaded[0] === false){
233+
_mode.loadMode(_mode_is_loaded[1], chosenLang, snippets.data[i].snippet["_id"], function(_id, _mode_has_loaded){
234+
for(var j = 0; j < snippets.data.length; j++){
235+
if(snippets.data[j].snippet["_id"] === _id){
236+
snippets.data[j].editor.setOption("mode",_mode_has_loaded);
237+
}
238+
}
239+
});
240+
}
241+
else{
242+
snippets.data[i].editor.setOption("mode",chosenLang);
243+
}
244+
}
245+
}
246+
}

‎js/tree.js‎

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,14 @@ function tree_folder(id, callback){
3030
if(cloud_use === "drive"){
3131
var ret = [];
3232
//gets all the files
33-
drive.retrieveAllFilesInFolder(id, function(data){
33+
drive.retrieveAllFilesInFolder(id, function(data, _root){
3434
var goal = data.length; //how many files total
3535
for(var i = 0; i < data.length; i++){
36-
var id_id = data[i].id;
37-
//for each of the files, gets the information
36+
var id_id = data[i].id;
37+
//add placeholder element
38+
tree_placeholder(id_id, _root);
39+
40+
//for each of the files, gets the information
3841
drive.getFile(id_id, function(resp){
3942
var to_push = {
4043
title: resp.title,
@@ -56,7 +59,7 @@ function tree_folder(id, callback){
5659
}
5760
else if(cloud_use === "sky"){
5861
var ret = [];
59-
sky.retrieveAllFilesInFolder(id, function(data){
62+
sky.retrieveAllFilesInFolder(id, function(data, _root){
6063
for(var i = 0; i < data.length; i++){
6164
var to_push = {
6265
title: data[i].name,
@@ -71,35 +74,49 @@ function tree_folder(id, callback){
7174
}
7275
//sets the id of the root to by the root folder
7376
$(".root-tree").attr("data-tree-ul", drive.root);
77+
78+
function tree_placeholder(id, root){
79+
var to_push = "<center style=\"display:none\" data-placeholder=\""+id+"\"></center>";
80+
$("[data-tree-ul='"+root+"']").append(to_push);
81+
}
82+
83+
function tree_insert(resp){
84+
var ret = "";
85+
var title = resp.title;
86+
var icon = '<i class="fa fa-align-left"></i>';
87+
var the_id = resp.id;
88+
if(typeof title !== 'undefined'){
89+
icon = tree.getIconByTitle(title);
90+
var caret = ""; //"<span class='context-click' data-fileid='"+data[i].id+"'><i class='zmdi zmdi-caret-down'></i></span>";
91+
var to_push = "<li data-tree-li='" + the_id + "' class='tree-file'>"+"<span onclick='toggle_tree_file(\""+the_id+"\")'>" + icon + title + caret + "</span>"+"</li>";
92+
93+
if(resp.folder === true){
94+
icon = "<i class='fa fa-folder'></i>";
95+
to_push = "<li data-tree-li='"+the_id+"' class='tree-folder'><span onclick='toggle_tree_folder(\""+the_id+"\")'>" + icon + title + caret + "</span><ul data-tree-ul='"+the_id+"' style='display:none'></ul></li>";
96+
}
97+
ret = ret + to_push;
98+
}
99+
return ret;
100+
}
101+
74102
//sets the tree contents for a folder
75103
function get_tree(id){
76104
//gets the array of files/folders, passes to callback
105+
$("[data-tree-ul='"+id+"']").html("");
77106
tree_folder(id, function(data){
78107
var ret = ""; //the html that will be returned
79108
for(var i = 0; i < data.length; i++){
80-
var title = data[i].title;
81-
var icon = '<i class="fa fa-align-left"></i>'; //the default
82-
if(typeof title !== 'undefined'){
83-
icon = tree.getIconByTitle(title);
84-
var caret = "";//"<span class='context-click' data-fileid='"+data[i].id+"'><i class='zmdi zmdi-caret-down'></i></span>";
85-
var to_push = "<li data-tree-li='" +data[i].id+ "' class='tree-file'>"+"<span onclick='toggle_tree_file(\""+data[i].id+"\")'>" + icon + title + caret + "</span>"+"</li>";
86-
87-
if(data[i].folder === true){
88-
icon = "<i class='fa fa-folder'></i>";
89-
to_push = "<li data-tree-li='"+data[i].id+"' class='tree-folder'><span onclick='toggle_tree_folder(\""+data[i].id+"\")'>" + icon + title + caret + "</span><ul data-tree-ul='"+data[i].id+"' style='display:none'></ul></li>";
90-
}
91-
ret = ret + to_push;
92-
}
109+
ret += tree_insert(data[i]);
93110
}
94111
//sets the html
95-
$("[data-tree-ul='"+id+"']").html(ret);
112+
$("[data-tree-ul='"+id+"']").append(ret);
96113
//opens the folder
97114
$("[data-tree-ul='"+id+"']").slideDown();
98115
//removes the loading icon
99116
$("[data-tree-li='"+id+"']>span>i").removeClass("fa-folder");
100-
$("[data-tree-li='"+id+"']>span>i").removeClass("fa-circle-o-notch");
117+
$("[data-tree-li='"+id+"']>span>i").removeClass("fa-circle-o-notch");
101118
$("[data-tree-li='"+id+"']>span>i").removeClass("fa-spin");
102-
$("[data-tree-li='"+id+"']>span>i").addClass("fa-folder-open");
119+
$("[data-tree-li='"+id+"']>span>i").addClass("fa-folder-open");
103120
});
104121
}
105122
//what happens when you click on a folder

0 commit comments

Comments
 (0)