From 4e66ceffc372049d9bf5c2321b6a9dbccb30b968 Mon Sep 17 00:00:00 2001 From: coderaiser Date: Mon, 20 Feb 2017 16:43:23 +0200 Subject: [PATCH] feature(images) move out from dom --- client/dom.js | 143 +---------------------------------------------- client/images.js | 136 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 141 deletions(-) create mode 100644 client/images.js diff --git a/client/dom.js b/client/dom.js index 8e153fd0..e1c8a583 100644 --- a/client/dom.js +++ b/client/dom.js @@ -18,10 +18,9 @@ Util.extend(DOMProto, DOMTree); const DOM = new DOMFunc(); -DOM.Images = new ImagesProto(); - module.exports = DOM; +DOM.Images = require('./images'); DOM.uploadDirectory = require('./directory'); DOM.Buffer = require('./buffer'); DOM.Events = require('./events'); @@ -31,146 +30,8 @@ DOM.RESTful = require('./rest'); DOM.load = require('./load'); DOM.Notify = require('./notify'); -function ImagesProto() { - const Images = new ImageElementProto(); - - function ImageElementProto () { - let LoadingImage; - const LOADING = 'loading'; - const HIDDEN = 'hidden'; - const ERROR = 'error'; - - function getLoadingType() { - return DOM.isSVG() ? '-svg' : '-gif'; - } - - function init() { - if (LoadingImage) - return; - - LoadingImage = LOADING + getLoadingType(); - } - - function getElement() { - init(); - - return DOM.load({ - name : 'span', - id : 'js-status-image', - className : 'icon', - attribute : 'data-progress', - notAppend : true - }); - } - - this.get = getElement; - - /* Функция создаёт картинку загрузки */ - this.loading = function() { - var element = getElement(); - var classList = element.classList; - - classList.add(LOADING, LoadingImage); - classList.remove(ERROR, HIDDEN); - - return element; - }; - - /* Функция создаёт картинку ошибки загрузки */ - this.error = function() { - var element = getElement(); - var classList = element.classList; - - classList.add(ERROR); - classList.remove(HIDDEN, LOADING, LoadingImage); - - return element; - }; - } - - this.show = load; - this.show.load = load; - this.show.error = error; - - /** - * Function shows loading spinner - * position = {top: true}; - */ - function load(position, panel) { - var current, - image = Images.loading(), - parent = image.parentElement, - refreshButton = DOM.getRefreshButton(panel); - - if (position === 'top') { - current = refreshButton.parentElement; - } else { - current = DOM.getCurrentFile(); - - if (current) - current = DOM.getByDataName('js-name', current); - else - current = refreshButton.parentElement; - } - - if (!parent || (parent && parent !== current)) - current.appendChild(image); - - DOM.show(image); - - return image; - } - - function error(text) { - var image = Images.error(); - - DOM.show(image); - image.title = text; - - CloudCmd.log(text); - - return image; - } - - /** - * hide load image - */ - this.hide = function() { - var element = Images.get(); - DOM.hide(element); - - return this; - }; - - this.setProgress = function(value, title) { - var DATA = 'data-progress', - element = Images.get(); - - if (element) { - element.setAttribute(DATA, value + '%'); - - if (title) - element.title = title; - } - - return this; - }; - - this.clearProgress = function() { - var DATA = 'data-progress', - element = Images.get(); - - if (element) { - element.setAttribute(DATA, ''); - element.title = ''; - } - - return this; - }; -} - function DOMTreeProto() { - var DOM = this; + const DOM = this; /** * check class of element diff --git a/client/images.js b/client/images.js new file mode 100644 index 00000000..2c140868 --- /dev/null +++ b/client/images.js @@ -0,0 +1,136 @@ +/* global CloudCmd */ + +'use strict'; + +const DOM = require('./dom'); + +const Images = module.exports; + +const LOADING = 'loading'; +const HIDDEN = 'hidden'; +const ERROR = 'error'; + +const LoadingImage = LOADING + getLoadingType(); + +function getLoadingType() { + return DOM.isSVG() ? '-svg' : '-gif'; +} + +module.exports.get = getElement; + +function getElement() { + return DOM.load({ + name : 'span', + id : 'js-status-image', + className : 'icon', + attribute : 'data-progress', + notAppend : true + }); +} + +/* Функция создаёт картинку загрузки */ +module.exports.loading = () => { + const element = getElement(); + const classList = element.classList; + + classList.add(LOADING, LoadingImage); + classList.remove(ERROR, HIDDEN); + + return element; +}; + +/* Функция создаёт картинку ошибки загрузки */ +module.exports.error = () => { + const element = getElement(); + const classList = element.classList; + + classList.add(ERROR); + classList.remove(HIDDEN, LOADING, LoadingImage); + + return element; +}; + +module.exports.show = load; +module.exports.show.load = load; +module.exports.show.error = error; + +/** +* Function shows loading spinner +* position = {top: true}; +*/ +function load(position, panel) { + const image = Images.loading(); + const parent = image.parentElement; + const refreshButton = DOM.getRefreshButton(panel); + + let current; + + if (position === 'top') { + current = refreshButton.parentElement; + } else { + current = DOM.getCurrentFile(); + + if (current) + current = DOM.getByDataName('js-name', current); + else + current = refreshButton.parentElement; + } + + if (!parent || (parent && parent !== current)) + current.appendChild(image); + + DOM.show(image); + + return image; +} + +function error(text) { + const image = Images.error(); + + DOM.show(image); + image.title = text; + + CloudCmd.log(text); + + return image; +} + +/** +* hide load image +*/ +module.exports.hide = () => { + const element = Images.get(); + + DOM.hide(element); + + return Images; +}; + +module.exports.setProgress = (value, title) => { + const DATA = 'data-progress'; + const element = Images.get(); + + if (!element) + return Images; + + element.setAttribute(DATA, value + '%'); + + if (title) + element.title = title; + + return Images; +}; + +module.exports.clearProgress = () => { + const DATA = 'data-progress'; + const element = Images.get(); + + if (!element) + return Images; + + element.setAttribute(DATA, ''); + element.title = ''; + + return Images; +}; +