Skip to content

2
2020-01-30 itmax-68
Commit e50760c2 authored by Mark Siy's avatar Mark Siy
Browse files
Options

Add draw element and X button

parent 6876b4b9
Show whitespace changes
Inline Side-by-side
Showing with 42 additions and 14 deletions
resources/views/generator/generator.css
View file @ e50760c2
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
font-size: 20px; font-size: 20px;
} }
.itemBox { .itemBox {
width: 99%; width: 100%;
display: block; display: block;
margin: auto; margin: auto;
margin-left: 0px; margin-left: 0px;
......
resources/views/generator/generator.js
View file @ e50760c2
...@@ -28,37 +28,42 @@ $( function() { ...@@ -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 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 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 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 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>" + "<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>"); "</div>");
}); });
$("#mainContainer").on('click', '.addTextAreaButton', function() { $("#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(); makeSortable();
}); });
$("#mainContainer").on('click', '.addCodeButton', function() { $("#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(); makeSortable();
}); });
$("#mainContainer").on('click', '.addImageButton', function() { $("#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(); makeSortable();
}); });
$("#mainContainer").on('click', '.addMarkDownButton', function() { $("#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(); makeSortable();
}); });
$("#mainContainer").on('click', '.addTableButton', function() { $("#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>" + $(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>" +
"<hr/><div class=\"itemLabel\" style=\"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=\"font-size: 14px;display: inline;\">" +
"<div style=\"display:margin-bottom: 10px;\">Rows: <input type=\"text\" class=\"numberOfRowsTextBox form-control\">" + "<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\" ></div>" + "Columns: <input type=\"text\" class=\"numberOfColsTextBox form-control\" style=\"width:100%;\"></div>" +
"<button style=\"margin-top: 10px\" class=\"createTableButton btn btn-primary\">Create</button>" + "<button style=\"margin-top: 10px\" class=\"createTableButton btn btn-primary\">Create</button>" +
"<div class=\"tableDiv\" style=\"margin-top: 10px\"></div>" + "<div class=\"tableDiv\" style=\"margin-top: 10px\"></div>" +
"</li>"); "</li>");
...@@ -66,12 +71,20 @@ $( function() { ...@@ -66,12 +71,20 @@ $( function() {
}); });
$("#mainContainer").on('click', '.addSubtitleButton', 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(); makeSortable();
}); });
$("#mainContainer").on('click', '.addVideoButton', function() { $("#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(); makeSortable();
}); });
...@@ -80,7 +93,7 @@ $( function() { ...@@ -80,7 +93,7 @@ $( function() {
}); });
$("#mainContainer").on('click', '.itemCloseIcon', function() { $("#mainContainer").on('click', '.itemCloseIcon', function() {
$(this).parent().remove(); $(this).parents("li").remove();
}); });
$("#mainContainer").on('click', '.createTableButton', function() { $("#mainContainer").on('click', '.createTableButton', function() {
...@@ -142,6 +155,9 @@ $( function() { ...@@ -142,6 +155,9 @@ $( function() {
case "video": case "video":
generatedHtml += setForVideo($(this)); generatedHtml += setForVideo($(this));
break; break;
case "draw":
generatedHtml += setForDraw($(this));
break;
default: default:
generatedHtml += setForMarkdown($(this)); generatedHtml += setForMarkdown($(this));
break; break;
...@@ -248,13 +264,25 @@ $( function() { ...@@ -248,13 +264,25 @@ $( function() {
function setForVideo(elem){ function setForVideo(elem){
var generatedHtmlMarkdown = ""; 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>" + "<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=\"" + "<![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() + $(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 />]]>" + "\" /><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: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() function setForAuthorAndDate()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment