Skip to content

Commit 7bc0e0f

Browse files
mkaminsky11mkaminsky11
committed
import and export snippets, update README
1 parent 29fee79 commit 7bc0e0f

File tree

11 files changed

+120
-54
lines changed

11 files changed

+120
-54
lines changed

‎README.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@ The goal of this project is to allow people around the globe to collaborate on c
1010
### Installation Notes
1111
This is only the **FRONTEND**. There is also a backend component which is not open-source (yet), which is used for some things like preferences and authentication. The goal of publishing this is to show others how to successfully interact with the Google Drive and OneDrive APIs.
1212

13-
If you simply `git clone` this and open `index.html`, **it will not work**. With some simple modifications, though, such as replacing the API keys with your own, you should be able to get it functional. This is mainly intended as a teaching tool.
14-
1513
### The Good Parts
1614
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!
1715

1816
### Recent Updates
17+
+ Can now import and export snippets
1918
+ Open tabs now stored automatically and reloaded
2019
+ Added ability to copy snippets to clipboard
2120
+ Added a snippet manager (located in sidebar) which replaces the Javascript REPL
@@ -31,10 +30,10 @@ If you want to see the places where all of the _magic_ happens, take a look at `
3130
+ Context menu in sidebar
3231
+ Minimize and beautify
3332
+ ~~Warning when closing without saving changes~~ **DONE!**
34-
+ ~~Snippets (coming soon)~~ **DONE**
33+
+ ~~Snippets (coming soon)~~ **DONE!**
3534
+ Fix running Javascript + Coffeescript
36-
+ Import and export snippets (WIP)
37-
+ ~~Store open tabs and reload on open~~ **DONE**
35+
+ ~~Import and export snippets~~ **DONE!**
36+
+ ~~Store open tabs and reload on open~~ **DONE!**
3837
+ Custom-made color picker (WIP)
3938
+ Chat and collaboration using our backend, so that Onedrive users can chat and collaborate as well
4039
+ Better publishing

‎css/style.css‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,15 @@ body, html{
3939
}
4040
.codemirror-image{
4141
width: 100%;
42-
height: 100%;
43-
top: 0;
44-
left: 0;
45-
position: absolute;
42+
height: 100%;
43+
top: 0;
44+
left: 0;
45+
position: absolute;
46+
z-index: 6;
47+
background-repeat: no-repeat;
48+
background-size: contain;
49+
background-position: center;
50+
background-color: #131313;
4651
}
4752
#codemirror-sizer{
4853
position: relative;
@@ -274,6 +279,10 @@ body, html{
274279
bottom: 0;
275280
left: 0;
276281
}
282+
#snippet-popup{
283+
top: calc(100% - 156px);
284+
right: 14px;
285+
}
277286
.snippet-item{
278287
position: relative;
279288
margin-bottom: 10px;
@@ -672,6 +681,7 @@ body, html{
672681
width: 44px !important;
673682
height: 44px !important;
674683
}
684+
675685
#chat-popup{
676686
position: fixed;
677687
width: 350px;

‎index.html‎

Lines changed: 53 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,19 @@
4646
<div id="nav_snippet" onclick="nav.nav('snippet')">
4747
<i class="fa fa-code"></i>
4848
<span style="
49-
position: absolute;
50-
left: 18px;
51-
font-family: &quot;Roboto&quot;;
52-
font-size: 11px;
53-
background-color: #B72727;
54-
padding: 3px;
55-
border-radius: 4px;
56-
color: white;
57-
font-weight: 400;
58-
padding-bottom: 1px;
59-
padding-top: 1px;
60-
top: 2px;
61-
">new</span>
49+
position: absolute;
50+
left: 18px;
51+
font-family: &quot;Roboto&quot;;
52+
font-size: 11px;
53+
background-color: #B72727;
54+
padding: 3px;
55+
border-radius: 4px;
56+
color: white;
57+
font-weight: 400;
58+
padding-bottom: 1px;
59+
padding-top: 1px;
60+
top: 2px;
61+
">new</span>
6262
</div>
6363
</div>
6464

@@ -77,21 +77,49 @@
7777
z-index: 2;
7878
" onclick="snippets.add()"></i>
7979

80+
<i class="nav-snippet zmdi zmdi-settings" style="
81+
position: absolute;
82+
color: white;
83+
padding: 10px;
84+
padding: 6px 7px 6px;
85+
border-radius: 50%;
86+
background-color: #F57C00;
87+
bottom: 38px;
88+
right: 9px;
89+
display: none;
90+
z-index: 4;
91+
font-size: 12px;
92+
" onclick="$('#snippet-popup').toggle()"></i>
93+
8094
<div class="nav-snippet snippet-main" style="display:none">
8195
<pre style="
82-
text-align: center;
83-
font-family: &quot;Roboto&quot;;
84-
color: #ABABAB;
85-
font-size: 15px;
86-
overflow-wrap: break-word;
87-
width: 100%;
88-
margin-top: 20px;
89-
margin-bottom: 0px;
90-
">Click <i class="zmdi zmdi-plus" style="
91-
color: #eee;
92-
"></i> To Create A New Snippet</pre>
96+
text-align: center;
97+
font-family: &quot;Roboto&quot;;
98+
color: #ABABAB;
99+
font-size: 15px;
100+
overflow-wrap: break-word;
101+
width: 100%;
102+
margin-top: 20px;
103+
margin-bottom: 0px;
104+
">Click <i class="zmdi zmdi-plus" style="
105+
color: #eee;
106+
"></i> To Create A New Snippet</pre>
93107
</div>
94108

109+
<div style="display:none" id="snippet-popup" class="popup">
110+
<input type="file" id="snippet-file" style="
111+
position: absolute;
112+
opacity: 0;
113+
width: 100%;
114+
height: 44px;" onchange="snippets.import()">
115+
<span onclick=""><i class="zmdi zmdi-upload"></i> Import Snippets</span>
116+
<span>
117+
<a href="https://codeyourcloud.com/snippets/download" style="text-decoration: none;">
118+
<i class="zmdi zmdi-download"></i> Export Snippets
119+
</a>
120+
</span>
121+
</div>
122+
95123
<i class="nav-preview zmdi zmdi-refresh" style="
96124
position: absolute;
97125
color: white;
@@ -115,7 +143,7 @@
115143
padding-left: 10px;
116144
border-radius: 50%;
117145
background-color: #F57C00;
118-
bottom: 34px;
146+
bottom: 38px;
119147
right: 9px;
120148
display: none;
121149
z-index: 4;

‎js/drive.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ drive.loadClient = function() {
5959
if(url.indexOf("%22action%22:%22open") !== -1){
6060
//need to open a file
6161
var query_id = query.split("%22")[3];
62-
addTab("loading...",query_id,false);
62+
addTab(query_id,false);
6363

6464
}
6565
else if(url.indexOf("%22action%22:%22create%22") !== -1){
@@ -229,7 +229,7 @@ function fileInserted(d) {
229229
}
230230

231231
//great, now add the tab
232-
addTab("loading...",d.id,false);
232+
addTab(d.id,false);
233233

234234
if(insert_folder_dest === drive.root){
235235
get_tree(drive.root);
@@ -329,7 +329,7 @@ function saveas_inserted(inserted_file) {
329329
removeFileFromFolder(inserted_file.parents[0].id,inserted_file.id);
330330
}
331331

332-
addTab("loading...",inserted_file.id,false);
332+
addTab(inserted_file.id,false);
333333
}
334334

335335
drive.updateFile = function(fileId, fileMetadata, fileData, callback) { //is the callback necessary?

‎js/editor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ settings.init = function(){
417417
settings.state = prefs;
418418
for(var i = 0; i < settings.state.tabs.length; i++){
419419
if(manager.isOpen(settings.state.tabs[i]) === false){
420-
addTab("loading...", settings.state.tabs[i], false);
420+
addTab(settings.state.tabs[i], false);
421421
}
422422
}
423423
});

‎js/images.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ images.init = function(id){
77
drive.getFile(id, function(resp){
88
//https://doc-0o-34-docs.googleusercontent.com/docs/securesc/5bfhdfjhb08jjkevjs6gmvs27afnj8mn/5uus0edh2velrig75kjpkdj6ltg7kmum/1429380000000/09572991516856320887/09572991516856320887/0ByWSHHBN-zyoeE1lX29JSzBFdFE
99
//?e=download&gd=true
10-
$(".codemirror-container[data-fileid=\""+id+"\"]").append("<div class='codemirror-image'><img src='"+ images.getImageUrl(resp.downloadUrl) +"'></div>");
10+
$(".codemirror-container[data-fileid=\""+id+"\"]").append("<div class='codemirror-image'></div>");
11+
$(".codemirror-container[data-fileid=\""+id+"\"] .codemirror-image").css("background-image","url(\""+images.getImageUrl(resp.downloadUrl)+"\")");
1112
});
1213
}
1314

‎js/picker.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ picker.open = function(){
2121
}
2222

2323
if(selected !== null){
24-
addTab("loading...",selected,false);
24+
addTab(selected,false);
2525
}
2626
},
2727
function (responseFailed) {
@@ -43,7 +43,7 @@ picker.openCallback = function(data) {
4343
if (data.action === google.picker.Action.PICKED) {
4444
for(i = 0; i < data.docs.length; i++){
4545
var fileId = data.docs[i].id;
46-
addTab("loading...",fileId,false);
46+
addTab(fileId,false);
4747
}
4848
}
4949
picker.purge();
@@ -69,7 +69,7 @@ picker.createUpload = function(){
6969
picker.uploadCallback = function(data){
7070
if (data.action === google.picker.Action.PICKED || data.action === "picked") {
7171
var fileId = data.docs[0].id;
72-
addTab("loading...",fileId,false);
72+
addTab(fileId,false);
7373
}
7474
picker.purge();
7575
return false;

‎js/sky.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ sky.upload = function(){
172172
}).then(
173173
function(r){
174174
get_tree(sky.root);
175-
addTab("loading...",r.id,false);
175+
addTab(r.id,false);
176176
},
177177
function(err){}
178178
);
@@ -189,7 +189,7 @@ sky.insertNewFile = function(upload_location, file_name, body){
189189
xhr.open('PUT', url);
190190
xhr.onload = function () {
191191
get_tree(sky.root);
192-
addTab("loading...", JSON.parse(xhr.response).id, false);
192+
addTab(JSON.parse(xhr.response).id, false);
193193
};
194194
xhr.onerror = function (error) {
195195
};
@@ -212,7 +212,7 @@ sky.saveAs = function(){
212212
xhr.open('PUT', url);
213213
xhr.onload = function () {
214214
get_tree(sky.root);
215-
addTab("loading...", JSON.parse(xhr.response).id, false);
215+
addTab(JSON.parse(xhr.response).id, false);
216216
};
217217
xhr.onerror = function (error) {
218218
};

‎js/snippets.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,38 @@ snippets.add = function(){
3636
});
3737
};
3838

39+
snippets.addCustom = function(snippet){
40+
var to_push = {
41+
title: snippet.title,
42+
language: snippet.language,
43+
content: snippet.content
44+
};
45+
connect.snippets.addSnippets(to_push, function(data){
46+
if(data.err === false){
47+
//all good
48+
snippets.insert(data.data);
49+
}
50+
});
51+
};
52+
53+
snippets.import = function(){
54+
var input = document.getElementById("snippet-file");
55+
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+
}
67+
}
68+
fr.readAsText(file);
69+
}
70+
3971
snippets.insert = function(snippet){
4072
document.querySelector(".snippet-main>pre").style.display = "none";
4173
var elem = document.createElement("div");

‎js/tabs.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,14 +105,11 @@ function sendData(data, fileid){
105105
document.getElementById("iframe-" + fileid).contentWindow.postMessage(JSON.stringify(data), "*");
106106
}
107107

108-
function addTab(title, id, welcome){
109-
if(title === "loading..."){
110-
show_loading_spinner();
111-
}
108+
function addTab(id, welcome){
109+
show_loading_spinner();
112110
//check to see if it already exists
113111
//don't want to make a copy
114112
var found = manager.isOpen(id);
115-
116113
if(found){
117114
manager.openTab(id);
118115
}
@@ -123,15 +120,15 @@ function addTab(title, id, welcome){
123120
settings.change();
124121
}
125122

126-
var base = "<span class='tab-tab' data-fileid='"+id+"'>" + tree.getIconByTitle(title) + "<h4>" + title + "</h4>";
123+
var base = "<span class='tab-tab' data-fileid='"+id+"'><i class=\"fa fa-align-left\"></i><h4>loading...</h4>";
127124
base = base + "<h6><span class='context-click' data-fileid='"+id+"'><i class='zmdi zmdi-caret-down'></i></span><i class='zmdi zmdi-close' onclick='manager.removeTab(\""+id+"\")'></i></h6><span>";
128125
$(".tab-container").html($(".tab-container").html() + base);
129126
var codemirror = "<div class='codemirror-container' id='"+id+"' data-fileid='"+id+"' style='display:none'><iframe src='https://codeyourcloud.com/js/logic/logic.html?id="+id+"' style='display:none' id='iframe-"+id+"'></iframe></div>";
130127
if(cloud_use === "sky"){
131128
codemirror = "<div class='codemirror-container' id='"+id+"' data-fileid='"+id+"' style='display:none'></div>";
132129
}
133130
$("#insert-point").after(codemirror);
134-
$(".tab-tab[data-fileid='"+id+"']").attr("data-icon", tree.getClassFromIcon(tree.getIconByTitle(title)));
131+
$(".tab-tab[data-fileid='"+id+"']").attr("data-icon", tree.getClassFromIcon('<i class="fa fa-align-left"></i>'));
135132

136133
var chat = "<div class='chats-content' data-fileid='"+id+"' style='display:none'></div>";
137134
var _chat = "<div class='chats-people' data-fileid='"+id+"' style='display:none'></div>";
@@ -193,7 +190,6 @@ function addTab(title, id, welcome){
193190
});
194191
}
195192
}
196-
197193
}
198194

199195
//adjust based on the file

0 commit comments

Comments
 (0)