Image caching improved

debian/changelog

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

forms/admin/items/items.js

@@ -3,6 +3,6 @@ Hedera.Items = new Class({
 	Extends: Hedera.Form,
 	
 	activate: function() {	
-		this.$('items').setInfo('item', 'item', 'vn', ['id']);
+		this.$('items').setInfo('i', 'item', 'vn', ['id']);
 	}
 });

forms/admin/items/style.css

@@ -19,9 +19,9 @@
 {
 	margin-right: 1em;
 	float: left;
-	border-radius: 50%;
-	height: 3.2em;
-	width: 3.2em;
+	border-radius: 3%;
+	height: 5.5em;
+	width: 5.5em;
 }
 .items .row > p
 {

forms/admin/items/ui.xml

@@ -13,12 +13,16 @@
 	<div class="rows box">
 		<htk-repeater form-id="iter" empty-message="_Enter a search term">
 			<db-model property="model" id="items">
-				SELECT id, longName, size, category, image,
-						value5, value6, value7
-					FROM vn.item
-					WHERE longName LIKE CONCAT('%', #filter, '%')
-						OR id = #filter
-					ORDER BY longName LIMIT 50
+				SELECT i.id, i.longName, i.size, i.category,
+						i.value5, i.value6, i.value7,
+						i.image, im.updated
+					FROM vn.item i
+						LEFT JOIN image im
+							ON im.collectionFk = 'catalog'
+							AND im.name = i.image
+					WHERE i.longName LIKE CONCAT('%', #filter, '%')
+						OR i.id = #filter
+					ORDER BY i.longName LIMIT 50
 				<sql-batch property="batch">
 					<custom>
 						<item name="filter" param="filter"/>
@@ -30,6 +34,7 @@
 					<htk-image
 						form="iter"
 						column="image"
+						stamp-column="updated"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"

forms/ecomerce/basket/ui.xml

@@ -29,10 +29,14 @@
 		<div class="lines">
 			<htk-repeater form-id="iter" renderer="repeaterFunc">
 				<db-model id="items" property="model" updatable="true">
-					SELECT bi.id, bi.amount, bi.price, i.longName item, i.image,
-							i.tag5, i.value5, i.tag6, i.value6, i.tag7, i.value7
+					SELECT bi.id, bi.amount, bi.price, i.longName item,
+							i.tag5, i.value5, i.tag6, i.value6, i.tag7, i.value7,
+							i.image, im.updated
 						FROM myBasketItem bi
 							JOIN vn.item i ON i.id = bi.itemFk
+							LEFT JOIN image im
+								ON im.collectionFk = 'catalog'
+								AND im.name = i.image
 				</db-model>
 				<custom>
 					<div class="line">
@@ -46,6 +50,7 @@
 						<htk-image
 							form="iter"
 							column="image"
+							stamp-column="updated"
 							class="photo"
 							directory="catalog"
 							subdir="200x200"

forms/ecomerce/catalog/ui.xml

@@ -60,11 +60,14 @@
 					JOIN vn.itemType t ON t.id = i.typeFk
 				WHERE #filter;
 		CALL bionic_calc;
-		SELECT i.id, i.description, i.image, i.longName item,
+		SELECT i.id, i.description, i.longName item,
 				i.subName, i.tag5, i.value5, i.tag6, i.value6, i.tag7, i.value7,
-				b.available, b.price
+				b.available, b.price, i.image, im.updated
 			FROM tmp.bionic_item b
 				JOIN vn.item i ON i.id = b.item_id
+				LEFT JOIN image im
+					ON im.collectionFk = 'catalog'
+					AND im.name = i.image
 			WHERE b.available > 0
 			ORDER BY i.relevancy DESC, i.name, i.size
 			LIMIT 400;
@@ -113,6 +116,7 @@
 				subdir="200x200"
 				form="item"
 				column="image"
+				stamp-column="updated"
 				full-dir="1600x900"/>
 			<div class="item-info">
 				<htk-button
@@ -387,6 +391,7 @@
 				subdir="200x200"
 				form="card"
 				column="image"
+				stamp-column="updated"
 				full-dir="1600x900"
 				conn="conn"
 				editable="true"/>

forms/ecomerce/ticket/ui.xml

@@ -75,6 +75,7 @@
 					<htk-image
 						form="iter"
 						column="image"
+						stamp-column="updated"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"

js/htk/field.js

@@ -1,18 +1,15 @@
 
 var Widget = require('./widget');
 
-module.exports = new Class
-({
+module.exports = new Class({
 	Extends: Widget
 	,Tag: 'htk-field'
 	,Child: 'param'
 	,Properties:
 	{
-		value:
-		{
+		value: {
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				if (Vn.Value.compare(x, this._value))
 					return;
 
@@ -22,60 +19,53 @@ module.exports = new Class
 				this.valueChanged(x);
 				this.putValue(x);
 			}
-			,get: function (x)
-			{
+			,get: function(x) {
 				return this._value;
 			}
 		},
-		param:
-		{
+		param: {
 			type: Vn.Param
-			,set: function (x)
-			{
+			,set: function(x) {
 				this.link({_param: x}, {'changed': this.onParamChange});
 				this.onParamChange();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._param;
 			}
 		},
-		editable:
-		{
+		editable: {
 			type: Boolean
-			,set: function (x)
-			{
-				if (x != this._editable)
-				{
+			,set: function(x) {
+				if (x != this._editable) {
 					this._editable = x;
 					this.setEditable(x);
 				}
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._editable;
 			}
 		},
-		form:
-		{
+		form: {
 			type: Db.Iterator
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._form = x;
 				this.bindToForm();
 			}
+			,get: function() {
+				return this._form;
+			}
 		},
-		column:
-		{
+		column: {
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._paramName = x;
 				this.bindToForm();
 			}
+			,get: function() {
+				return this._paramName;
+			}
 		},
-		conditionalFunc:
-		{
+		conditionalFunc: {
 			type: Function
 			,value: null
 		}
@@ -87,18 +77,15 @@ module.exports = new Class
 	,_blockParamChange: false
 	,_blockValueChange: false
 
-	,onParamChange: function ()
-	{
-		if (!this._blockValueChange)
-		{
+	,onParamChange: function() {
+		if (!this._blockValueChange) {
 			this._blockParamChange = true;
 			this.value = this._param.value;
 			this._blockParamChange = false;
 		}
 	}
 	
-	,bindToForm: function ()
-	{
+	,bindToForm: function() {
 		if (this._form && this._paramName)
 			this.param = new Db.Param
 			({
@@ -129,15 +116,13 @@ module.exports = new Class
 	 *
 	 * @param {Object} value The new entry value
 	 **/
-	,valueChanged: function (value)
-	{
+	,valueChanged: function(value) {
 		this._value = value;
 		
 		if (this.conditionalFunc)
 			this.conditionalFunc(this, value);
 	
-		if (this._param && !this._blockParamChange)
-		{
+		if (this._param && !this._blockParamChange) {
 			this._blockValueChange = true;
 			this._param.value = value;
 			this._blockValueChange = false;

js/htk/field/image.js

@@ -1,8 +1,7 @@
 /**
  * Class to display or edit an image. Also it allows to show it's full version.
  **/
-module.exports = new Class
-({
+module.exports = new Class({
 	Extends: Htk.Field
 	,Tag: 'htk-image'
 	,Properties:
@@ -10,56 +9,59 @@ module.exports = new Class
 		/**
 		 * The directory where the images are allocated.
 		 **/
-		directory:
-		{
+		directory: {
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._directory = x;
 				this._refreshSrc();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._directory;
 			}
 		},
 		/**
 		 * The subdirectory where the images are allocated.
 		 **/
-		subdir:
-		{
+		subdir: {
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._subdir = x;
 				this._refreshSrc();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._subdir;
 			}
 		},
+		/**
+		 * The timestamp field of the last update, used for caching purposes.
+		 **/
+		stampColumn: {
+			type: String
+			,set: function(x) {
+				this._stampColumn = x;
+				this._refreshSrc();
+			}
+			,get: function() {
+				return this._stampColumn;
+			}
+		},
 		/**
 		 * Whether to show the full image when mouse hover.
 		 **/
-		fullDir:
-		{
+		fullDir: {
 			type: String
-			,set: function (x)
-			{			
+			,set: function(x) {			
 				this._fullDir = x;
 				this._refreshClick();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._fullDir;
 			}
 		},
 		/**
 		 * The REST connection used to upload the image.
 		 **/
-		conn:
-		{
+		conn: {
 			type: Vn.JsonConnection
 		}
 	}
@@ -70,8 +72,7 @@ module.exports = new Class
 	,_error: false
 	,_editable: false
 
-	,render: function ()
-	{
+	,render: function() {
 		var node = this.createRoot('div');
 		node.className = 'htk-image';
 		
@@ -84,39 +85,33 @@ module.exports = new Class
 		this._refreshSrc();
 	}
 	
-	,_refreshClick: function ()
-	{
+	,_refreshClick: function() {
 		if (!this.node)
 			return;
 	
-		if (this.clickHandler)
-		{
+		if (this.clickHandler) {
 			Vn.Node.removeClass(this.node, 'clickable');
 			this.node.removeEventListener('click', this.clickHandler);
 			this.clickHander = null;
 		}
 			
-		if (this._fullDir)
-		{
+		if (this._fullDir) {
 			this.clickHandler = this._onClick.bind(this);
 			this.node.addEventListener('click', this.clickHandler);
 			Vn.Node.addClass(this.node, 'clickable');
 		}
 	}
 	
-	,setEditable: function ()
-	{
+	,setEditable: function() {
 		if (!this.node)
 			return;
 
-		if (this.editButton)
-		{
+		if (this.editButton) {
 			this.node.removeChild(this.editButton);
 			this.editButton = null;
 		}
 	
-		if (this._editable)
-		{
+		if (this._editable) {
 			var button = this.createElement('button');
 			button.addEventListener('click', this._onEditClick.bind(this));
 			button.title = _('UpdateImage');
@@ -129,8 +124,7 @@ module.exports = new Class
 		}
 	}
 	
-	,_makeSrc: function (subdir)
-	{
+	,_makeSrc: function(subdir) {
 		var src = Vn.Config.imageUrl +'/';
 	
 		if (this._directory)
@@ -142,44 +136,39 @@ module.exports = new Class
 		
 		if (this._stamp)
 			src += '?'+ this._stamp;
+		else if (this._stampColumn && this.form)
+			src += '?'+ this.form.get(this._stampColumn);
 	
 		return  src;
 	}
 
-	,_refreshSrc: function ()
-	{
+	,_refreshSrc: function() {
 		if (!this.node)
 			return;
 
-		if (this._value)
-		{
+		if (this._value) {
 			this._error = false;
 			this.img.src = this._makeSrc(this._subdir);
-		}
-		else
+		} else
 			delete this.img.src;
 	}
 
-	,putValue: function (value)
-	{
+	,putValue: function() {
 		this._refreshSrc();
 	}
 
-	,_onImageError: function ()
-	{
+	,_onImageError: function() {
 		this._error = true;
 	}
 
-	,_onClick: function ()
-	{
+	,_onClick: function() {
 		if (!this._fullDir || !this._value || this._error)
 			return;
 	
 		(new Htk.FullImage()).show(this._makeSrc(this._fullDir));		
 	}
 	
-	,_onEditClick: function (event)
-	{
+	,_onEditClick: function(event) {
 		event.stopPropagation();
 
 		var editor = new Htk.ImageEditor({conn: this.conn});
@@ -188,29 +177,24 @@ module.exports = new Class
 		editor.on('file-uploaded', this._onFileUpload, this);
 		editor.on('closed', this._onEditorClose, this);
 		
-		this.popup = new Htk.Popup
-		({
+		this.popup = new Htk.Popup({
 			modal: true,
 			child: editor
 		});
 		this.popup.show(this.node);
 	}
 
-	,_onNameChange: function (editor, value)
-	{
+	,_onNameChange: function(editor, value) {
 		this.value = value;
 	}
 	
-	,_onFileUpload: function (cell, editor)
-	{
+	,_onFileUpload: function(cell) {
 		this._stamp = new Date().getTime();
 		this._refreshSrc(cell);
 		this.popup.hide();
 	}
 
-	,_onEditorClose: function (editor)
-	{
+	,_onEditorClose: function(editor) {
 		editor.disconnectByInstance(this);
 	}
 });
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedera-web",
-  "version": "1.406.48",
+  "version": "1.406.49",
   "description": "Verdnatura web page",
   "license": "GPL-3.0",
   "repository": {

rest/image/upload.php

@@ -108,9 +108,21 @@ class Upload extends Vn\Web\JsonRequest {
 			Image::resizeSave($image, $dstFile, $i['height'], $i['width'], $i['crop'], $symbolicSrc);
 		}
 
+		$query =
+			"INSERT INTO `image`
+				SET `collectionFk` = #collection,
+					`name` = #name,
+					`updated` = UNIX_TIMESTAMP()
+				ON DUPLICATE KEY UPDATE
+					`updated` = VALUES(updated)";
+
+		$db->query ($query, [
+			'collection' => $collection,
+			'name' => $name
+		]);
+
 		imagedestroy($image);
 		unlink($tmpName);
 		return TRUE;
 	}
 }
-