Add draw element and X button

resources/views/generator/generator.css

@@ -66,7 +66,7 @@
     font-size: 20px;
 }
 .itemBox {
-    width: 99%;
+    width: 100%;
     display: block;
     margin: auto;
     margin-left: 0px;

resources/views/generator/generator.js

@@ -28,37 +28,42 @@ $( function() {
         "<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 addCodeButton\"><i class=\"icon-plus3 mr-2\"></i>Code</button>" +
         "<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 addDrawButton\"><i class=\"icon-plus3 mr-2\"></i>Draw</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 addVideoButton\"><i class=\"icon-plus3 mr-2\"></i>Video</button>" +
         "</div>");
 
     });
     $("#mainContainer").on('click', '.addTextAreaButton', function() {
-        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"text\"><hr/><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div><div class=\"itemLabel\">Text</div><textarea class=\"itemBox form-control\"></textarea></li>");
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"text\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;\">Text</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div><textarea class=\"itemBox form-control\"></textarea></li>");
         makeSortable();
     });
 
     $("#mainContainer").on('click', '.addCodeButton', function() {
-        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"code\"><hr/><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div><div class=\"itemLabel\">Code</div><textarea class=\"itemBox form-control\"></textarea></li>");
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"code\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;\">Code</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div><textarea class=\"itemBox form-control\"></textarea></li>");
         makeSortable();
     });
 
     $("#mainContainer").on('click', '.addImageButton', function() {
-        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"image\"><hr/><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 form-control\" style=\"padding-left:1px;\"></input></li>");
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"image\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;\">Image</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div><input type=\"text\" class=\"itemBox form-control\" style=\"padding-left:1px;\"></input></li>");
         makeSortable();
     });
 
     $("#mainContainer").on('click', '.addMarkDownButton', function() {
-        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"markdown\"><hr/><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div><div class=\"itemLabel\">Markdown</div><textarea class=\"itemBox form-control\"></textarea></li>");
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"markdown\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;\">Markdown</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div><textarea class=\"itemBox form-control\"></textarea></li>");
         makeSortable();
     });
 
     $("#mainContainer").on('click', '.addTableButton', function() {
-        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"table\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span><div class=\"ui-icon ui-icon-closethick itemCloseIcon\"></div>" +
-        "<hr/><div class=\"itemLabel\" style=\"margin-bottom: 10px;\">Table</div>" +
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"table\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;margin-bottom: 10px;\">Table</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div>" +
         "<div style=\"font-size: 14px;display: inline;\">" +
-        "<div style=\"display:margin-bottom: 10px;\">Rows: <input type=\"text\" class=\"numberOfRowsTextBox form-control\">" +
-        "Columns: <input type=\"text\" class=\"numberOfColsTextBox form-control\" ></div>" +
+        "<div style=\"display:margin-bottom: 10px;\">Rows: <input type=\"text\" class=\"numberOfRowsTextBox form-control\" style=\"width:100%;\">" +
+        "Columns: <input type=\"text\" class=\"numberOfColsTextBox form-control\" style=\"width:100%;\"></div>" +
         "<button style=\"margin-top: 10px\" class=\"createTableButton btn btn-primary\">Create</button>" +
         "<div class=\"tableDiv\" style=\"margin-top: 10px\"></div>" +
         "</li>");
@@ -66,12 +71,20 @@ $( function() {
     });
 
     $("#mainContainer").on('click', '.addSubtitleButton', function() {
-        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"subtitle\"><hr/><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=\"form-control itemBox\" style=\"padding-left:1px;\"></input></li>");
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"subtitle\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;\">Subtitle</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div><input type=\"text\" class=\"form-control 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\"><hr/><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=\"form-control itemBox\" style=\"padding-left:1px;\"></input></li>");
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"video\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;\">Video</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div><input type=\"text\" class=\"form-control itemBox\" style=\"padding-left:1px;\"></input></li>");
+        makeSortable();
+    });
+
+    $("#mainContainer").on('click', '.addDrawButton', function() {
+        $(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"draw\"><hr/><div style=\"width: 100%;\"><div class=\"itemLabel\" style=\"display:inline;\">Draw</div>" +
+        "<div class=\"list-icons\" style=\"float: right;\"><a class=\"list-icons-item itemCloseIcon\" data-action=\"remove\" style=\"display: contents\"></a></div></div><input type=\"text\" class=\"form-control itemBox\" style=\"padding-left:1px;\" disabled></input></li>");
         makeSortable();
     });
 
@@ -80,7 +93,7 @@ $( function() {
     });
 
     $("#mainContainer").on('click', '.itemCloseIcon', function() {
-        $(this).parent().remove();
+        $(this).parents("li").remove();
     });
 
     $("#mainContainer").on('click', '.createTableButton', function() {
@@ -142,6 +155,9 @@ $( function() {
                     case "video":
                         generatedHtml += setForVideo($(this));
                         break;
+                    case "draw":
+                        generatedHtml += setForDraw($(this));
+                        break;
                     default:
                         generatedHtml += setForMarkdown($(this));
                         break;
@@ -248,13 +264,25 @@ $( function() {
 
     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\">" +
+        return generatedHtmlMarkdown += "<p><br /></p>"+
+        '<table style="width: 100.0%;"><tbody><tr><th>'+
+        "<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>";
+        "</ac:structured-macro>"+
+        '</th></tr></tbody></table>';
+    }
+
+    function setForDraw(elem){
+        var generatedHtmlDraw = "";
+        return generatedHtmlDraw += "<table style=\"width: 100.0%;\">" +
+        "<tbody><tr><th><div class=\"content-wrapper\">" +
+        "<p class=\"auto-cursor-target\" style=\"text-align: center;\">" +
+        "<ac:structured-macro ac:name=\"drawio\" ac:schema-version=\"1\" ac:macro-id=\"31952459-412e-4ade-bc9f-161fea8713b1\">" +
+        "</ac:structured-macro></p></div></th></tr></tbody></table>";
     }
 
     function setForAuthorAndDate()