Added some element items (Subtitle and Vide)

resources/views/generator/generator.js

@@ -15,6 +15,8 @@ $( function() {
         "<button type=\"button\" class=\"btn btn-outline bg-slate-600 text-slate-600 border-slate-600 itemButtons addImageButton\"><i class=\"icon-plus3 mr-2\"></i>Image</button>" +
         "<button type=\"button\" class=\"btn btn-outline bg-slate-600 text-slate-600 border-slate-600 itemButtons addMarkDownButton\"><i class=\"icon-plus3 mr-2\"></i>MarkDown</button>" +
         "<button type=\"button\" class=\"btn btn-outline bg-slate-600 text-slate-600 border-slate-600 itemButtons addTableButton\"><i class=\"icon-plus3 mr-2\"></i>Table</button>" +
+        "<button type=\"button\" class=\"btn btn-outline bg-slate-600 text-slate-600 border-slate-600 itemButtons addSubtitleButton\"><i class=\"icon-plus3 mr-2\"></i>Subtitle</button>" +
+        "<button type=\"button\" class=\"btn btn-outline bg-slate-600 text-slate-600 border-slate-600 itemButtons addVideoButton\"><i class=\"icon-plus3 mr-2\"></i>Video</button>" +
         "</div>");
 
         showOrHideGeneratorButton();
@@ -30,7 +32,7 @@ $( function() {
     });
 
     $("#mainContainer").on('click', '.addImageButton', function() {
-        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"image\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div><div class=\"itemLabel\">Image</div><textarea class=\"itemBox\"></textarea></li>");
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"image\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div><div class=\"itemLabel\">Image</div><input type=\"text\" class=\"itemBox\" style=\"padding-left:1px;\"></input></li>");
         makeSortable();
     });
 
@@ -51,6 +53,16 @@ $( function() {
         makeSortable();
     });
 
+    $("#mainContainer").on('click', '.addSubtitleButton', function() {
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"subtitle\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div><div class=\"itemLabel\">Subtitle</div><input type=\"text\" class=\"itemBox\" style=\"padding-left:1px;\"></input></li>");
+        makeSortable();
+    });
+
+    $("#mainContainer").on('click', '.addVideoButton', function() {
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"video\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div><div class=\"itemLabel\">Video</div><input type=\"text\" class=\"itemBox\" style=\"padding-left:1px;\"></input></li>");
+        makeSortable();
+    });
+
     $("#mainContainer").on('click', '.titleCloseIcon', function() {
         $(this).parents(".titleContainer").remove();
         showOrHideGeneratorButton();
@@ -89,7 +101,6 @@ $( function() {
     function makeSortable()
     {
         $(".sortable").sortable();
-        $(".sortable").disableSelection();
     }
 
     function showOrHideGeneratorButton()
@@ -123,6 +134,12 @@ $( function() {
                     case "table":
                         generatedHtml += setForTable($(this));
                         break;
+                    case "subtitle":
+                        generatedHtml += setForSubtitle($(this));
+                        break;
+                    case "video":
+                        generatedHtml += setForVideo($(this));
+                        break;
                     default:
                         generatedHtml += setForMarkdown($(this));
                         break;
@@ -161,12 +178,11 @@ $( function() {
 
     function setForImage(elem){
         var generatedHtmlImage = "";
-        return generatedHtmlImage += "<p><br /></p><ac:structured-macro ac:name=\"markdown\" ac:schema-version=\"1\" ac:macro-id=\"ceb972e2-285c-4db7-8bc9-7d1206e86ee4\">" +
-        "<ac:parameter ac:name=\"linkifyheaders\">false</ac:parameter>" +
+        return generatedHtmlImage += "<p><br /></p><ac:structured-macro ac:name=\"html\" ac:schema-version=\"1\" ac:macro-id=\"ceb972e2-285c-4db7-8bc9-7d1206e86ee4\">" +
         "<ac:plain-text-body>" +
-        "<![CDATA[\n<img src=\"" +
+        "<![CDATA[\n<center><img src=\"" +
             $(elem).find(".itemBox").val() +
-        "\" width=\"1500\" />\n]]>" +
+        "\" style=\"max-width:1500px;width: 100%;\" /></center>\n]]>" +
         "</ac:plain-text-body>" +
         "</ac:structured-macro>";
     }
@@ -215,6 +231,29 @@ $( function() {
         return generatedHtmlTable;
     }
 
+    function setForSubtitle(elem){
+        var generatedHtmlMarkdown = "";
+        return generatedHtmlMarkdown += "<p><br /></p><ac:structured-macro ac:name=\"markdown\" ac:schema-version=\"1\" ac:macro-id=\"ceb972e2-285c-4db7-8bc9-7d1206e86ee4\">" +
+        "<ac:parameter ac:name=\"linkifyheaders\">false</ac:parameter>" +
+        "<ac:plain-text-body>" +
+        "<![CDATA[###" +
+            $(elem).find(".itemBox").val() +
+        "]]>" +
+        "</ac:plain-text-body>" +
+        "</ac:structured-macro>";
+    }
+
+    function setForVideo(elem){
+        var generatedHtmlMarkdown = "";
+        return generatedHtmlMarkdown += "<p><br /></p><ac:structured-macro ac:name=\"html\" ac:schema-version=\"1\" ac:macro-id=\"31592043-577a-4952-8ff8-aa5bc286fdf1\">" +
+        "<ac:plain-text-body>" +
+        "<![CDATA[<div style=\"max-width: 600px;max-height: 350px;margin: auto;\"><center><video class=\"video-js\" controls style=\"width:100%; height:100%;\"><source src=\"" +
+            $(elem).find(".itemBox").val() +
+        "\" /><link href=\"https://cdn.backoffice.online/videojs/video-js.css\" rel=\"stylesheet\" /><script src=\"https://cdn.backoffice.online/videojs/videojs-ie8.min.js\"></script><script src=\"https://cdn.backoffice.online/videojs/video.js\"></script></center></div><br />]]>" +
+        "</ac:plain-text-body>" +
+        "</ac:structured-macro>";
+    }
+
     function setForAuthorAndDate()
     {
         var generatedHtmlAuthorAndDate = "";
@@ -240,22 +279,17 @@ $( function() {
         alert ("HTML code is on the clipboard, try to paste it!");
     }
 
-    $("#mainContainer").on('keydown', '.itemBox, .titleTextBox', function(e) {
-        if (e.keyCode == 65 && e.ctrlKey) {
-            e.target.select();
-        }
-    });
-
     $("#mainContainer").on('input', '.itemBox', function () {
         this.style.height = 'auto';
-        if($(this).parent().is("th") || $(this).parent().is("td")){
-            this.style.height = ($(this).prop("scrollHeight")-10) + 'px';
-        }else{
-            this.style.height = ($(this).prop("scrollHeight")) + 'px';
+        if($(this).is("textarea")){
+            if($(this).parent().is("th") || $(this).parent().is("td")){
+                this.style.height = ($(this).prop("scrollHeight")-10) + 'px';
+            }else{
+                this.style.height = ($(this).prop("scrollHeight")) + 'px';
+            }
         }
     });
 
     $("#mainContainer").sortable();
-    $("#mainContainer").disableSelection();
 });
 

resources/views/generator/index.blade.php

@@ -66,7 +66,7 @@
 @section('limitless::content')
 
     <div id="mainContainer"></div>
-    <button id="addTitleButton" type="button" class="btn btn-primary"><i class="icon-plus3 mr-2"></i>Title</button>
+    <button id="addTitleButton" type="button" class="btn btn-primary"><i class="icon-plus3 mr-2"></i>Paragraph</button>
     <button id="copyHtmlCodeButton" type="button" class="btn btn-success"><i class="icon-copy mr-2"></i>Copy HTML to Clipboard</button>
     <textarea id="htmlTextBox"></textarea>