Skip to content

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

Fix

parent 6901de1e
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 127 deletions
resources/views/generator/generator.css
View file @ 09c70812
......@@ -47,14 +47,12 @@
padding: 0;
margin-top: 20px;
}
.sortable li { margin: 0 3px 10px 3px; padding: 0.4em; padding-left: 1.5em; padding-right: 1.5em; font-size: 20px; padding-bottom: 20px; }
.sortable li { padding-left: 1.5em; padding-right: 1.5em; }
.sortable li span { position: absolute; margin-left: -1.3em; }
#addTitleButton {
width: 100%;
}
#copyHtmlCodeButton {
display:none;
margin-top:20px;
margin-bottom:30px;
width: 100%;
}
......@@ -84,9 +82,6 @@
display: block;
margin-left: 100.8%;
}
#htmlTextBox{
display: none;
}
.itemButtons {
margin-right: 4px;
margin-bottom: 4px;
......@@ -94,4 +89,11 @@
.itemLabel {
font-size: 18px;
}
#copyHtmlCodeButton {
margin-top:20px;
}
textarea.form-control
{
height:35px;
}
resources/views/generator/generator.js
View file @ 09c70812
$( function() {
$(document).click(function(){
setTimeout(function(){
generateHtmlCode();
},100);
});
$(document).keyup(function(){
setTimeout(function(){
generateHtmlCode();
},100);
});
$("#addTitleButton").click(function() {
$("#mainContainer").append("<div class=\"titleContainer card\">" +
"<div class=\"card-header header-elements-inline\">" +
"<h5 class=\"card-title\">Title:</h5>" +
"<h4 class=\"card-title\"><b>Title:</b></h4>" +
"<div class=\"header-elements\">" +
"<div class=\"list-icons\">" +
"<a class=\"list-icons-item titleCloseIcon\" data-action=\"remove\"></a>" +
......@@ -11,61 +24,59 @@ $( function() {
"<input type=\"text\" class=\"titleTextBox form-control\">" +
"<ul class=\"sortable ui-sortable\"></ul>" +
//"<button type=\"button\" class=\"btn btn-outline bg-slate-600 text-slate-600 border-slate-600 itemButtons addTextAreaButton\">Add Text</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 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 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();
});
$("#mainContainer").on('click', '.addTextAreaButton', function() {
$(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"text\"><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\"></textarea></li>");
$(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>");
makeSortable();
});
$("#mainContainer").on('click', '.addCodeButton', function() {
$(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"code\"><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\"></textarea></li>");
$(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>");
makeSortable();
});
$("#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><input type=\"text\" class=\"itemBox\" style=\"padding-left:1px;\"></input></li>");
$(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>");
makeSortable();
});
$("#mainContainer").on('click', '.addMarkDownButton', function() {
$(this).parents(".titleContainer").find(".sortable").append("<li class=\"ui-state-default\" type=\"markdown\"><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\"></textarea></li>");
$(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>");
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>" +
"<div class=\"itemLabel\" style=\"display: inline-block;margin-right: 50px;\">Table</div>" +
"<hr/><div class=\"itemLabel\" style=\"margin-bottom: 10px;\">Table</div>" +
"<div style=\"font-size: 14px;display: inline;\">" +
"<div style=\"display: inline-block;margin-bottom: 10px;\">Rows: <input type=\"text\" class=\"numberOfRowsTextBox\" style=\"width: 30px;margin-right: 10px;text-align: center;\">" +
"Columns: <input type=\"text\" class=\"numberOfColsTextBox\" style=\"width: 30px;margin-right: 30px;text-align: center;\"></div>" +
"<button class=\"createTableButton btn btn-primary\">Create Table</button>" +
"<div style=\"display:margin-bottom: 10px;\">Rows: <input type=\"text\" class=\"numberOfRowsTextBox form-control\">" +
"Columns: <input type=\"text\" class=\"numberOfColsTextBox form-control\" ></div>" +
"<button style=\"margin-top: 10px\" class=\"createTableButton btn btn-primary\">Create</button>" +
"<div class=\"tableDiv\" style=\"margin-top: 10px\"></div>" +
"</li>");
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>");
$(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>");
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>");
$(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>");
makeSortable();
});
$("#mainContainer").on('click', '.titleCloseIcon', function() {
$(this).parents(".titleContainer").remove();
showOrHideGeneratorButton();
});
$("#mainContainer").on('click', '.itemCloseIcon', function() {
......@@ -103,22 +114,13 @@ $( function() {
$(".sortable").sortable();
}
function showOrHideGeneratorButton()
{
if($(".titleContainer").length >= 1){
$("#copyHtmlCodeButton").css("display", "block");
}else{
$("#copyHtmlCodeButton").css("display", "none");
}
}
function generateHtmlCode()
{
var generatedHtml = "";
$(".titleContainer").each(function(index) {
generatedHtml += "<h1><span style=\"color: rgb(9,36,89);\"><u><strong>" +
generatedHtml += '<br/><hr /><p><span style="color: rgb(51,51,153);font-size: 30.0px;font-weight: bold;">' +
$(this).find(".titleTextBox").val() +
"</strong></u></span></h1>"
'</span></p><hr/>'
$(this).find("li").each(function(index) {
switch($(this).attr("type")) {
......@@ -145,17 +147,15 @@ $( function() {
break;
}
});
generatedHtml += "<hr />";
});
generatedHtml += setForAuthorAndDate();
CopyToClipboard (generatedHtml);
//generatedHtml += setForAuthorAndDate();
$("#htmlTextBox").val(generatedHtml);
$("#htmlTextBox").css('height', $("#htmlTextBox").prop("scrollHeight") + 'px');
}
$("#copyHtmlCodeButton").click(function() {
generateHtmlCode();
CopyToClipboard();
});
function setForText(elem){
......@@ -166,8 +166,9 @@ $( function() {
function setForCode(elem){
var generatedHtmlCode = "";
return generatedHtmlCode += "<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 generatedHtmlCode += '<p><br /></p><ac:structured-macro ac:name="code" ac:schema-version="1" ac:macro-id="9cc9c68e-a585-4703-ab8d-e719fd86e2bf">' +
'<ac:parameter ac:name="theme">Emacs</ac:parameter>' +
'<ac:parameter ac:name="linenumbers">true</ac:parameter>' +
"<ac:plain-text-body>" +
"<![CDATA[\n```\n" +
$(elem).find(".itemBox").val() +
......@@ -182,7 +183,7 @@ $( function() {
"<ac:plain-text-body>" +
"<![CDATA[\n<center><img src=\"" +
$(elem).find(".itemBox").val() +
"\" style=\"max-width:1500px;width: 100%;\" /></center>\n]]>" +
"\" style=\"max-width:1100;\" /></center>\n]]>" +
"</ac:plain-text-body>" +
"</ac:structured-macro>";
}
......@@ -236,7 +237,7 @@ $( function() {
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[###" +
"<![CDATA[### • " +
$(elem).find(".itemBox").val() +
"]]>" +
"</ac:plain-text-body>" +
......@@ -257,7 +258,7 @@ $( function() {
function setForAuthorAndDate()
{
var generatedHtmlAuthorAndDate = "";
return generatedHtmlAuthorAndDate += "<p><br /></p><ac:structured-macro ac:name=\"markdown\" ac:schema-version=\"1\" ac:macro-id=\"ceb972e2-285c-4db7-8bc9-7d1206e86ee4\">" +
return generatedHtmlAuthorAndDate += "<p><br /><hr/></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[\n" +
......@@ -269,27 +270,17 @@ $( function() {
}
function CopyToClipboard(generatedHtml) {
$("#htmlTextBox").val(generatedHtml);
$("#htmlTextBox").css("display", "block");
var copyText = document.getElementById("htmlTextBox");
$('#htmlTextBox').removeAttr("disabled");
copyText.select();
copyText.setSelectionRange(0, 99999);
copyText.setSelectionRange(0, 9999999);
document.execCommand("copy");
$("#htmlTextBox").css("display", "none");
alert ("HTML code is on the clipboard, try to paste it!");
$('#htmlTextBox').attr("disabled", true);
}
$("#mainContainer").on('input', '.itemBox', function () {
this.style.height = 'auto';
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';
}
}
$(document).on('keyup', 'textarea', function () {
$(this).css('height', $(this).prop("scrollHeight") + 'px');
});
$("#mainContainer").sortable();
});
resources/views/generator/index.blade.php
View file @ 09c70812
......@@ -3,87 +3,21 @@
{{-- Basics --}}
@section('limitless::title', 'Limitless Design')
@section('limitless::titleurl', 'https://google.de')
@section('limitless::language', 'en')
@section('limitless::largelogo', 'https://cdn.backoffice.online/limitless/Template/global_assets/images/logo_light.png')
@section('limitless::smalllogo', 'https://cdn.backoffice.online/limitless/Template/global_assets/images/logo_icon_light.png')
@section('limitless::mobilelogo', 'https://cdn.backoffice.online/limitless/Template/global_assets/images/logo_dark.png')
{{-- Assets --}}
@section('limitless::assets')
{{-- Javascript --}}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="@limitless::publish( base_path().'/resources/views/generator/generator.js' )"></script>
{{-- Stylesheet--}}
{{-- <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> --}}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="@limitless::publish( base_path().'/resources/views/generator/generator.css' )">
{{-- Inline --}}
<script>
console.log('Add some custom javascript here...');
</script>
@endsection
{{-- Navigation --}}
@section('limitless::navigation')
@limitless::navigationitem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_blank', 'title' => 'One'])
@limitless::navigationitem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_blank', 'title' => 'Two'])
@limitless::navigationdevider
@limitless::navigationsubmenu(['icon' => 'icon-home8', 'title' => 'Submenu'])
@limitless::navigationitem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_self', 'title' => 'Three'])
@limitless::navigationitem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_self', 'title' => 'Four'])
@limitless::navigationsubmenu(['icon' => 'icon-home8', 'title' => 'Submenu'])
@limitless::navigationitem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_self', 'title' => 'Five'])
@limitless::navigationitem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_self', 'title' => 'Six'])
@limitless::endnavigationsubmenu
@limitless::endnavigationsubmenu
@limitless::navigationdevider
@endsection
{{-- Content --}}
@section('limitless::content')
<div id="mainContainer"></div>
<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>
<hr/>
<textarea class="form-control" id="htmlTextBox" disabled></textarea>
<button id="copyHtmlCodeButton" type="button" class="btn bg-grey"><i class="icon-copy mr-2"></i>Copy</button>
@endsection
{{-- Footer --}}
@section('limitless::footer')
@limitless::copyright('Copyright © '.date('Y').' IT-Max GmbH')
@limitless::footermenu
@limitless::footeritem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_self', 'title' => 'Navigation Item'])
@limitless::footeritem(['url' => 'https://google.de', 'icon' => 'icon-home8', 'target' => '_self', 'title' => 'Navigation Item'])
@limitless::endfootermenu
@endsection
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