Support import from gist, fix some minor typo and issues

Author: jackycute

public/js/index.js

@@ -504,6 +504,7 @@ var ui = {
         import: {
             dropbox: $(".ui-import-dropbox"),
             googleDrive: $(".ui-import-google-drive"),
+            gist: $(".ui-import-gist"),
             clipboard: $(".ui-import-clipboard")
         },
         beta: {
@@ -1181,6 +1182,10 @@ function buildImportFromGoogleDrive() {
         }
     });
 }
+//import from gist
+ui.toolbar.import.gist.click(function () {
+    //na
+});
 //import from clipboard
 ui.toolbar.import.clipboard.click(function () {
     //na
@@ -1283,6 +1288,7 @@ function applyScrollspyActive(top, headerMap, headers, target, offset) {
     active.closest('li').addClass('active').parent().closest('li').addClass('active').parent().closest('li').addClass('active');
 }
 
+// clipboard modal
 //fix for wrong autofocus
 $('#clipboardModal').on('shown.bs.modal', function () {
     $('#clipboardModal').blur();
@@ -1298,10 +1304,55 @@ $("#clipboardModalConfirm").click(function () {
         $("#clipboardModalContent").html('');
     }
 });
+
+// refresh modal
 $('#refreshModalRefresh').click(function () {
     location.reload(true);
 });
 
+// gist import modal
+$("#gistImportModalClear").click(function () {
+    $("#gistImportModalContent").val('');
+});
+$("#gistImportModalConfirm").click(function () {
+    var gisturl = $("#gistImportModalContent").val();
+    if (!gisturl) return;
+    $('#gistImportModal').modal('hide');
+    $("#gistImportModalContent").val('');
+    if (!isValidURL(gisturl)) {
+        showMessageModal('<i class="fa fa-github"></i> Import from Gist', 'Not a valid URL :(', '', '', false);
+        return;
+    } else {
+        var hostname = url('hostname', gisturl)
+        if (hostname !== 'gist.github.com') {
+            showMessageModal('<i class="fa fa-github"></i> Import from Gist', 'Not a valid Gist URL :(', '', '', false);
+        } else {
+            ui.spinner.show();
+            $.get('https://api.github.com/gists/' + url('-1', gisturl))
+                .success(function (data) {
+                    if (data.files) {
+                        var contents = "";
+                        Object.keys(data.files).forEach(function (key) {
+                            contents += key;
+                            contents += '\n---\n';
+                            contents += data.files[key].content;
+                            contents += '\n\n';
+                        });
+                        replaceAll(contents);
+                    } else {
+                        showMessageModal('<i class="fa fa-github"></i> Import from Gist', 'Unable to fetch gist files :(', '', '', false);
+                    }
+                })
+                .error(function (data) {
+                    showMessageModal('<i class="fa fa-github"></i> Import from Gist', 'Not a valid Gist URL :(', '', JSON.stringify(data), false);
+                })
+                .complete(function () {
+                    ui.spinner.hide();
+                });
+        }
+    }
+});
+
 function parseToEditor(data) {
     var parsed = toMarkdown(data);
     if (parsed)
@@ -1320,9 +1371,9 @@ function replaceAll(data) {
 
 function importFromUrl(url) {
     //console.log(url);
-    if (url == null) return;
+    if (!url) return;
     if (!isValidURL(url)) {
-        showMessageModal('<i class="fa fa-cloud-download"></i> Import from URL', 'Not valid URL :(', '', '', false);
+        showMessageModal('<i class="fa fa-cloud-download"></i> Import from URL', 'Not a valid URL :(', '', '', false);
         return;
     }
     $.ajax({
@@ -1336,7 +1387,7 @@ function importFromUrl(url) {
                 replaceAll(data);
         },
         error: function (data) {
-            showMessageModal('<i class="fa fa-cloud-download"></i> Import from URL', 'Import failed :(', '', data, false);
+            showMessageModal('<i class="fa fa-cloud-download"></i> Import from URL', 'Import failed :(', '', JSON.stringify(data), false);
         },
         complete: function () {
             ui.spinner.hide();

public/views/body.ejs

@@ -36,6 +36,7 @@
         <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:51px;display:none;"></div>
     </div>
 </div>
+<!-- clipboard modal -->
 <div class="modal fade" id="clipboardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
@@ -55,6 +56,7 @@
         </div>
     </div>
 </div>
+<!-- refresh modal -->
 <div class="modal fade" id="refreshModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-sm">
         <div class="modal-content">
@@ -102,7 +104,7 @@
             </div>
             <div class="modal-body" style="color:black;">
                 <h5>Sorry, you've reached the max length this note can be.</h5>
-                <strong>Please reduce the content or divided it to more notes, thank you!</strong>
+                <strong>Please reduce the content or divide it to more notes, thank you!</strong>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>
@@ -121,11 +123,32 @@
             </div>
             <div class="modal-body" style="color:black;">
                 <h5></h5>
-                <a target="_blank"></a>
+                <a target="_blank" style="word-break: break-all;"></a>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
             </div>
         </div>
     </div>
-</div>
+</div>
+<!-- gist import modal -->
+<div class="modal fade" id="gistImportModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="myModalLabel">Import from Gist</h4>
+            </div>
+            <div class="modal-body">
+                <input type="url" class="form-control" placeholder="Paste your gist url here... (like: https://gist.github.com/username/gistid)" id="gistImportModalContent">
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="gistImportModalClear">Clear</button>
+                <button type="button" class="btn btn-primary" id="gistImportModalConfirm">Import</button>
+            </div>
+        </div>
+    </div>
+</div>
+<%- include modal %>

public/views/header.ejs

@@ -48,6 +48,8 @@
                 </li>
                 <li role="presentation"><a role="menuitem" class="ui-import-google-drive" tabindex="-1" href="#" target="_self"><i class="fa fa-cloud-download fa-fw"></i> Google Drive</a>
                 </li>
+                <li role="presentation"><a role="menuitem" class="ui-import-gist" href="#" data-toggle="modal" data-target="#gistImportModal"><i class="fa fa-github fa-fw"></i> Gist</a>
+                </li>
                 <li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> Clipboard</a>
                 </li>
                 <li class="divider"></li>
@@ -131,6 +133,8 @@
                     </li>
                     <li role="presentation"><a role="menuitem" class="ui-import-google-drive" tabindex="-1" href="#" target="_self"><i class="fa fa-cloud-download fa-fw"></i> Google Drive</a>
                     </li>
+                    <li role="presentation"><a role="menuitem" class="ui-import-gist" href="#" data-toggle="modal" data-target="#gistImportModal"><i class="fa fa-github fa-fw"></i> Gist</a>
+                    </li>
                     <li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> Clipboard</a>
                     </li>
                     <li class="divider"></li>