Skip to content

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

Transport the template generator page to limitless design interface

parent c5b13d89
Show whitespace changes
Inline Side-by-side
Showing with 459 additions and 106 deletions
composer.json
View file @ 7e545dcb
......@@ -8,11 +8,12 @@
],
"license":"MIT",
"require":{
"php":"^7.2",
"fideloper/proxy":"^4.0",
"laravel/framework":"^6.2",
"laravel/tinker":"^2.0",
"nexus/ninox-api":"dev-master"
"php": "^7.2",
"fideloper/proxy": "^4.0",
"laravel/framework": "^6.2",
"laravel/tinker": "^2.0",
"nexus/limitless-design": "dev-master",
"nexus/ninox-api": "dev-master"
},
"require-dev":{
"facade/ignition":"^1.4",
......@@ -65,6 +66,10 @@
{
"type":"git",
"url":"git@gitlab.bugsmasher.online:nexus/packages/ninox-api.git"
},
{
"type":"git",
"url":"git@gitlab.bugsmasher.online:nexus/packages/limitless-design.git"
}
]
}
config/app.php
View file @ 7e545dcb
......@@ -161,6 +161,7 @@ return [
Illuminate\Translation\TranslationServiceProvider::class,
Illuminate\Validation\ValidationServiceProvider::class,
Illuminate\View\ViewServiceProvider::class,
Nexus\Limitless\LimitlessServiceProvider::class,
/*
* Package Service Providers...
......
resources/views/generator/generator.css 0 → 100644
View file @ 7e545dcb
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.titleContainer {
width: 100%;
margin: auto;
text-align: left;
margin-bottom: 30px;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
.sortable {
list-style-type: none;
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 span { position: absolute; margin-left: -1.3em; }
#addTitleButton {
width: 100%;
}
#copyHtmlCodeButton {
display:none;
margin-top:20px;
margin-bottom:30px;
width: 100%;
}
.titleTextBox {
font-size: 14px;
width: 100%;
margin-top: -10px;
font-weight: bold;
}
.titleLabel {
font-size: 20px;
}
.itemBox {
width: 99%;
display: block;
margin: auto;
margin-left: 0px;
resize: none;
font-size:14px;
overflow:hidden;
}
.titleCloseIcon {
display: block;
margin-top: -17px;
}
.itemCloseIcon {
display: block;
margin-left: 100.8%;
}
#htmlTextBox{
display: none;
}
.itemButtons {
margin-right: 4px;
margin-bottom: 4px;
}
.itemLabel {
font-size: 18px;
}
resources/views/generator/generator.js 0 → 100644
View file @ 7e545dcb
$( function() {
$("#addTitleButton").click(function() {
$("#mainContainer").append("<div class=\"titleContainer card\">" +
"<div class=\"card-header header-elements-inline\">" +
"<h5 class=\"card-title\">Title:</h5>" +
"<div class=\"header-elements\">" +
"<div class=\"list-icons\">" +
"<a class=\"list-icons-item titleCloseIcon\" data-action=\"remove\"></a>" +
"</div></div></div>" +
"<div class=\"card-body\">" +
"<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 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>" +
"</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>");
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>");
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><textarea class=\"itemBox\"></textarea></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>");
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>" +
"<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 class=\"tableDiv\" style=\"margin-top: 10px\"></div>" +
"</li>");
makeSortable();
});
$("#mainContainer").on('click', '.titleCloseIcon', function() {
$(this).parents(".titleContainer").remove();
showOrHideGeneratorButton();
});
$("#mainContainer").on('click', '.itemCloseIcon', function() {
$(this).parent().remove();
});
$("#mainContainer").on('click', '.createTableButton', function() {
var mainTableDiv = $(this).parent();
var number_of_rows = $(mainTableDiv).find(".numberOfRowsTextBox").val();
var number_of_cols = $(mainTableDiv).find(".numberOfColsTextBox").val();
var table_body = '<table class="itemTable" border="1" rows="' + number_of_rows + '" cols="' + number_of_cols + '" style="width: 100%;border: 1px solid #c5c5c5;border-collapse: collapse;">';
for(var i=0;i<number_of_rows;i++){
table_body+='<tr>';
for(var j=0;j<number_of_cols;j++){
if(i == 0){
table_body +='<th>';
table_body +='<textarea class="itemBox" style="border: 0px;height:24px;background-color: #f4f5f7;font-weight:bold;"></textarea>';
table_body +='</th>';
}
else {
table_body +='<td>';
table_body +='<textarea class="itemBox" style="border: 0px;height:24px;"></textarea>';
table_body +='</td>';
}
}
table_body+='</tr>';
}
table_body+='</table>';
$(mainTableDiv).find(".tableDiv").html("");
$(mainTableDiv).find(".tableDiv").html(table_body);
});
function makeSortable()
{
$(".sortable").sortable();
$(".sortable").disableSelection();
}
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>" +
$(this).find(".titleTextBox").val() +
"</strong></u></span></h1>"
$(this).find("li").each(function(index) {
switch($(this).attr("type")) {
case "text":
generatedHtml += setForText($(this));
break;
case "code":
generatedHtml += setForCode($(this));
break;
case "image":
generatedHtml += setForImage($(this));
break;
case "table":
generatedHtml += setForTable($(this));
break;
default:
generatedHtml += setForMarkdown($(this));
break;
}
});
generatedHtml += "<hr />";
});
generatedHtml += setForAuthorAndDate();
CopyToClipboard (generatedHtml);
}
$("#copyHtmlCodeButton").click(function() {
generateHtmlCode();
});
function setForText(elem){
var generatedHtmlText = "";
return generatedHtmlText += "<p>" + $(elem).find(".itemBox").val() + "</p>";
}
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>" +
"<ac:plain-text-body>" +
"<![CDATA[\n```\n" +
$(elem).find(".itemBox").val() +
"\n```\n]]>" +
"</ac:plain-text-body>" +
"</ac:structured-macro>";
}
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>" +
"<ac:plain-text-body>" +
"<![CDATA[\n<img src=\"" +
$(elem).find(".itemBox").val() +
"\" width=\"1500\" />\n]]>" +
"</ac:plain-text-body>" +
"</ac:structured-macro>";
}
function setForMarkdown(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 setForTable(elem){
var generatedHtmlTable = "";
var tableElem = $(elem).find(".tableDiv").find(".itemTable");
if($(tableElem).html() !== undefined){
generatedHtmlTable += "<table style=\"width: 100.0%;\">";
columnWidthPerc = 100 / $(tableElem).attr("cols");
$(tableElem).find("tr").each(function(index){
if(index == 0){
generatedHtmlTable += "<colgroup>";
$(this).find("th").each(function(index){
generatedHtmlTable += "<col style=\"width:" + columnWidthPerc + "%;\"/>";
});
generatedHtmlTable += "</colgroup><tbody><tr>";
$(this).find("th").each(function(index){
generatedHtmlTable += "<th>" + $(this).find(".itemBox").val() + "</th>";
});
generatedHtmlTable += "</tr>";
}else{
generatedHtmlTable += "<tr>";
$(this).find("td").each(function(index){
generatedHtmlTable += "<td>" + $(this).find(".itemBox").val() + "</td>";
});
generatedHtmlTable += "</tr>";
}
});
generatedHtmlTable += "</tbody></table>";
}
return generatedHtmlTable;
}
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\">" +
"<ac:parameter ac:name=\"linkifyheaders\">false</ac:parameter>" +
"<ac:plain-text-body>" +
"<![CDATA[\n" +
"__Author:__ John Doe\n" +
"__Update:__ " + $.datepicker.formatDate('yy-mm-dd', new Date()) +
"\n]]>" +
"</ac:plain-text-body>" +
"</ac:structured-macro>";
}
function CopyToClipboard(generatedHtml) {
$("#htmlTextBox").val(generatedHtml);
$("#htmlTextBox").css("display", "block");
var copyText = document.getElementById("htmlTextBox");
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
$("#htmlTextBox").css("display", "none");
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';
}
});
$("#mainContainer").sortable();
$("#mainContainer").disableSelection();
});
resources/views/generator/index.blade.php 0 → 100644
View file @ 7e545dcb
{{-- Master --}}
@extends('limitless::master')
{{-- 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>Title</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>
@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
resources/views/welcome.blade.php deleted 100755 → 0
View file @ c5b13d89
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
@if (Route::has('login'))
<div class="top-right links">
@auth
<a href="{{ url('/home') }}">Home</a>
@else
<a href="{{ route('login') }}">Login</a>
@if (Route::has('register'))
<a href="{{ route('register') }}">Register</a>
@endif
@endauth
</div>
@endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
<a href="https://laravel.com/docs">Docs</a>
<a href="https://laracasts.com">Laracasts</a>
<a href="https://laravel-news.com">News</a>
<a href="https://blog.laravel.com">Blog</a>
<a href="https://nova.laravel.com">Nova</a>
<a href="https://forge.laravel.com">Forge</a>
<a href="https://vapor.laravel.com">Vapor</a>
<a href="https://github.com/laravel/laravel">GitHub</a>
</div>
</div>
</div>
</body>
</html>
routes/web.php
View file @ 7e545dcb
......@@ -12,5 +12,5 @@
*/
Route::get('/', function () {
return view('welcome');
return view('generator/index');
});
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