verdnatura/hedera-web
verdnatura
/
hedera-web
0
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Image caching improved

This commit is contained in:
Juan Ferrer 2019-05-27 15:38:06 +02:00
parent fb422846dd
commit dc41737464
11 changed files with 167 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
debian/changelog vendored
View File

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

2
forms/admin/items/items.js
View File

@ -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']);
}
});

6
forms/admin/items/style.css
View File

@ -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
{

17
forms/admin/items/ui.xml
View File

@ -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"

9
forms/ecomerce/basket/ui.xml
View File

@ -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"

9
forms/ecomerce/catalog/ui.xml
View File

@ -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"/>

1
forms/ecomerce/ticket/ui.xml
View File

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

97
js/htk/field.js
View File

@ -1,81 +1,71 @@
var Widget = require ('./widget');
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)
{
if (Vn.Value.compare (x, this._value))
,set: function(x) {
if (Vn.Value.compare(x, this._value))
return;
if (x instanceof Date)
x = x.clone ();
x = x.clone();
this.valueChanged (x);
this.putValue (x);
this.valueChanged(x);
this.putValue(x);
}
,get: function (x)
{
,get: function(x) {
return this._value;
}
},
param:
{
param: {
type: Vn.Param
,set: function (x)
{
this.link ({_param: x}, {'changed': this.onParamChange});
this.onParamChange ();
,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);
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 ();
this.bindToForm();
}
,get: function() {
return this._form;
}
},
column:
{
column: {
type: String
,set: function (x)
{
,set: function(x) {
this._paramName = x;
this.bindToForm ();
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
({
@ -113,7 +100,7 @@ module.exports = new Class
*
* @param {Boolean} editable Whether the user is allowed to edit the entry
**/
,setEditable: function (editable) {}
,setEditable: function(editable) {}
/**
* Virtual method that must be implemented by class childs to put the value
@ -121,7 +108,7 @@ module.exports = new Class
*
* @param {Object} value The new value for the entry
**/
,putValue: function (value) {}
,putValue: function(value) {}
/**
* Protected method that should be called from class childs when the value
@ -129,21 +116,19 @@ 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);
this.conditionalFunc(this, value);
if (this._param && !this._blockParamChange)
{
if (this._param && !this._blockParamChange) {
this._blockValueChange = true;
this._param.value = value;
this._blockValueChange = false;
}
this.signalEmit ('changed');
this.signalEmit('changed');
}
});

178
js/htk/field/image.js
View File

@ -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 ();
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 ();
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 ();
this._refreshClick();
}
,get: function ()
{
,get: function() {
return this._fullDir;
}
},
/**
* The REST connection used to upload the image.
**/
conn:
{
conn: {
type: Vn.JsonConnection
}
}
@ -70,67 +72,59 @@ module.exports = new Class
,_error: false
,_editable: false
,render: function ()
{
var node = this.createRoot ('div');
,render: function() {
var node = this.createRoot('div');
node.className = 'htk-image';
var img = this.img = this.createElement ('img');
img.addEventListener ('error', this._onImageError.bind (this));
node.appendChild (img);
var img = this.img = this.createElement('img');
img.addEventListener('error', this._onImageError.bind(this));
node.appendChild(img);
this.setEditable ();
this._refreshClick ();
this._refreshSrc ();
this.setEditable();
this._refreshClick();
this._refreshSrc();
}
,_refreshClick: function ()
{
,_refreshClick: function() {
if (!this.node)
return;
if (this.clickHandler)
{
Vn.Node.removeClass (this.node, 'clickable');
this.node.removeEventListener ('click', this.clickHandler);
if (this.clickHandler) {
Vn.Node.removeClass(this.node, 'clickable');
this.node.removeEventListener('click', this.clickHandler);
this.clickHander = null;
}
if (this._fullDir)
{
this.clickHandler = this._onClick.bind (this);
this.node.addEventListener ('click', this.clickHandler);
Vn.Node.addClass (this.node, 'clickable');
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)
{
this.node.removeChild (this.editButton);
if (this.editButton) {
this.node.removeChild(this.editButton);
this.editButton = null;
}
if (this._editable)
{
var button = this.createElement ('button');
button.addEventListener ('click', this._onEditClick.bind (this));
if (this._editable) {
var button = this.createElement('button');
button.addEventListener('click', this._onEditClick.bind(this));
button.title = _('UpdateImage');
this.node.appendChild (button);
this.node.appendChild(button);
var icon = new Htk.Icon ({icon: 'add-photo'});
button.appendChild (icon.node);
var icon = new Htk.Icon({icon: 'add-photo'});
button.appendChild(icon.node);
this.editButton = button;
}
}
,_makeSrc: function (subdir)
{
,_makeSrc: function(subdir) {
var src = Vn.Config.imageUrl +'/';
if (this._directory)
@ -139,78 +133,68 @@ module.exports = new Class
src += subdir +'/';
src += this._value;
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
this.img.src = this._makeSrc(this._subdir);
} else
delete this.img.src;
}
,putValue: function (value)
{
this._refreshSrc ();
,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));
(new Htk.FullImage()).show(this._makeSrc(this._fullDir));
}
,_onEditClick: function (event)
{
event.stopPropagation ();
,_onEditClick: function(event) {
event.stopPropagation();
var editor = new Htk.ImageEditor ({conn: this.conn});
editor.setData (this.value, this._directory);
editor.on ('name-changed', this._onNameChange, this);
editor.on ('file-uploaded', this._onFileUpload, this);
editor.on ('closed', this._onEditorClose, this);
var editor = new Htk.ImageEditor({conn: this.conn});
editor.setData(this.value, this._directory);
editor.on('name-changed', this._onNameChange, this);
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);
this.popup.show(this.node);
}
,_onNameChange: function (editor, value)
{
,_onNameChange: function(editor, value) {
this.value = value;
}
,_onFileUpload: function (cell, editor)
{
this._stamp = new Date ().getTime ();
this._refreshSrc (cell);
this.popup.hide ();
,_onFileUpload: function(cell) {
this._stamp = new Date().getTime();
this._refreshSrc(cell);
this.popup.hide();
}
,_onEditorClose: function (editor)
{
editor.disconnectByInstance (this);
,_onEditorClose: function(editor) {
editor.disconnectByInstance(this);
}
});

2
package.json
View File

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

14
rest/image/upload.php
View File

@ -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;
}
}