diff options
Diffstat (limited to 'view')
-rw-r--r-- | view/css/full.css | 5 | ||||
-rw-r--r-- | view/css/minimal.css | 3 | ||||
-rw-r--r-- | view/css/mod_pdledit_gui.css | 3 | ||||
-rw-r--r-- | view/pdl/mod_pdledit_gui.pdl | 1 | ||||
-rw-r--r-- | view/php/default.php | 14 | ||||
-rw-r--r-- | view/php/full.php | 15 | ||||
-rw-r--r-- | view/php/minimal.php | 39 | ||||
-rw-r--r-- | view/php/none.php | 9 | ||||
-rw-r--r-- | view/php/zen.php | 16 | ||||
-rw-r--r-- | view/theme/redbasic/js/redbasic.js | 15 | ||||
-rw-r--r-- | view/tpl/pdledit_gui.tpl | 243 | ||||
-rw-r--r-- | view/tpl/pdledit_gui_item.tpl | 18 | ||||
-rw-r--r-- | view/tpl/pdledit_gui_templates.tpl | 11 |
13 files changed, 362 insertions, 30 deletions
diff --git a/view/css/full.css b/view/css/full.css index 3f9a01d24..1a36c9b08 100644 --- a/view/css/full.css +++ b/view/css/full.css @@ -7,7 +7,6 @@ header #banner { } section { - display: block; - min-height: 112px; - margin: 50px 10px; + height: 100vh; + padding: 4.5rem 7px 200px 7px; } diff --git a/view/css/minimal.css b/view/css/minimal.css new file mode 100644 index 000000000..3bd04a5df --- /dev/null +++ b/view/css/minimal.css @@ -0,0 +1,3 @@ +section { + height: 100vh; +} diff --git a/view/css/mod_pdledit_gui.css b/view/css/mod_pdledit_gui.css new file mode 100644 index 000000000..dcda842dc --- /dev/null +++ b/view/css/mod_pdledit_gui.css @@ -0,0 +1,3 @@ +.aside_wrapper { + min-height: 70vh; +} diff --git a/view/pdl/mod_pdledit_gui.pdl b/view/pdl/mod_pdledit_gui.pdl new file mode 100644 index 000000000..7590b7fa0 --- /dev/null +++ b/view/pdl/mod_pdledit_gui.pdl @@ -0,0 +1 @@ +[template]none[/template] diff --git a/view/php/default.php b/view/php/default.php index 64d58a0c1..10e150906 100644 --- a/view/php/default.php +++ b/view/php/default.php @@ -1,3 +1,15 @@ +<?php +/** + * * Name: default + * * Description: Hubzilla default 3-column layout + * * Version: 1 + * * Author: Mario Vavti + * * Maintainer: Mario Vavti + * * ContentRegion: aside, left_aside_wrapper + * * ContentRegion: content, region_2 + * * ContentRegion: right_aside, right_aside_wrapper + */ +?> <!DOCTYPE html > <html prefix="og: http://ogp.me/ns#"> <head> @@ -8,7 +20,7 @@ <body <?php if($page['direction']) echo 'dir="rtl"' ?> > <?php if(x($page,'banner')) echo $page['banner']; ?> <header><?php if(x($page,'header')) echo $page['header']; ?></header> - <?php if(x($page,'nav')) echo $page['nav']; ?></nav> + <?php if(x($page,'nav')) echo $page['nav']; ?> <main> <div class="content"> <div class="columns"> diff --git a/view/php/full.php b/view/php/full.php index 1a9cd9a84..d855fb650 100644 --- a/view/php/full.php +++ b/view/php/full.php @@ -1,3 +1,13 @@ +<?php +/** + * * Name: full + * * Description: A single column full width layout with the hubzilla navbar + * * Version: 1 + * * Author: None + * * Maintainer: None + * * ContentRegion: content, region_1 + */ +?> <!DOCTYPE html > <html prefix="og: http://ogp.me/ns#"> <head> @@ -8,8 +18,9 @@ <body <?php if($page['direction']) echo 'dir="rtl"' ?> > <?php if(x($page,'banner')) echo $page['banner']; ?> <header><?php if(x($page,'header')) echo $page['header']; ?></header> - <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><?php if(x($page,'nav')) echo $page['nav']; ?></nav> - <section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?> + <?php if(x($page,'nav')) echo $page['nav']; ?> + <section id="region_1"> + <?php if(x($page,'content')) echo $page['content']; ?> <div id="page-footer"></div> </section> </body> diff --git a/view/php/minimal.php b/view/php/minimal.php index 3572f3b5c..3fab0c5f9 100644 --- a/view/php/minimal.php +++ b/view/php/minimal.php @@ -1,14 +1,25 @@ -<!DOCTYPE html >
-<html prefix="og: http://ogp.me/ns#">
-<head>
- <title><?php if(x($page,'title')) echo $page['title'] ?></title>
- <script>var baseurl="<?php echo z_root() ?>";</script>
- <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?>
-</head>
-<body>
- <section style="margin:0px!important; padding:0px!important; float:none!important;display:block!important;"><?php if(x($page,'content')) echo $page['content']; ?>
- <div id="page-footer"></div>
- </section>
-</body>
-</html>
-
+<?php +/** + * * Name: full + * * Description: A single column full width layout without a navbar + * * Version: 1 + * * Author: None + * * Maintainer: None + * * ContentRegion: content, region_1 + */ +?> +<!DOCTYPE html > +<html prefix="og: http://ogp.me/ns#"> +<head> + <title><?php if(x($page,'title')) echo $page['title'] ?></title> + <script>var baseurl="<?php echo z_root() ?>";</script> + <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?> +</head> +<body> + <section id="region_1"> + <?php if(x($page,'content')) echo $page['content']; ?> + <div id="page-footer"></div> + </section> +</body> +</html> + diff --git a/view/php/none.php b/view/php/none.php index 51d0e83dc..5e92310b7 100644 --- a/view/php/none.php +++ b/view/php/none.php @@ -1 +1,10 @@ +<?php +/** + * * Name: none + * * Description: A barebones empty single page template + * * Version: 1 + * * Author: None + * * Maintainer: None + */ +?> <?php if(x($page,'content')) echo $page['content']; ?> diff --git a/view/php/zen.php b/view/php/zen.php index a96cf722f..24aae951b 100644 --- a/view/php/zen.php +++ b/view/php/zen.php @@ -1,11 +1,11 @@ <!DOCTYPE html> <html prefix="og: http://ogp.me/ns#"> -<head> - <title><?php if(x($page,'title')) echo $page['title'] ?></title> - <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> - <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?> -</head> -<body> - <?php if(x($page,'content')) echo $page['content']; ?> -</body> + <head> + <title><?php if(x($page,'title')) echo $page['title'] ?></title> + <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> + <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?> + </head> + <body> + <?php if(x($page,'content')) echo $page['content']; ?> + </body> </html> diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index c0c03d4f8..04469cb85 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -17,8 +17,13 @@ $(document).ready(function() { } $('#css3-calc').remove(); // Remove the test element - stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); - stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); + if (document.querySelector('#region_1')) { + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); + } + + if (document.querySelector('#region_3')) { + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); + } $('#expand-aside').on('click', function() { if($('main').hasClass('region_1-on')){ @@ -121,8 +126,14 @@ function setStyle(element, cssProperty) { } function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) { + var lastScrollTop = 0; var sticky = document.querySelector(sticky); + + if (!sticky) { + return; + } + var stickyHeight = sticky.getBoundingClientRect().height; var stickyTop = document.querySelector(stickyTop); var content = document.querySelector(container); diff --git a/view/tpl/pdledit_gui.tpl b/view/tpl/pdledit_gui.tpl new file mode 100644 index 000000000..8c4ca3e50 --- /dev/null +++ b/view/tpl/pdledit_gui.tpl @@ -0,0 +1,243 @@ +<div id="pdledit_gui_offcanvas" class="offcanvas offcanvas-lg offcanvas-bottom shadow border rounded-top start-50 translate-middle-x" tabindex="-1" data-bs-backdrop="false" data-bs-scroll="true" style="min-width: 300px"> + <div id="pdledit_gui_offcanvas_body" class="offcanvas-body"></div> + <div class="offcanvas-header"> + <div class="offcanvas-title h3"></div> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> +</div> + +<div id="pdledit_gui_offcanvas_edit" class="offcanvas offcanvas-lg offcanvas-bottom shadow border rounded-top start-50 translate-middle-x" tabindex="-1" data-bs-backdrop="false" data-bs-scroll="true" style="min-width: 300px"> + <div id="pdledit_gui_offcanvas_edit_body" class="offcanvas-body"> + <textarea id="pdledit_gui_offcanvas_edit_textarea" class="form-control font-monospace h-100"></textarea> + </div> + <div class="offcanvas-header"> + <button id="pdledit_gui_offcanvas_edit_submit" type="button" class="btn btn-primary">Submit</button> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> +</div> + +<div id="pdledit_gui_offcanvas_submit" class="offcanvas offcanvas-lg offcanvas-bottom shadow border rounded-top start-50 translate-middle-x" tabindex="-1" data-bs-backdrop="false" data-bs-scroll="true" style="min-width: 300px"> + <div id="pdledit_gui_offcanvas_submit_body" class="offcanvas-body"></div> + <div class="offcanvas-header"> + <button id="pdledit_gui_offcanvas_submit_submit" type="button" class="btn btn-primary">Submit</button> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> +</div> + +<ul class="nav position-fixed bottom-0 start-50 bg-light translate-middle-x text-uppercase" style="min-width: 300px"> + <li class="nav-item"> + <a id="pdledit_gui_modules" class="nav-link" href="#">Modules</a> + </li> + <li class="nav-item"> + <a id="pdledit_gui_templates" class="nav-link" href="#">Templates</a> + </li> + <li class="nav-item"> + <a id="pdledit_gui_items" class="nav-link" href="#">Items</a> + </li> + <li class="nav-item"> + <a id="pdledit_gui_src" class="nav-link" href="#">Source</a> + </li> + {{if $module_modified}} + <li class="nav-item"> + <a id="pdledit_gui_reset" class="nav-link" href="#">Reset</a> + </li> + {{/if}} + <li class="nav-item"> + <a id="pdledit_gui_save" class="nav-link" href="#">Apply</a> + </li> +</ul> + +<script> + $(document).ready(function() { + let poi; + let regions = []; + let content_regions = []; + let page_src = atob('{{$page_src}}'); + + let offcanvas = new bootstrap.Offcanvas(document.getElementById('pdledit_gui_offcanvas')); + let edit_offcanvas = new bootstrap.Offcanvas(document.getElementById('pdledit_gui_offcanvas_edit')); + let submit_offcanvas = new bootstrap.Offcanvas(document.getElementById('pdledit_gui_offcanvas_submit')); + + {{foreach $content_regions as $content_region}} + regions.push('{{$content_region.0}}'); + content_regions.push('{{$content_region.1}}'); + + let sortable_{{$content_region.1}} = document.getElementById('{{$content_region.1}}'); + new Sortable(sortable_{{$content_region.1}}, { + group: 'shared', + handle: '.pdledit_gui_item_handle', + animation: 150 + }); + {{/foreach}} + + let sortable_items = document.getElementById('pdledit_gui_offcanvas_body'); + new Sortable(sortable_items, { + group: { + name: 'shared', + pull: 'clone', + put: false + }, + sort: false, + handle: '.pdledit_gui_item_handle', + animation: 150, + onEnd: function (e) { + $(e.item).find('button').removeClass('disabled'); + } + }); + + $(document).on('click', '.pdledit_gui_item_src', function(e) { + poi = this.closest('.pdledit_gui_item'); + let src = atob(poi.dataset.src); + $('#pdledit_gui_offcanvas_edit_textarea').val(src); + $('#pdledit_gui_offcanvas_edit_textarea').bbco_autocomplete('comanche'); + edit_offcanvas.show(); + }); + + $(document).on('click', '.pdledit_gui_item_remove', function(e) { + poi = this.closest('.pdledit_gui_item'); + $(poi).remove(); + }); + + $(document).on('click', '#pdledit_gui_offcanvas_edit_submit', function(e) { + let src = $('#pdledit_gui_offcanvas_edit_textarea').val(); + + if (poi) { + poi.dataset.src = btoa(src); + } + else { + $.post( + 'pdledit_gui', + { + 'save_src': 1, + 'module': '{{$module}}', + 'src': $('#pdledit_gui_offcanvas_edit_textarea').val() + } + ) + .done(function(data) { + if (data.success) { + window.location.href = 'pdledit_gui/' + data.module; + } + }); + } + + edit_offcanvas.hide(); + }); + + $(document).on('click', '#pdledit_gui_offcanvas_submit_submit', function(e) { + if ($('#pdledit_gui_templates_form').length) { + $.post( + 'pdledit_gui', + { + 'save_template': 1, + 'module': '{{$module}}', + 'data': $('#pdledit_gui_templates_form').serializeArray() + } + ) + .done(function(data) { + if (data.success) { + window.location.href = 'pdledit_gui/' + data.module; + } + }); + } + + submit_offcanvas.hide(); + }); + + $(document).on('click', '#pdledit_gui_src', function(e) { + e.preventDefault(); + poi = null; // this is important! + + let obj = {}; + + content_regions.forEach(function (content_region, i) { + let data_src = []; + $('#' + content_region + ' > .card').each(function () { + data_src.push(atob(this.dataset.src)); + }); + obj[regions[i]] = data_src; + }); + + for (let [region, entries] of Object.entries(obj)) { + let region_pdl = ''; + + entries.forEach(function (entry) { + region_pdl = region_pdl.concat(entry + "\r\n"); + }); + + let regex_str = '\\[region=' + region + '\\](.*?)\\[\\/region\\]'; + let replace_str = '[region=' + region + ']' + "\r\n" + region_pdl + "\r\n" + '[/region]' + let regex = new RegExp(regex_str, 'ism'); + + page_src = page_src.replace(regex, replace_str); + } + + $('#pdledit_gui_offcanvas_edit_textarea').val(page_src); + $('#pdledit_gui_offcanvas_edit_textarea').bbco_autocomplete('comanche'); + edit_offcanvas.show(); + }); + + $(document).on('click', '#pdledit_gui_items', function(e) { + e.preventDefault(); + $('#pdledit_gui_offcanvas_body').html(atob('{{$items}}')); + offcanvas.show(); + }); + + $(document).on('click', '#pdledit_gui_templates', function(e) { + e.preventDefault(); + $('#pdledit_gui_offcanvas_submit_body').html(atob('{{$templates}}')); + + submit_offcanvas.show(); + }); + + $(document).on('click', '#pdledit_gui_modules', function(e) { + e.preventDefault(); + $('#pdledit_gui_offcanvas_body').html(atob('{{$modules}}')); + offcanvas.show(); + }); + + $(document).on('click', '#pdledit_gui_save', function(e) { + e.preventDefault(); + + let obj = {}; + + content_regions.forEach(function (content_region, i) { + let data_src = []; + $('#' + content_region + ' > .card').each(function () { + data_src.push(this.dataset.src); + }); + obj[regions[i]] = data_src; + }); + + $.post( + 'pdledit_gui', + { + 'save': 1, + 'module': '{{$module}}', + 'data': JSON.stringify(obj) + } + ) + .done(function(data) { + if (data.success) { + window.location.href = 'pdledit_gui/' + data.module; + } + }); + }); + + $(document).on('click', '#pdledit_gui_reset', function(e) { + e.preventDefault(); + $.post( + 'pdledit_gui', + { + 'reset': 1, + 'module': '{{$module}}' + } + ) + .done(function(data) { + if (data.success) { + window.location.href = 'pdledit_gui/' + data.module; + } + }); + }); + + }); +</script> diff --git a/view/tpl/pdledit_gui_item.tpl b/view/tpl/pdledit_gui_item.tpl new file mode 100644 index 000000000..9d0095ed4 --- /dev/null +++ b/view/tpl/pdledit_gui_item.tpl @@ -0,0 +1,18 @@ +<div class="pdledit_gui_item card mb-3" data-src="{{$entry.src}}"> + <div class="card-header d-flex justify-content-between"> + <span class="text-uppercase">{{$entry.name}}</span> + <div class="badge rounded-pill{{if $entry.type === 'widget'}} bg-info text-dark{{/if}}{{if $entry.type === 'content'}} bg-primary{{/if}}{{if $entry.type === 'menu'}} bg-secondary{{/if}}{{if $entry.type === 'block'}} bg-warning text-dark{{/if}}"> + {{$entry.type}} + </div> + </div> + <div class="card-body"> + {{if $entry.desc}} + <div class="mb-3 text-muted">{{$entry.desc}}</div> + {{/if}} + {{if $entry.type !== 'content'}} + <button type="button" class="btn btn-sm btn-outline-primary pdledit_gui_item_src{{if $disable_controls}} disabled{{/if}}">Edit</button> + <button type="button" class="btn btn-sm btn-outline-danger pdledit_gui_item_remove{{if $disable_controls}} disabled{{/if}}">Remove</button> + <i class="fa fa-fw fa-arrows-alt m-2 float-end cursor-pointer pdledit_gui_item_handle"></i> + {{/if}} + </div> +</div> diff --git a/view/tpl/pdledit_gui_templates.tpl b/view/tpl/pdledit_gui_templates.tpl new file mode 100644 index 000000000..0f3d8a7b6 --- /dev/null +++ b/view/tpl/pdledit_gui_templates.tpl @@ -0,0 +1,11 @@ +<form id="pdledit_gui_templates_form"> + {{foreach $templates as $template}} + <div class="form-check mb-2"> + <input class="form-check-input" type="radio" name="template" id="id_template_{{$template.name}}" value="{{$template.name}}" {{if $template.name == $active}} checked{{/if}}> + <label class="form-check-label" for="id_template_{{$template.name}}"> + {{$template.name}} + </label> + <small class="text-muted">{{$template.desc}}</small> + </div> + {{/foreach}} +</form> |