Several improvements to the admin panel

assets/js/blog-edit.js

@@ -15,26 +15,36 @@ const toolbarOptions = [
         ['clean']
 ];
 
-const quill = new Quill('#postContent', {
-    theme: 'snow',
-    bounds: '#postContent .ql-editor',
-    modules: {
-        syntax: true,
-        toolbar: toolbarOptions
-    }
+// const quill = new Quill('#postContent', {
+//     theme: 'snow',
+//     bounds: '#postContent .ql-editor',
+//     modules: {
+//         syntax: true,
+//         toolbar: toolbarOptions
+//     }
+// });
+
+const editor = tinymce.init({
+    selector: '#postContent',
+    plugins: [
+      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
+      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
+      'save table contextmenu directionality emoticons template paste textcolor'
+    ],
+    templates: '/admin/blog/getTemplates',
+    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
 });
 
 let changeUrl = true;
 
-// var edits = ["#title", "#description", "#content"];
 
 // Prevent the backspace key from navigating back.
-// $(document).on("keydown", function (e) {
-//     if (e.which === 8 && !$(e.target||e.srcElement).is("span, [contenteditable=true]")) {
-//         e.preventDefault();
-//         return false;
-//     }
-// });
+$(document).on("keydown", function (e) {
+    if (e.which === 8 && !$(e.target || e.srcElement).is("span, [contenteditable=true], input")) {
+        e.preventDefault();
+        return false;
+    }
+});
 
 // var autolist = new AutoList();
 // var editor = new MediumEditor('#content', {
@@ -101,43 +111,38 @@ function prepareString(input) {
     return input;
 }
 
-/*$('#content').bind('click', function () {
-    $(this).attr('contentEditable', true);
-}).blur(
-    function () {
-        $(this).attr('contentEditable', false);
-    });*/
-
 var shift = false;
 
-$('span').keydown(function (e) {
-    var key = e.keyCode;
-    console.log(key);
+const edits = ["#postTitle", "#postDescription", ".ql-editor"];
+$(edits.toString()).keydown(function (e) {
+    const key = e.key;
 
     // Shift Control
-
-    if (key === 16) {
+    if (key === 'Shift') {
         shift = true;
     }
 
     // Ctrl + Return Control
-    if (key === 13 && (e.ctrlKey || e.metaKey)) {
-        console.log('test');
+    if (key === 'Enter' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
         $(this).attr('contentEditable', false);
     }
 
     // Tab Control
-    if (key === 9) {
+    if (key === 'Tab') {
         e.preventDefault();
         $(this).attr('contentEditable', false);
-        var pos = edits.indexOf("#" + $(this).attr('id'));
-        console.log(pos);
+        let pos = edits.findIndex(edit => edit === '#' + $(this).attr('id') || $(this).hasClass(edit.substr(1)));
         if (shift) {
-            $(edits[pos - 1]).attr('contentEditable', true);
+            pos--;
+            if (pos < 0)
+                pos = edits.length - 1;
         } else {
-            $(edits[pos + 1]).attr('contentEditable', true);
+            pos++;
+            if (pos >= edits.length)
+                pos = 0;
         }
+        $(edits[pos]).attr('contenteditable', true).focus();
     }
 
 
@@ -163,6 +168,37 @@ $('span').keyup(function (e) {
     }
 });
 
+const existingTags = new Bloodhound({
+    // datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+    // queryTokenizer: Bloodhound.tokenizers.whitespace,
+    datumTokenizer: Bloodhound.tokenizers.whitespace,
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    // prefetch: {
+    //     url: '/admin/blog/tagsList',
+        // filter: function (list) {
+        //     return $.map(list, function (cityname) {
+        //         return {name: cityname};
+        //     });
+        // }
+    // }
+    prefetch: {
+        url: '/admin/blog/tagsList',
+        cache: true
+    }
+    // local: ['Hallo Welt', 'Hund', 'Test', 'Geht doch']
+
+});
+existingTags.initialize();
+
+// $('#postTags').typeahead({
+//     hint: true,
+//     highlight: true,
+//     minLength: 1
+// }, {
+//     name: 'existingTags',
+//     source: existingTags,
+// });
+
 let tagsList = [];
 $(function () {
     $.ajax({
@@ -176,12 +212,16 @@ $(function () {
         }
     });
 
-    $('#postTags').tagsinput();
-
+    // $('#postTags').tagsinput();
+    //
     $('#postTags').tagsinput({
+        // itemText: 'display_name',
         typeaheadjs: {
-            name: 'blogposttags',
-            source: substringMatcher(tagsList)
+            source: ['Test', 'Value'],
+            name: 'existingTags',
+            // displayKey: 'display_name',
+            // source: existingTags.ttAdapter()
+            // source: substringMatcher(['Hallo', 'test', 'Hund'])
         }
     });
 
@@ -219,9 +259,9 @@ $(function () {
     });
 });
 
-Number.prototype.pad = function(size) {
+Number.prototype.pad = function (size) {
     let s = String(this);
-    while(s.length < (size || 2)) s = "0" + s;
+    while (s.length < (size || 2)) s = "0" + s;
     return s;
 };
 
@@ -455,16 +495,61 @@ function publishPost() {
     })
 }
 
-$('#blogPostSave').on('click', () => {
+$('#blogPostSave').click(() => {
     $(this).button('loading');
     sendPost();
 });
 
-$('#blogSubmit').on('click', function () {
+$('#blogSubmit').click(() => {
     $(this).button('loading');
     sendPost(publishPost);
 });
 
+$('#blogPreview').click(() => openPreview());
+
+let timeoutPreview;
+$('body').keyup(() => {
+    if (timeoutPreview)
+        clearTimeout(timeoutPreview);
+    timeoutPreview = setTimeout(() => {
+        if (previewWindow)
+            openPreview();
+    }, 1000);
+});
+
+let previewID;
+let previewWindow;
+
+function openPreview() {
+    const data = {
+        postTitle: $('#postTitle').text(),
+        postDesc: $('#postDescription').text(),
+        // postContent: $('.ql-editor').html(),
+        postContent: tinymce.get('postContent').getContent(),
+    };
+
+    if (previewID)
+        data.previewID = previewID;
+
+    $.ajax({
+        url: '/admin/blog/updatePreview',
+        data: data,
+        method: 'POST',
+        success: (data) => {
+            if (data.success) {
+                previewID = data.previewID;
+                console.log(data.session);
+                if (!previewWindow) {
+                    previewWindow = window.open('http://192.168.178.39/admin/blog/preview?id=' + previewID, '_BLANK');
+                } else {
+                    previewWindow.location.reload();
+                    previewWindow.opener.focus();
+                }
+            }
+        }
+    });
+}
+
 // Upload Header Image
 $('.upload-btn').on('change', '.upload-image', function () {
     $('.upload-btn').fadeOut();
@@ -512,9 +597,9 @@ $('.upload-btn').on('change', '.upload-image', function () {
     reader.readAsDataURL(file);
 });
 
-var substringMatcher = function (strs) {
+function substringMatcher(strs) {
     return function findMatches(q, cb) {
-        var matches, substringRegex;
+        let matches, substrRegex;
 
         // an array that will be populated with substring matches
         matches = [];
@@ -522,16 +607,17 @@ var substringMatcher = function (strs) {
         // regex used to determine if a string contains the substring `q`
         substrRegex = new RegExp(q, 'i');
 
+        console.log('ich bin auc hdavbei #.');
+
         // iterate through the pool of strings and for any string that
         // contains the substring `q`, add it to the `matches` array
         $.each(strs, function (i, str) {
             if (substrRegex.test(str)) {
+                console.log(str);
                 matches.push(str);
             }
         });
 
         cb(matches);
     };
-};
-
-
+}