get ready for publish

mkaminsky11 · mkaminsky11 · commit dcb93be5a0ae · 2016-01-09T13:22:52.000-05:00
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ This is only the **FRONTEND**. There is also a backend component which is not op
 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!
 
 ### Recent Updates
++ Tree contents loaded asyncronously
 + Modes dynamically loaded, instead of all at once
 + Can now import and export snippets
 + Open tabs now stored automatically and reloaded
@@ -38,9 +39,11 @@ If you want to see the places where all of the _magic_ happens, take a look at `
 + ~~Dynamically load modes~~ **DONE!**
 + Custom-made color picker (WIP)
 + Chat and collaboration using our backend, so that Onedrive users can chat and collaborate as well
-+ Better publishing
++ Better publishing (WIP)
++ ~~Remove Roboto font, use websafe font~~ **KEEP IT, LOADED VIA GOOGLE FONTS**
 
 ### Long-Term Goals
++ Improve user onboarding and visual interface
 + Reduce bloat and increase speed
 
 =====
diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,5 @@
 body, html{
-	font-family: 'Roboto-Thin' !important;
+	font-family: 'Roboto' !important;
 	overflow-x: hidden;
 	overflow-y: hidden;
 	margin: 0;
@@ -56,12 +56,6 @@ body, html{
 	z-index: 2;
 	float: left;
 }
-
-#overlay{
-	height:100%;
-	width:100%;
-	position:absolute;
-}
 #navbar-collapse-01{
 	padding-left:0;
 }
@@ -495,6 +489,7 @@ body, html{
 	position: relative;
 	margin-left: 14px;
 	height: 20px;
+	z-index: 2;
 }
 .tab-tab h6{
 	margin: 0;
@@ -550,15 +545,61 @@ body, html{
 	-webkit-overflow-scrolling: touch;
 	overflow: visible;
 }
-#overlay{
-	background-color: #ECF0F1;
-	z-index: 1;
+#overlay, #loading-overlay{
+	background-color: #2F2E2E;
+	z-index: 8;
+	height:100%;
+	width:100%;
+	position:absolute;
+}
+#overlay h3{
+  text-align: center;
+  color: #DADEDF;
 }
 #overlay h4{
 	text-align: center;
-	text-transform: uppercase;
 	margin-top: 14px;
 	color: #DADEDF;
+	font-weight: 300;
+}
+#overlay > div{
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+}
+#overlay > div > div{
+  flex: 1;
+  text-align: center;
+  color: #DADEDF;
+}
+#overlay > div > div > i{
+    padding: 10px;
+    background-color: #131313;
+    border-radius: 5px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+#loading-overlay > div{
+	width: 100%;
+    height: 100%;
+    display: flex;
+	display: -webkit-flex;
+	display: -moz-flex;
+    justify-content: center;
+    align-items: center;
+}
+#loading-overlay > div > div{
+	width: 90%;
+    height: 10px;
+    background-color: #131313;
+    border-radius: 5px;
+}
+#loading-overlay > div > div > span{
+	height: 10px;
+    width: 20%;
+    background-color: #FF8F00;
+    position: absolute;
+    border-radius: 5px;
 }
 .codemirror-container{
 	z-index: 2;
@@ -619,7 +660,8 @@ body, html{
   	padding: 0px;
   	background-color: transparent;
   	text-align: center;
-  	font-family: 'Roboto-Thin';
+  	font-family: 'Roboto';
+	font-weight: 300;
   	z-index: 11;
   	font-size: 17px;
   	float: right;
@@ -669,7 +711,8 @@ body, html{
 
 .option-div h4{
 	margin: 0;
-	font-family: 'Roboto-Thin';
+	font-family: 'Roboto';
+	font-weight: 300;
 	color: #9E9E9E;
 	float: left;
 }
@@ -851,7 +894,8 @@ FILE BROWSING TREE
 }
 .tree li{
 	color: #C8CDCF;
-	font-family: 'Roboto-Thin';
+	font-family: 'Roboto';
+	font-weight: 300;
 	font-weight: 600;
 	font-size: 11px;
 	margin-top: 5px;
@@ -1145,9 +1189,10 @@ LOADING ICON
 	position: absolute;
 	z-index: 90;
 	background-color: white;
-	border-radius: 2px;
+	border-radius: 1px;
 	right: 5px;
 	top: 35px;
+	border: solid 1px #E6E6E6;
 }
 .popup>span{
 	display: block;
diff --git a/index.html b/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		
+		<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
+		<link rel="stylesheet" href="css/style.css">
 	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 	    <meta charset="utf-8">
 	    <script>
@@ -27,16 +28,13 @@
 		<script src="lib/slider/files/slider.js"></script>
 		<!--link rel="stylesheet" href="lib/messenger/css/messenger.css"-->
 		<!--link rel="stylesheet" href="lib/messenger/css/messenger-theme-air.css"-->
-		<link rel="stylesheet" href="fonts/font.css">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
-		<link rel="stylesheet" href="css/style.css">
 		<link rel="stylesheet" href="css/material.css">
 		<link href='https://cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css' rel='stylesheet'>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
 
 	</head>
 	<body>
-		<link rel="stylesheet" href="fonts/font.css">
 		<img id="paper-loading-spinner" style="display:none" src="images/svg/spinner.svg" height="40px" width="40px"/>
 		
 		<div id="side" style="/*display:none*/">
@@ -182,9 +180,9 @@
 	<div style="width:100%;height:calc(100% - 15px);position:fixed;z-index: 0;" class="move">
 		<div class="tab-wrapper">
 			<div class="tab-container">
-				<span class="tab-tab tab-active" data-fileid="welcome" onclick="manager.openTab('welcome')">
+				<span class="tab-tab tab-active" data-fileid="welcome">
 					<i class="fa fa-align-left"></i>
-					<h4>Welcome</h4>
+					<h4 onclick="manager.openTab('welcome')">Welcome</h4>
 					<h6>
 						<i class="zmdi zmdi-close" onclick="manager.removeTab('welcome')"></i>
 					</h6>
@@ -330,10 +328,30 @@ <h6>
 				<span id="insert-point" style="display:none"></span>
 			</div>
 			
-			<div id="overlay">
-				<h4>NO FILE</h4>
-				<h4><i class="fa fa-question"></i></h4>
-				<h4>SELECTED</h4>
+			<div id="loading-overlay">
+				<div>
+					<div>
+						<span style="width: 5%" id="loading-bar"></span>
+					</div>
+				</div>
+			</div>
+			
+			<div id="overlay" style="display:none">
+				<h3>Let's Get Started</h3>
+				<div>
+					<div>
+						<i class="zmdi zmdi-folder" onclick="picker.open()"></i>
+						<h4>Open a file</h4>
+					</div>
+					<div>
+						<i class="zmdi zmdi-upload" onclick="picker.upload()"></i>
+						<h4>Upload</h4>
+					</div>
+					<div>
+						<i class="zmdi zmdi-plus" onclick="new_file()"></i>
+						<h4>New file</h4>
+					</div>
+				</div>
 			</div>
 		</div>
 		</div>
diff --git a/js/context.js b/js/context.js
@@ -105,7 +105,7 @@ context.contextListener = function() {
       //now, check if need to open
       var tab_tab = context.clickInsideElement(e, "tab-tab");
       if(tab_tab){
-        manager.openTab($(tab_tab).attr("data-fileid"));
+        //manager.openTab($(tab_tab).attr("data-fileid"));
       }
     }
   });
diff --git a/js/drive.js b/js/drive.js
@@ -13,6 +13,7 @@ drive.load = function(){
   gapi.client.setApiKey(developerKey);
   window.setTimeout(function(){
   	gapi.auth.authorize({'client_id': drive.client_id, 'scope': drive.scopes.join(' '), 'immediate': true}, function(authResult){
+		$("#loading-bar").css("width","60%");
   		drive.loaded = true;
   		console.log(authResult);
   		
@@ -48,6 +49,7 @@ drive.checkAppLogin = function(callback){
 
 drive.loadClient = function() {
 	gapi.client.load('drive', 'v2', function(){
+		$("#loading-bar").css("width","70%");
 		//this need to be refreshed every 55 minutes
 		setInterval(function(){
 			drive.refresh();
@@ -77,6 +79,7 @@ drive.refresh = function() {
 drive.getInfo = function(){
     var request = gapi.client.drive.about.get();
     request.execute(function(resp) {
+		$("#loading-bar").css("width","90%");
         drive.root = resp.rootFolderId;
         try{
         	drive.email = resp.user.emailAddress;
@@ -110,6 +113,7 @@ drive.getInfo = function(){
         catch(e){}
         $(".root-tree").attr("data-tree-ul", drive.root);
         get_tree(drive.root);
+		$("#loading-overlay").css("display","none");
     });
 }
 
diff --git a/js/editor.js b/js/editor.js
@@ -98,6 +98,8 @@ manager.removeTab = function(id){
 }
 manager.reallyRemove = function(id){
 	hide_loading_spinner();	//nothing should be loading anymore
+	console.log("here1");
+	$("#overlay").css("display","block");
 	//remove the tab div with style!
 	$(".tab-tab[data-fileid='"+id+"']").velocity("transition.slideUpOut",{
 		duration: 400,
@@ -124,6 +126,7 @@ manager.reallyRemove = function(id){
 }
 
 manager.openTab = function(id){
+	$("#overlay").css("display","none");
 	//remove .active from the current .active tab
 	$(".tab-active").removeClass("tab-active");
 	$(".tab-tab[data-fileid='"+id+"']").addClass("tab-active");
diff --git a/js/frontend.js b/js/frontend.js
@@ -82,6 +82,40 @@ connect.settings.getSettings = function(callback){
 	});
 };
 
+connect.publish = function(content, mode, fileId){
+	if(mode === "text/x-markdown" || mode === "gfm"){
+		content = converter.makeHtml(content);
+	}
+	
+	var userId = null;
+	fileId = fileId.replace(/-/g, '');
+	
+	if(cloud_use === "drive"){
+		userId = drive.id;
+	}
+	else if(cloud_use === "sky"){
+		userId = sky.id;
+	}
+	
+	var info = {
+		mode: mode,
+		content: content,
+		fileId: fileId,
+		userId: userId
+	};
+	
+	$.ajax("https://codeyourcloud.com/publish",{
+		method: "POST",
+		data: info,
+		success: function(data, textStatus, jqXHR){
+			
+		},
+		error: function(jqXHR, textStatus, errorThrown){
+			throw errorThrown;
+		}	
+	});
+}
+
 
 var connection = new WebSocket('wss://codeyourcloud.com:8080');
 connection.onopen = function () {
diff --git a/js/ready.js b/js/ready.js
@@ -5,6 +5,7 @@
 //=============
 //INITIALIZE WELCOME EDITOR
 //============
+
 var e = CodeMirror(document.getElementById("welcome"),{
 	lineNumbers: settings.state.lineNumbers,
 	mode: "text",
@@ -20,6 +21,7 @@ var e = CodeMirror(document.getElementById("welcome"),{
 //sets the introduction text
 e.setValue(introText);
 addEditor(e, "welcome", true);
+
 current_file = "welcome";
 editor().on("beforeSelectionChange", function(cm, selection){});
 editor().setOption("autoCloseBrackets",true); //TODO: make this optional
diff --git a/js/realtime.js b/js/realtime.js
@@ -21,6 +21,7 @@ function init(){
 		_init = true;
 		//decide wether to load sky or drive
 		drive.checkAppLogin(function(_logged_in){
+			$("#loading-bar").css("width","10%");
 			if(_logged_in === false){
 				console.log("redirect for no app login");
 				if(window.location.href.indexOf("no=true") === -1){
@@ -33,6 +34,7 @@ function init(){
 					if(sky.logged_in === true){
 						//ok...load sky, I guess
 						cloud_use = "sky";
+						$("#loading-bar").css("width","30%");
 					}
 					else{
 						console.log("redirect for skydrive");
@@ -45,6 +47,7 @@ function init(){
 					//indication of drive
 					if(drive.logged_in === true){
 						//all good!
+						$("#loading-bar").css("width","30%");
 					}
 					else{
 						console.log("redirect for drive");
@@ -57,12 +60,15 @@ function init(){
 					//no indication
 					if(drive.logged_in === true && sky.logged_in === false){
 						//all good!
+						$("#loading-bar").css("width","30%");
 					}
 					else if(drive.logged_in === false && sky.logged_in === true){
 						cloud_use = "sky";
+						$("#loading-bar").css("width","30%");
 					}
 					else if(drive.logged_in === true && sky.logged_in === true){
 						//all good! -> prioritize drive
+						$("#loading-bar").css("width","30%");
 					}
 					else{
 						console.log("redirect for none");
diff --git a/js/sky.js b/js/sky.js
diff --git a/js/tabs.js b/js/tabs.js

Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ context.contextListener = function() {`
`105`	`105`	`//now, check if need to open`
`106`	`106`	`var tab_tab = context.clickInsideElement(e, "tab-tab");`
`107`	`107`	`if(tab_tab){`
`108`		`- manager.openTab($(tab_tab).attr("data-fileid"));`
	`108`	`+ //manager.openTab($(tab_tab).attr("data-fileid"));`
`109`	`109`	`}`
`110`	`110`	`}`
`111`	`111`	`});`