Wysiwyg for pages and blog module

assets/cp.scripts.js

@@ -395,6 +395,12 @@
 			return doc.documentElement.textContent;
 		};
 
+		function HtmlFixEditorHtml(value) {
+			newValue = value;
+			newValue = newValue.replace(/ /gi, '');
+			return newValue;
+		};
+
 		function AllFormsToAjax() {
 			$('form').each(function() {
 				FormToAjax($(this));
@@ -421,19 +427,18 @@
 				var area_name = area.name;
 				var area_html = area.innerHTML;
 
+				// Wrap editro by additional DIV and remove target textarea
 				$(area).wrap('<div id="' + area_id + '_wysiwyg" class="form-control wysiwyg" style="height:auto;padding:0px"></div>').remove();
-				var wysiwyg = document.getElementById(area_id + '_wysiwyg');
 
+				var wysiwyg = document.getElementById(area_id + '_wysiwyg');
 				wysiwyg.id = area_id;
-				$(wysiwyg).append('<textarea id="' + area_id + '_wysiwyg' + '" name="' + area_name + '" style="display:none!important"></textarea>');
-
-				area = document.getElementById(area_id + '_wysiwyg');
-				area.innerHTML = area_html;
 
+				// Create and init editor
 				var editor = window.pell.init({
 					element: wysiwyg,
 					onChange: function(html) {
-						area.innerHTML = html;
+						area.innerHTML = HtmlFixEditorHtml(html);
+						$(area).val(HtmlFixEditorHtml(html));
 						if(!FormDataWasChanged) {
 							FormDataWasChanged = true;
 						}
@@ -441,9 +446,49 @@
 					defaultParagraphSeparator: 'p',
 					styleWithCSS: false,
 					actions: [
+						'paragraph',
+						'heading1',
+						'heading2',
 						'bold',
 						'italic',
-						'underline'
+						'underline',
+						'strikethrough',
+						'ulist',
+						'olist',
+						'link',
+						{
+							name: 'htmlcode',
+							icon: 'HTML',
+							title: 'HTML Source',
+							result: function(edt, ctn, btn) {
+								var jedt = $(edt);
+								var jctn = $(ctn);
+								var jbtn = $(btn);
+								if(!jbtn.hasClass('pell-button-html-pressed')) {
+									jbtn.addClass('pell-button-html-pressed');
+									jedt.addClass('pell-html-mode');
+
+									jedt.find('.pell-actionbar .pell-button').prop('disabled', true);
+									jbtn.prop('disabled', false);
+
+									setTimeout(function() {
+										jedt.find('textarea.form-control').focus();
+									}, 0);
+								} else {
+									jbtn.removeClass('pell-button-html-pressed');
+									jedt.removeClass('pell-html-mode');
+									jedt.find('.pell-actionbar .pell-button').prop('disabled', false);
+
+									var srcValue = jedt.find('textarea.form-control').val();
+									ctn.innerHTML = HtmlFixEditorHtml(srcValue);
+									$(ctn).val(HtmlFixEditorHtml(srcValue));
+
+									setTimeout(function() {
+										jctn.focus();
+									}, 0);
+								}
+							},
+						},
 					],
 					classes: {
 						actionbar: 'pell-actionbar',
@@ -452,14 +497,31 @@
 						selected: 'pell-button-selected'
 					}
 				});
+
 				editor.onfocusin = function() {
 					$(wysiwyg).addClass('focused');
 				};
+
 				editor.onfocusout = function() {
 					$(wysiwyg).find('.pell-actionbar button.pell-button-selected').removeClass('pell-button-selected');
 					$(wysiwyg).removeClass('focused');
 				};
-				editor.content.innerHTML = HtmlDecode(area_html);
+
+				// Re-add textarea
+				$(wysiwyg).append('<textarea class="form-control" id="' + area_id + '_wysiwyg' + '" name="' + area_name + '" style="display:none"></textarea>');
+				area = document.getElementById(area_id + '_wysiwyg');
+
+				// Prevent data lost if HTML was changed
+				$(area).on('input', function() {
+					if(!FormDataWasChanged) {
+						FormDataWasChanged = true;
+					}
+				});
+
+				// Copy HTML to textarea and editor
+				area.innerHTML = HtmlFixEditorHtml(HtmlDecode(area_html));
+				$(area).val(HtmlFixEditorHtml(HtmlDecode(area_html)));
+				editor.content.innerHTML = HtmlFixEditorHtml(HtmlDecode(area_html));
 			});
 		};
 

assets/cp.styles.css

@@ -337,10 +337,6 @@ ul.pagination {
 	min-height: 5.4rem;
 }
 
-.data-form textarea.briefly {
-	min-height: 3.9rem;
-}
-
 /* Checkbox style iOS */
 .checkbox-ios {
 	display: inline-block;
@@ -399,7 +395,7 @@ ul.pagination {
 
 .checkbox-ios input[type=checkbox]:checked + label:before {
 	width: 60px;
-	background: #417cb9;
+	background: #1a73e8;
 }
 
 .checkbox-ios input[type=checkbox]:checked + label:after {
@@ -413,31 +409,38 @@ ul.pagination {
 
 /* Wysiwyg */
 textarea.form-control.wysiwyg {
-	display: none;
+	min-height: 340px;
 }
 
-.wysiwyg .pell-actionbar {
-	padding: .2rem;
-	border-radius: .25rem .25rem 0px 0px;
-	border-bottom: 1px solid #ced4da;
+div.wysiwyg.focused {
+	background-color: #fff;
+	border-color: #80bdff;
+	outline: 0;
+	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }
 
-.wysiwyg .pell-actionbar .pell-button {
-	margin-right: .2rem;
-	border-radius: .25rem;
-	background-color: #e7e7e7;
+/* Bootstrap buttons */
+.btn-primary {
+	background-color: #1a73e8;
+	border-color: #1a73e8;
+	color: #fff;
 }
 
-.wysiwyg .pell-actionbar .pell-button.pell-button-selected {
-	color: #fff;
-	background-color: #007bff;
+.btn-primary:hover {
+	background: rgba(26, 115, 232, 0.761);
 }
 
-div.wysiwyg.focused {
-	background-color: #fff;
-	border-color: #80bdff;
-	outline: 0;
-	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
+.btn-secondary {
+	background: transparent;
+	border-color: #dadce0;
+	color: #1a73e8;
+	font-weight: 500;
+}
+
+.btn-secondary:hover {
+	background: rgba(66, 133, 244, 0.04);
+	border-color: #d2e3fc;
+	color: #1a73e8;
 }
 
 /* Mobile fixes */

assets/cp.wysiwyg.pell.css

@@ -8,24 +8,47 @@
 	height: 300px;
 	outline: 0;
 	overflow-y: auto;
-	padding: 10px;
+	padding: .375rem .75rem;
+}
+
+.pell-content p:last-child {
+	margin-bottom: 0px;
 }
 
 .pell-actionbar {
-	background-color: #FFF;
-	border-bottom: 1px solid rgba(10, 10, 10, 0.1);
+	padding: .2rem;
+	padding-top: 0;
+	background-color: #fff;
+	border-radius: .25rem .25rem 0px 0px;
+	border-bottom: 1px solid #ced4da;
 }
 
 .pell-button {
-	background-color: transparent;
+	margin-top: .2rem;
+	background-color: #e9ecef;
 	border: none;
 	cursor: pointer;
 	height: 30px;
 	outline: 0;
-	width: 30px;
+	min-width: 30px;
 	vertical-align: bottom;
+	margin-right: .2rem;
+	border-radius: .25rem;
+}
+
+.pell-button-selected,
+.pell-button-html-pressed {
+	background-color: #007bff;
+	color: #fff;
 }
 
-.pell-button-selected {
-	background-color: #F0F0F0;
+.pell-html-mode .pell-content {
+	display: none;
+}
+
+.pell-html-mode textarea {
+	height: 300px;
+	display: block !important;
+	box-shadow: none !important;
+	border: none !important;
 }

assets/cp.wysiwyg.pell.css.go

@@ -1,3 +1,3 @@
 package assets
 
-var CpWysiwygPellCss = []byte(`.pell{border:1px solid hsla(0,0%,4%,.1)}.pell,.pell-content{box-sizing:border-box}.pell-content{height:300px;outline:0;overflow-y:auto;padding:10px}.pell-actionbar{background-color:#fff;border-bottom:1px solid hsla(0,0%,4%,.1)}.pell-button{background-color:transparent;border:none;cursor:pointer;height:30px;outline:0;width:30px;vertical-align:bottom}.pell-button-selected{background-color:#f0f0f0}`)
+var CpWysiwygPellCss = []byte(`.pell{border:1px solid rgba(10,10,10,0.1);box-sizing:border-box}.pell-content{box-sizing:border-box;height:300px;outline:0;overflow-y:auto;padding:.375rem .75rem}.pell-content p:last-child{margin-bottom:0}.pell-actionbar{padding:.2rem;padding-top:0;background-color:#fff;border-radius:.25rem .25rem 0 0;border-bottom:1px solid #ced4da}.pell-button{margin-top:.2rem;background-color:#e9ecef;border:none;cursor:pointer;height:30px;outline:0;min-width:30px;vertical-align:bottom;margin-right:.2rem;border-radius:.25rem}.pell-button-selected,.pell-button-html-pressed{background-color:#007bff;color:#fff}.pell-html-mode .pell-content{display:none}.pell-html-mode textarea{height:300px;display:block!important;box-shadow:none!important;border:none!important}`)

assets/cp.wysiwyg.pell.js

@@ -192,7 +192,7 @@ var init = function init(settings) {
 		button.title = action.title;
 		button.setAttribute('type', 'button');
 		button.onclick = function () {
-			return action.result() && content.focus();
+			return action.result(settings.element, content, this) && content.focus();
 		};
 
 		if (action.state) {

consts/consts.go

@@ -5,7 +5,7 @@ import (
 )
 
 const ServerVersion = "1.0.5"
-const AssetsVersion = "24"
+const AssetsVersion = "28"
 const AssetsPath = "assets"
 const DirIndexFile = "index.html"
 

hosts/localhost/template/blog-post.html

@@ -3,6 +3,7 @@
 	<div class="card-body">
 		<h2 class="card-title">{{$.Data.Blog.Post.Name}}</h2>
 		<div class="page-content">
+			{{$.Data.Blog.Post.Briefly}}
 			{{$.Data.Blog.Post.Content}}
 		</div>
 	</div>

hosts/localhost/template/sidebar-right.html

@@ -18,10 +18,4 @@
 			<li><a href="https://github.com/vladimirok5959/golang-fave/wiki" target="_blank">Wiki on GitHub</a></li>
 		</ul>
 	</div>
-</div>
-<div class="card mb-4">
-	<h5 class="card-header">Some sidebar</h5>
-	<div class="card-body">
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-	</div>
 </div>

hosts/localhost/template/styles.css

@@ -15,10 +15,19 @@
 	}
 }
 
+@media (min-width: 992px) {
+	.navbar-expand-lg .navbar-nav {
+		margin-right: -.5rem;
+	}
+}
+
 /* Set base bootstrap width */
 @media (min-width: 1200px) {
 	.container {
-		max-width: 960px;
+		max-width: 1000px;
+	}
+	.navbar-expand-lg .navbar-nav {
+		margin-right: -.5rem;
 	}
 }
 

modules/module_blog.go

@@ -87,6 +87,7 @@ func (this *Modules) RegisterModule_Blog() *Module {
 					user,
 					name,
 					alias,
+					briefly,
 					content,
 					UNIX_TIMESTAMP(datetime) as datetime,
 					active
@@ -102,6 +103,7 @@ func (this *Modules) RegisterModule_Blog() *Module {
 				&row.A_user,
 				&row.A_name,
 				&row.A_alias,
+				&row.A_briefly,
 				&row.A_content,
 				&row.A_datetime,
 				&row.A_active,
@@ -434,14 +436,14 @@ func (this *Modules) RegisterModule_Blog() *Module {
 					Caption: "Briefly",
 					Name:    "briefly",
 					Value:   data.A_briefly,
-					Classes: "briefly autosize",
+					Classes: "briefly wysiwyg",
 				},
 				{
 					Kind:    builder.DFKTextArea,
 					Caption: "Post content",
 					Name:    "content",
 					Value:   data.A_content,
-					Classes: "autosize",
+					Classes: "wysiwyg",
 				},
 				{
 					Kind:    builder.DFKCheckBox,