Backup

.eslintrc.yml

@@ -1,4 +1,5 @@
 extends: eslint:recommended
 rules:
     no-undef: 0
-    no-redeclare: 0
+    no-redeclare: 0
+    no-mixed-spaces-and-tabs: 0

debian/changelog

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

forms/ecomerce/catalog/catalog.js

@@ -273,7 +273,7 @@ Hedera.Catalog = new Class
 		this.$('card-popup').show (button.node);
 	}
 	
-	,onAddLotClick: function (column, value, row, button)
+	,onAddLotClick: function (column, value, row)
 	{
 		var model = this.$('item-lots');
 		var grouping = model.get (row, 'grouping');
@@ -342,7 +342,7 @@ Hedera.Catalog = new Class
 		this.$('card-item').value = undefined;
 	}
 	
-	,onStatusChange: function (model)
+	,onStatusChange: function ()
 	{
 		this.$('card-popup').reset ();
 	}
@@ -413,7 +413,7 @@ Vn.Filter = new Class
 		var node = this.createRoot ('div');
 		node.className = 'vn-filter';
 		
-		this._select = new Htk.Select ();
+		this._select = new Htk.Combo ();
 		this._select.on ('mousedown', this._onMouseDown, this);
 		this._select.on ('changed', this._onChange, this);
 		this._select.on ('ready', this._onReady, this);
@@ -426,13 +426,13 @@ Vn.Filter = new Class
 		this.parent (props);
 	}
 	
-	,_onMouseDown: function (e)
+	,_onMouseDown: function ()
 	{
 		if (this._model && this._model.status === Db.Model.Status.CLEAN)
 			this._model.refresh ();
 	}
 	
-	,_onCloseClick: function (li)
+	,_onCloseClick: function ()
 	{
 		this._removeSelectionNode ();
 		this._changeValue (undefined);

forms/ecomerce/catalog/style.css

@@ -210,11 +210,6 @@
 
 /* Card */
 
-
-.card-popup
-{
-	overflow: auto;
-}
 .item-card
 {
 	font-size: .9em;

forms/ecomerce/catalog/ui.xml

@@ -408,7 +408,6 @@
 </htk-popup>
 <htk-popup
 	id="card-popup"
-	class="card-popup"
 	modal="true"
 	on-closed="onPopupClose">
 	<div property="child-node" class="item-card">

forms/news/new/new.js

@@ -24,13 +24,13 @@ Hedera.New = new Class
 				,"save table contextmenu directionality emoticons template"
 				,"paste textcolor"
 			]
-			,toolbar1:
-				 "  print preview | link image media emoticons blockquote"
-				+"| insertfile undo redo | bold italic"
-				+"| alignleft aligncenter alignright alignjustify"
-				+"| bullist numlist outdent indent"
-				+"| styleselect | fontselect fontsizeselect"
-				+"| forecolor backcolor"
+			,toolbar:
+				 "   print preview | link image media emoticons blockquote"
+				+" | insertfile undo redo | bold italic"
+				+" | alignleft aligncenter alignright alignjustify"
+				+" | bullist numlist outdent indent"
+				+" | styleselect | fontselect fontsizeselect"
+				+" | forecolor backcolor"
 			,image_advtab: true
 			,init_instance_callback : this._onEditorInit.bind (this)
 		});	

js/hedera/gui.css

@@ -280,13 +280,14 @@
 }
 .vn-gui .form-holder
 {
-	position: relative;
 	height: inherit;
 }
 .vn-gui .form-holder > *
 {
 	position: relative;
 	height: inherit;
+	border: 1px solid transparent;
+	box-sizing: border-box;
 
 	opacity: 0;
 	transform: translateZ(0) translateX(-2em);

js/hedera/gui.js

@@ -436,7 +436,7 @@ module.exports = new Class
 			div.appendChild (form);
 
 			this.$('form-holder').appendChild (div);
-			setTimeout (this._onSetFormTimeout.bind (this));
+			setTimeout (this._onSetFormTimeout.bind (this), 10);
 		}
 	}
 	

js/hedera/style.css

@@ -418,6 +418,7 @@ img.editable
 	display: block;
 	padding: 1em;
 	border-bottom: 1px solid #DDD;
+	transition: background-color 200ms ease-out;
 }
 a.list-row:hover
 {

js/htk/field/combo.js

@@ -1,6 +1,12 @@
 
 var ColumnText = require ('../column/text');
 
+var nativeEvents = {
+	 'click'     : 1
+	,'mousedown' : 1
+	,'focusout'  : 1
+};
+
 module.exports = new Class
 ({
 	Extends: Htk.Field
@@ -122,17 +128,11 @@ module.exports = new Class
 
 	,on: function (id, callback, instance)
 	{
-		switch (id)
-		{
-			case 'click':
-			case 'mousedown':
-			case 'focusout':
-				this.node.addEventListener (id,
-					callback.bind (instance, this));
-				break;
-			default:
-				this.parent (id, callback, instance);
-		}
+		if (nativeEvents[id] !== undefined)
+			this.node.addEventListener (id,
+				callback.bind (instance, this));
+		else
+			this.parent (id, callback, instance);
 	}
 	
 	,_setRow: function (row)
@@ -167,11 +167,9 @@ module.exports = new Class
 		
 		var popup = this._popup = new Htk.Popup ({childNode: menu});
 		popup.on ('closed', this._onPopupClose.bind (this));
-		popup.show (this.node);
+		popup.show (this.node, true, e);
 
 		this.signalEmit ('menu-show');
-		
-		e.stopPropagation ();
 	}
 	
 	,_onGridClicked: function (grid, e)
@@ -256,7 +254,7 @@ module.exports = new Class
 		this._setRow (row);
 	}
 
-	,putValue: function (value)
+	,putValue: function ()
 	{
 		this._selectOption ();
 	}

js/htk/htk.js

@@ -31,7 +31,7 @@ var Fields = {
 	,TextArea     : require ('./field/text-area')
 	,Spin         : require ('./field/spin')
 	,Check        : require ('./field/check')
-	,Select       : require ('./field/select')
+	,Combo        : require ('./field/combo')
 	,Calendar     : require ('./field/calendar')
 	,DateChooser  : require ('./field/date-chooser')
 	,Image        : require ('./field/image')

js/htk/popup.js

@@ -60,6 +60,7 @@ module.exports = new Class
 	}
 
 	,_parent: null
+	,_fitParent: false
 	,_modal: false
 	,_isOpen: false
 	,_child: null
@@ -67,6 +68,7 @@ module.exports = new Class
 	,initialize: function (props)
 	{
 		this._bgMouseDownHandler = this._bgMouseDown.bind (this);
+		this._bgKeyPressHandler = this._bgKeyPress.bind (this);
 		this.parent (props);
 	}
 	
@@ -82,26 +84,41 @@ module.exports = new Class
 		this.node.appendChild (childNode);
 	}
 
-	,show: function (parent)
+	/**
+	 * Shows the popup relative to another element.
+	 *
+	 * @param {Node} parent The relative element
+	 * @param {Boolean} fitParent Wether to set the width same to the parent
+	 * @param {HTMLEvent} ignoreEvent An optional event object to ignore
+	 */
+	,show: function (parent, fitParent, ignoreEvent)
 	{
 		this._parent = parent;
-		this.open ();
-	}
-
-	,isModal: function ()
-	{
-		return this._modal || Vn.isMobile ();
+		this._fitParent = fitParent;
+		this.open (ignoreEvent);
 	}
 	
-	,open: function ()
+	/**
+	 * Opens the popup.
+	 *
+	 * @param {Node} parent The relative element
+	 * @param {Boolean} fitParent Wether to set the width same to the parent
+	 */
+	,open: function (ignoreEvent)
 	{
+		if (ignoreEvent)
+			this._ignoreEvent = ignoreEvent;
+
 		if (this._isOpen)
 		{
-			this.reset ();
+			this.resetAsync ();
 			return;
 		}
+
+		var node = this.node;
 	
-		this.node.addEventListener ('mousedown', this._onMouseDown.bind (this));
+		node.addEventListener ('mousedown', this._onPopupMouseDown.bind (this));
+		this.doc.addEventListener ('keypress', this._bgKeyPressHandler);
 
 		if (this.isModal ())
 		{
@@ -110,106 +127,138 @@ module.exports = new Class
 			bg.addEventListener ('mousedown', this._bgMouseDownHandler);
 			Htk.Toast.pushTop (bg);
 
-			Vn.Node.addClass (this.node, 'modal');
-			bg.appendChild (this.node);
+			Vn.Node.addClass (node, 'modal');
+			bg.appendChild (node);
 
 			this.doc.body.appendChild (bg);
-			setTimeout (this._onOpacityTimeout.bind (this), 0);
 		}
 		else
 		{
 			this.doc.addEventListener ('mousedown', this._bgMouseDownHandler);
-			this.doc.body.appendChild (this.node);
+			this.doc.body.appendChild (node);
+			Vn.Node.addClass (node, 'fixed');
+			this.resetAsync ();
 		}
-		
+
+		setTimeout (this._onOpacityTimeout.bind (this), 10);
 		this._isOpen = true;
-		this.reset ();
-		setTimeout (this._onResetTimeout.bind (this), 0);
+	}
+
+	/**
+	 * Returns if the popup window shoud be modal based on the modal property
+	 * and if the device is mobile.
+	 *
+	 * @return {Boolean} %true if it's modal, %false otherwise
+	 */
+	,isModal: function ()
+	{
+		return this._modal || Vn.isMobile () || !this._parent;
 	}
 	
 	,_onOpacityTimeout: function ()
 	{
+		if (!this._isOpen)
+			return;
+
 		if (this._bg)
 			this._bg.style.opacity = 1;
+		
+		this._node.style.opacity = 1;
 	}
 
 	,_onResetTimeout: function ()
 	{
 		this.reset ();
 	}
+
+	,resetAsync: function ()
+	{
+		setTimeout (this._onResetTimeout.bind (this));
+	}
 	
+	/**
+	 * Repositions the popup.
+	 */
 	,reset: function ()
 	{
-		if (!this._isOpen)
+		if (!this._isOpen || this.isModal ())
 			return;
-			
+
 		var node = this._node;
 
 		var style = node.style;
+		style.visibility = 'hidden';
 		style.height = '';
 		style.width = '';
 
 		var margin = 20;
 		var dblMargin = margin * 2;
-		var width = node.offsetWidth;
-		var height = node.offsetHeight;
-		var innerWidth = window.innerWidth;
-		var innerHeight = window.innerHeight;
+	
+		var iniWidth;
+		var iniHeight;
+		var width = iniWidth = node.offsetWidth;
+		var height = iniHeight = node.offsetHeight;
 
-		if (width + dblMargin > innerWidth)
-		{
-			width = innerWidth - dblMargin;
-			style.width = width +'px';
-		}
-		if (height + dblMargin > innerHeight)
-		{
-			height = innerHeight - dblMargin;
-			style.height = height +'px';
-		}
-		
-		if (this.isModal ())
-		{
-			style.marginLeft = (-node.offsetWidth / 2) +'px';
-			style.marginTop =  (-node.offsetHeight / 2) +'px';
-		}
-		else
-		{
-			var spacing = 4;
-			var rect = this._parent.getBoundingClientRect ();
-			var left = rect.left;
-			var top = rect.top + spacing + this._parent.offsetHeight;
+		var windowWidth = window.innerWidth;
+		var windowHeight = window.innerHeight;
 
-			if (left + width > innerWidth)
-				left -= (left + width) - window.innerWidth + margin;
-			if (top + height > innerHeight)
-				top -= height + this._parent.offsetHeight + spacing * 2;
+		if (width + dblMargin > windowWidth)
+			width = windowWidth - dblMargin;
+		if (height + dblMargin > windowHeight)
+			height = windowHeight - dblMargin;
 
-			if (left < 0)
-				left = margin;
-			if (top < 0)
-				top = margin;
+		var rect = this._parent.getBoundingClientRect ();
+		var left = rect.left;
+		var top = rect.top + this._parent.offsetHeight;
 
-			style.top = (top) +'px';
-			style.left = (left) +'px';
-		}
+		if (this._fitParent)
+			width = this._parent.offsetWidth;
+
+		if (left + width + margin > windowWidth)
+			left -= (left + width) - window.windowWidth + margin;
+		if (top + height + margin > windowHeight)
+			top -= height + this._parent.offsetHeight;
+
+		if (left < margin)
+			left = margin;
+		if (top < margin)
+			top = margin;
+
+		style.top = (top) +'px';
+		style.left = (left) +'px';
+
+		if (width != iniWidth)
+			style.width = (width) +'px';
+		if (height != iniHeight)
+			style.height = (height) +'px';
+
+		style.visibility = 'initial';
 	}
 
+	/**
+	 * Hides the popup.
+	 */
 	,hide: function ()
 	{
 		if (!this._isOpen)
 			return;
 
+		var node = this._node;
+
 		if (this._bg)		
 		{
 			Htk.Toast.popTop ();
 			Vn.Node.remove (this._bg);
-			Vn.Node.removeClass (this._node, 'modal');
+			Vn.Node.removeClass (node, 'modal');
 			this._bg = null;
 		}
 		else
+		{
 			this.doc.removeEventListener ('mousedown', this._bgMouseDownHandler);
+			Vn.Node.removeClass (node, 'fixed');
+		}
 
-		Vn.Node.remove (this._node);
+		Vn.Node.remove (node);
 		this._parent = null;
 		this._isOpen = false;
 		this.signalEmit ('closed');
@@ -217,15 +266,21 @@ module.exports = new Class
 	
 	,_bgMouseDown: function (e)
 	{
-		if (e !== this._lastEvent)
+		if (e !== this._ignoreEvent)
 			this.hide ();
 			
-		this._lastEvent = null;
+		this._ignoreEvent = null;
+	}
+
+	,_bgKeyPress: function (e)
+	{
+		if (e.keyCode == 27) // Escape
+			this.hide ();
 	}
 	
-	,_onMouseDown: function (e)
+	,_onPopupMouseDown: function (e)
 	{
-		this._lastEvent = e;
+		this._ignoreEvent = e;
 	}
 });
 

js/htk/style.css

@@ -54,6 +54,7 @@
 .htk-grid td
 {
 	text-align: left;
+	box-sizing: border-box;
 }
 .htk-grid td:first-child,
 .htk-grid th:first-child
@@ -136,15 +137,16 @@ td.cell-image .htk-image
 
 .htk-select
 {
-	width: 100%;
+	max-width: 100%;
 	height: 2em;
 	text-align: left;
 }
 .htk-select-menu
 {
-	height: 100%;
-	max-height: 80em;
-	overflow: auto;
+	max-width: 100%;
+}
+.modal > .htk-select-menu
+{
 	min-width: 14em;
 }
 .htk-select-menu tbody > tr
@@ -163,7 +165,7 @@ td.cell-image .htk-image
 }
 .htk-select-menu td
 {
-	max-width: 11em;
+	max-width: 0;
 	overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -437,26 +439,36 @@ td.cell-image .htk-image
 	bottom: 0;
 	z-index: 190;
 	background-color: rgba(1, 1, 1, 0.7);
+	padding: 1.5em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
 	opacity: 0;
 	transition: opacity 200ms ease-in-out;
 }
 .htk-popup
 {
-	z-index: 200;
-	display: block;
-	position: fixed;
-	overflow: hidden;
 	background-color: white;
 	border-radius: 0.15em;
 	box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
 	box-sizing: content-box;
+	overflow: auto;
+
+	opacity: 0;
+	transition: opacity 200ms ease-in-out;
+}
+.htk-popup.fixed
+{
+	z-index: 200;
+	position: fixed;
+	display: block;
 }
 .htk-popup.modal
 {
-	position: absolute;
+	max-height: 100%;
+	max-width: 100%;
 	font-size: 1.2em;
-	top: 50%;
-	left: 50%;
 }
 .htk-popup > *
 {

js/htk/toast.js

@@ -86,7 +86,7 @@ module.exports =
 
 		this._timeouts = null;			
 
-		document.removeEventListener ('mousedown', this.hideHandler);
+		document.removeEventListener ('mousedown', this._onDocMouseDownHandler);
 		Vn.Node.remove (this._container);
 		this._container = null;
 		this.nodes = [];
@@ -100,8 +100,8 @@ module.exports =
 			container.className = 'htk-toast';
 			document.body.appendChild (container);
 
-			this.hideHandler = this.hide.bind (this);
-			document.addEventListener ('mousedown', this.hideHandler);
+			this._onDocMouseDownHandler = this._onDocMouseDown.bind (this);
+			document.addEventListener ('mousedown', this._onDocMouseDownHandler);
 
 			this._timeouts = [];
 			this._container = container;
@@ -119,7 +119,7 @@ module.exports =
 		
 		var toast = document.createElement ('div');
 		toast.className = className;
-		toast.addEventListener ('mousedown', this._onMessageMouseDown);
+		toast.addEventListener ('mousedown', this._onMessageMouseDown.bind (this));
 
 		var textNode = document.createTextNode (message);
 		toast.appendChild (textNode);
@@ -153,8 +153,15 @@ module.exports =
 			this.hide ();
 	}
 	
-	,_onMessageMouseDown: function (event)
+	,_onMessageMouseDown: function (e)
 	{
-		event.stopPropagation ();
+		this._lastEvent = e;
+	}
+
+	,_onDocMouseDown: function (e) {
+		if (this._lastEvent !== e)
+			this.hide();
+
+		this._lastEvent = null;
 	}
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedera-web",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Verdnatura web page",
   "devDependencies": {
     "assets-webpack-plugin": "^3.5.1",