Skip to content

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

Added some element items (Subtitle and Vide)

parent 7e545dcb
Show whitespace changes
Inline Side-by-side
Showing with 52 additions and 18 deletions
resources/views/generator/generator.js
View file @ 6901de1e
...@@ -15,6 +15,8 @@ $( function() { ...@@ -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 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 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 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>"); "</div>");
showOrHideGeneratorButton(); showOrHideGeneratorButton();
...@@ -30,7 +32,7 @@ $( function() { ...@@ -30,7 +32,7 @@ $( function() {
}); });
$("#mainContainer").on('click', '.addImageButton', 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(); makeSortable();
}); });
...@@ -51,6 +53,16 @@ $( function() { ...@@ -51,6 +53,16 @@ $( function() {
makeSortable(); 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() { $("#mainContainer").on('click', '.titleCloseIcon', function() {
$(this).parents(".titleContainer").remove(); $(this).parents(".titleContainer").remove();
showOrHideGeneratorButton(); showOrHideGeneratorButton();
...@@ -89,7 +101,6 @@ $( function() { ...@@ -89,7 +101,6 @@ $( function() {
function makeSortable() function makeSortable()
{ {
$(".sortable").sortable(); $(".sortable").sortable();
$(".sortable").disableSelection();
} }
function showOrHideGeneratorButton() function showOrHideGeneratorButton()
...@@ -123,6 +134,12 @@ $( function() { ...@@ -123,6 +134,12 @@ $( function() {
case "table": case "table":
generatedHtml += setForTable($(this)); generatedHtml += setForTable($(this));
break; break;
case "subtitle":
generatedHtml += setForSubtitle($(this));
break;
case "video":
generatedHtml += setForVideo($(this));
break;
default: default:
generatedHtml += setForMarkdown($(this)); generatedHtml += setForMarkdown($(this));
break; break;
...@@ -161,12 +178,11 @@ $( function() { ...@@ -161,12 +178,11 @@ $( function() {
function setForImage(elem){ function setForImage(elem){
var generatedHtmlImage = ""; 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\">" + return generatedHtmlImage += "<p><br /></p><ac:structured-macro ac:name=\"html\" ac:schema-version=\"1\" ac:macro-id=\"ceb972e2-285c-4db7-8bc9-7d1206e86ee4\">" +
"<ac:parameter ac:name=\"linkifyheaders\">false</ac:parameter>" +
"<ac:plain-text-body>" + "<ac:plain-text-body>" +
"<![CDATA[\n<img src=\"" + "<![CDATA[\n<center><img src=\"" +
$(elem).find(".itemBox").val() + $(elem).find(".itemBox").val() +
"\" width=\"1500\" />\n]]>" + "\" style=\"max-width:1500px;width: 100%;\" /></center>\n]]>" +
"</ac:plain-text-body>" + "</ac:plain-text-body>" +
"</ac:structured-macro>"; "</ac:structured-macro>";
} }
...@@ -215,6 +231,29 @@ $( function() { ...@@ -215,6 +231,29 @@ $( function() {
return generatedHtmlTable; 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() function setForAuthorAndDate()
{ {
var generatedHtmlAuthorAndDate = ""; var generatedHtmlAuthorAndDate = "";
...@@ -240,22 +279,17 @@ $( function() { ...@@ -240,22 +279,17 @@ $( function() {
alert ("HTML code is on the clipboard, try to paste it!"); 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 () { $("#mainContainer").on('input', '.itemBox', function () {
this.style.height = 'auto'; this.style.height = 'auto';
if($(this).is("textarea")){
if($(this).parent().is("th") || $(this).parent().is("td")){ if($(this).parent().is("th") || $(this).parent().is("td")){
this.style.height = ($(this).prop("scrollHeight")-10) + 'px'; this.style.height = ($(this).prop("scrollHeight")-10) + 'px';
}else{ }else{
this.style.height = ($(this).prop("scrollHeight")) + 'px'; this.style.height = ($(this).prop("scrollHeight")) + 'px';
} }
}
}); });
$("#mainContainer").sortable(); $("#mainContainer").sortable();
$("#mainContainer").disableSelection();
}); });
resources/views/generator/index.blade.php
View file @ 6901de1e
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
@section('limitless::content') @section('limitless::content')
<div id="mainContainer"></div> <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> <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> <textarea id="htmlTextBox"></textarea>
......
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