refs 3971 Style fixes, scope & news error fixes

debian/changelog

@@ -1,4 +1,4 @@
-hedera-web (22.46.8) stable; urgency=low
+hedera-web (22.46.9) stable; urgency=low
 
   * Initial Release.
 

forms/ecomerce/catalog/style.scss

@@ -2,12 +2,19 @@
 @import "../../../js/htk/style/classes";
 
 .catalog {
-	margin-right: 18em;
+	margin-right: $side-panel-width;
 }
 .catalog-actions {
 	.htk-search-entry {
 		margin-right: 4px;
 	}
+	& > button.menu {
+		display: none;
+	
+		& > .htk-icon {
+			display: block;
+		}
+	}
 }
 .title ._subtitle {
 	font-size: .7rem;
@@ -19,20 +26,14 @@
 
 /* Right panel */
 
-.right-panel {
+.catalog-panel {
-	position: fixed;
-	top: 4.4em;
-	bottom: 0;
-	right: 0;
-	width: 18em;
-	overflow: auto;
 	background-color: #fafafa;
 
 	.basket-info {
 		background-color: #8cc63f;
 		color: white;
 		padding: 17px 28px;
-		border-radius: .5em;
+		border-radius: 7px;
 		margin: 14px;
 		text-align: center;
 
@@ -88,7 +89,7 @@
 	.realms a {
 		display: inline-block;
 		width: 25%;
-		padding: .6em;
+		padding: 8px;
 		box-sizing: border-box;
 		border-radius: 50%;
 	}
@@ -101,7 +102,7 @@
 		width: 100%;
 	}
 	.filters > button {
-		margin-top: 1em;
+		margin-top: 14px;
 	}
 }
 
@@ -409,28 +410,10 @@
 
 /* Mobile */
 
-.catalog-actions > button.menu {
-	display: none;
-}
-.catalog-actions > button.menu > .htk-icon {
-	display: block;
-}
-
 @include mobile {
 	.catalog-actions > button.menu {
 		display: block;
 	}
-	.right-panel {
-		top: 0;
-		right: -18em;
-		z-index: 20;
-		transition: transform 200ms ease-out;
-		-webkit-transition: transform 200ms ease-out;
-	}
-	.right-panel.show {
-		transform: translateZ(0) translateX(-18em);
-		-webkit-transform: translateZ(0) translateX(-18em);
-	}
 	.catalog {
 		margin-right: 0;
 	}

forms/ecomerce/catalog/ui.xml

@@ -199,7 +199,7 @@
 	</htk-repeater>
 	</div>
 </div>
-<div id="right-panel" class="right-panel" on-click="onRightPanelClick">
+<div id="right-panel" class="catalog-panel right-panel side-panel" on-click="onRightPanelClick">
 	<div class="basket-info">
 		<p>{{Vn.Value.format(basket.sent, '%D')}}</p>
 		<p>

forms/news/new/index.js

@@ -1,6 +1,43 @@
-const tinymce = require('tinymce/tinymce.min');
 import './style.scss';
 
+ //TinyMCE */
+ const tinymce = require('tinymce/tinymce');
+ require('tinymce/icons/default');
+ require('tinymce/themes/silver');
+ require('tinymce/skins/ui/oxide/skin.css');
+ require('tinymce/plugins/advlist');
+ require('tinymce/plugins/code');
+ require('tinymce/plugins/emoticons');
+ require('tinymce/plugins/emoticons/js/emojis');
+ require('tinymce/plugins/link');
+ require('tinymce/plugins/lists');
+ require('tinymce/plugins/table');
+ require('tinymce/plugins/autolink');
+ require('tinymce/plugins/image');
+ require('tinymce/plugins/charmap');
+ require('tinymce/plugins/print');
+ require('tinymce/plugins/preview');
+ require('tinymce/plugins/hr');
+ require('tinymce/plugins/anchor');
+ require('tinymce/plugins/pagebreak');
+ require('tinymce/plugins/searchreplace');
+ require('tinymce/plugins/wordcount');
+ require('tinymce/plugins/visualblocks');
+ require('tinymce/plugins/visualchars');
+ require('tinymce/plugins/code');
+ require('tinymce/plugins/fullscreen');
+ require('tinymce/plugins/insertdatetime');
+ require('tinymce/plugins/media');
+ require('tinymce/plugins/nonbreaking');
+ require('tinymce/plugins/save');
+ require('tinymce/plugins/table');
+ require('tinymce/plugins/directionality');
+ require('tinymce/plugins/emoticons');
+ require('tinymce/plugins/template');
+ require('tinymce/plugins/paste');
+ const contentUiCss = require('tinymce/skins/ui/oxide/content.css');
+ const contentCss = require('tinymce/skins/content/default/content.css');
+
 export default new Class({
 	Extends: Hedera.Form,
 	Template: require('./ui.xml')
@@ -29,6 +66,9 @@ export default new Class({
 				+" | forecolor backcolor"
 			,image_advtab: true
 			,init_instance_callback: this._onEditorInit.bind(this)
+			,skin: false
+			,content_css: false
+			,content_style: contentUiCss.toString() + '\n' + contentCss.toString()
 		});
 	},
 	
@@ -60,7 +100,7 @@ export default new Class({
 		this.onReturnClick();
 	},
 
-	onBodyChange() {
+	onReady() {
 		this.setEditorText();
 	},
 

forms/news/new/ui.xml

@@ -1,6 +1,8 @@
 <vn>
 <vn-group>
-	<db-form id="iter" on-status-changed="this.onStatusChange()">
+	<db-form id="iter"
+		on-status-changed="this.onStatusChange()"
+		on-ready="this.onReady()">
 		<db-model
 			id="model"
 			property="model"
@@ -11,7 +13,6 @@
 				FROM news WHERE id = #new
 		</db-model>
 	</db-form>
-	<db-param form="iter" column="text" on-changed="this.onBodyChange()"/>
 </vn-group>
 <div id="title">
 	<h1><t>AddEditNew</t></h1>

js/hedera/form.js

@@ -21,7 +21,7 @@ module.exports = new Class({
 		const builder = new Vn.Builder();
 		builder.compileString(this.$constructor.Template.default);
 
-		const scope = this.builder = builder.load(null, this);
+		const scope = this.scope = this.builder = builder.load(null, this);
 		this.$ = scope.$;
 		scope.link({conn, hash});
 		this.node = scope.$.form;
@@ -103,6 +103,7 @@ module.exports = new Class({
 
 	,_destroy() {
 		this.close();
+		if (this.scope) this.scope._destroy();
 		Vn.Object.prototype._destroy.call(this);
 	}
 });

js/hedera/gui.js

@@ -359,7 +359,6 @@ module.exports = new Class({
 		
 		this.hideMenu();
 		this.loaderPush();
-		
 		this.closeForm();
 		this.requestedForm = formPath;
 
@@ -440,7 +439,7 @@ module.exports = new Class({
 		if (this.activeForm) {
 			Vn.Node.removeClass(this.$.formHolder, 'show');
 			this.activeForm.close();
-			this.activeForm.unref();
+			this.activeForm._destroy();
 			this.activeForm = null;
 		}
 

js/hedera/gui.scss

@@ -1,8 +1,6 @@
 
 @import "../htk/style/classes";
 
-$side-panel-width: 250px;
-$navbar-height: 64px;
 
 .vn-gui {
 	height: inherit;
@@ -112,16 +110,6 @@ $navbar-height: 64px;
 
 	/* Left panel */
 
-	.left-panel {
-		z-index: 20;
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		top: 0;
-		background-color: white;
-		z-index: 20;
-		width: $side-panel-width;
-	}
 	.menu-overflow {
 		position: absolute;
 		top: 0;
@@ -322,18 +310,6 @@ $navbar-height: 64px;
 		& > .body {
 			margin-left: 0;
 		}
-		.left-panel {
-			top: 0;
-			left: -250px;
-			box-shadow: 0 0 .2em rgba(1, 1, 1, .3);
-
-			transition: transform 200ms ease-out;
-			-webkit-transition: transform 200ms ease-out;
-		}
-		.left-panel.show {
-			transform: translateZ(0) translateX(250px);
-			-webkit-transform: translateZ(0) translateX(250px);
-		}
 		.form-holder {
 			left: 0;
 		}
@@ -353,3 +329,47 @@ $navbar-height: 64px;
 		}
 	}
 }
+
+/* Rigth panel */
+
+.side-panel {
+	z-index: 20;
+	position: fixed;
+	bottom: 0;
+	background-color: white;
+	width: $side-panel-width;
+
+	&.left-panel {
+		left: 0;
+		top: 0;
+	
+		@include mobile {
+			left: -$side-panel-width;
+	
+			&.show {
+				transform: translateZ(0) translateX($side-panel-width);
+				-webkit-transform: translateZ(0) translateX($side-panel-width);
+			}
+		}
+	}
+	&.right-panel {
+		right: 0;
+		top: $navbar-height;
+		overflow: auto;
+	
+		@include mobile {
+			right: -$side-panel-width;
+	
+			&.show {
+				top: 0;
+				transform: translateZ(0) translateX(-$side-panel-width);
+				-webkit-transform: translateZ(0) translateX(-$side-panel-width);
+			}
+		}
+	}
+	@include mobile {
+		transition: transform 200ms ease-out;
+		-webkit-transition: transform 200ms ease-out;
+		box-shadow: 0 0 .2em rgba(1, 1, 1, .3);
+	}
+}

js/hedera/gui.xml

@@ -13,7 +13,7 @@
 		</div>
 		<div id="action-bar" class="action-bar"/>
 	</div>
-	<div id="left-panel" class="left-panel">
+	<div id="left-panel" class="left-panel side-panel">
 		<div class="menu-overflow">
 			<div class="menu-header" id="menu-header">
 				<img class="logo" src="image/logo-dark.svg" alt="Verdnatura"/>

js/hedera/report.js

@@ -77,5 +77,10 @@ module.exports = new Class({
 
 		this.doc.body.appendChild(scope.$.report);
 	}
+
+	,_destroy() {
+		if (this.scope) this.scope._destroy();
+		Vn.Object.prototype._destroy.call(this);
+	}
 });
 

js/htk/repeater/index.js

@@ -219,13 +219,13 @@ module.exports = new Class({
 	
 	,_unrefChildData(index) {
 		var childData = this._childsData[index];
-		childData.set.unref();
+		childData.set._destroy();
-		childData.scope.unref();
+		childData.scope._destroy();
 	}
 	
-	,destroy() {
+	,_destroy() {
 		this._freeChildsData();
-		Component.prototype.destroy.call(this);
+		Component.prototype._destroy.call(this);
 	}
 });
 

js/htk/style/variables.scss

@@ -21,3 +21,8 @@ $color-primary: #8cc63f;
 $color-hover-cd: rgba(0, 0, 0, .05);
 $color-main: #333;
 $color-font-light: #666;
+
+// Layout
+
+$side-panel-width: 250px;
+$navbar-height: 64px;

js/vn/component.js

@@ -168,9 +168,7 @@ const ComponentClass = {
 	}
 
 	,_destroy() {
-		if (this.scope)
+		if (this.scope) this.scope._destroy();
-			this.scope.unref();
-
 		NodeBuilder.prototype._destroy.call(this, );
 	}
 };

js/vn/scope.js

@@ -2,6 +2,7 @@ const VnObject = require('./object');
 const kebabToCamel = require('./string-util').kebabToCamel;
 
 let scopeUid = 0;
+window.vnWatchers = 0;
 
 module.exports = new Class({
 	Extends: VnObject
@@ -14,6 +15,7 @@ module.exports = new Class({
 		this.parent = parent;
 		this.uid = ++scopeUid;
 		this.$ = parent ? Object.create(parent.$) : {};
+		vnWatchers += exprValues.length;
 
 		if (parent) {
 			parent.ref();
@@ -146,15 +148,15 @@ module.exports = new Class({
 	}
 	
 	,_destroy() {
+		vnWatchers -= this.exprValues.length;
+
 		for (const object of this.objects)
 		if (object instanceof VnObject) {
 			object.disconnectByInstance(this);
-			object.unref();
+			object._destroy();
 		}
-		if (this.parent) {
+		if (this.parent)
 			this.parent.disconnectByInstance(this);
-			this.parent.unref();
-		}
 
 		VnObject.prototype._destroy.call(this);
 	}

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "hedera-web",
-  "version": "22.44.16",
+  "version": "22.46.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "hedera-web",
-      "version": "22.44.16",
+      "version": "22.46.9",
       "license": "GPL-3.0",
       "dependencies": {
         "js-yaml": "^3.12.1",
         "mootools": "^1.5.2",
         "promise-polyfill": "^8.2.3",
         "require-yaml": "0.0.1",
-        "tinymce": "^5.0.0"
+        "tinymce": "^5.10.6"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.20.2",
@@ -21,7 +21,7 @@
         "assets-webpack-plugin": "^7.1.1",
         "babel-loader": "^9.1.0",
         "bundle-loader": "^0.5.6",
-        "css-loader": "^6.7.1",
+        "css-loader": "^6.7.2",
         "eslint": "^8.15.0",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.1.0",
@@ -33,9 +33,9 @@
         "sass-loader": "^12.6.0",
         "style-loader": "^3.3.1",
         "url-loader": "^4.1.1",
-        "webpack": "^5.72.1",
+        "webpack": "^5.75.0",
-        "webpack-cli": "^4.9.2",
+        "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "^4.9.0",
+        "webpack-dev-server": "^4.11.1",
         "webpack-merge": "^5.8.0",
         "yaml-loader": "^0.5.0"
       }
@@ -3759,19 +3759,19 @@
       }
     },
     "node_modules/css-loader": {
-      "version": "6.7.1",
+      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.2.tgz",
-      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+      "integrity": "sha512-oqGbbVcBJkm8QwmnNzrFrWTnudnRZC+1eXikLJl0n4ljcfotgRifpg2a1lKy8jTrc4/d9A/ap1GFq1jDKG7J+Q==",
       "dev": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.7",
+        "postcss": "^8.4.18",
         "postcss-modules-extract-imports": "^3.0.0",
         "postcss-modules-local-by-default": "^4.0.0",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.2.0",
-        "semver": "^7.3.5"
+        "semver": "^7.3.8"
       },
       "engines": {
         "node": ">= 12.13.0"
@@ -8881,9 +8881,9 @@
       "dev": true
     },
     "node_modules/tinymce": {
-      "version": "5.10.5",
+      "version": "5.10.6",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.5.tgz",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.6.tgz",
-      "integrity": "sha512-nFKtLhmoRtExBxUfv06JlkbQWux5D+d115vxSRAqUmccZdrtpFvOIYwZmikvulLdM9pfEpvO0B+RQ2qFV/+R7w=="
+      "integrity": "sha512-bnF2LUoycDsoZZLQBNHbOijrmoJuEeR1rQdqgo4s77BedufpOVnDh00OZKbseHeTMCxhVH05wvOqxLsi6vpeZw=="
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
@@ -12634,19 +12634,19 @@
       }
     },
     "css-loader": {
-      "version": "6.7.1",
+      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.2.tgz",
-      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+      "integrity": "sha512-oqGbbVcBJkm8QwmnNzrFrWTnudnRZC+1eXikLJl0n4ljcfotgRifpg2a1lKy8jTrc4/d9A/ap1GFq1jDKG7J+Q==",
       "dev": true,
       "requires": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.7",
+        "postcss": "^8.4.18",
         "postcss-modules-extract-imports": "^3.0.0",
         "postcss-modules-local-by-default": "^4.0.0",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.2.0",
-        "semver": "^7.3.5"
+        "semver": "^7.3.8"
       }
     },
     "css-select": {
@@ -16509,9 +16509,9 @@
       "dev": true
     },
     "tinymce": {
-      "version": "5.10.5",
+      "version": "5.10.6",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.5.tgz",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.6.tgz",
-      "integrity": "sha512-nFKtLhmoRtExBxUfv06JlkbQWux5D+d115vxSRAqUmccZdrtpFvOIYwZmikvulLdM9pfEpvO0B+RQ2qFV/+R7w=="
+      "integrity": "sha512-bnF2LUoycDsoZZLQBNHbOijrmoJuEeR1rQdqgo4s77BedufpOVnDh00OZKbseHeTMCxhVH05wvOqxLsi6vpeZw=="
     },
     "to-fast-properties": {
       "version": "2.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedera-web",
-  "version": "22.46.8",
+  "version": "22.46.9",
   "description": "Verdnatura web page",
   "license": "GPL-3.0",
   "repository": {
@@ -13,7 +13,7 @@
     "assets-webpack-plugin": "^7.1.1",
     "babel-loader": "^9.1.0",
     "bundle-loader": "^0.5.6",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.7.2",
     "eslint": "^8.15.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
@@ -25,9 +25,9 @@
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.72.1",
+    "webpack": "^5.75.0",
-    "webpack-cli": "^4.9.2",
+    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.0",
+    "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0",
     "yaml-loader": "^0.5.0"
   },
@@ -36,7 +36,7 @@
     "mootools": "^1.5.2",
     "promise-polyfill": "^8.2.3",
     "require-yaml": "0.0.1",
-    "tinymce": "^5.0.0"
+    "tinymce": "^5.10.6"
   },
   "scripts": {
     "front": "webpack serve --open",