merge branch pdledit_gui into dev - many widgets still miss their description and requirements (this is work in progress)

author: Mario <mario@mariovavti.com> 2022-02-20 20:18:24 +0000
committer: Mario <mario@mariovavti.com> 2022-02-20 20:18:24 +0000
commit: 2a60f1cc6ed49ab559090c831788308fe3df0706 (patch)
tree: 1a5a0a28cbf4aaeb38dc0b08f03c874833500e78 /view
parent: 2ddff785e55745045bc9a742b2287a500e5370a6 (diff)
download: volse-hubzilla-2a60f1cc6ed49ab559090c831788308fe3df0706.tar.gz
volse-hubzilla-2a60f1cc6ed49ab559090c831788308fe3df0706.tar.bz2
volse-hubzilla-2a60f1cc6ed49ab559090c831788308fe3df0706.zip
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>
author	Mario <mario@mariovavti.com>	2022-02-20 20:18:24 +0000
committer	Mario <mario@mariovavti.com>	2022-02-20 20:18:24 +0000
commit	2a60f1cc6ed49ab559090c831788308fe3df0706 (patch)
tree	1a5a0a28cbf4aaeb38dc0b08f03c874833500e78 /view
parent	2ddff785e55745045bc9a742b2287a500e5370a6 (diff)
download	volse-hubzilla-2a60f1cc6ed49ab559090c831788308fe3df0706.tar.gz volse-hubzilla-2a60f1cc6ed49ab559090c831788308fe3df0706.tar.bz2 volse-hubzilla-2a60f1cc6ed49ab559090c831788308fe3df0706.zip