commit d8e6e62923c086d4f4c60a8bd317567646c72636 Author: zhongjin Date: Fri Sep 28 09:32:17 2018 +0800 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..13d48e4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/node_modules +/.idea +/package-lock.json diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..7e1b51c --- /dev/null +++ b/.npmignore @@ -0,0 +1,6 @@ +Gruntfile.js +tasks +node_modules +test +.travis.yml +appveyor.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..c05adf9 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,7 @@ +os: + - linux +language: node_js +node_js: + - '4' + - '8' + - '10' diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..7a3daf9 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,193 @@ +// To use this file in WebStorm, right click on the file name in the Project Panel (normally left) and select "Open Grunt Console" + +/** @namespace __dirname */ +/* jshint -W097 */// jshint strict:false +/*jslint node: true */ +"use strict"; + +function getAppName() { + var parts = __dirname.replace(/\\/g, '/').split('/'); + return parts[parts.length - 1].split('.')[0].toLowerCase(); +} + +module.exports = function (grunt) { + + var srcDir = __dirname + '/'; + var pkg = grunt.file.readJSON('package.json'); + var iopackage = grunt.file.readJSON('io-package.json'); + var version = (pkg && pkg.version) ? pkg.version : iopackage.common.version; + var appName = getAppName(); + + // Project configuration. + grunt.initConfig({ + pkg: pkg, + replace: { + core: { + options: { + patterns: [ + { + match: /var version = *'[\.0-9]*';/g, + replacement: "var version = '" + version + "';" + }, + { + match: /"version"\: *"[\.0-9]*",/g, + replacement: '"version": "' + version + '",' + } + ] + }, + files: [ + { + expand: true, + flatten: true, + src: [ + srcDir + 'controller.js', + srcDir + 'package.json', + srcDir + 'io-package.json' + ], + dest: srcDir + } + ] + }, + name: { + options: { + patterns: [ + { + match: /yunkong2/gi, + replacement: appName + } + ] + }, + files: [ + { + expand: true, + flatten: true, + src: [ + srcDir + '*.*', + srcDir + '.travis.yml' + ], + dest: srcDir + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'admin/*.*', + '!' + srcDir + 'admin/*.png' + ], + dest: srcDir + 'admin' + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'lib/*.*' + ], + dest: srcDir + 'lib' + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'example/*.*' + ], + dest: srcDir + 'example' + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'www/*.*' + ], + dest: srcDir + 'www' + } + ] + } + }, + // Javascript code styler + jscs: require(__dirname + '/tasks/jscs.js'), + // Lint + jshint: require(__dirname + '/tasks/jshint.js'), + http: { + get_hjscs: { + options: { + url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.js-controller/master/tasks/jscs.js' + }, + dest: 'tasks/jscs.js' + }, + get_jshint: { + options: { + url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.js-controller/master/tasks/jshint.js' + }, + dest: 'tasks/jshint.js' + }, + get_gruntfile: { + options: { + url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.build/master/adapters/Gruntfile.js' + }, + dest: 'Gruntfile.js' + }, + get_utilsfile: { + options: { + url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.build/master/adapters/utils.js' + }, + dest: 'lib/utils.js' + }, + get_jscsRules: { + options: { + url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.js-controller/master/tasks/jscsRules.js' + }, + dest: 'tasks/jscsRules.js' + } + } + }); + + grunt.registerTask('updateReadme', function () { + var readme = grunt.file.read('README.md'); + var pos = readme.indexOf('## Changelog\n'); + if (pos != -1) { + var readmeStart = readme.substring(0, pos + '## Changelog\n'.length); + var readmeEnd = readme.substring(pos + '## Changelog\n'.length); + + if (readme.indexOf(version) == -1) { + var timestamp = new Date(); + var date = timestamp.getFullYear() + '-' + + ('0' + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' + + ('0' + (timestamp.getDate()).toString(10)).slice(-2); + + var news = ""; + if (iopackage.common.whatsNew) { + for (var i = 0; i < iopackage.common.whatsNew.length; i++) { + if (typeof iopackage.common.whatsNew[i] == 'string') { + news += '* ' + iopackage.common.whatsNew[i] + '\n'; + } else { + news += '* ' + iopackage.common.whatsNew[i].en + '\n'; + } + } + } + + grunt.file.write('README.md', readmeStart + '### ' + version + ' (' + date + ')\n' + (news ? news + '\n\n' : '\n') + readmeEnd); + } + } + }); + + grunt.loadNpmTasks('grunt-replace'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-jscs'); + grunt.loadNpmTasks('grunt-http'); + + grunt.registerTask('default', [ + 'http', + 'replace:core', + 'updateReadme', + 'jshint', + 'jscs' + ]); + + grunt.registerTask('p', [ + 'replace:core', + 'updateReadme' + ]); + grunt.registerTask('rename', [ + 'replace:name' + ]); +}; \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b24d1d8 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2013-2018 bluefox + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..5571b44 --- /dev/null +++ b/README.md @@ -0,0 +1,123 @@ +![Logo](admin/hqwidgets.png) +yunkong2.vis-hqWidgets +============ + +[![NPM version](http://img.shields.io/npm/v/yunkong2.vis-hqwidgets.svg)](https://www.npmjs.com/package/yunkong2.vis-hqwidgets) +[![Downloads](https://img.shields.io/npm/dm/yunkong2.vis-hqwidgets.svg)](https://www.npmjs.com/package/yunkong2.vis-hqwidgets) + +[![NPM](https://nodei.co/npm/yunkong2.vis-hqwidgets.png?downloads=true)](https://nodei.co/npm/yunkong2.vis-hqwidgets/) + +hqWidgets - High quality widgets for yunkong2.vis +![Example](img/widgets.png) + +For one widget the jQuery.knob plugin (MIT) from Anthony Terrien is used. +http://anthonyterrien.com/knob/ or https://git.spacen.net/aterrien/jQuery-Knob + +## Changelog +### 1.1.2 (2018-06-09) +* (bluefox) Odometer was fixed while rendering in invisible state + +### 1.1.1 (2017-10-18) +* (bluefox) Fix interval description for russian + +### 1.0.11 (2017-09-18) +* (bluefox) Hide left description +* (Sebastian Rosenberg) added feature to select shutter popup window position. + +### 1.0.10 (2017-08-12) +* (bluefox) Fix the window handle update + +### 1.0.9 (2017-07-22) +* (bluefox) Small fixes for empty images + +### 1.0.8 (2016-11-24) +* (bluefox) Reduce render interval + +### 1.0.7 (2016-11-11) +* (bluefox) Allow set of padding for description + +### 1.0.6 (2016-10-11) +* (bluefox) Fix circle Knob if negative limits +* (bluefox) Fix first switch by checkbox + +### 1.0.5 (2016-09-14) +* (bluefox) show "last action" fixed + +### 1.0.4 (2016-09-13) +* (bluefox) fix problem in inner temperature if knob widget set installed +* (Jens Maus) removed all special IE5/6 CSS hacky statements with prepending asterisk (*) characters which are just producing CSS warnings on browsers like Safari. + +### 1.0.3 (2016-05-30) +* (bluefox) fix initial value of shutter if inverted + +### 1.0.2 (2016-05-30) +* (bluefox) change "last changed" to ms + +### 1.0.1 (2016-05-26) +* (bluefox) add odometer widget + +### 1.0.0 (2016-04-12) +* (bluefox) fix blinds - control z-index of widgets if popup window opened +* (bluefox) add colorOn for checkbox + +### 0.2.5 (2015-12-19) +* (bluefox) fix hqWidgets on/off + +### 0.2.4 (2015-12-19) +* (bluefox) fix height of graphic dialog + +### 0.2.3 (2015-12-19) +* (bluefox) add green and blue colors to checkbox +* (bluefox) working on lock +* (bluefox) add readOnly option to "on/off" + +### 0.2.2 (2015-11-10) +(bluefox) fix checkbox + +### 0.2.1 (2015-10-17) +(bluefox) enable description for door and shutter + +### 0.2.0 (2015-10-14) +(bluefox) fix problem with temperature if it was as string +(bluefox) make popup window (shutter) with most z-index when showing them + +### 0.1.10 (2015-10-12) +* (bluefox) fix door widget + +### 0.1.9 (2015-10-05) +* (bluefox) fix update of temperature on widgets + +### 0.1.8 (2015-10-03) +* (bluefox) fix On/Off Icon if changed while invisible +* (bluefox) fix error with style in OutTemp + +### 0.1.7 (2015-10-02) +* (bluefox) fix "working" icon +* (bluefox) fix on/Off button + +### 0.1.6 (2015-09-30) +* (bluefox) draw widgets first when the view is visible + +### 0.1.5 (2015-09-26) +* (bluefox) add push-button feature to on/off + +### 0.1.4 (2015-09-24) +* (bluefox) add outdoor temperature widget +* (bluefox) auto fill of OIDs +* (bluefox) add colors for texts +* (bluefox) add door widget + +### 0.1.3 (2015-09-17) +* (bluefox) try to fix feedback in hqWidgets/Dimmer + +### 0.1.2 (2015-09-13) +* (bluefox) add step to dimmer and temperature +* (bluefox) add "is comma" and "digits after comma" to circle +* (bluefox) show waves when ack=true, even if widget itself set the value. + +### 0.1.0 (2015-07-09) +- (bluefox) initial checkin + +## License + Copyright (c) 2013-2018 bluefox https://git.spacen.net/GermanBluefox + MIT diff --git a/admin/hqwidgets.png b/admin/hqwidgets.png new file mode 100644 index 0000000..de75e3c Binary files /dev/null and b/admin/hqwidgets.png differ diff --git a/admin/index.html b/admin/index.html new file mode 100644 index 0000000..4aac72f --- /dev/null +++ b/admin/index.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + +
+ + + + +

High quality Widgets settings

+ +
There is nothing to setup +
+ diff --git a/img/widgets.png b/img/widgets.png new file mode 100644 index 0000000..6491f0c Binary files /dev/null and b/img/widgets.png differ diff --git a/io-package.json b/io-package.json new file mode 100644 index 0000000..1949864 --- /dev/null +++ b/io-package.json @@ -0,0 +1,122 @@ +{ + "common": { + "name": "vis-hqwidgets", + "version": "1.1.2", + "news": { + "1.1.2": { + "en": "Odometer was fixed while rendering in invisible state", + "de": "Der Entfernungsmesser wurde beim Rendern im unsichtbaren Zustand behoben", + "ru": "Одометр был зафиксирован при визуализации в невидимом состоянии", + "pt": "Odometro foi corrigido durante a renderização em estado invisível", + "nl": "De odimeter is gerepareerd tijdens het renderen in onzichtbare toestand", + "fr": "Odomètre a été fixé lors du rendu dans un état invisible", + "it": "L'odometro è stato corretto durante il rendering in stato invisibile", + "es": "El odómetro se corrigió mientras se renderizaba en estado invisible", + "pl": "Licznik został naprawiony podczas renderowania w stanie niewidocznym" + }, + "1.1.1": { + "en": "Fix interval description for russian", + "de": "Korrigiere Intevall auf russisch", + "ru": "Исправлен интервал на русском" + }, + "1.0.11": { + "en": "Hide left description\nadded feature to select shutter popup window position", + "de": "Deaktiviere linke Beschreibung\nhinzugefügt Feature, um Shutter Popup-Fenster Position zu wählen", + "ru": "Можно деактивировать подпись слева\nдобавлена возможность выбора положения всплывающего окна" + }, + "1.0.10": { + "en": "Fix the window handle update", + "de": "Korrigiert den Update von Fenstergriff", + "ru": "Исправлено обновление ручки и положения окна" + }, + "1.0.9": { + "en": "Small fixes for empty images", + "de": "Kleine Verbesserungen, falls kein Bild", + "ru": "Маленькое улучшение для виджета без картинки" + }, + "1.0.8": { + "en": "Reduce render interval", + "de": "Verkleinere Renderwartezeit", + "ru": "Уменьшено время рендеринга" + }, + "1.0.7": { + "en": "Allow set of padding for description", + "de": "Erlaube das Setzen von Abständen für Beschreibung", + "ru": "Можно выставлять отступы для описания" + }, + "1.0.6": { + "en": "Fix circle Knob if negative limits\nfix first switch by checkbox", + "de": "Korregiere Circle-Knob bei negativen Werten\nKorrigiere ertse Schlatung bei Checkbox", + "ru": "Исправлена ошибка в Circle-Knob при отрицательных границах\nИсправлена ошибка в Checkbox при первом переключении" + }, + "1.0.5": { + "en": "show last action fixed", + "de": "Korregiere letze Änderungszeit", + "ru": "Исправлена ошибка в инфо о последнем изменении" + }, + "1.0.4": { + "en": "fix problem in inner temperature if knob widget set installed", + "de": "Korregiere das Problem in inner temp, falls Knob ist auch installiert", + "ru": "Исправлена совместная работа inner temp виджета и knob виджетов" + }, + "1.0.3": { + "en": "fix initial value of shutter if inverted", + "de": "fix initial value of shutter if inverted", + "ru": "fix initial value of shutter if inverted" + }, + "1.0.2": { + "en": "change [last changed] to ms", + "de": "change [last changed] to ms", + "ru": "change [last changed] to ms" + }, + "1.0.1": { + "en": "add odometer widget", + "de": "add odometer widget", + "ru": "add odometer widget" + } + }, + "title": "hqwidgets style Widgets", + "desc": { + "en": "High quality Widgets for yunkong2.vis", + "de": "Hochwertige (High quality) Widgets für yunkong2.vis", + "ru": "Высококачественные виджеты (High quality) для yunkong2.vis", + "pt": "Widgets de alta qualidade para yunkong2.vis", + "nl": "Hoge kwaliteit (High quality) Widgets voor yunkong2.vis", + "fr": "Widgets de haute qualité (High quality) pour yunkong2.vis", + "it": "Widget di alta qualità (High quality) per yunkong2.vis", + "es": "Widgets de alta calidad (High quality) para yunkong2.vis", + "pl": "Wysokiej jakości widżety (High quality) dla yunkong2.vis" + }, + "platform": "Javascript/Node.js", + "loglevel": "info", + "icon": "hqwidgets.png", + "enabled": true, + "mode": "once", + "extIcon": "https://raw.githubusercontent.com/yunkong2/yunkong2.vis-hqwidgets/master/admin/hqwidgets.png", + "keywords": [ + "hqwidgets", + "vis", + "GUI", + "graphical", + "scada" + ], + "readme": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets/blob/master/README.md", + "authors": [ + "bluefox " + ], + "localLink": "%web_protocol%://%ip%:%web_port%/vis/edit.html", + "license": "MIT", + "dependencies": [ + "vis" + ], + "onlyWWW": true, + "singleton": true, + "type": "visualization-widgets", + "restartAdapters": [ + "vis" + ], + "noConfig": true + }, + "native": {}, + "instanceObjects": [] +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..04de082 --- /dev/null +++ b/package.json @@ -0,0 +1,49 @@ +{ + "name": "yunkong2.vis-hqwidgets", + "description": "hqwidgets Widgets for yunkong2.vis", + "version": "1.1.2", + "author": { + "name": "bluefox", + "email": "dogafox@gmail.com" + }, + "contributors": [ + "bluefox " + ], + "homepage": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets", + "repository": { + "type": "git", + "url": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets" + }, + "licenses": [ + { + "type": "MIT", + "url": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets/blob/master/LICENSE" + } + ], + "keywords": [ + "yunkong2", + "GUI", + "DashUI", + "web interface", + "home automation", + "SCADA", + "hqwidgets GUI" + ], + "devDependencies": { + "grunt": "^1.0.1", + "grunt-replace": "^1.0.1", + "grunt-contrib-jshint": "^1.1.0", + "grunt-jscs": "^3.0.1", + "grunt-http": "^2.2.0", + "mocha": "^4.1.0", + "chai": "^4.1.2" + }, + "bugs": { + "url": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets/issues" + }, + "main": "widgets/hqwidgets.html", + "scripts": { + "test": "node node_modules/mocha/bin/mocha --exit" + }, + "license": "MIT" +} \ No newline at end of file diff --git a/tasks/jscs.js b/tasks/jscs.js new file mode 100644 index 0000000..588b6f2 --- /dev/null +++ b/tasks/jscs.js @@ -0,0 +1,17 @@ +var srcDir = __dirname + "/../"; + +module.exports = { + all: { + src: [ + srcDir + "*.js", + srcDir + "lib/*.js", + srcDir + "adapter/example/*.js", + srcDir + "tasks/**/*.js", + srcDir + "www/**/*.js", + '!' + srcDir + "www/lib/**/*.js", + '!' + srcDir + 'node_modules/**/*.js', + '!' + srcDir + 'adapter/*/node_modules/**/*.js' + ], + options: require('./jscsRules.js') + } +}; \ No newline at end of file diff --git a/tasks/jscsRules.js b/tasks/jscsRules.js new file mode 100644 index 0000000..ded301d --- /dev/null +++ b/tasks/jscsRules.js @@ -0,0 +1,36 @@ +module.exports = { + force: true, + "requireCurlyBraces": ["else", "for", "while", "do", "try", "catch"], /*"if",*/ + "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], + "requireSpaceBeforeBlockStatements": true, + "requireParenthesesAroundIIFE": true, + "disallowSpacesInFunctionDeclaration": {"beforeOpeningRoundBrace": true}, + "disallowSpacesInNamedFunctionExpression": {"beforeOpeningRoundBrace": true}, + "requireSpacesInFunctionExpression": {"beforeOpeningCurlyBrace": true}, + "requireSpacesInAnonymousFunctionExpression": {"beforeOpeningRoundBrace": true, "beforeOpeningCurlyBrace": true}, + "requireSpacesInNamedFunctionExpression": {"beforeOpeningCurlyBrace": true}, + "requireSpacesInFunctionDeclaration": {"beforeOpeningCurlyBrace": true}, + "disallowMultipleVarDecl": true, + "requireBlocksOnNewline": true, + "disallowEmptyBlocks": true, + "disallowSpacesInsideObjectBrackets": true, + "disallowSpacesInsideArrayBrackets": true, + "disallowSpaceAfterObjectKeys": true, + "disallowSpacesInsideParentheses": true, + "requireCommaBeforeLineBreak": true, + //"requireAlignedObjectValues": "all", + "requireOperatorBeforeLineBreak": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], +// "disallowLeftStickedOperators": ["?", "+", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], +// "requireRightStickedOperators": ["!"], +// "requireSpaceAfterBinaryOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], + //"disallowSpaceAfterBinaryOperators": [","], + "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"], + "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"], + "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="], + "requireSpaceAfterBinaryOperators": ["?", ">", ",", ">=", "<=", "<", "+", "-", "/", "*", "=", "==", "===", "!=", "!=="], + //"validateIndentation": 4, + //"validateQuoteMarks": { "mark": "\"", "escape": true }, + "disallowMixedSpacesAndTabs": true, + "disallowKeywordsOnNewLine": ["else", "catch"] + +}; diff --git a/tasks/jshint.js b/tasks/jshint.js new file mode 100644 index 0000000..f823ebc --- /dev/null +++ b/tasks/jshint.js @@ -0,0 +1,17 @@ +var srcDir = __dirname + "/../"; + +module.exports = { + options: { + force: true + }, + all: [ + srcDir + "*.js", + srcDir + "lib/*.js", + srcDir + "adapter/example/*.js", + srcDir + "tasks/**/*.js", + srcDir + "www/**/*.js", + '!' + srcDir + "www/lib/**/*.js", + '!' + srcDir + 'node_modules/**/*.js', + '!' + srcDir + 'adapter/*/node_modules/**/*.js' + ] +}; \ No newline at end of file diff --git a/test/testPackageFiles.js b/test/testPackageFiles.js new file mode 100644 index 0000000..d0759c0 --- /dev/null +++ b/test/testPackageFiles.js @@ -0,0 +1,91 @@ +/* jshint -W097 */ +/* jshint strict:false */ +/* jslint node: true */ +/* jshint expr: true */ +var expect = require('chai').expect; +var fs = require('fs'); + +describe('Test package.json and io-package.json', function() { + it('Test package files', function (done) { + console.log(); + + var fileContentIOPackage = fs.readFileSync(__dirname + '/../io-package.json', 'utf8'); + var ioPackage = JSON.parse(fileContentIOPackage); + + var fileContentNPMPackage = fs.readFileSync(__dirname + '/../package.json', 'utf8'); + var npmPackage = JSON.parse(fileContentNPMPackage); + + expect(ioPackage).to.be.an('object'); + expect(npmPackage).to.be.an('object'); + + expect(ioPackage.common.version, 'ERROR: Version number in io-package.json needs to exist').to.exist; + expect(npmPackage.version, 'ERROR: Version number in package.json needs to exist').to.exist; + + expect(ioPackage.common.version, 'ERROR: Version numbers in package.json and io-package.json needs to match').to.be.equal(npmPackage.version); + + if (!ioPackage.common.news || !ioPackage.common.news[ioPackage.common.version]) { + console.log('WARNING: No news entry for current version exists in io-package.json, no rollback in Admin possible!'); + console.log(); + } + + expect(npmPackage.author, 'ERROR: Author in package.json needs to exist').to.exist; + expect(ioPackage.common.authors, 'ERROR: Authors in io-package.json needs to exist').to.exist; + + if (ioPackage.common.name.indexOf('template') !== 0) { + if (Array.isArray(ioPackage.common.authors)) { + expect(ioPackage.common.authors.length, 'ERROR: Author in io-package.json needs to be set').to.not.be.equal(0); + if (ioPackage.common.authors.length === 1) { + expect(ioPackage.common.authors[0], 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name '); + } + } + else { + expect(ioPackage.common.authors, 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name '); + } + } + else { + console.log('WARNING: Testing for set authors field in io-package skipped because template adapter'); + console.log(); + } + expect(fs.existsSync(__dirname + '/../README.md'), 'ERROR: README.md needs to exist! Please create one with description, detail information and changelog. English is mandatory.').to.be.true; + if (!ioPackage.common.titleLang || typeof ioPackage.common.titleLang !== 'object') { + console.log('WARNING: titleLang is not existing in io-package.json. Please add'); + console.log(); + } + if ( + ioPackage.common.title.indexOf('yunkong2') !== -1 || + ioPackage.common.title.indexOf('yunkong2') !== -1 || + ioPackage.common.title.indexOf('adapter') !== -1 || + ioPackage.common.title.indexOf('Adapter') !== -1 + ) { + console.log('WARNING: title contains Adapter or yunkong2. It is clear anyway, that it is adapter for yunkong2.'); + console.log(); + } + + if (ioPackage.common.name.indexOf('vis-') !== 0) { + if (!ioPackage.common.materialize || !fs.existsSync(__dirname + '/../admin/index_m.html') || !fs.existsSync(__dirname + '/../gulpfile.js')) { + console.log('WARNING: Admin3 support is missing! Please add it'); + console.log(); + } + if (ioPackage.common.materialize) { + expect(fs.existsSync(__dirname + '/../admin/index_m.html'), 'Admin3 support is enabled in io-package.json, but index_m.html is missing!').to.be.true; + } + } + + var licenseFileExists = fs.existsSync(__dirname + '/../LICENSE'); + var fileContentReadme = fs.readFileSync(__dirname + '/../README.md', 'utf8'); + if (fileContentReadme.indexOf('## Changelog') === -1) { + console.log('Warning: The README.md should have a section ## Changelog'); + console.log(); + } + expect((licenseFileExists || fileContentReadme.indexOf('## License') !== -1), 'A LICENSE must exist as LICENSE file or as part of the README.md').to.be.true; + if (!licenseFileExists) { + console.log('Warning: The License should also exist as LICENSE file'); + console.log(); + } + if (fileContentReadme.indexOf('## License') === -1) { + console.log('Warning: The README.md should also have a section ## License to be shown in Admin3'); + console.log(); + } + done(); + }); +}); diff --git a/widgets/hqwidgets.html b/widgets/hqwidgets.html new file mode 100644 index 0000000..951eda0 --- /dev/null +++ b/widgets/hqwidgets.html @@ -0,0 +1,343 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/widgets/hqwidgets/css/checkbox.css b/widgets/hqwidgets/css/checkbox.css new file mode 100644 index 0000000..6ec01e5 --- /dev/null +++ b/widgets/hqwidgets/css/checkbox.css @@ -0,0 +1,632 @@ +.checkbox-big-orange-wrap{ + width: 216px; + height: 68px; + background: #fff; + border-radius: 34px; + box-shadow: + inset 0 30px 50px #d1d1d1; + position: relative; +} + +.checkbox-big-orange-wrap:before{ + content:""; + width: 206px; + height:58px; + border-radius: 29px; + background: #e9d7be; + box-shadow: + inset 0 30px 50px #a5a4a4; + position: absolute; + left: 5px; + top: 5px; +} + +.checkbox-big-orange-wrap:after{ + content:""; + width: 200px; + height:52px; + border-radius: 26px; + background: -webkit-linear-gradient(top, #fe9810 0%,#e75400 61%,#e75400 91%,#ea8810 100%); + box-shadow: + inset 0 3px 20px rgba(0, 0, 0, 0.8); + position: absolute; + left: 8px; + top: 8px; + transition: all 1s ease-in-out; +} + +.checkbox-big-orange-button{ + display: inline-block; + width: 115px; + height: 52px; + border-radius: 30px; + background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #ada39d; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 5px; + left: 6px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-big-orange-button:before{ + content: ""; + width: 36px; + height: 36px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 8px; + right: 10px; +} + +.checkbox-big-orange-button:hover{ + border-bottom: none; + top: 6px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-big-orange-button-active { + left: 94px !important; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-orange-wrap{ + width: 108px; + height: 34px; + background: #fff; + border-radius: 17px; + box-shadow: + inset 0 15px 25px #d1d1d1; + position: relative; +} + +.checkbox-small-orange-wrap:before{ + content:""; + width: 103px; + height:29px; + border-radius: 15px; + background: #e9d7be; + box-shadow: + inset 0 15px 25px #a5a4a4; + position: absolute; + left: 3px; + top: 3px; +} + +.checkbox-small-orange-wrap:after { + content:""; + width: 100px; + height:26px; + border-radius: 13px; + background: -webkit-linear-gradient(top, #fe9810 0%,#e75400 61%,#e75400 91%,#ea8810 100%); + box-shadow: + inset 0 1px 10px rgba(0, 0, 0, 0.8); + position: absolute; + left: 4px; + top: 4px; + transition: all 1s ease-in-out; +} + +.checkbox-small-orange-button{ + display: inline-block; + width: 58px; + height: 26px; + border-radius: 15px; + background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #ada39d; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 2px; + left: 3px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-orange-button:before{ + content: ""; + width: 18px; + height: 18px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 4px; + right: 5px; +} + +.checkbox-small-orange-button:hover{ + border-bottom: none; + top: 3px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-small-orange-button-active { + left: 47px !important; + transition: left 0.2s ease-in-out; +} +/* --------------------------- BLUE ------------------------- */ +.checkbox-big-blue-wrap{ + width: 216px; + height: 68px; + background: #fff; + border-radius: 34px; + box-shadow: + inset 0 30px 50px #d1d1d1; + position: relative; +} + +.checkbox-big-blue-wrap:before{ + content:""; + width: 206px; + height:58px; + border-radius: 29px; + background: #e9d7be; + box-shadow: + inset 0 30px 50px #a5a4a4; + position: absolute; + left: 5px; + top: 5px; +} + +.checkbox-big-blue-wrap:after{ + content:""; + width: 200px; + height:52px; + border-radius: 26px; + background: -webkit-linear-gradient(top, #558abd 0%, #5488ba 31%, #46729d 61%, #2a4661 100%); + box-shadow: + inset 0 3px 20px rgba(0, 0, 0, 0.8); + position: absolute; + left: 8px; + top: 8px; + transition: all 1s ease-in-out; +} + +.checkbox-big-blue-button{ + display: inline-block; + width: 115px; + height: 52px; + border-radius: 30px; + background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #ada39d; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 5px; + left: 6px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-big-blue-button:before{ + content: ""; + width: 36px; + height: 36px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 8px; + right: 10px; +} + +.checkbox-big-blue-button:hover{ + border-bottom: none; + top: 6px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-big-blue-button-active { + left: 94px !important; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-blue-wrap{ + width: 108px; + height: 34px; + background: #fff; + border-radius: 17px; + box-shadow: + inset 0 15px 25px #d1d1d1; + position: relative; +} + +.checkbox-small-blue-wrap:before{ + content:""; + width: 103px; + height:29px; + border-radius: 15px; + background: #e9d7be; + box-shadow: + inset 0 15px 25px #a5a4a4; + position: absolute; + left: 3px; + top: 3px; +} + +.checkbox-small-blue-wrap:after { + content:""; + width: 100px; + height:26px; + border-radius: 13px; + background: -webkit-linear-gradient(top, #558abd 0%, #5488ba 31%, #46729d 61%, #2a4661 100%); + box-shadow: + inset 0 1px 10px rgba(0, 0, 0, 0.8); + position: absolute; + left: 4px; + top: 4px; + transition: all 1s ease-in-out; +} + +.checkbox-small-blue-button{ + display: inline-block; + width: 58px; + height: 26px; + border-radius: 15px; + background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #ada39d; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 2px; + left: 3px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-blue-button:before{ + content: ""; + width: 18px; + height: 18px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 4px; + right: 5px; +} + +.checkbox-small-blue-button:hover{ + border-bottom: none; + top: 3px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-small-blue-button-active { + left: 47px !important; + transition: left 0.2s ease-in-out; +} +/* --------------------------- GREEN ------------------------- */ +.checkbox-big-green-wrap{ + width: 216px; + height: 68px; + background: #fff; + border-radius: 34px; + box-shadow: + inset 0 30px 50px #d1d1d1; + position: relative; +} + +.checkbox-big-green-wrap:before{ + content:""; + width: 206px; + height:58px; + border-radius: 29px; + background: #e9d7be; + box-shadow: + inset 0 30px 50px #a5a4a4; + position: absolute; + left: 5px; + top: 5px; +} + +.checkbox-big-green-wrap:after{ + content:""; + width: 200px; + height:52px; + border-radius: 26px; + background: -webkit-linear-gradient(top, #00fe37 0%, #00e771 61%, #009f00 91%, #12a71f 100%); + box-shadow: + inset 0 3px 20px rgba(0, 0, 0, 0.8); + position: absolute; + left: 8px; + top: 8px; + transition: all 1s ease-in-out; +} + +.checkbox-big-green-button{ + display: inline-block; + width: 115px; + height: 52px; + border-radius: 30px; + background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #ada39d; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 5px; + left: 6px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-big-green-button:before{ + content: ""; + width: 36px; + height: 36px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 8px; + right: 10px; +} + +.checkbox-big-green-button:hover{ + border-bottom: none; + top: 6px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-big-green-button-active { + left: 94px !important; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-green-wrap{ + width: 108px; + height: 34px; + background: #fff; + border-radius: 17px; + box-shadow: + inset 0 15px 25px #d1d1d1; + position: relative; +} + +.checkbox-small-green-wrap:before{ + content:""; + width: 103px; + height:29px; + border-radius: 15px; + background: #e9d7be; + box-shadow: + inset 0 15px 25px #a5a4a4; + position: absolute; + left: 3px; + top: 3px; +} + +.checkbox-small-green-wrap:after { + content:""; + width: 100px; + height:26px; + border-radius: 13px; + background: -webkit-linear-gradient(top, #00fe37 0%, #00e771 61%, #009f00 91%, #12a71f 100%); + box-shadow: + inset 0 1px 10px rgba(0, 0, 0, 0.8); + position: absolute; + left: 4px; + top: 4px; + transition: all 1s ease-in-out; +} + +.checkbox-small-green-button{ + display: inline-block; + width: 58px; + height: 26px; + border-radius: 15px; + background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #ada39d; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 2px; + left: 3px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-green-button:before{ + content: ""; + width: 18px; + height: 18px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 4px; + right: 5px; +} + +.checkbox-small-green-button:hover{ + border-bottom: none; + top: 3px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-small-green-button-active{ + left: 47px !important; + transition: left 0.2s ease-in-out; +} + +/* ---------------------------------- GREY -------------------------------- */ +.checkbox-big-grey-wrap{ + width: 216px; + height: 68px; + background: #fff; + border-radius: 34px; + box-shadow: + inset 0 30px 50px #d1d1d1; + position: relative; +} + +.checkbox-big-grey-wrap:before{ + content:""; + width: 206px; + height:58px; + border-radius: 29px; + background: #d4d4d4; + box-shadow: + inset 0 30px 50px #a5a4a4; + position: absolute; + left: 5px; + top: 5px; +} + +.checkbox-big-grey-wrap:after{ + content:""; + width: 200px; + height:52px; + border-radius: 26px; + background: -webkit-linear-gradient(top, #898989 0%, #696969 61%, #696969 91%, #808080 100%); + box-shadow: + inset 0 3px 20px rgba(0, 0, 0, 0.8); + position: absolute; + left: 8px; + top: 8px; + transition: all 1s ease-in-out; +} + +.checkbox-big-grey-button{ + display: inline-block; + width: 115px; + height: 52px; + border-radius: 30px; + background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #a4a4a4; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 5px; + left: 6px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-big-grey-button:before{ + content: ""; + width: 36px; + height: 36px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 8px; + right: 10px; +} + +.checkbox-big-grey-button:hover{ + border-bottom: none; + top: 6px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-big-grey-button-active { + left: 94px !important; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-grey-wrap{ + width: 108px; + height: 34px; + background: #fff; + border-radius: 17px; + box-shadow: + inset 0 15px 25px #d1d1d1; + position: relative; +} + +.checkbox-small-grey-wrap:before{ + content:""; + width: 103px; + height:29px; + border-radius: 15px; + background: #d4d4d4; + box-shadow: + inset 0 15px 25px #a5a4a4; + position: absolute; + left: 3px; + top: 3px; +} + +.checkbox-small-grey-wrap:after { + content:""; + width: 100px; + height:26px; + border-radius: 13px; + background: -webkit-linear-gradient(top, #898989 0%, #696969 61%, #696969 91%, #808080 100%); + box-shadow: + inset 0 1px 10px rgba(0, 0, 0, 0.8); + position: absolute; + left: 4px; + top: 4px; + transition: all 1s ease-in-out; +} + +.checkbox-small-grey-button{ + display: inline-block; + width: 58px; + height: 26px; + border-radius: 15px; + background: -webkit-linear-gradient(top, #efeeee 0%, #b9b9b9 100%); + border-top: solid 2px #fafafa; + border-bottom: solid 2px #a5a5a5; + box-shadow: + 1px 6px 7px rgba(0, 0, 0, 0.5), + 0 0 5px rgba(0, 0, 0, 0.4); + position: relative; + top: 2px; + left: 3px; + z-index: 99; + transition: left 0.2s ease-in-out; +} + +.checkbox-small-grey-button:before{ + content: ""; + width: 18px; + height: 18px; + border-radius: 50%; + background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%); + position: absolute; + top: 4px; + right: 5px; +} + +.checkbox-small-grey-button:hover{ + border-bottom: none; + top: 3px; + box-shadow: + 1px 4px 7px rgba(0, 0, 0, 0.5), + 0 0 3px rgba(0, 0, 0, 0.4); +} + +.checkbox-small-grey-button-active { + left: 47px !important; + transition: left 0.2s ease-in-out; +} \ No newline at end of file diff --git a/widgets/hqwidgets/css/glossy.css b/widgets/hqwidgets/css/glossy.css new file mode 100644 index 0000000..fe43196 --- /dev/null +++ b/widgets/hqwidgets/css/glossy.css @@ -0,0 +1,202 @@ + +/* -------------------------------------- COMBINED STYLES ---------------------------------------------------*/ +.glossy-button-grey, +.glossy-button-blue, +.glossy-button-green, +.glossy-button-pink, +.glossy-button-orange, +.glossy-button-grey-active, +.glossy-button-blue-active, +.glossy-button-green-active, +.glossy-button-pink-active, +.glossy-button-orange-active +{ + background: #777777; + cursor: pointer; + /* text */ + text-decoration: none; + font: 24px/1em 'Droid Sans', sans-serif; + font-weight: bold; + text-shadow: rgba(255,255,255,.5) 0 1px 0; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + /* layout */ + /*padding: .5em .6em .4em .6em; + margin: .5em;*/ + display: inline-block; + + /* effects */ + border-top: 1px solid rgba(255,255,255,0.8); + border-bottom: 1px solid rgba(0,0,0,0.1); + + background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(../img/noise.png); + background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(../img/noise.png); + background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(../img/noise.png); + + -webkit-transition: background .2s ease-in-out; + -moz-transition: background .2s ease-in-out; + transition: background .2s ease-in-out; + +} +.glossy-button-grey:active, +.glossy-button-blue:active, +.glossy-button-green:active, +.glossy-button-pink:active, +.glossy-button-orange:active, +.glossy-button-grey-active:active, +.glossy-button-blue-active:active, +.glossy-button-green-active:active, +.glossy-button-pink-active:active, +.glossy-button-orange-active:active +{ + background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); + background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); + background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); + + -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, + rgba(0,0,0,0.4) 0 .1em 1px, + rgba(0,0,0,0.2) 0 .2em 6px; + -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, + rgba(0,0,0,0.4) 0 .1em 1px, + rgba(0,0,0,0.2) 0 .2em 6px; + box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, + rgba(0,0,0,0.4) 0 .1em 1px, + rgba(0,0,0,0.2) 0 .2em 6px; + + -webkit-transform: translateY(.2em); + -moz-transform: translateY(.2em); + transform: translateY(.2em); +} + +.glossy-button-grey, +.glossy-button-grey-active +{ + /* color */ + color: hsl(0, 0%, 40%) !important; + background-color: hsl(0, 0%, 75%); + + -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ +} + +.glossy-button-grey:hover, +.glossy-button-grey-active:hover +{ background-color: hsl(0, 0%, 83%); } + +/* -------------- colours -------------- */ +.glossy-button-orange, +.glossy-button-orange-active +{ + color: hsl(39, 100%, 30%) !important; + background-color: hsl(39, 100%, 50%); + + -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ +} + +.glossy-button-orange:hover, +.glossy-button-orange-active:hover +{ background-color: hsl(39, 100%, 65%); } + + +.glossy-button-blue, +.glossy-button-blue-active +{ + color: hsl(208, 50%, 40%) !important; + background-color: hsl(208, 100%, 75%); + + -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ +} +.glossy-button-blue:hover, +.glossy-button-blue-active:hover +{ background-color: hsl(208, 100%, 83%); } + +.glossy-button-green, +.glossy-button-green-active +{ + color: hsl(88, 70%, 30%) !important; + background-color: hsl(88, 70%, 60%); + -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ +} + +.glossy-button-green:hover, +.glossy-button-green-active:hover +{ background-color: hsl(88, 70%, 75%); } + + +.glossy-button-pink, +.glossy-button-pink-active +{ + color: hsl(340, 100%, 30%) !important; + background-color: hsl(340, 100%, 75%); + -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ + box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ + hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ + rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ +} + +.glossy-button-pink:hover, +.glossy-button-pink-active:hover +{ background-color: hsl(340, 100%, 83%); } + +.glossy-button-grey-active, +.glossy-button-blue-active, +.glossy-button-green-active, +.glossy-button-pink-active, +.glossy-button-orange-active +{ + background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png); + background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png); + background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png); + + -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ + rgba(0,0,0,0.4) 0 .1em 1px, /* border */ + rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ + -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ + rgba(0,0,0,0.4) 0 .1em 1px, /* border */ + rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ + box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ + rgba(0,0,0,0.4) 0 .1em 1px, /* border */ + rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ + + -webkit-transform: translateY(.2em); + -moz-transform: translateY(.2em); + transform: translateY(.2em); +} diff --git a/widgets/hqwidgets/css/hqwidgets.css b/widgets/hqwidgets/css/hqwidgets.css new file mode 100644 index 0000000..70c6164 --- /dev/null +++ b/widgets/hqwidgets/css/hqwidgets.css @@ -0,0 +1,1093 @@ +/*.vis-hq-no-select { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +}*/ +.vis-hq-no-space { + border: 0; + margin: 0; + padding: 0; + border-spacing: 0; + border-image-width: 0; +} + +.vis-hq-nodata { + position: absolute; + top: 10%; + left: 10%; + transform: scale(2); +} +.vis-hq-battery { + position: absolute; + top: -8px; + right: -8px; +} +.vis-hq-working { + position: absolute; + top: -8px; + left: -8px; + } +/* ------------------------ Button styles ---------------------------*/ +/* Basis */ +.vis-hq-button-base { + font-family: 'Tahoma', sans-serif; + cursor: pointer; + z-index:2; +} +.vis-hq-main { + width: 100%; + height: 100%; +} +.vis-hq-main:active { + transform: scale(0.95); +} +.vis-hq-main-none { + /*transform: none !important;*/ + pointer-events:none; +} +.vis-hq-leftinfo { + background: #bbe9f9; /* Old browsers */ + background: rgba(182,182,182,0.6); + font-family: 'Tahoma', sans-serif; + position: absolute; + z-index: -1; + font-size: 12px; + border-radius: 10px; + margin-top: 5px; + padding-top: 3px; + padding-bottom: 3px; +} +.vis-hq-rightinfo { + background: #bbe9f9; /* Old browsers */ + background: rgba(182,182,182,0.6); + font-family: 'Tahoma', sans-serif; + position: absolute; + z-index: -1; + margin-top: 5px; + font-size: 12px; + border-radius: 10px; + padding-top: 3px; + padding-bottom: 3px; + left: 50%; + white-space: nowrap; +} +.vis-hq-button-base-normal { + background: #ADADAD; + background: -ms-linear-gradient(top, #ADADAD 0%, #333333 100%); + background: -moz-linear-gradient(top, #ADADAD 0%, #333333 100%); + background: -o-linear-gradient(top, #ADADAD 0%, #333333 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ADADAD), color-stop(1, #333333)); + background: -webkit-linear-gradient(top, #ADADAD 0%, #333333 100%); + background: linear-gradient(to bottom, #ADADAD 0%, #333333 100%); + border: 1px solid rgba(0,0,0,0.9) ; + box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5), + 0 0 1px 1px rgba(128,128,128,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} +.vis-hq-button-base-normal:hover { + background: #E0E0E0; + backgrounD: -ms-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + backgrounD: -moz-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + backgrounD: -o-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + backgrounD: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E0E0E0), color-stop(1, #8F8F8F)); + backgrounD: -webkit-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + backgrounD: linear-gradient(to bottom, #E0E0E0 0%, #8F8F8F 100%); + border: 1px solid rgba(0,0,0,0.4) ; + box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5), + 0 0 1px 1px rgba(128,128,128,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} +.vis-hq-button-base-on { + background: rgb(255,214,94); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1))); + background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); + border: 1px solid rgba(0,0,0,0.4) ; + box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5), + 0 0 1px 1px rgba(255,255,255,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} +.vis-hq-button-base-on:hover { + background-image: -ms-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: -moz-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: -o-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDCB28), color-stop(1, #E08600)); + background-image: -webkit-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: linear-gradient(to bottom, #FDCB28 0%, #E08600 100%); + border: 1px solid rgba(0,0,0,0.4) ; + box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5), + 0 0 1px 1px rgba(255,255,255,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} +.vis-hq-button-base-moving { + background-image: -ms-linear-gradient(top, #00ACFC 0%, #006899 100%); + background-image: -moz-linear-gradient(top, #00ACFC 0%, #006899 100%); + background-image: -o-linear-gradient(top, #00ACFC 0%, #006899 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00ACFC), color-stop(1, #006899)); + background-image: -webkit-linear-gradient(top, #00ACFC 0%, #006899 100%); + background-image: linear-gradient(to bottom, #00ACFC 0%, #006899 100%); + cursor:move; + border: 1px solid rgba(0,0,0,0.9) ; + box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5), + 0 0 1px 1px rgba(128,128,128,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} + +.vis-hq-actual-style { + font-weight: bold; + text-align: center; +} +.vis-hq-humidity-style { + text-align: center; +} +.vis-hq-readonly::before { + content: ""; + cursor: default; + display: block; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + z-index: 10; +} + +/* ------------------------ Blind styles ---------------------------*/ +.hq-blind-base { /* Basis */ + background: #fffeff; /* Old browsers */ + background: -moz-linear-gradient(top, #fffeff 0%, #8e8e90 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffeff), color-stop(100%,#8e8e90)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* IE10+ */ + background: linear-gradient(to bottom, #fffeff 0%,#8e8e90 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffeff', endColorstr='#8e8e90',GradientType=0 ); /* IE6-9 */ + box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5), + 0 0 1px 1px rgba(128,128,128,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); + overflow: visible; +} +.hq-blind-blind { + background-image:url(../img/blind.png); + background-position: 0 100%; +} +.hq-blind-blind1 { + width: 100%; + height: 100%; + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + border-style: solid; + background: rgb(173,174,178); /* Old browsers */ + background: -moz-linear-gradient(45deg, rgba(173,174,178,1) 0%, rgba(251,251,251,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(173,174,178,1)), color-stop(100%,rgba(251,251,251,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* IE10+ */ + background: linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adaeb2', endColorstr='#fbfbfb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ +} +.hq-blind-blind2 { + position: relative; + width: 100%; + height: 100%; + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + border-style: solid; + border-color: rgba(0,0,0,0); +} +.hq-blind-blind3 { + position: relative; + width: 100%; + height: 100%; + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,51,135,0.83) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,51,135,0.83))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#d4003387',GradientType=0 ); /* IE6-9 */ +} + +.hq-blind-blind4 { + position: relative; + width: 100%; + height: 100%; + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + border-style: solid; + background: rgb(221,231,243); /* Old browsers */ + background: -moz-linear-gradient(45deg, rgba(221,231,243,0.7) 0%, rgba(120,132,146,0.7) 52%, rgba(166,178,190,0.7) 68%, rgba(201,206,210,0.7) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(221,231,243,0.7)), color-stop(52%,rgba(120,132,146,0.7)), color-stop(68%,rgba(166,178,190,0.7)), color-stop(100%,rgba(201,206,210,0.7))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* IE10+ */ + background: linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde7f3', endColorstr='#c9ced2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ +} +.hq-blind-blind4-opened-left { + -moz-transform: skew(0deg,10deg) scale(0.9, 1); + -webkit-transform: skew(0deg, 10deg) scale(0.9, 1); + -o-transform: skew(0deg,10deg) scale(0.9, 1); + -ms-transform: skew(0deg,10deg) scale(0.9, 1); + transform: skew(0deg,10deg) scale(0.9, 1); + transform-origin: 0 0 +} +.hq-blind-blind4-opened-right { + -moz-transform: skew(0deg,-10deg) scale(0.9, 1); + -webkit-transform: skew(0deg, -10deg) scale(0.9, 1); + -o-transform: skew(0deg,-10deg) scale(0.9, 1); + -ms-transform: skew(0deg,-10deg) scale(0.9, 1); + transform: skew(0deg,-10deg) scale(0.9, 1); + transform-origin: 100% 0 +} +.hq-blind-blind4-opened-top, .hq-blind-blind4-tilted { + -moz-transform: skew(-10deg,0deg) scale(1, 0.9); + -webkit-transform: skew(-10deg, 0deg) scale(1, 0.9); + -o-transform: skew(-10deg,0deg) scale(1, 0.9); + -ms-transform: skew(-10deg,0deg) scale(1, 0.9); + transform: skew(-10deg,0deg) scale(1, 0.9); + transform-origin: 0 100% +} +.hq-blind-blind4-opened-bottom { + -moz-transform: skew(10deg,0deg) scale(1, 0.9); + -webkit-transform: skew(10deg, 0deg) scale(1, 0.9); + -o-transform: skew(10deg,0deg) scale(1, 0.9); + -ms-transform: skew(10deg,0deg) scale(1, 0.9); + transform: skew(10deg,0deg) scale(1, 0.9); + transform-origin: 0 0 +} + +.hq-blind-handle { + position: absolute; + border-color: #a5aaad; + border-style: solid; +} +.hq-blind-handle-bg { + background: rgb(226,226,226); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */ +} +.hq-blind-handle-tilted-bg { + background: rgb(241,231,103); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,231,103,1)), color-stop(100%,rgba(254,182,69,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */ +} + +.hq-blind-big { + position: absolute; + z-index: 901; + /*top: calc(50% - 120px); + left: calc(50% - 55px);*/ + width: 7em; + height: 18em; +} + +.hq-blind-big-slider { + border-width: 3px 2px 2px 2px; + border-color: #a5aaad; + border-style: solid; + width: 100%; + height: 100%; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; + background: rgb(221,231,243); /* Old browsers */ + background: -moz-linear-gradient(45deg, rgba(221,231,243,0.9) 0%, rgba(120,132,146,0.9) 52%, rgba(166,178,190,0.9) 68%, rgba(201,206,210,0.9) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(221,231,243,0.9)), color-stop(52%,rgba(120,132,146,0.9)), color-stop(68%,rgba(166,178,190,0.9)), color-stop(100%,rgba(201,206,210,0.9))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* IE10+ */ + background: linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde7f3', endColorstr='#c9ced2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ +} + +.hq-blind-big-button { + height: 2.5em; + width: 100%; + -moz-box-shadow:inset 0 1px 0 0 #bbdaf7; + -webkit-box-shadow:inset 0 1px 0 0 #bbdaf7; + box-shadow:inset 0 1px 0 0 #bbdaf7; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); + background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); + background-color:#79bbff; + -webkit-border-radius:15px; + -moz-border-radius:15px; + border-radius:15px; + text-indent:0; + border:1px solid #84bbf3; +} +.hq-blind-big-button-up { + background-image: url(../img/inject-bottom.png); + background-repeat: no-repeat; + background-position: center; +} + +.hq-blind-big-button-down { + background-image: url(../img/inject-top.png); + background-repeat: no-repeat; + background-position: center; +} + +/* ------------- Door --------------------------------*/ +.vis-hq-door { + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; +} +.vis-hq-door-sheet { + background: #fffeff; /* Old browsers */ + background: -moz-linear-gradient(top, #fffeff 0%, #8e8e90 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffeff), color-stop(100%,#8e8e90)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* IE10+ */ + background: linear-gradient(to bottom, #fffeff 0%,#8e8e90 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffeff', endColorstr='#8e8e90',GradientType=0 ); /* IE6-9 */ + + width: 100%; + height: 100%; +} +.vis-hq-door-empty-right, .vis-hq-door-empty-left { + width: 0; + height: 100%; +} +.vis-hq-door-handle { + position: absolute; + top: 50%; + background: #fffeff; /* Old browsers */ + background: -moz-linear-gradient(top, #fffeff 0%, #8e8e90 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffeff), color-stop(100%,#8e8e90)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* IE10+ */ + background: linear-gradient(to bottom, #fffeff 0%,#8e8e90 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffeff', endColorstr='#8e8e90',GradientType=0 ); /* IE6-9 */ + box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5), + 0 0 1px 1px rgba(128,128,128,0.8), + 0 0 0 3px rgba(0,0,0,0.1); + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + width: 4px; + height: 4px; +} +/* ------------ Lock -----------*/ +.vis-hq-biglock { + position: absolute; + z-index:1001; + background: rgb(221,231,243); /* Old browsers */ + background: -moz-linear-gradient(45deg, rgba(221,231,243,0.9) 0%, rgba(120,132,146,0.9) 52%, rgba(166,178,190,0.9) 68%, rgba(201,206,210,0.9) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(221,231,243,0.9)), color-stop(52%,rgba(120,132,146,0.9)), color-stop(68%,rgba(166,178,190,0.9)), color-stop(100%,rgba(201,206,210,0.9))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* IE10+ */ + background: linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde7f3', endColorstr='#c9ced2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + border-width: 3px 2px 2px 2px; + border-color: #a5aaad; + border-style: solid; + width: 150px; + height: 150px; + -webkit-border-radius: 75px; + -moz-border-radius: 75px; + border-radius: 75px; + +} +.vis-hq-biglock-button { + width: 28%; + height: 28%; + position: absolute; +} +.vis-hq-biglock-close { + left: 36%; + top: 12%; +} +.vis-hq-biglock-open { + left: 16%; + bottom: 18%; +} +.vis-hq-biglock-openDoor { + right: 16%; + bottom: 18%; +} +.vis-hq-biglock-button:hover { + transform: scale(1.2); +} + +/* ------------- Animation ---------------------------*/ +.animated05s { + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} +.animated1s { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated2s { + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated3s { + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes zoomIn1 { + 0% { + opacity: 0.7; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 70% { + opacity: 0; + -webkit-transform: scale3d(2.5, 2.5, 2.5); + transform: scale3d(2.5, 2.5, 2.5); + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes zoomIn2 { + 0% { + opacity: 0; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + /*29% { + opacity: 0; + }*/ + 30% { + opacity: 0.7; + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(2.5, 2.5, 2.5); + transform: scale3d(2.5, 2.5, 2.5); + } +} + +@keyframes zoomIn1 { + 0% { + opacity: 0.7; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 70% { + opacity: 0; + -webkit-transform: scale3d(2.5, 2.5, 2.5); + transform: scale3d(2.5, 2.5, 2.5); + } + 100% { + opacity: 0; + } +} +@keyframes zoomIn2 { + 0% { + opacity: 0; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + /*29% { + opacity: 0; + }*/ + 30% { + opacity: 0.7; + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(2.5, 2.5, 2.5); + transform: scale3d(2.5, 2.5, 2.5); + } +} + +.zoomIn1 { + -webkit-animation-name: zoomIn1; + animation-name: zoomIn1; +} +.zoomIn2 { + -webkit-animation-name: zoomIn2; + animation-name: zoomIn2; +} +.wave { + border: 3px solid grey; + opacity: 0.7; + border-radius: 50px; + position: relative; + display:none; +} + +@-webkit-keyframes zoomIn { + 0% { + opacity: 0.3; + -webkit-transform: scale3d(0.1, 0.1, 0.1); + transform: scale3d(0.1, 0.1, 0.1); + } + 100% { + opacity: 0.8; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes zoomIn { + 0% { + opacity: 0.3; + -webkit-transform: scale3d(0.1, 0.1, 0.1); + transform: scale3d(0.1, 0.1, 0.1); + } + 100% { + opacity: 0.8; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +.zoomIn{ + -webkit-animation-name: zoomIn; + animation-name: zoomIn; +} + +@-webkit-keyframes fadeOut { + 0% { + opacity: 0.8; + } + + 100% { + opacity: 0; + } +} + +@keyframes fadeOut { + 0% { + opacity: 0.8; + } + + 100% { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 100% { + opacity: 0.3; + -webkit-transform: scale3d(0.1, 0.1, 0.1); + transform: scale3d(0.1, 0.1, 0.1); + } +} +@keyframes zoomOut { + 0% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 100% { + opacity: 0.3; + -webkit-transform: scale3d(0.1, 0.1, 0.1); + transform: scale3d(0.1, 0.1, 0.1); + } +} +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} + +@-webkit-keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + + 40%, 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0,-4px,0); + transform: translate3d(0,-4px,0); + } +} + +@keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + + 40%, 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0,-4px,0); + transform: translate3d(0,-4px,0); + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} + +@-webkit-keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +@keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +.flash { + -webkit-animation-name: flash; + animation-name: flash; +} + +/* originally authored by Nick Pettit - https://git.spacen.net/nickpettit/glide */ + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; +} + +@-webkit-keyframes rubberBand { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes rubberBand { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.rubberBand { + -webkit-animation-name: rubberBand; + animation-name: rubberBand; +} + +@-webkit-keyframes shake { + 0%, 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +@keyframes shake { + 0%, 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + 100% { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +@keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + 100% { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +.swing { + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; +} + +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes tada { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.tada { + -webkit-animation-name: tada; + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://git.spacen.net/nickpettit/glide */ + +@-webkit-keyframes wobble { + 0% { + -webkit-transform: none; + transform: none; + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes wobble { + 0% { + -webkit-transform: none; + transform: none; + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; +} diff --git a/widgets/hqwidgets/css/hqwidgetsButtons.css b/widgets/hqwidgets/css/hqwidgetsButtons.css new file mode 100644 index 0000000..d24f4e4 --- /dev/null +++ b/widgets/hqwidgets/css/hqwidgetsButtons.css @@ -0,0 +1,544 @@ + +/* -------------- Button base --------------------- */ +.hq-button-base-normal { + background-image: -ms-linear-gradient(top, #ADADAD 0%, #333333 100%); + background-image: -moz-linear-gradient(top, #ADADAD 0%, #333333 100%); + background-image: -o-linear-gradient(top, #ADADAD 0%, #333333 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ADADAD), color-stop(1, #333333)); + background-image: -webkit-linear-gradient(top, #ADADAD 0%, #333333 100%); + background-image: linear-gradient(to bottom, #ADADAD 0%, #333333 100%); + border: 1px solid rgba(0,0,0,0.9) ; + box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5), + 0 0 1px 1px rgba(128,128,128,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} +.hq-button-base-normal:hover { + background-image: -ms-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + background-image: -moz-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + background-image: -o-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E0E0E0), color-stop(1, #8F8F8F)); + background-image: -webkit-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%); + background-image: linear-gradient(to bottom, #E0E0E0 0%, #8F8F8F 100%); + border: 1px solid rgba(0,0,0,0.4) ; + box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5), + 0 0 1px 1px rgba(128,128,128,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} +.hq-button-base-on { + background: rgb(255,214,94); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1))); + background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); + border: 1px solid rgba(0,0,0,0.4) ; + box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5), + 0 0 1px 1px rgba(255,255,255,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} +.hq-button-base-on:hover { + background-image: -ms-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: -moz-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: -o-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDCB28), color-stop(1, #E08600)); + background-image: -webkit-linear-gradient(top, #FDCB28 0%, #E08600 100%); + background-image: linear-gradient(to bottom, #FDCB28 0%, #E08600 100%); + border: 1px solid rgba(0,0,0,0.4) ; + box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5), + 0 0 1px 1px rgba(255,255,255,0.8), + 0 0 0 6px rgba(0,0,0,0.06), + 0 0 0 3px rgba(0,0,0,0.1); +} + +/* ---------------------- Button outdoor temperature */ +.hq-button-base-outtemp { + background: #e0f3fa; /* Old browsers */ + background: -moz-linear-gradient(top, #e0f3fa 0%, #b6dffd 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(100%,#b6dffd)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* IE10+ */ + background: linear-gradient(to bottom, #e0f3fa 0%,#b6dffd 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */ + border: 1px solid rgba(182,223,253,0.9) ; + box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5), + 0 0 1px 1px rgba(182,223,253,0.8), + 0 0 0 6px rgba(182,223,253,0.06), + 0 0 0 3px rgba(182,223,253,0.1); +} +.hq-button-base-outtemp:hover { + background: #bbe9f9; /* Old browsers */ + background: -moz-linear-gradient(top, #bbe9f9 0%, #94d1fc 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbe9f9), color-stop(100%,#94d1fc)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* IE10+ */ + background: linear-gradient(to bottom, #bbe9f9 0%,#94d1fc 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbe9f9', endColorstr='#94d1fc',GradientType=0 ); /* IE6-9 */ + border: 1px solid rgba(182,223,253,0.9) ; + box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5), + 0 0 1px 1px rgba(182,223,253,0.8), + 0 0 0 6px rgba(182,223,253,0.06), + 0 0 0 3px rgba(182,223,253,0.1); +} + +/* ---------------------- Button indoor temperature */ +.hq-button-base-intemp { + background: #f6e6b4; /* Old browsers */ + background: -moz-linear-gradient(top, #f6e6b4 0%, #eaac60 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#eaac60)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* IE10+ */ + background: linear-gradient(to bottom, #f6e6b4 0%,#eaac60 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#eaac60',GradientType=0 ); /* IE6-9 */ + border: 1px solid rgba(232,158,69,0.9) ; + box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5), + 0 0 1px 1px rgba(232,158,69,0.8), + 0 0 0 6px rgba(232,158,69,0.06), + 0 0 0 3px rgba(232,158,69,0.1); +} +.hq-button-base-intemp:hover { + background: #f4d169; /* Old browsers */ + background: -moz-linear-gradient(top, #f4d169 0%, #e89e45 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4d169), color-stop(100%,#e89e45)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* IE10+ */ + background: linear-gradient(to bottom, #f4d169 0%,#e89e45 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d169', endColorstr='#e89e45',GradientType=0 ); /* IE6-9 */ + border: 1px solid rgba(232,158,69,0.9) ; + box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5), + 0 0 1px 1px rgba(232,158,69,0.8), + 0 0 0 6px rgba(232,158,69,0.06), + 0 0 0 3px rgba(232,158,69,0.1); +} + +/* -------------- Button red --------------------- */ +.hq-button-red-normal { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); + background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%); + background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%); + background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%); + background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%); + background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0); + background-color:#ededed; +} + +.hq-button-red-active { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100)); + background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0); + + background-color:#fe1a00; +} +.hq-button-red-normal, .hq-button-red-active { + -moz-box-shadow:inset 0px 1px 0px 0px #333333; + -webkit-box-shadow:inset 0px 1px 0px 0px #333333; + box-shadow:inset 0px 1px 0px 0px #333333; + + border:1px solid #dcdcdc; + + display:inline-block; + color:#777777; + font-family:arial; + font-size:15px; + font-weight:bold; + text-decoration:none; + + text-shadow:0px 1px 0px #ffffff; +} + +.hq-button-red-normal:hover { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); + background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%); + background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%); + background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%); + background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%); + background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0); + + background-color:#dfdfdf; +} +.hq-button-red-active:hover { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00)); + background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0); + + background-color:#ce0100; +} +/* -------------- Button no background --------------------- */ + +.hq-button-no-background { + background:none; +} + +/* -------------- Button green --------------------- */ +.hq-button-green-normal, .hq-button-green-active { + -moz-box-shadow:inset 3px 2px 7px 0px #d9fbbe; + -webkit-box-shadow:inset 3px 2px 7px 0px #d9fbbe; + box-shadow:inset 3px 2px 7px 0px #d9fbbe; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52) ); + background:-moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52'); + background-color:#b8e356; + border:1px solid #83c41a; + display:inline-block; + color:#ffffff; +} + +.hq-button-green-active { + position:relative; + top:1px; +} + +.hq-button-green-normal:hover, +.hq-button-green-active:hover{ + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356) ); + background:-moz-linear-gradient( center top, #a5cc52 5%, #b8e356 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356'); + background-color:#a5cc52; +} + +/* most of them taken here: http://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations*/ +/* ---------------------------- Button metall ----------------------------- */ +.hq-button-metall-normal { + /*display: block;*/ + background: #434343; +} +.hq-button-metall-active { + /*display: block;*/ + background: #434343; +} + +.hq-button-metall-normal, .hq-button-metall-active { + /*display: block;*/ + background-color: #434343; + background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); + background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); + background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); + background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); + background-image: linear-gradient(100% 100% 90deg, #515151, #7A7A7A); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#515151)); + border: none; + border-top: 3px solid #c2c2c2; + /*border-radius*/ + -webkit-border-radius: 40px; + -moz-border-radius: 40px; + border-radius: 40px; + /*box-shadow*/ + -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222; + -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222; + box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222; + padding: 10px; + text-shadow: 0 1px 0 rgba(255,255,255,0.2); + margin-right: 10px; + text-decoration: none; + color: #242424; + background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), + -webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), + -webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), + -webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), + -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%), + -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), + -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), + -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%); +} + +.hq-button-metall-active { + border-top: 0px solid #dde1e7; + /*box-shadow*/ + -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa; + -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa; + box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa; + /*transform*/ + -webkit-transform: translateY(4px); + -moz-transform: translateY(4px); + -ms-transform: translateY(4px); + -o-transform: translateY(4px); + transform: translateY(4px); +} + +.hq-button-metall-normal:hover, .hq-button-metall-active:hover { + color: #00aeff; + text-shadow: -1px -2px 1px #000; +} + +.hq-button-metall-normal:before, +.hq-button-metall-normal:after, +.hq-button-metall-active:before, +.hq-button-metall-active:after { + content: ""; + top: 0; + left: 0; + position: absolute; + width: inherit; + height: inherit; + /*border-radius*/ + -webkit-border-radius: inherit; + -moz-border-radius: inherit; + border-radius: inherit; + /* fake conical gradients */ + background-image: -webkit-radial-gradient( 50% 0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), + -webkit-radial-gradient( 50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), + -webkit-radial-gradient( 0% 50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), + -webkit-radial-gradient( 100% 50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%); +} + +.hq-button-metall-normal:before, .hq-button-metall-active:before{ + /*transform*/ + -webkit-transform: rotate( 65deg); + -moz-transform: rotate( 65deg); + -ms-transform: rotate( 65deg); + -o-transform: rotate( 65deg); + transform: rotate( 65deg); +} +.hq-button-metall-normal:after, .hq-button-metall-active:after { + /*transform*/ + -webkit-transform: rotate(-65deg); + -moz-transform: rotate(-65deg); + -ms-transform: rotate(-65deg); + -o-transform: rotate(-65deg); + transform: rotate(-65deg); +} + +/* ------------------------------ Glossy buttons -------------------------------------- */ +.hq-button-glossy-blue { + background: #94c4fe; + background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#94c4fe), color-stop(100%,#d3f6fe)); + background: -webkit-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%); + background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%); + background: -o-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%); + background: -ms-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%); + background: linear-gradient(to bottom, #94c4fe 31%,#d3f6fe 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 ); + border: 1px solid #4864a9; +} + +.hq-button-glossy-green { + background: #54bc3e; + background: -moz-linear-gradient(top, #54bc3e 0%, #aee850 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54bc3e), color-stop(100%,#aee850)); + background: -webkit-linear-gradient(top, #54bc3e 0%,#aee850 100%); + background: -o-linear-gradient(top, #54bc3e 0%,#aee850 100%); + background: -ms-linear-gradient(top, #54bc3e 0%,#aee850 100%); + background: linear-gradient(to bottom, #54bc3e 0%,#aee850 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54bc3e', endColorstr='#aee850',GradientType=0 ); + border: 1px solid #1d6511; +} + +.hq-button-glossy-blue, +.hq-button-glossy-green { + width: 100%; + height: 100%; + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + + color: #000; + text-shadow: 1px 1px 0px rgba(255,255,255,.5); + + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2); +} + +.hq-button-glossy-blue:hover, +.hq-button-glossy-green:hover { + -webkit-filter: brightness(.9); + -moz-filter: brightness(.9); + -ms-filter: brightness(.9); + filter: brightness(.9); +} + +.hq-button-glossy-blue:before, +.hq-button-glossy-green:before { + content: ""; + width: calc(100% - 10px); + height: 50%; + + display: block; + position: absolute; + left: 5px; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + + background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0))); + background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%); + background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%); + background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%); + background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); +} + +/* ---------------- Nice buttons ---------------------------------- */ +.hq-button-nice-blue { + background: #108FE8; + box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; +} +.hq-button-nice-blue:hover { + background: #333; + box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; +} +.hq-button-nice-red { + background: #E53030; + box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; +} +.hq-button-nice-red:hover { + background: #333; + box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; +} +.hq-button-nice-green { + background: #0EC518; + box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; +} +.hq-button-nice-green:hover { + background: #333; + box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; +} +.hq-button-nice-yellow { + background: #FFC334; + box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; +} +.hq-button-nice-yellow:hover { + background: #333; + box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; +} +.hq-button-nice-grey { + background: #555555; + box-shadow: 0 -2px 0 3px #3b3b3b inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; +} +.hq-button-nice-grey:hover { + background: #333; + box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; +} +.hq-button-nice-blue, .hq-button-nice-red, .hq-button-nice-green, .hq-button-nice-yellow, .hq-button-nice-grey { + border: 3px solid #fff; +} + +/* ------------------------- Push butons ------------------------------------- */ +.hq-button-push-red { + text-shadow:-1px -1px 0 #A84155; + background: #D25068; + border:1px solid #D25068; + + background-image:-webkit-linear-gradient(top, #F66C7B, #D25068); + background-image:-moz-linear-gradient(top, #F66C7B, #D25068); + background-image:-ms-linear-gradient(top, #F66C7B, #D25068); + background-image:-o-linear-gradient(top, #F66C7B, #D25068); + background-image:linear-gradient(to bottom, #F66C7B, #D25068); + + -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); + -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); + box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); +} + +.hq-button-push-green { + text-shadow:-1px -1px 0 #2C7982; + background: #3EACBA; + border:1px solid #379AA4; + + background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA); + background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA); + background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA); + background-image:-o-linear-gradient(top, #48C6D4, #3EACBA); + background-image:linear-gradient(top, #48C6D4, #3EACBA); + + -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5); + -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5); + box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5); +} + +.hq-button-push-red, +.hq-button-push-green +{ + text-align:center; + color:#FFF; + text-decoration:none; + font-family:'Oswald', Helvetica; + -webkit-border-radius:5px; + -moz-border-radius:5px; + border-radius:5px; +} + +.hq-button-push-red:before, +.hq-button-push-green:before +{ + background:#f0f0f0; + background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0)); + + -webkit-border-radius:5px; + -moz-border-radius:5px; + border-radius:5px; + + -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; + -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; + box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; + + position: absolute; + content: ""; + left: -6px; right: -6px; + top: -6px; bottom: -10px; + z-index: -1; +} + +.hq-button-push-red:active, +.hq-button-push-green:active +{ + -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; + margin-top: 5px; +} +.hq-button-push-red:active:before, +.hq-button-push-green:active:before{ + top: -6px; + bottom: -11px; + content: ""; +} + +.hq-button-push-red:hover { + background: #F66C7B; + background-image:-webkit-linear-gradient(top, #D25068, #F66C7B); + background-image:-moz-linear-gradient(top, #D25068, #F66C7B); + background-image:-ms-linear-gradient(top, #D25068, #F66C7B); + background-image:-o-linear-gradient(top, #D25068, #F66C7B); + background-image:linear-gradient(top, #D25068, #F66C7B); +} + +.hq-button-push-green:hover { + background: #48C6D4; + background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4); + background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4); + background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4); + background-image:-o-linear-gradient(top, #3EACBA, #48C6D4); + background-image:linear-gradient(top, #3EACBA, #48C6D4); +} + +.hq-button-base-normal:active, +.hq-button-base-on:active, +.hq-button-base-outtemp:active, +.hq-button-base-intemp:active, +.hq-button-red-normal:active, +.hq-button-red-active:active, +.hq-button-green-normal:active, +.hq-button-green-active:active, +.hq-button-no-background:active +{ + transform: scale(0.95); +} diff --git a/widgets/hqwidgets/css/odometer-theme-car.css b/widgets/hqwidgets/css/odometer-theme-car.css new file mode 100644 index 0000000..bcdfc92 --- /dev/null +++ b/widgets/hqwidgets/css/odometer-theme-car.css @@ -0,0 +1,139 @@ +@import url("//fonts.googleapis.com/css?family=Arimo"); +.odometer.odometer-auto-theme, .odometer.odometer-theme-car { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-car .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.odometer.odometer-auto-theme, .odometer.odometer-theme-car { + -moz-border-radius: 0.34em; + -webkit-border-radius: 0.34em; + -o-border-radius: 0.34em; + -ms-border-radius: 0.34em; + -khtml-border-radius: 0.34em; + border-radius: 0.34em; + font-family: "Arimo", monospace; + padding: 0.15em; + background: black; + color: #eee0d3; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit { + -moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); + -webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); + -o-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); + box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(40%, #333333), color-stop(60%, #101010), color-stop(80%, #333333), color-stop(100%, #333333)); + background-image: -webkit-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); + background-image: -moz-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); + background-image: -o-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); + background-image: -ms-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); + background-image: linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); + padding: 0 0.15em; +} +.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-car .odometer-digit:first-child { + -moz-border-radius: 0.2em 0 0 0.2em; + -webkit-border-radius: 0.2em 0 0 0.2em; + -o-border-radius: 0.2em 0 0 0.2em; + -ms-border-radius: 0.2em 0 0 0.2em; + -khtml-border-radius: 0.2em 0 0 0.2em; + border-radius: 0.2em 0 0 0.2em; +} +.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-car .odometer-digit:last-child { + -moz-border-radius: 0 0.2em 0.2em 0; + -webkit-border-radius: 0 0.2em 0.2em 0; + -o-border-radius: 0 0.2em 0.2em 0; + -ms-border-radius: 0 0.2em 0.2em 0; + -khtml-border-radius: 0 0.2em 0.2em 0; + border-radius: 0 0.2em 0.2em 0; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee0d3), color-stop(40%, #eee0d3), color-stop(60%, #bbaa9a), color-stop(80%, #eee0d3), color-stop(100%, #eee0d3)); + background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); + background-image: -moz-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); + background-image: -o-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); + background-image: -ms-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); + background-image: linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); + background-color: #eee0d3; + color: black; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner { + left: 0.15em; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} diff --git a/widgets/hqwidgets/css/odometer-theme-default.css b/widgets/hqwidgets/css/odometer-theme-default.css new file mode 100644 index 0000000..571de28 --- /dev/null +++ b/widgets/hqwidgets/css/odometer-theme-default.css @@ -0,0 +1,98 @@ +.odometer.odometer-auto-theme, .odometer.odometer-theme-default { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + position: relative; +} +.odometer.odometer-auto-theme, .odometer.odometer-theme-default { + *display: inline; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { + *display: inline; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { + *display: inline; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.odometer.odometer-auto-theme, .odometer.odometer-theme-default { + font-family: "Helvetica Neue", sans-serif; + line-height: 1.1em; +} +.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value { + text-align: center; +} diff --git a/widgets/hqwidgets/css/odometer-theme-digital.css b/widgets/hqwidgets/css/odometer-theme-digital.css new file mode 100644 index 0000000..bb92519 --- /dev/null +++ b/widgets/hqwidgets/css/odometer-theme-digital.css @@ -0,0 +1,96 @@ +@import url("//fonts.googleapis.com/css?family=Wallpoet"); +.odometer.odometer-auto-theme, .odometer.odometer-theme-digital { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.odometer.odometer-auto-theme, .odometer.odometer-theme-digital { + background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(139, 245, 165, 0.4)), color-stop(100%, #000000)); + background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000); + background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000); + background-image: -o-radial-gradient(rgba(139, 245, 165, 0.4), #000000); + background-image: -ms-radial-gradient(rgba(139, 245, 165, 0.4), #000000); + background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000); + background-color: black; + font-family: "Wallpoet", monospace; + padding: 0 0.2em; + line-height: 1.1em; + color: #8bf5a5; +} +.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-digital .odometer-digit + .odometer-digit { + margin-left: 0.1em; +} diff --git a/widgets/hqwidgets/css/odometer-theme-minimal.css b/widgets/hqwidgets/css/odometer-theme-minimal.css new file mode 100644 index 0000000..8bab775 --- /dev/null +++ b/widgets/hqwidgets/css/odometer-theme-minimal.css @@ -0,0 +1,90 @@ +.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + position: relative; +} +.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal { + *display: inline; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit { + *display: inline; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer { + *display: inline; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} diff --git a/widgets/hqwidgets/css/odometer-theme-plaza.css b/widgets/hqwidgets/css/odometer-theme-plaza.css new file mode 100644 index 0000000..566a877 --- /dev/null +++ b/widgets/hqwidgets/css/odometer-theme-plaza.css @@ -0,0 +1,108 @@ +@import url("//fonts.googleapis.com/css?family=Arimo"); +.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza { + -moz-border-radius: 0.15em; + -webkit-border-radius: 0.15em; + -o-border-radius: 0.15em; + -ms-border-radius: 0.15em; + -khtml-border-radius: 0.15em; + border-radius: 0.15em; + background-color: #f0f8ff; + font-family: "Helvetica Neue", sans-serif; + font-weight: 100; + padding: 0 0.12em; + line-height: 1.2em; + font-size: 1.2em; + background-size: 16px 16px; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit { + -moz-border-radius: 0.1em; + -webkit-border-radius: 0.1em; + -o-border-radius: 0.1em; + -ms-border-radius: 0.1em; + -khtml-border-radius: 0.1em; + border-radius: 0.1em; + padding: 0 0.03em; + color: #648baf; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner { + left: 0.03em; +} diff --git a/widgets/hqwidgets/css/odometer-theme-slot-machine.css b/widgets/hqwidgets/css/odometer-theme-slot-machine.css new file mode 100644 index 0000000..fac9e0f --- /dev/null +++ b/widgets/hqwidgets/css/odometer-theme-slot-machine.css @@ -0,0 +1,144 @@ +@import url("//fonts.googleapis.com/css?family=Rye"); +.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine { + -moz-border-radius: 0.34em; + -webkit-border-radius: 0.34em; + -o-border-radius: 0.34em; + -ms-border-radius: 0.34em; + -khtml-border-radius: 0.34em; + border-radius: 0.34em; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #ffa500)); + background-image: -webkit-linear-gradient(#ffff00, #ffa500); + background-image: -moz-linear-gradient(#ffff00, #ffa500); + background-image: -o-linear-gradient(#ffff00, #ffa500); + background-image: -ms-linear-gradient(#ffff00, #ffa500); + background-image: linear-gradient(#ffff00, #ffa500); + background-color: #ffcc00; + font-family: "Rye", monospace; + padding: 0.15em; + color: #f80000; + line-height: 1.35em; + border: 0.03em solid black; + -webkit-text-stroke: 0.05em black; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit { + -moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -o-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -moz-border-radius: 0.2em; + -webkit-border-radius: 0.2em; + -o-border-radius: 0.2em; + -ms-border-radius: 0.2em; + -khtml-border-radius: 0.2em; + border-radius: 0.2em; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(20%, #ffffff), color-stop(80%, #ffffff), color-stop(100%, #cccccc)); + background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); + background-image: -moz-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); + background-image: -o-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); + background-image: -ms-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); + background-image: linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); + border: 0.03em solid #444444; + padding: 0.1em 0.15em 0; +} +.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-slot-machine .odometer-digit:first-child { + -moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -o-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); +} +.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-slot-machine .odometer-digit:last-child { + -moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -o-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); +} +.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit + .odometer-digit { + margin-left: 0.15em; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner { + padding-top: 0.08em; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value { + left: 0; + right: 0; + text-align: center; +} diff --git a/widgets/hqwidgets/css/odometer-theme-train-station.css b/widgets/hqwidgets/css/odometer-theme-train-station.css new file mode 100644 index 0000000..6074dd1 --- /dev/null +++ b/widgets/hqwidgets/css/odometer-theme-train-station.css @@ -0,0 +1,110 @@ +@import url("//fonts.googleapis.com/css?family=Economica"); +.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-spacer { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 2s; + -moz-transition: -moz-transform 2s; + -ms-transition: -ms-transform 2s; + -o-transition: -o-transform 2s; + transition: transform 2s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station { + font-family: "Economica", sans-serif; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + -moz-border-radius: 0.1em; + -webkit-border-radius: 0.1em; + -o-border-radius: 0.1em; + -ms-border-radius: 0.1em; + -khtml-border-radius: 0.1em; + border-radius: 0.1em; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(35%, #111111), color-stop(55%, #333333), color-stop(55%, #111111), color-stop(100%, #111111)); + background-image: -webkit-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); + background-image: -moz-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); + background-image: -o-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); + background-image: -ms-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); + background-image: linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); + background-color: #222222; + padding: 0 0.15em; + color: white; +} +.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit + .odometer-digit { + margin-left: 0.1em; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner { + left: 0.15em; +} diff --git a/widgets/hqwidgets/img/blind.png b/widgets/hqwidgets/img/blind.png new file mode 100644 index 0000000..e3ea8c5 Binary files /dev/null and b/widgets/hqwidgets/img/blind.png differ diff --git a/widgets/hqwidgets/img/inject-bottom.png b/widgets/hqwidgets/img/inject-bottom.png new file mode 100644 index 0000000..de0e1fa Binary files /dev/null and b/widgets/hqwidgets/img/inject-bottom.png differ diff --git a/widgets/hqwidgets/img/inject-top.png b/widgets/hqwidgets/img/inject-top.png new file mode 100644 index 0000000..94a1024 Binary files /dev/null and b/widgets/hqwidgets/img/inject-top.png differ diff --git a/widgets/hqwidgets/img/lockLocked.png b/widgets/hqwidgets/img/lockLocked.png new file mode 100644 index 0000000..e270103 Binary files /dev/null and b/widgets/hqwidgets/img/lockLocked.png differ diff --git a/widgets/hqwidgets/img/lockUnlocked.png b/widgets/hqwidgets/img/lockUnlocked.png new file mode 100644 index 0000000..31961fe Binary files /dev/null and b/widgets/hqwidgets/img/lockUnlocked.png differ diff --git a/widgets/hqwidgets/img/noise.png b/widgets/hqwidgets/img/noise.png new file mode 100644 index 0000000..cfa0135 Binary files /dev/null and b/widgets/hqwidgets/img/noise.png differ diff --git a/widgets/hqwidgets/img/openDoor.png b/widgets/hqwidgets/img/openDoor.png new file mode 100644 index 0000000..240e821 Binary files /dev/null and b/widgets/hqwidgets/img/openDoor.png differ diff --git a/widgets/hqwidgets/img/prev/Prev_hqOdometer.png b/widgets/hqwidgets/img/prev/Prev_hqOdometer.png new file mode 100644 index 0000000..df871d4 Binary files /dev/null and b/widgets/hqwidgets/img/prev/Prev_hqOdometer.png differ diff --git a/widgets/hqwidgets/img/prev/Prev_hqwidgetsCircleKnob.png b/widgets/hqwidgets/img/prev/Prev_hqwidgetsCircleKnob.png new file mode 100644 index 0000000..386d174 Binary files /dev/null and b/widgets/hqwidgets/img/prev/Prev_hqwidgetsCircleKnob.png differ diff --git a/widgets/hqwidgets/img/prev/Prev_hqwidgetsDimmer.png b/widgets/hqwidgets/img/prev/Prev_hqwidgetsDimmer.png new file mode 100644 index 0000000..0e1dc74 Binary files /dev/null and b/widgets/hqwidgets/img/prev/Prev_hqwidgetsDimmer.png differ diff --git a/widgets/hqwidgets/img/prev/Prev_hqwidgetsInTemp.png b/widgets/hqwidgets/img/prev/Prev_hqwidgetsInTemp.png new file mode 100644 index 0000000..c9fff0c Binary files /dev/null and b/widgets/hqwidgets/img/prev/Prev_hqwidgetsInTemp.png differ diff --git a/widgets/hqwidgets/img/prev/Prev_hqwidgetsOutTemp.png b/widgets/hqwidgets/img/prev/Prev_hqwidgetsOutTemp.png new file mode 100644 index 0000000..f6f64c9 Binary files /dev/null and b/widgets/hqwidgets/img/prev/Prev_hqwidgetsOutTemp.png differ diff --git a/widgets/hqwidgets/js/hqwidgets.js b/widgets/hqwidgets/js/hqwidgets.js new file mode 100644 index 0000000..fd31039 --- /dev/null +++ b/widgets/hqwidgets/js/hqwidgets.js @@ -0,0 +1,3093 @@ +/* + yunkong2.vis high quality Widget-Set + + version: "1.1.2" + + Copyright 6'2014-2018 bluefox + +*/ +'use strict'; + + +(function ( $ ) { + $.fn.scala = function (options, arg) { + if (typeof options === 'string') { + if (options === 'value') { + if (arg === null || arg === undefined) arg = '0'; + return this.each(function () { + var $this = $(this); + var $input = $this.find('.scalaInput'); + if ($input.val().toString() !== arg.toString()) { + $this.find('.scalaInput').val(arg).trigger('change'); + } + }); + } + return; + } + + function h2rgba (h, a) { + var rgb; + h = h.substring(1,7); + rgb = [ + parseInt(h.substring(0,2), 16), + parseInt(h.substring(2,4), 16), + parseInt(h.substring(4,6), 16) + ]; + + return 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + a + ')'; + } + + var settings = $.extend({ + bgColor: '#EEEEEE', + value: 0, + width: 0, + thickness: null, + unit: null, + fontSize: 24, + readOnly: false, + color: '#FFCC00', + alwaysShow: false, + hideNumber: false, + step: 1, + change: function (value) { + console.log('change ' + value); + }, + changing: function (value) {}, + onshow: function (isShow) {}, + onhide: function (isShow) {}, + click: function () { + //console.log('click'); + }, + colorize: function (color, value) { + return h2rgba(color, (value - settings.min) / (settings.max - settings.min) + 0.5) + }, + min: 0, + max: 100, + isComma: false + }, options); + + return this.each(function () { + // Do something to each element here. + var $this = $(this); + if ($this.data('scaled')) return; + $this.data('scaled', true); + $this.wrapInner('
'); + var divW = $this.width(); + var divH = $this.height(); + var divMax = ((divW > divH) ? divW : divH); + + // calculate thickness + if (!settings.width) settings.width = Math.round(divMax + 30) + ''; + if (!settings.thickness) settings.thickness = 1 - (divMax / settings.width); + + $this.prepend(''); + + var $scalaInput = $this.find('.scalaInput'); + var $scalaWrapped = $this.find('.scalaWrapped'); + + if (typeof settings.step === 'string') { + settings.step = parseFloat(settings.step.replace(',', '.') || 1); + } + + var $knobDiv = $scalaInput.knobHQ({ + release: function (v, noAck) { + $knobDiv._mouseDown = false; + + hide('release'); + + if ($knobDiv._pressTimer) { + $knobDiv._pressTimer = null; + setValue($knobDiv._oldValue); + if (settings.click) { + var newVal = settings.click($knobDiv._oldValue); + + if (newVal !== undefined) setValue(newVal); + } + } else { + // remove unit + var val = $scalaInput.val(); + if (settings.unit !== null && val.substring(val.length - settings.unit.length, val.length) === settings.unit) { + val = val.substring(0, val.length - settings.unit.length); + } + if (settings.change/* && $knobDiv._oldValue != val*/) settings.change(val, noAck); + } + }, + cancel: function () { + $knobDiv._mouseDown = false; + hide('cancel'); + // set old value + setValue($knobDiv._oldValue); + + }, + change: function (value) { + if (settings.changing) settings.changing(value); + }, + format: function (v) { + if (settings.digits !== null) v = v.toFixed(settings.digits); + if (settings.isComma && v) v = v.toString().replace('.', ','); + if (settings.unit) v = v + settings.unit; + return v; + }, + displayPrevious: true, + displayInput: !settings.hideNumber, + bgColor: settings.bgColor, + readOnly: settings.readOnly, + fgColor: settings.color, + inputColor: settings.color, + colorize: settings.colorize ? settings.colorize : undefined, + min: settings.min, + max: settings.max, + step: parseFloat(settings.step || 1) + }); + + var w = $knobDiv.width(); + $this.data('$knobDiv', $knobDiv); + + function setValue(value) { + console.log('Restore value ' + value); + setTimeout(function () { + $scalaInput.data('setByUser', true); + $scalaInput.val(value).trigger('change'); + }, 200); + } + + function hide(event){ + if (!settings.alwaysShow && !$knobDiv._mouseEnter && !$knobDiv._mouseDown) { + $knobDiv.hide(); + $scalaWrapped.show(); + if (settings.onhide) settings.onhide(false); + } + //console.log((event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')'); + } + function show(event){ + $knobDiv.show(); + if (settings.onshow) settings.onshow(true); + + //console.log((event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')'); + } + + function press(event) { + if (!$knobDiv._mouseDown) { + var val = $scalaInput.val(); + if (settings.unit !== null) { + val = val.substring(0, val.length - settings.unit.length); + } + + $knobDiv._oldValue = val; + $knobDiv._mouseDown = true; + $knobDiv._pressTimer = setTimeout(function () { + $knobDiv._pressTimer = null; + }, 300); + //console.log((new Date().getSeconds() + '.' + new Date().getMilliseconds())+ ' ' + (event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')'); + show(event); + } + } + function unpress(event) { + $knobDiv._mouseDown = false; + //console.log((new Date().getSeconds() + '.' + new Date().getMilliseconds()) + ' ' + (event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')'); + hide(event); + + if ($knobDiv._pressTimer) { + clearTimeout($knobDiv._pressTimer); + } + } + + $knobDiv.css({ + position: 'absolute', + left: '-' + ((w - divW) / 2) + 'px', + top: '-' + ((w - divH) / 2) + 'px', + 'z-index': 2, + cursor: 'pointer', + 'opacity': 0.7 + }).bind('mouseleave',function (e) { + $knobDiv._mouseEnter = false; + hide(e.type); + }).bind('mousedown', function (e) { + press(e.type); + }).bind('mouseup', function (e) { + unpress(e.type); + }).bind('mouseenter', function (e) { + $knobDiv._mouseEnter = true; + show(e.type); + }).bind('touchend', function (e) { + $knobDiv._mouseEnter = false; + unpress(e.type); + }); + if (!settings.alwaysShow) { + $knobDiv.hide(); + } + + $this.bind('mouseenter', function (e) { + $knobDiv._mouseEnter = true; + show(e.type); + }).bind('touchstart', function (e) { + if (e.simulated) { + e.preventDefault(); + return; + } + press(e.type); + var event = $.Event(e.type, {simulated: true, originalEvent: {touches: [{pageX: e.originalEvent.touches[e.originalEvent.touches.length - 1].pageX, pageY: e.originalEvent.touches[e.originalEvent.touches.length - 1].pageY}]}} ); + $knobDiv.find('canvas').trigger(event); + e.preventDefault(); + }).bind('mousedown', function (e) { + if (e.simulated) { + e.preventDefault(); + return; + } + press(e.type); + var event = $.Event(e.type, {simulated: true, pageX: e.pageX, pageY: e.pageY}); + $knobDiv.find('canvas').trigger(event); + e.preventDefault(); + }); + + $scalaInput.bind('focusout', function (e) { + $knobDiv._mouseEnter = false; + hide(e.type) + }).bind('focusin', function (e) { + unpress(e.type); + }).css({ + 'font-size': settings.fontSize, + cursor: 'pointer', + '-webkit-touch-callout': 'none', + '-webkit-user-select': 'none', + '-khtml-user-select': 'none', + '-moz-user-select': 'none', + '-ms-user-select': 'none', + 'user-select': 'none' + }).prop('readonly', true); + }); + }; + + $.fn.shineCheckbox = function (options, arg) { + if (typeof options === 'string') { + if (options === 'value') { + return this.each(function () { + var $this = $(this); + var f = parseFloat(arg); + var val; + if (f.toString() == arg) { + val = f > 0; + } else { + val = arg === 'true' || arg === true; + } + if (val != $this.prop('checked')) { + $this.data('update', true); + $this.prop('checked', val).trigger('change'); + } + }); + } + return; + } + + if (!options) options = {}; + + var settings = { + backgroundCheckbox: '',//-webkit-linear-gradient(top, #fe9810 0%,#e75400 61%,#e75400 91%,#ea8810 100%)", + backgroundButton: '',//"-webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);", + checkboxSize: options.checkboxSize || 'big', + checkboxColor: options.checkboxColor || 'grey', + checkboxColorOn: options.checkboxColorOn || options.checkboxColor || 'orange', + readOnly: options.readOnly || false + }; + + return this.each(function () { + // Do something to each element here. + var $this = $(this); + if ($this.data('shineCheckbox')) return; + $this.data('shineCheckbox', true); + $this.hide(); + var checkboxStyle = 'background: ' + settings.backgroundCheckbox; + var buttonStyle = 'background: ' + settings.backgroundButton; + var color = $this.prop('checked') ? settings.checkboxColorOn : settings.checkboxColor; + + $this.wrap('
'); + $this.change(function () { + //console.log('change ' + $this.prop('checked')); + var color; + if ($this.prop('checked')) { + color = settings.checkboxColorOn; + setTimeout(function () { + $this.parent().addClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-button-active'); + $this.parent().parent().removeClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColor + '-wrap').addClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-wrap'); + }, 100); + } else { + color = settings.checkboxColor; + $this.parent().removeClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-button-active'); + $this.parent().parent().removeClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-wrap').addClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColor + '-wrap'); + } + }); + + if (!settings.readOnly) { + $this.parent().parent().click(function () { + //console.log($this.prop('checked')); + $this.prop('checked', !$this.prop('checked')).trigger('change'); + }); + } + + if ($this.prop('checked')) $this.parent().addClass('checkbox-' + settings.checkboxSize + '-' + color + '-button-active'); + }); + }; + + // possible options: waves wobble tada swing shake rubberBand pulse flash bounce + $.fn.animateDiv = function (effect, options) { + return this.each(function () { + // Do something to each element here. + var $this = $(this); + options = options || {}; + effect = effect || 'waves'; + + if (options.speed != 1 && options.speed != 2 && options.speed != 2) options.speed = 1; + + if (effect === 'waves') { + var borderThickness = (options.tickness || 3) - 1; + var border = ';border: ' + borderThickness + 'px ' + (options.style || 'solid') +' ' + (options.color || 'grey'); + + var text = '
'; + $this.prepend(text); + $this.prepend(text.replace('wave1', 'wave2')); + + $this.find('.wave1').show().addClass('animated' + options.speed + 's zoomIn1'); + $this.find('.wave2').show().addClass('animated' + options.speed + 's zoomIn2'); + + setTimeout(function () { + $this.find('.wave1').remove(); + $this.find('.wave2').remove(); + }, 2050); + } else { + $this.addClass('animated' + options.speed + 's ' + effect); + setTimeout(function () { + $this.removeClass('animated' + options.speed + 's ' + effect); + }, 2100); + } + }); + }; + + $.fn.popupShow = function ($div, options, callback) { + + if (typeof options === 'function') { + callback = options; + options = null; + } + options = options || {}; + options.effect = options.effect || 'zoomIn'; + options.speed = options.speed || '05'; + options.relative = options.relative || false; + + return this.each(function () { + // Do something to each element here. + var $this = $(this); + if (!$div) { + console.log('no div'); + return; + } + var offset = $this.position(); + var eTop = options.relative ? 0 : offset.top; //get the offset top of the element + var eLeft = options.relative ? 0 : offset.left; //get the offset top of the element + + var dh = $div.css({opacity: 0}).show().height(); + var dw = $div.width(); + // calculate center + //var x = $this.width(); + //var y = $this.height(); + var zindex = $div.css('z-index'); + zindex = options.zindex || ((zindex === 'auto') ? 1 : (zindex || 0) + 1); + $div.css({position: 'absolute', left: eLeft + ($this.width() - dw) / 2, top: eTop + ($this.height() - dh) / 2, 'z-index': zindex}); + setTimeout(function () { + $div.addClass('animated' + options.speed + 's ' + options.effect); + }, 0); + setTimeout(function () { + $div.removeClass('animated' + options.speed + 's ' + options.effect).css({opacity: 1}); + if (callback) callback(); + }, (options.speed === '05') ? 550 : parseInt(options.speed, 10) * 1000 + 50); + }); + }; + $.fn.popupHide = function ($div, options, callback) { + if (typeof $div === 'function') { + callback = $div; + $div = null; + } + if (typeof options === 'function') { + callback = options; + options = null; + } + options = options || {}; + options.effect = options.effect || 'zoomOut'; + options.speed = options.speed || '05'; + + return this.each(function () { + // Do something to each element here. + if (!$div) { + $div = $(this); + } + setTimeout(function () { + $div.addClass('animated' + options.speed + 's ' + options.effect); + }, 0); + setTimeout(function () { + $div.removeClass('animated' + options.speed + 's ' + options.effect); + $div.hide(); + if (callback) callback(); + }, (options.speed === '05') ? 550 : parseInt(options.speed, 10) * 1000 + 50); + }); + }; + + $.fn.makeSlider = function (options, onChange, onIdle) { + if (options === 'hide') { + return this.each(function () { + var $this = $(this); + var timer = $this.data('hideTimer'); + if (timer) clearTimeout(timer); + $this.data('hideTimer', null); + $this.hide(); + }); + } else if (options === 'show') { + return this.each(function () { + var $this = $(this).show(); + var hideTimer = $this.data('hideTimer'); + + options = $this.data('options'); + + if (onChange !== undefined) { + if (options.invert) onChange = options.max - onChange + options.min; + $this.slider('value', onChange); + } + + if (hideTimer) clearTimeout(hideTimer); + + if (options.timeout) { + $this.data('hideTimer', setTimeout(function () { + $this.data('hideTimer', null); + if (options.onIdle) options.onIdle(); + }, options.timeout)); + } + }); + } + if (typeof options === 'string') { + if (options === 'restart') { + return this.each(function () { + var $this = $(this); + var options = $this.data('options'); + if (options.timeout) { + $this.data('hideTimer', setTimeout(function () { + if (options.onIdle) options.onIdle(); + }, options.timeout)); + } + }); + } + return; + } + + if (typeof options === 'function') { + onIdle = onChange; + onChange = options; + options = null; + } + + options = options || {}; + + options.timeout = (options.timeout === undefined) ? 2000 : options.timeout; + options.min = (options.min === undefined) ? 0 : options.min; + options.max = (options.max === undefined) ? 100 : options.max; + options.value = (options.value === undefined) ? options.max : options.value; + options.show = (options.show === undefined) ? true : options.show; + options.onIdle = onIdle; + options.onChange = onChange; + + if (options.invert) { + options.value = options.max - options.value + options.min; + } + + return this.each(function () { + var $this = $(this); + + if (options.timeout && options.show) { + $this.data('hideTimer', setTimeout(function () { + $this.data('hideTimer', null); + if (onIdle) onIdle(); + }, options.timeout)); + } + + $this.data('options', options); + + $this.slider({ + orientation: "vertical", + range: "max", + min: options.min, + max: options.max, + value: options.value, + start: function () { + var timer = $this.data('hideTimer'); + if (timer) { + clearTimeout(timer); + $this.data('hideTimer', null); + } + }, + stop: function (event, ui) { + var hideTimer = $this.data('hideTimer'); + + if (hideTimer) clearTimeout(hideTimer); + + if (options.onChange) { + var val = ui.value; + if (options.invert) { + val = options.max - ui.value + options.min; + } + + options.onChange(val); + } + + if (options.timeout) { + $this.data('hideTimer', setTimeout(function () { + $this.data('hideTimer', null); + if (options.onIdle) options.onIdle(); + }, options.timeout)); + } + } + }); + + $this.find('.ui-slider-range').removeClass("ui-widget-header").addClass('hq-blind-blind').css({'background-position': '0% 100%'}); + }); + }; + + $.fn.batteryIndicator = function (options, args) { + if (typeof options === 'string') { + if (options === 'show') { + return this.each(function () { + var $this = $(this); + if (args === undefined) args = true; + + if (args) { + $this.find('.vis-hq-battery').show(); + } else { + $this.find('.vis-hq-battery').hide(); + } + }); + } else + if (options === 'hide') { + return this.each(function () { + $(this).find('.vis-hq-battery').hide(); + }); + } + return; + } + + options = options || {}; + options.color = options.color || '#FF5555'; + options.angle = (options.angle !== undefined) ? options.angle : -90; + options.size = options.size || 32; + options.title = options.title || ''; + + return this.each(function () { + var $this = $(this); + + $this.data('options', options); + if ($this.find('.vis-hq-battery').length) return; + + $this.append('
' + + '' + + '' + + '' + + '
'); + if (!options.show) { + $this.find('.vis-hq-battery').hide(); + } + }); + }; + + $.fn.popupDialog = function (options) { + return this.each(function () { + var $this = $(this); + var $dialog; + // timeout: data.dialog_timeout, + + var dialog = $this.data('dialog'); + if (!dialog) { + if (typeof options === 'string') { + console.log('Show prior init'); + return; + } + var text = ''; + $this.append(text); + $dialog = $this.find('.vis-hq-dialog'); + + $this.data('dialog', $dialog[0]); + + var dialogButtons = [ + { + text: _('Ok'), + click: function () { + $dialog.dialog('close'); + }, + id: 'ok' + } + ]; + + dialogButtons[_('Ok')] = function () { + $dialog.dialog('close'); + }; + if (options.timeout) { + dialogButtons.unshift( { + id: 'donthide', + text: false, + icons: {primary: 'ui-icon-pin-w'}, + click: function () { + $dialog.data('no-timeout', !$dialog.data('no-timeout')); + if ($dialog.data('no-timeout')) { + $(this).parent().find('#donthide').addClass('ui-state-error').button({ + icons: {primary: 'ui-icon-pin-s'} + }); + var timeout = $dialog.data('timeout'); + if (timeout) { + clearTimeout(timeout); + $dialog.data('timeout', null); + } + } else { + $(this).parent().find('#donthide').removeClass('ui-state-error').button({ + icons: {primary: 'ui-icon-pin-w'} + }); + $dialog.data('timeout', setTimeout(function () { + $dialog.dialog('close'); + }, data.timeout)); + } + } + }); + } + $dialog.dialog({ + autoOpen: options.open || false, + width: options.width || 800, + height: options.height || 400, + modal: options.modal === undefined ? true : !!options.modal, + title: options.title || _('Chart'), + show: { + effect: options.effect, + duration: 500 + }, + open: function (event, ui) { + $dialog.height(options.height || 400); + $(this).parent().css('top', ($(window).height() - $(this).parent().height()) / 2); + + $(this).parent().find('#donthide').css({width: 37, height: 37}); + $(this).parent().find("#ok").focus(); + if (options.effect) { + setTimeout(function () { + $dialog.html(options.content || ''); + }, 500); + } else { + $dialog.html(options.content || ''); + } + if (options.timeout && !$dialog.data('no-timeout')) { + $dialog.data('timeout', setTimeout(function () { + $dialog.dialog('close'); + }, options.timeout)); + } + //$('[aria-describedby="dialog_delete"]').css('z-index', 11002); + //$('.ui-widget-overlay').css('z-index', 1001); + }, + close: function () { + $dialog.html(''); + var timeout = $dialog.data('timeout'); + if (timeout) { + clearTimeout(timeout); + $dialog.data('timeout', null); + } + }, + buttons: dialogButtons + }); + $dialog.data('data', options); + } else { + $dialog = $(dialog); + } + var data = $dialog.data('data'); + + if (typeof options === 'string') { + switch (options) { + case 'show': + $dialog.dialog('open'); + break; + + case 'hide': + $dialog.dialog('close'); + break; + + default: + console.log('Unknown command ' + options); + break; + } + } + }); + }; +}(jQuery)); + +// Add words for bars +if (vis.editMode) { + $.extend(true, systemDictionary, { + "circleWidth": {"en": "Сircle width", "de": "Kreisbreite", "ru": "Ширина дуги"}, + "showValue": {"en": "Show value", "de": "Wert anzeigen", "ru": "Показать значение"}, + "alwaysShow": {"en": "Always show circle", "de": "Kreis immer zeigen", "ru": "Показывать круг всегда"}, + "iconName": {"en": "Icon", "de": "Kleinbild", "ru": "Миниатюра"}, + "iconOn": {"en": "Active icon", "de": "Aktivbild", "ru": "Активная миниатюра"}, + "btIconWidth": {"en": "Icon width", "de": "Bildbreite", "ru": "Ширина миниатюры"}, + "offsetAuto": {"en": "Auto positioning", "de": "Positionieren(Auto)", "ru": "Автоматическое позиционирование"}, + "leftOffset": {"en": "Left offset", "de": "Offset links", "ru": "Сдвиг слева"}, + "topOffset": {"en": "Top offset", "de": "Offset von Oben", "ru": "Сдвиг сверху"}, + "group_leftRight": {"en": "Descriptions", "de": "Beschreibungen", "ru": "Подписи"}, + "hoursLastAction": {"en": "Hide last action after(hrs)", "de": "Ausblenden letze Anderungszeit nach(Std)", "ru": "Скрыть последнее изменение(часов)"}, + "timeAsInterval": {"en": "Time as interval", "de": "Zeit als Intervall", "ru": "Время, как интервал"}, + "descriptionLeft": {"en": "Description (left)", "de": "Beschreibung (links)", "ru": "Подпись (слева)"}, + "descriptionLeftDisabled": {"en": "No description (left)", "de": "Keine Beschreibung (links)", "ru": "Без подписи (слева)"}, + "infoLeftFontSize": {"en": "Left font size", "de": "Schriftgrosse links", "ru": "Размер шрифта слева"}, + "infoRight": {"en": "Description (right)", "de": "Beschreibung (rechts)", "ru": "Подпись (справа)"}, + "infoFontRightSize": {"en": "Right font size", "de": "Schriftgrosse rechts", "ru": "Размер шрифта справа"}, + "group_styles": {"en": "Styles", "de": "Stil", "ru": "Стили"}, + "styleNormal": {"en": "Normal", "de": "Normal", "ru": "Нормальный"}, + "styleActive": {"en": "Active", "de": "Aktiv", "ru": "Активный"}, + "usejQueryStyle": {"en": "Use jQuery Styles", "de": "jQuery Stil anwenden", "ru": "Применить jQuery стили"}, + "changeEffect": {"en": "Change effect", "de": "Anderungseffekt", "ru": "Эффект при изменении"}, + "waveColor": {"en": "Wave color", "de": "Wellenfarbe", "ru": "Цвет волн"}, + "testActive": {"en": "Test", "de": "Test", "ru": "Тест"}, + "group_value": {"en": "Value", "de": "Wert", "ru": "Значение"}, + "unit": {"en": "Unit", "de": "Einheit", "ru": "Единицы"}, + "readOnly": {"en": "Read only", "de": "Nur lesend", "ru": "Не изменять"}, + "group_center": {"en": "Center", "de": "Zentrum", "ru": "Центр"}, + "caption": {"en": "Caption", "de": "Beschriftung", "ru": "Подпись"}, + "captionOn": {"en": "Caption active", "de": "Beschriftung bei aktiv", "ru": "Подпись когда активно"}, + "hideNumber": {"en": "Hide number", "de": "Nummer ausblenden", "ru": "Скрыть число"}, + "group_arc": {"en": "Arc", "de": "Bogen", "ru": "Дуга"}, + "angleOffset": {"en": "Angle offset", "de": "Winkeloffset", "ru": "Сдвиг дуги"}, + "angleArc": {"en": "Angle arc", "de": "Bogenwinkel", "ru": "Угол дуги"}, + "displayPrevious": {"en": "Display previous", "de": "Letztes Wert zeigen", "ru": "Показывать предыдущее значение"}, + "cursor": {"en": "Cursor", "de": "Griff", "ru": "Ручка"}, + "thickness": {"en": "Thickness", "de": "Dicke", "ru": "Толщина"}, + "bgcolor": {"en": "Background color", "de": "Hintergrundfarbe", "ru": "Цвет фона"}, + "linecap": {"en": "Line cap", "de": "Linienende", "ru": "Округлое окончание"}, + "anticlockwise": {"en": "Anticlockwise", "de": "Gegenuhrzeigersinn", "ru": "Против часовой стрелки"}, + "oid-battery": {"en": "Battery object ID", "de": "Battery ObjektID", "ru": "ID батарейного индикатора"}, + "oid-signal": {"en": "Signal object ID", "de": "Signal ObjektID", "ru": "ID качества сигнала"}, + "oid-humidity": {"en": "Humidity ID", "de": "Luftfeuchtigkeit ID", "ru": "ID влажности"}, + "oid-drive": {"en": "Valve ID", "de": "Ventil ID", "ru": "ID вентиля"}, + "oid-actual": {"en": "Actual temperature ID", "de": "Ist ID", "ru": "ID актуальной температуры"}, + "group_chart": {"en": "Chart", "de": "Grafik", "ru": "График"}, + "dialog_effect": {"en": "Show effect", "de": "Anzeigeeffekt", "ru": "Эффект открытия"}, + "dialog_timeout": {"en": "Hide timeout(ms)", "de": "Zumachen nach(ms)", "ru": "Закрыть после(мс)"}, + "dialog_open": {"en": "Test open", "de": "Testen", "ru": "Тест"}, + "border_width": {"en": "Border width", "de": "Rahmenbreite", "ru": "Ширина рамы"}, + "slide_count": {"en": "Slides count", "de": "Flügelanzahl", "ru": "Кол-во створок"}, + "hide_timeout": {"en": "Timeout for hide", "de": "Timeout für ", "ru": "Интервал для скрытия"}, + "group_slides": {"en": "Slides", "de": "Flügel", "ru": "Створка"}, + "slide_type": {"en": "Slide type", "de": "Flügeltyp", "ru": "Тип створки"}, + "oid-slide-sensor": {"en": "Slide sensor", "de": "Fensterblatt-Sensor", "ru": "Сенсор на створке"}, + "oid-slide-sensor-lowbat": {"en": "Slide sensor lowbat", "de": "FB-Sensor lowbat", "ru": "Сенсор на створке (lowbat)"}, + "oid-slide-handle": {"en": "Slide handle", "de": "Griff-Sensor", "ru": "Сенсор на ручке"}, + "oid-slide-handle-lowbat": {"en": "Slide handle lowbat", "de": "Griff-Sensor lowbat", "ru": "Сенсор на ручке (lowbat)"}, + "door_type": {"en": "Door swing", "de": "Türtyp", "ru": "Тип двери"}, + "noAnimate": {"en": "No animation", "de": "Keine Animation", "ru": "Не анимировать"}, + "popupHorizontalPos": {"en": "Horizontal popup position", "de": "Horizontale PopUp Position", "ru": "Горизонтальное положение"}, + "popupVerticalPos": {"en": "Vertical popup position", "de": "Vertikale PopUp Position", "ru": "Вертикальное положение"}, + "infoColor": {"en": "Text color", "de": "Textfarbe", "ru": "Цвет текста"}, + "infoBackground": {"en": "Background", "de": "Hintergrund", "ru": "Цвет фона"}, + "midTextColor": {"en": "Middle text color", "de": "Textfarbe Mitte", "ru": "Цвет текста в середине"}, + "pushButton": {"en": "Push-Button", "de": "Taster", "ru": "Кнопка"}, + "big": {"en": "big", "de": "groß", "ru": "большой"}, + "small": {"en": "small", "de": "klein", "ru": "маленький"}, + "orange": {"en": "orange", "de": "orange", "ru": "оранжевый"}, + "blue": {"en": "blue", "de": "blau", "ru": "синий"}, + "green": {"en": "green", "de": "grün", "ru": "зелёный"}, + "grey": {"en": "grey", "de": "grau", "ru": "серый"}, + "show_value": {"en": "Show value", "de": "Wert anzeigen", "ru": "Показывать значение"}, + "staticValue": {"en": "Static value", "de": "Statisches Wert", "ru": "Статичное значение"}, + "staticValue_tooltip": { + "en": "Static value used if no Object ID set", + "de": "Statisches Wert wird nur dann verwendet,\x0Afalls keine ObjektID gesetzt ist", + "ru": "Статичное значение используется если не задан ID объекта" + }, + "checkboxSize": {"en": "Size", "de": "Größe", "ru": "Размер"}, + "checkboxColor": {"en": "Color by OFF", "de": "Farbe bei AUS", "ru": "Цвет при 0"}, + "checkboxColorOn": {"en": "Color by ON", "de": "Farbe bei ON", "ru": "Цвет при 1"}, + "group_style": {"en": "Style", "de": "Still", "ru": "Стиль"}, + "oid-open": {"en": "Object ID Open", "de": "Objekt-ID Aufmachen", "ru": "Полностью открыть ID"}, + "group_image": {"en": "Images", "de": "Bilder", "ru": "Кнопки"}, + "closedIcon": {"en": "Icon-Closed", "de": "Bild für Zu", "ru": "Картинка 'Закрыть'"}, + "openedIcon": {"en": "Icon-Opened", "de": "Bild für Auf", "ru": "Картинка 'Открыть'"}, + "group_popup": {"en": "Popup", "de": "Popup", "ru": "Popup"}, + "popupRadius": {"en": "Popup radius", "de": "Popup-Radius", "ru": "Popup радиус"}, + "buttonRadius": {"en": "Buttons radius", "de": "Knopfe-Radius", "ru": "Радиус кнопок"}, + "closeIcon": {"en": "Close-Icon", "de": "Zu-Bild", "ru": "Закрыть-Картинка"}, + "closeValue": {"en": "Close-Value", "de": "Zu-Wert", "ru": "Закрыть-Значение"}, + "closeStyle": {"en": "Close-Style", "de": "Zu-Still", "ru": "Закрыть-Стиль"}, + "openIcon": {"en": "Open Lock-Icon", "de": "Schloss Auf-Bild", "ru": "Открыть замок-Картинка"}, + "openValue": {"en": "Open Lock-Value", "de": "Schloss Auf-Wert", "ru": "Открыть замок-Значение"}, + "openStyle": {"en": "Open Lock-Style", "de": "Schloss Auf-Still", "ru": "Открыть замок-Стиль"}, + "openDoorIcon": {"en": "Open Door-Icon", "de": "Tür Auf-Bild", "ru": "Открыть дверь-Картинка"}, + "openDoorValue": {"en": "Open Door-Value", "de": "Tür Auf-Wert", "ru": "Открыть дверь-Значение"}, + "openDoorStyle": {"en": "Open Door-Style", "de": "Tür Auf-Still", "ru": "Открыть дверь-Стиль"}, + "showTimeout": {"en": "Popup timeout", "de": "Popup-Timeout", "ru": "Popup таймаут"}, + "val_false": {"en": "Off value", "de": "Aus-Wert", "ru": "Выкл.-Значение"}, + "val_true": {"en": "On value", "de": "An-Wert", "ru": "Вкл.-Значение"}, + "invert": {"en": "Invert", "de": "Invertieren", "ru": "Инвертировать"}, + "infoLeftPaddingLeft": {"en": "Left padding (left)", "de": "Linker Abstand (Links)", "ru": "Отступ слева (левый текст)"}, + "infoLeftPaddingRight": {"en": "Right padding (left", "de": "Rechter Abstand (Links)", "ru": "Отступ справа (левый текст)"}, + "infoRightPaddingLeft": {"en": "Left padding (right)", "de": "Linker Abstand (Rechts)", "ru": "Отступ слева (правый текст)"}, + "infoRightPaddingRight": {"en": "Right padding (right)", "de": "Rechter Abstand (Rechts)", "ru": "Отступ справа (правый текст)"}, + "valveBinary": {"en": "Valve only On/Off", "de": "Ventil nur An/Aus", "ru": "Вентиль только Откр/Закр"} + }); +} + +$.extend(true, systemDictionary, { + "just now": {"en": "just now", "de": "gerade jetzt", "ru": "только что"}, + "for %s min.": {"en": "for %s min.", "de": "vor %s Min.", "ru": "%s мин. назад"}, + // plural hours + "forHours": { + "en": "for %s hrs. and %s min.", + "de": "vor %s St. und %s Min.", + "ru": "%s часов и %s мин. назад" + }, + // singular hour + "for1Hour": { + "en": "for %s hr. and %s min.", + "de": "vor %s St. und %s Min.", + "ru": "%s час и %s мин. назад" + }, + // 2-4 hour + "for2-4Hours": { + "en": "for %s hr. and %s min.", + "de": "vor %s St. und %s Min.", + "ru": "%s часа и %s мин. назад" + }, + "yesterday": {"en": "yesterday", "de": "gestern", "ru": "вчера"}, + "for %s hours": {"en": "for %s hours", "de": "vor %s Stunden", "ru": "%s ч. назад"}, + "Chart": {"en": "Chart", "de": "Grafik", "ru": "График"}, + "opened": {"en": "opened", "de": "auf", "ru": "откр."}, + "closed": {"en": "closed", "de": "zu", "ru": "закр."} +}); +// widget can has following parts: +// left info (descriptionLeft) +// right info (additional info) +// working/cancel icon +// center icon +// main form +//
+//
+//
+//
+//
+ +vis.binds.hqwidgets = { + version: "1.1.2", + contextEnabled: true, + zindex: [], + preventDefault: function (e) { + e.preventDefault(); + }, + contextMenu: function (isEnable) { + if (isEnable && !vis.binds.hqwidgets.contextEnabled) { + vis.binds.hqwidgets.contextEnabled = true; + document.removeEventListener('contextmenu', vis.binds.hqwidgets.preventDefault, false); + } + if (!isEnable && vis.binds.hqwidgets.contextEnabled) { + vis.binds.hqwidgets.contextEnabled = false; + document.addEventListener('contextmenu', vis.binds.hqwidgets.preventDefault, false); + } + }, + showVersion: function () { + if (vis.binds.hqwidgets.version) { + console.log('Version vis-hqwidgets: ' + vis.binds.hqwidgets.version); + vis.binds.hqwidgets.version = null; + } + }, + getTimeInterval: function (oldTime, hoursToShow) { + // if less than 2000.01.01 00:00:00 + if (oldTime < 946681200000) oldTime = oldTime * 1000; + + var result = ''; + + var newTime = new Date (); + + if (!oldTime) return ''; + if (typeof oldTime === 'string') { + oldTime = new Date(oldTime); + } else { + if (typeof oldTime === 'number') { + oldTime = new Date(oldTime); + } + } + + var seconds = (newTime.getTime() - oldTime.getTime ()) / 1000; + + if (hoursToShow && (seconds / 3600) > hoursToShow) return ''; + + if (seconds < 60) { + result = _('just now'); + } else + if (seconds <= 3600) { + result = _('for %s min.', Math.floor(seconds / 60)); + } + else + if (seconds <= 3600 * 24) { // between 1 und 24 hours + var hrs = Math.floor(seconds / 3600); + if (hrs === 1 || hrs === 21) { + result = _('for1Hour', hrs, (Math.floor(seconds / 60) % 60)); + } else if (hrs >= 2 && hrs <= 4) { + result = _('for2-4Hours', hrs, (Math.floor(seconds / 60) % 60)); + } else { + result = _('forHours', hrs, (Math.floor(seconds / 60) % 60)); + } + } + else + if (seconds > 3600 * 24 && seconds <= 3600 * 48) { + result = _('yesterday'); + } + else + if (seconds > 3600 * 48) { // over 2 days + result = _('for %s hours', Math.floor(seconds / 3600)); + } + + return result; + }, + button: { + showRightInfo: function ($div, value) { + var data = $div.data('data'); + + var time = null; + var timer = null; + if (data.hoursLastAction) { + // show time interval. It must be updated every minute + if (data.timeAsInterval) { + time = vis.binds.hqwidgets.getTimeInterval(data.lc, data.hoursLastAction); + $div.find('.vis-hq-time').html(time); + if (!vis.editMode) { + timer = $div.data('lastTimer'); + if (!timer) { + timer = setInterval(function () { + var time = vis.binds.hqwidgets.getTimeInterval(data.lc, data.hoursLastAction); + $div.find('.vis-hq-time').html(time); + + if (time && $div.find('.vis-hq-time').text()){ + $div.find('.vis-hq-rightinfo').show(); + } else { + $div.find('.vis-hq-rightinfo').hide(); + } + }, 60000); + + $div.data('lastTimer', timer); + } + } + + } else { + // Show static date + time = vis.binds.basic.formatDate(data.lc, data.format_date); + $div.find('.vis-hq-time').html(time); + } + } + + // Kill timer if not required + if (!timer) { + var t = $div.data('lastTimer'); + if (t) clearTimeout(t); + } + + // Set number value + var text = null; + if (data.wType === 'number' && data.oid) { + var html = ((value === undefined || value === null) ? data.min : value) + ((data.unit === undefined) ? '' : data.unit); + if (data.drive !== undefined) { + html += '
' + data.drive + ''; + if (!data.valveBinary) html += '%'; + } + text = $div.find('.vis-hq-rightinfo-text').html(html); + } + + // Hide right info if empty + if (data.infoRight || time || (text && text.text())) { + $div.find('.vis-hq-rightinfo').show(); + } else { + $div.find('.vis-hq-rightinfo').hide(); + } + + }, + showCenterInfo: function ($div, isHide, reInit) { + var data = $div.data('data'); + if (!data) return; + + var $c = $div.find('.vis-hq-centerinfo'); + if (reInit || data.humidity !== undefined || data.actual !== undefined) { + if (isHide) { + $c.hide(); + $div.find('.vis-hq-middle').css('opacity', 1); + } else { + if (!$div.is(':visible')) { + if (!data.showCenterInfo) { + data.showCenterInfo = setTimeout(function () { + data.showCenterInfo = null; + vis.binds.hqwidgets.button.showCenterInfo($div, isHide, reInit); + }, 1000); + } + return; + } + + if (reInit || !$c.length) { + $c.remove(); + var text = ''; + + if (data.actual !== undefined) { + text += ''; + } + if (data.humidity !== undefined) { + text += ''; + } + + text += '
' + ((data.unit === undefined) ? '' : data.unit) + '
%
'; + $div.find('.vis-hq-main').prepend(text); + $c = $div.find('.vis-hq-centerinfo'); + } else { + $c.show(); + } + $div.find('.vis-hq-middle').css('opacity', 0.7); + if (data.actual !== undefined && data.actual !== null) { + if (typeof data.actual !== 'number') data.actual = parseFloat(data.actual) || 0; + $div.find('.vis-hq-actual').html((data.digits !== null) ? (data.actual || 0).toFixed(data.digits) : (data.actual || 0)); + } + + if (data.humidity !== undefined && data.humidity !== null) { + if (typeof data.humidity !== 'number') data.humidity = parseFloat(data.humidity) || 0; + $div.find('.vis-hq-humidity').html(Math.round(data.humidity || 0)); + } + + var $main = $div.find('.vis-hq-main'); + if ($c.length) { + $c.css({ + top: ($main.height() - $c.height()) / 2, + left: ($main.width() - $c.width()) / 2 + }); + } + } + } else { + $c.hide(); + } + }, + centerImage: function ($div, data, $img) { + // find the right position for image and caption in the middle + var $main = $div.find('.vis-hq-main'); + if (!$img) $img = $div.find('.vis-hq-icon-img'); + + if (data.offsetAuto) { + if (!$div.is(':visible')) { + if (!data.centerImage) { + data.centerImage = setTimeout(function () { + data.centerImage = null; + vis.binds.hqwidgets.button.centerImage($div, data, $img); + }, 1000); + } + } else { + var $middle = $div.find('.vis-hq-table'); + $middle.css({ + left: ($main.width() - $middle.width()) / 2, + top: ($main.height() - $middle.height()) / 2 + }); + $img.load(function () { + var $middle = $div.find('.vis-hq-table'); + $middle.css({ + left: ($main.width() - $middle.width()) / 2, + top: ($main.height() - $middle.height()) / 2 + }); + }); + } + } + }, + // Calculate state of button + changeState: function ($div, isInit, isForce, isOwn) { + var data = $div.data('data'); + if (!data) return; + + var value = (data.tempValue !== undefined) ? data.tempValue : data.value; + + if (!isForce && data.oldValue !== undefined && data.oldValue == value && !data.ack) return; + + if (data.wType === 'number') { + value = parseFloat((value || 0).toString().replace(',', '.')); + } + data.oldValue = value; + + if (data.temperature) { + data.state = 'normal'; + } else if (value == data.min) { + data.state = 'normal'; + } else if (value == data.max) { + data.state = 'active'; + } else if (data.max && + (value === null || + value === '' || + value === undefined || + value === 'false' || + value === false)) { + data.state = 'normal'; + } else { + if (data.wType === 'number') { + if (data.max) { + if (value > data.min) { + data.state = 'active'; + } else { + data.state = 'normal'; + } + } else if (value) { + data.state = 'active'; + } else { + data.state = 'normal'; + } + } else { + if (data.max) { + if (value == data.max) { + data.state = 'active'; + } else { + data.state = 'normal'; + } + } else if (value) { + data.state = 'active'; + } else { + data.state = 'normal'; + } + } + } + + if (vis.editMode && data.testActive) { + data.state = (data.state === 'normal') ? 'active' : 'normal'; + } + + if (value !== null && value !== undefined) { + $div.find('.vis-hq-nodata').remove(); + } + + switch (data.state) { + case 'normal': + $('#' + data.wid + ' .vis-hq-main') + .removeClass(data.styleActive) + .addClass(data.styleNormal); + + if (data.iconName || data.iconOn) { + var $img = $div.find('.vis-hq-icon-img'); + + if ($img.attr('src') !== (data.iconName || '')) { + $img.attr('src', (data.iconName || '')); + vis.binds.hqwidgets.button.centerImage($div, data, $img); + } + } + if (data.captionOn) { + $div.find('.vis-hq-text-caption').html(data.caption || ''); + } + break; + case 'active': + $('#' + data.wid + ' .vis-hq-main') + .removeClass(data.styleNormal) + .addClass(data.styleActive); + + if (data.iconName || data.iconOn) { + var $img = $div.find('.vis-hq-icon-img'); + + if ($img.attr('src') !== (data.iconOn || data.iconName)) { + $img.attr('src', (data.iconOn || data.iconName)); + vis.binds.hqwidgets.button.centerImage($div, data, $img); + } + } + if (data.captionOn) { + $div.find('.vis-hq-text-caption').html(data.captionOn); + } + break; + } + if (data.digits !== null && value !== null && value !== undefined) { + if (typeof value !== 'number') value = parseFloat(value) || 0; + value = value.toFixed(data.digits); + } + if (data.is_comma && value) value = value.toString().replace('.', ','); + + vis.binds.hqwidgets.button.showRightInfo($div, value); + + if ((!data.ack && !data['oid-working']) || (data['oid-working'] && data.working)) { + $div.find('.vis-hq-working').show(); + } else { + $div.find('.vis-hq-working').hide(); + } + + if (data['oid-battery']) $div.batteryIndicator('show', data.battery || false); + + if (data['oid-signal']) { + $div.find('.vis-hq-signal').html(data.signal); + } + + if (data['oid-humidity']) { + var $h = $div.find('.vis-hq-humidity'); + if (!$h.length) { + vis.binds.hqwidgets.button.showCenterInfo($div, false, true); + } else { + $h.html(Math.round(data.humidity || 0)); + } + } + + if (data['oid-actual']) { + var $a = $div.find('.vis-hq-actual'); + if (!$a.length) { + vis.binds.hqwidgets.button.showCenterInfo($div, false, true); + } else { + if (typeof data.actual !== 'number') data.actual = parseFloat(data.actual) || 0; + $a.html((data.digits !== null) ? (data.actual || 0).toFixed(data.digits) : (data.actual || 0)); + } + } + + if (data['oid-drive']) { + $div.find('.vis-hq-drive').html(data.drive || 0); + } + + // Show change effect + if (data.changeEffect && ((!isInit && !isOwn) || (vis.editMode && data.testActive))) { + var $main = $div.find('.vis-hq-main'); + $main.animateDiv(data.changeEffect, {color: data.waveColor}); + } + }, + draw: function ($div) { + if (!$div.is(':visible')) { + setTimeout(function () { + vis.binds.hqwidgets.button.draw($div); + }, 100); + return; + } + + var data = $div.data('data'); + data.state = data.state || 'normal'; + var radius = $div.css('borderTopLeftRadius') || vis.views[data.view].widgets[data.wid].style['border-radius']; + + // place left-info, right-info, caption and image + if (!$div.find('.vis-hq-main').length) { + var text = ''; + if (!data.descriptionLeftDisabled && data.descriptionLeft) { + if (data.infoLeftPaddingLeft === undefined || data.infoLeftPaddingLeft === null) data.infoLeftPaddingLeft = '15px'; + if (data.infoLeftPaddingRight === undefined || data.infoLeftPaddingRight === null) data.infoLeftPaddingRight = '50px'; + if (!data.infoLeftPaddingLeft.match(/px$|rem$|em$/)) data.infoLeftPaddingLeft = data.infoLeftPaddingLeft + 'px'; + if (!data.infoLeftPaddingRight.match(/px$|rem$|em$/)) data.infoLeftPaddingRight = data.infoLeftPaddingRight + 'px'; + + text += '
' + + (data.descriptionLeft || '').replace(/\s/g, ' ').replace(/\\n/g, '
') + '
\n'; + } + if (data.infoRight || data.wType === 'number' || data.hoursLastAction) { + if (data.infoRightPaddingLeft === undefined || data.infoRightPaddingLeft === null) data.infoRightPaddingLeft = 0; + if (data.infoRightPaddingRight === undefined || data.infoRightPaddingRight === null) data.infoRightPaddingRight = '15px'; + if (!data.infoRightPaddingRight.match(/px$|rem$|em$/)) data.infoRightPaddingRight = data.infoRightPaddingRight + 'px'; + + text += '
' + + (data.infoRight || '').replace(/\s/g, ' ').replace(/\\n/g, '
') + ''; + + if (data.hoursLastAction) { + if (data.infoRight || data.wType === 'number') text += '
'; + text += ''; + } + + text += '
\n'; + } + text += '
\n'; + + if (data.offsetAuto) { + text += '\n'; + } else { + text += '
\n'; + } + + if (data.caption || data.captionOn) { + if ($div.height() > $div.width()) text += ''; + text += ''; + } + + text += '
'; + $div.append(text); + } + + // Get the border radius from parent + var $main = $div.find('.vis-hq-main'); + $main.css({'border-radius': radius}); + $div.find('.vis-hq-text-caption').html(data.caption || ''); + + var width = $div.width(); + var offset = width - 20 - parseInt(radius, 10); + if (offset < width / 2) offset = width / 2; + $div.find('.vis-hq-leftinfo').css({right: offset + 'px'}); + $div.find('.vis-hq-rightinfo').css({'padding-left': (5 + (width / 2) + (parseInt(data.infoRightPaddingLeft, 10) || 0)) + 'px'}); + + // Place icon + var img = null; + if (data.iconName || data.iconOn) { + img = (data.state === 'normal') ? (data.iconName || '') : (data.iconOn || ''); + $div.find('.vis-hq-icon').html('').css('opacity', img ? 1 : 0); + } else { + $div.find('.vis-hq-icon').html(''); + } + + if (data['oid-battery']) $div.batteryIndicator(); + + if (data['oid-working']) { + $div.append('
'); + } + + // find the right position for image and caption in the middle + if (data.offsetAuto) { + vis.binds.hqwidgets.button.centerImage($div, data); + } + + function onChange(e, newVal, oldVal) { + if (e.type === data.oid + '.val') { + if (data.wType === 'number') { + data.value = parseFloat(newVal || 0); + } else { + data.value = newVal; + } + data.ack = vis.states[data.oid + '.ack']; + data.lc = vis.states[data.oid + '.lc']; + + if (data.wType === 'number') { + if (newVal === false || newVal === 'false') data.value = data.min; + if (newVal === true || newVal === 'true') data.value = data.max; + } + data.tempValue = undefined; + + vis.binds.hqwidgets.button.changeState($div); + + if (data.wType === 'number') { + if (typeof data.value !== 'number') data.value = parseFloat(data.value) || 0; + $main.scala('value', (data.digits !== null) ? data.value.toFixed(data.digits) : data.value); + } + return; + } else if (e.type === data.oid + '.ack') { + data.ack = vis.states[data.oid + '.ack']; + data.lc = vis.states[data.oid + '.lc']; + + vis.binds.hqwidgets.button.changeState($div); + return; + } else if (e.type === data['oid-working'] + '.val') { + data.working = newVal; + } else if (e.type === data['oid-battery'] + '.val') { + data.battery = newVal; + } else if (e.type === data['oid-signal'] + '.val') { + data.signal = newVal; + } else if (e.type === data['oid-humidity'] + '.val') { + data.humidity = newVal; + } else if (e.type === data['oid-actual'] + '.val') { + data.actual = newVal; + } else if (e.type === data['oid-drive'] + '.val') { + if (data.valveBinary === 'true' || data.valveBinary === true) { + if (newVal === null || newVal === undefined) newVal = 0; + if (newVal === 'true') { + newVal = true; + } else if (parseFloat(newVal).toString() === newVal.toString()) { + newVal = !!parseFloat(newVal); + } else if (newVal === 'false') { + newVal = false; + } + newVal = newVal ? _('opened') : _('closed'); + } + + data.drive = newVal; + } + vis.binds.hqwidgets.button.changeState($div, false, true); + } + + // action + if (1 || !vis.editMode) { + + var bound = []; + if (data.oid) { + + $div.append('
'); + + vis.states.bind(data.oid + '.val', onChange); + vis.states.bind(data.oid + '.ack', onChange); + bound.push(data.oid + '.val'); + bound.push(data.oid + '.ack'); + } + if (data['oid-working']) { + vis.states.bind(data['oid-working'] + '.val', onChange); + bound.push(data['oid-working'] + '.val'); + } + + if (data['oid-battery']) { + vis.states.bind(data['oid-battery'] + '.val', onChange); + bound.push(data['oid-battery'] + '.val'); + } + + if (data['oid-signal']) { + vis.states.bind(data['oid-signal'] + '.val', onChange); + bound.push(data['oid-signal'] + '.val'); + } + + if (data['oid-humidity']) { + vis.states.bind(data['oid-humidity'] + '.val', onChange); + bound.push(data['oid-humidity'] + '.val'); + } + + if (data['oid-actual']) { + vis.states.bind(data['oid-actual'] + '.val', onChange); + bound.push(data['oid-actual'] + '.val'); + } + + if (data['oid-drive']) { + vis.states.bind(data['oid-drive'] + '.val', onChange); + bound.push(data['oid-drive'] + '.val'); + } + // remember all ids, that bound + $div.data('bound', bound); + // remember bind handler + $div.data('bindHandler', onChange); + } + + // initiate state + vis.binds.hqwidgets.button.changeState($div, true); + + // If dimmer or number + if (data.wType === 'number') { + var scalaOptions; + if (data.oid) { + scalaOptions = { + change: function (value, notAck) { + //console.log(data.wid + ' filtered out:' + value + '(' + notAck + ')'); + if (!notAck) return; + + if (data.readOnly || (data.value || 0).toString() === value.toString()) return; + + data.value = parseFloat(value.toString().replace(',', '.')); + + if (data.digits !== null) { + if (typeof data.value !== 'number') data.value = parseFloat(data.value) || 0; + data.value = data.value.toFixed(data.digits); + } + + data.value = parseFloat(data.value) || 0; + data.ack = false; + data.tempValue = undefined; + + vis.binds.hqwidgets.button.changeState($div, false, false, true); + vis.setValue(data.oid, data.value); + }, + min: data.min, + max: data.max, + changing: function (value) { + // round to step + data.tempValue = Math.round(parseFloat(value) / data.step) * data.step; + vis.binds.hqwidgets.button.changeState($div, false, false, true); + }, + click: function (val) { + val = data.value; + if (!data.temperature) { + if (val - data.min > ((data.max - data.min) / 2)) { + val = data.min; + } else { + val = data.max; + } + } else { + data.tempValue = undefined; + vis.binds.hqwidgets.button.changeState($div, false, false, true); + + // Show dialog + if (data.url) $div.popupDialog('show'); + } + return val; + }, + alwaysShow: data.alwaysShow, + onshow: function () { + if (!data.alwaysShow) { + vis.binds.hqwidgets.button.showCenterInfo($div, true); + } + }, + onhide: function () { + vis.binds.hqwidgets.button.showCenterInfo($div); + }, + hideNumber: !data.showValue || (data.temperature && data.alwaysShow), + readOnly: vis.editMode || data.readOnly, + step: data.step, + digits: data.digits, + isComma: data.is_comma, + width: ((100 + parseInt(data.circleWidth || 50, 10)) * width / 100).toFixed(0) + }; + } + + // show for temperature color depends on value + if (data.temperature) { + vis.binds.hqwidgets.button.showCenterInfo($div); + + if (scalaOptions) { + scalaOptions.color = 'black'; + scalaOptions.colorize = function (color, value, isPrevious) { + var ratio = (value - data.min) / (data.max - data.min); + return 'hsla(' + (180 + Math.round(180 * ratio)) + ', 70%, 50%, ' + ((isPrevious) ? 0.7 : 0.9) + ')'; + } + } + } + if (scalaOptions) { + $main.scala(scalaOptions); + $main.scala('value', data.value); + } + } else { + if (!data.oidFalse && data.oidTrue) data.oidFalse = data.oidTrue; + if (!data.urlFalse && data.urlTrue) data.urlFalse = data.urlTrue; + if (data.min === undefined || data.min === 'false' || data.min === null) data.min = false; + if (data.max === undefined || data.max === 'true' || data.max === null) data.max = true; + if (data.oidTrueVal === undefined || data.oidTrueVal === null) data.oidTrueVal = data.max; + if (data.oidTrueVal === 'false') data.oidTrueVal = false; + if (data.oidTrueVal === 'true') data.oidTrueVal = true; + if (data.oidFalseVal === undefined || data.oidFalseVal === null) data.oidFalseVal = data.min; + if (data.oidFalseVal === 'false') data.oidFalseVal = false; + if (data.oidFalseVal === 'true') data.oidFalseVal = true; + var f = parseFloat(data.oidFalseVal); + if (f.toString() == data.oidFalseVal) data.oidFalseVal = f; + + f = parseFloat(data.oidTrueVal); + if (f.toString() == data.oidTrueVal) data.oidTrueVal = f; + + f = parseFloat(data.min); + if (f.toString() == data.min) data.min = f; + + f = parseFloat(data.max); + if (f.toString() == data.max) data.max = f; + + if (!vis.editMode && !data.readOnly && (data.oid || data.urlFalse || data.urlTrue || data.oidFalse || data.oidTrue)) { + if (!data.pushButton) { + $main.on('click touchstart', function () { + // Protect against two events + if (vis.detectBounce(this)) return; + + data.value = (data.state === 'normal') ? data.max : data.min; + data.ack = false; + + vis.binds.hqwidgets.button.changeState($div, false, false, true); + + if (data.oidTrue) { + if (data.state !== 'normal') { + vis.setValue(data.oidTrue, data.oidTrueVal); + } else { + vis.setValue(data.oidFalse, data.oidFalseVal); + } + } + + if (data.urlTrue) { + if (data.state !== 'normal') { + vis.conn.httpGet(data.urlTrue) + } else { + vis.conn.httpGet(data.urlFalse); + } + } + + // show new state + if (data.oid && data.oid !== 'nothing_selected') { + vis.setValue(data.oid, data.value); + } + }); + } else { + $main.on('mousedown touchstart', function (e) { + // Protect against two events + if (vis.detectBounce(this)) return; + + vis.binds.hqwidgets.contextMenu(false); + + data.value = data.max; + data.ack = false; + vis.binds.hqwidgets.button.changeState($div, false, false, true); + + if (data.oidTrue) vis.setValue(data.oidTrue, data.oidTrueVal); + if (data.urlTrue) vis.conn.httpGet(data.urlTrue); + if (data.oid && data.oid !== 'nothing_selected') vis.setValue(data.oid, data.value); + }); + $main.on('mouseup touchend', function (e) { + + // Protect against two events + if (vis.detectBounce(this, true)) return; + + data.value = data.min; + data.ack = false; + vis.binds.hqwidgets.button.changeState($div, false, false, true); + + if (data.oidFalse) vis.setValue(data.oidFalse, data.oidFalseVal); + if (data.urlFalse) vis.conn.httpGet(data.urlFalse); + if (data.oid && data.oid !== 'nothing_selected') vis.setValue(data.oid, data.value); + + vis.binds.hqwidgets.contextMenu(true); + }); + } + } else if (data.readOnly) { + $div.addClass('vis-hq-readonly'); + } + } + + // Chart dialog + if (data.url/* && !vis.editMode*/) { + $div.popupDialog({ + content: '', + width: data.dialog_width, + height: data.dialog_height, + effect: data.dialog_effect, + timeout: data.dialog_timeout, + modal: data.dialog_modal, + title: data.dialog_title || data['oid-actual'], + open: data.dialog_open && vis.editMode + }); + if (!data.oid) { + $main.on('click touchstart', function () { + // Protect against two events + if (vis.detectBounce(this)) return; + + $div.popupDialog('show'); + }); + } + } + if (!data.oid && !data.url) { + $main.addClass('vis-hq-main-none'); + $div.css({cursor: 'auto'}); + } + }, + init: function (wid, view, data, style, wType) { + vis.binds.hqwidgets.showVersion(); + var $div = $('#' + wid).addClass('vis-hq-button-base'); + if (!$div.length) { + setTimeout(function () { + vis.binds.hqwidgets.button.init(wid, view, data, style, wType); + }, 100); + return; + } + var _data = {wid: wid, view: view, wType: wType}; + for (var a in data) { + if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue; + if (a[0] !== '_') { + _data[a] = data[a]; + } + } + data = _data; + + if (!data.wType) { + if (data.min === undefined || data.min === null || data.min === '') data.min = false; + if (data.max === undefined || data.max === null || data.max === '') data.max = true; + } + + data.styleNormal = data.usejQueryStyle ? 'ui-state-default' : (data.styleNormal || 'vis-hq-button-base-normal'); + data.styleActive = data.usejQueryStyle ? 'ui-state-active' : (data.styleActive || 'vis-hq-button-base-on'); + data.digits = (data.digits || data.digits === 0) ? parseInt(data.digits, 10) : null; + if (typeof data.step === 'string') data.step = data.step.replace(',', '.'); + data.step = parseFloat(data.step || 1); + data.is_comma = (data.is_comma === 'true' || data.is_comma === true); + data.readOnly = (data.readOnly === 'true' || data.readOnly === true); + data.midTextColor = data.midTextColor || ''; + data.infoColor = data.infoColor || ''; + data.infoBackground = data.infoBackground || 'rgba(182,182,182,0.6)'; + data.pushButton = (data.pushButton === 'true' || data.pushButton === true); + + if (data.wType === 'number') { + data.min = (data.min === 'true' || data.min === true) ? true : ((data.min === 'false' || data.min === false) ? false : ((data.min !== undefined) ? parseFloat(data.min) : 0)); + data.max = (data.max === 'true' || data.max === true) ? true : ((data.max === 'false' || data.max === false) ? false : ((data.max !== undefined) ? parseFloat(data.max) : 100)); + } else { + data.min = (data.min === 'true' || data.min === true) ? true : ((data.min === 'false' || data.min === false) ? false : ((data.min !== undefined && data.min !== null && data.min !== '') ? data.min : 0)); + data.max = (data.max === 'true' || data.max === true) ? true : ((data.max === 'false' || data.max === false) ? false : ((data.max !== undefined && data.max !== null && data.max !== '') ? data.max : 100)); + } + $div.data('data', data); + $div.data('style', style); + + if (data.oid) { + data.value = vis.states.attr(data.oid + '.val'); + data.ack = vis.states.attr(data.oid + '.ack'); + data.lc = vis.states.attr(data.oid + '.lc'); + } + + if (data['oid-working']) data.working = vis.states.attr(data['oid-working'] + '.val'); + if (data['oid-battery']) data.battery = vis.states.attr(data['oid-battery'] + '.val'); + if (data['oid-signal']) data.signal = vis.states.attr(data['oid-signal'] + '.val'); + if (data['oid-humidity']) data.humidity = vis.states.attr(data['oid-humidity'] + '.val'); + if (data['oid-actual']) data.actual = vis.states.attr(data['oid-actual'] + '.val'); + if (data['oid-drive']) { + var val = vis.states.attr(data['oid-drive'] + '.val'); + if (val === null || val === undefined) val = 0; + if (data.valveBinary === 'true' || data.valveBinary === true) { + if (val === 'true') { + val = true; + } else if (parseFloat(val).toString() === val.toString()) { + val = !!parseFloat(val); + } else if (val === 'false') { + val = false; + } + val = val ? _('opened') : _('closed'); + } + data.drive = val; + } + + vis.binds.hqwidgets.button.draw($div); + } + }, + window: { + drawOneWindow: function (index, options) { + var bWidth = options.border_width; + var div1 = '
'; + + var div2 = '
'; + options.shutterPos = options.shutterPos || 0; + + var div3 = '
'; + + var hanldePos = null; + var slidePos = null; + + if (options.handleOid) { + hanldePos = vis.states[options.handleOid + '.val']; + /* problem ?? */ + if (hanldePos == 2) { + hanldePos = 1; + } else if (hanldePos == 1) { + hanldePos = 2; + } + slidePos = hanldePos; + } + if (options.slideOid) { + slidePos = vis.states[options.slideOid + '.val']; + if (!options.handleOid) hanldePos = slidePos; + if (hanldePos == 2) slidePos = 2; + } + + var div4 = '
'; + + var div5 = ''; + + //console.log('HOID: ' + options.handleOid + ', ' + hanldePos); + if (options.type) { + div5 = '
'; + } + + return div1 + div2 + div3 + div4 + div5 + '
'; + }, + hidePopup: function ($div) { + var data = $div.data('data'); + if (!data) return; + + for (var z = 0; z < vis.binds.hqwidgets.zindex.length; z++) { + if (vis.binds.hqwidgets.zindex[z] === $div.css('z-index')) { + vis.binds.hqwidgets.zindex.splice(z, 1); + break; + } + } + + var $big = $div.find('.hq-blind-big'); + if (data.noAnimate) { + //$big.makeSlider('hide'); + setTimeout(function () { + $big.find('.hq-blind-big-slider').makeSlider('hide'); + $big.hide(); + $big.data('show', false); + // restore zindex + $div.css('z-index', $div.data('zindex')); + }, 200); + } else { + $big.animate({width: $div.width(), height: $div.height(), opacity: 0, top: 0, left: 0}, 500, 'swing', function () { + $big.find('.hq-blind-big-slider').makeSlider('hide'); + $big.hide(); + $big.data('show', false); + // restore zindex + $div.css('z-index', $div.data('zindex')); + }); + } + + }, + openPopup: function ($div) { + var data = $div.data('data'); + if (!data) return; + + // make temporary z-index maximal + var zindex = $div.data('zindex'); + // remember z-index + if (zindex === null || zindex === undefined) { + zindex = $div.css('z-index'); + $div.data('zindex', zindex); + } + // find maximal z-index + var zindexMax = 900; + /*$('.vis-widget').each(function () { + var z = $(this).css('z-index'); + if (z > zindexMax) zindexMax = z; + });*/ + for (var z = 0; z < vis.binds.hqwidgets.zindex.length; z++) { + if (vis.binds.hqwidgets.zindex[z] > zindexMax) zindexMax = vis.binds.hqwidgets.zindex[z]; + } + zindexMax++; + + // set this widget to maximal zindex + $div.css('z-index', zindexMax); + vis.binds.hqwidgets.zindex.push($div.css('z-index')); + + var $big = $div.find('.hq-blind-big'); + if (!$big.length) { + var text = '' + + ' ' + + ' ' + + ' ' + + ''; + $div.append(text); + $div.find('.hq-blind-big-slider').makeSlider({ + max: data.max, + min: data.min, + invert: !data.invert, + show: false, + relative: true, + value: data.value, + timeout: data.hide_timeout + }, function (newValue) { + vis.setValue(data.oid, newValue); + vis.binds.hqwidgets.window.hidePopup($div); + }, function () { + vis.binds.hqwidgets.window.hidePopup($div); + }); + $div.find('.hq-blind-big-button-down').click(function () { + vis.setValue(data.oid, data.invert ? data.min : data.max); + vis.binds.hqwidgets.window.hidePopup($div); + }); + $div.find('.hq-blind-big-button-up').click(function () { + vis.setValue(data.oid, data.invert ? data.max : data.min); + vis.binds.hqwidgets.window.hidePopup($div); + }); + $big = $div.find('.hq-blind-big'); + } + + $big.data('show', true); + + if (data.bigLeft === undefined) { + var pos = $div.position(); + var w = $div.width(); + var h = $div.height(); + + data.bigWidth = $big.width(); + data.bigHeight = $big.height(); + + //default will still be center + var popUpHorPos = Math.round((h - data.bigHeight) / 2); + var popUpVerPos = Math.round((w - data.bigWidth) / 2); + + if ( data.popupVerticalPos === "left" ) { + popUpVerPos = Math.round(w - data.bigWidth); + } + else if ( data.popupVerticalPos === "right" ) { + popUpVerPos = 0; + } + data.bigLeft = popUpVerPos; + + + if ( data.popupHorizontalPos === "top" ) { + popUpHorPos = Math.round(h - data.bigHeight); + } + else if ( data.popupHorizontalPos === "bottom" ) { + popUpHorPos = 0; + } + data.bigTop = popUpHorPos; + + + if (pos.top + data.bigTop < 0) data.bigTop = -pos.top; + if (pos.left + data.bigLeft < 0) data.bigLeft = -pos.left; + } + + $big.css({top: data.bigTop, left: data.bigLeft}); + + if (data.noAnimate) { + $big.find('.hq-blind-big-slider').makeSlider('show', data.value); + $big.show(); + } else { + $big.css({top:0, left: 0, width: $div.width(), height: $div.height(), opacity: 0}).show(); + $big.find('.hq-blind-big-slider').makeSlider('show', data.value); + $big.animate({top: data.bigTop, left: data.bigLeft, width: data.bigWidth, height: data.bigHeight, opacity: 1}, 500); + } + }, + draw: function ($div) { + var data = $div.data('data'); + if (!data) return; + + $div.css({ + 'padding-top': data.border_width, + 'padding-bottom': data.border_width - 1, + 'padding-right': data.border_width + 1, + 'padding-left': data.border_width + 1 + }); + + // get position + data.shutterPos = 0; + if (data.oid) { + data.value = vis.states[data.oid + '.val']; + data.shutterPos = data.value; + if (data.shutterPos === undefined || data.shutterPos === null) { + data.shutterPos = 0; + } else { + if (data.shutterPos < data.min) data.shutterPos = data.min; + if (data.shutterPos > data.max) data.shutterPos = data.max; + + data.shutterPos = Math.round(100 * (data.shutterPos - data.min) / (data.max - data.min)); + } + if (data.invert) data.shutterPos = 100 - data.shutterPos; + } + + var text = ''; + if (!data.descriptionLeftDisabled && data.descriptionLeft) { + if (data.infoLeftPaddingLeft === undefined || data.infoLeftPaddingLeft === null) data.infoLeftPaddingLeft = '15px'; + if (data.infoLeftPaddingRight === undefined || data.infoLeftPaddingRight === null) data.infoLeftPaddingRight = '50px'; + if (!data.infoLeftPaddingLeft.match(/px$|rem$|em$/)) data.infoLeftPaddingLeft = data.infoLeftPaddingLeft + 'px'; + if (!data.infoLeftPaddingRight.match(/px$|rem$|em$/)) data.infoLeftPaddingRight = data.infoLeftPaddingRight + 'px'; + + text += '
' + + (data.descriptionLeft || '').replace(/\s/g, ' ').replace(/\\n/g, '
') + '
\n'; + } + if (data.show_value) { + if (data.infoRightPaddingLeft === undefined || data.infoRightPaddingLeft === null) data.infoRightPaddingLeft = '15px'; + if (data.infoRightPaddingRight === undefined || data.infoRightPaddingRight === null) data.infoRightPaddingRight = '15px'; + if (!data.infoRightPaddingRight.match(/px$|rem$|em$/)) data.infoRightPaddingRight = data.infoRightPaddingRight + 'px'; + + text += '
' + + (data.infoRight || '').replace(/\s/g, ' ').replace(/\\n/g, '
') + ''; + + text += '
\n'; + } + for (var i = 1; i <= data.slide_count; i++) { + var options = { + slideOid: data['oid-slide-sensor' + i], + handleOid: data['oid-slide-handle' + i], + type: data['slide_type' + i], + border_width: data.border_width, + shutterPos: data.shutterPos + }; + text += ''; + } + text += '
' + this.drawOneWindow(i, options) + '
'; + $div.html(text); + + $div.find('.hq-blind-blind2').each(function (id) { + id++; + if (data['oid-slide-sensor-lowbat' + id]) { + data['oid-slide-sensor-lowbat'][id] = vis.states[data['oid-slide-sensor-lowbat' + id] + '.val']; + $(this).batteryIndicator({ + show: data['oid-slide-sensor-lowbat'][id] || false, + title: _('Low battery on sash sensor'), + classes: 'slide-low-battery' + }); + } + }); + $div.find('.hq-blind-blind3').each(function (id) { + id++; + if (data['oid-slide-handle-lowbat' + id]) { + data['oid-slide-handle-lowbat'][id] = vis.states[data['oid-slide-handle-lowbat' + id] + '.val']; + $(this).batteryIndicator({ + show: data['oid-slide-handle-lowbat'][id] || false, + color: '#FF55FA', + title: _('Low battery on handle sensor'), + classes: 'handle-low-battery' + }); + $(this).find('.handle-low-battery').css({top: 8}); + } + }); + + var width = $div.width(); + var offset = width - 20; + if (offset < width / 2) offset = width / 2; + $div.find('.vis-hq-leftinfo').css({right: offset + 'px'}); + $div.find('.vis-hq-rightinfo').css({'padding-left': (5 + (width / 2) + (parseInt(data.infoRightPaddingLeft, 10) || 0)) + 'px'}); + }, + init: function (wid, view, data, style) { + vis.binds.hqwidgets.showVersion(); + + var $div = $('#' + wid).addClass('vis-hq-button-base'); + if (!$div.length) { + setTimeout(function () { + vis.binds.hqwidgets.window.init(wid, view, data, style); + }, 100); + return; + } + var _data = {wid: wid, view: view}; + for (var a in data) { + if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue; + if (a[0] !== '_') _data[a] = data[a]; + } + data = _data; + + data.hide_timeout = (data.hide_timeout === 0 || data.hide_timeout === '0') ? 0 : (parseInt(data.hide_timeout, 10) || 2000); + data.min = ((data.min !== undefined) ? parseFloat(data.min) : 0); + data.max = ((data.max !== undefined) ? parseFloat(data.max) : 100); + data.digits = (data.digits || data.digits === 0) ? parseInt(data.digits, 10) : null; + data.noAnimate = (data.noAnimate === 'true' || data.noAnimate === true || data.noAnimate == 1); + + if (!data.border_width && data.border_width !== '0') data.border_width = 3; + data.border_width = parseInt(data.border_width, 10); + + $div.data('data', data); + $div.data('style', style); + + data.min = parseFloat(data.min); + data.max = parseFloat(data.max); + if (data.max < data.min) { + var tmp = data.min; + data.min = data.max; + data.max = tmp; + } + data['oid-slide-sensor-lowbat'] = []; + data['oid-slide-handle-lowbat'] = []; + + if (data['oid-working']) { + data.working = vis.states.attr(data['oid-working'] + '.val'); + } + + vis.binds.hqwidgets.window.draw($div); + + function onChange(e, newVal /* , oldVal */) { + if (e.type === data.oid + '.val') { + var shutterPos = newVal; + data.value = shutterPos; + if (shutterPos === undefined || shutterPos === null) { + data.shutterPos = 0; + } else { + if (shutterPos < data.min) shutterPos = data.min; + if (shutterPos > data.max) shutterPos = data.max; + + data.shutterPos = Math.round(100 * (shutterPos - data.min) / (data.max - data.min)); + } + + if (data.invert) data.shutterPos = 100 - data.shutterPos; + + if (!data.noAnimate) { + $div.find('.hq-blind-position').animate({'height': data.shutterPos + '%'}, 500); + } else { + $div.find('.hq-blind-position').css({'height': data.shutterPos + '%'}); + } + $div.find('.vis-hq-rightinfo-text').html(data.shutterPos + '%'); + } else { + for (var t = 1; t <= data.slide_count; t++) { + if (e.type === data['oid-slide-sensor' + t] + '.val' || e.type === data['oid-slide-handle' + t] + '.val') { + vis.binds.hqwidgets.window.draw($div); + break; + } else if (e.type === data['oid-slide-sensor-lowbat' + t] + '.val') { + data['oid-slide-sensor-lowbat'][t] = vis.states[data['oid-slide-sensor-lowbat' + t] + '.val']; + $div.find('.slide-low-battery').each(function (id) { + id++; + if (data['oid-slide-sensor-lowbat' + id]) { + if (data['oid-slide-sensor-lowbat'][id]) { + $(this).show(); + } else { + $(this).hide(); + } + } + }); + } else if (e.type === data['oid-slide-handle-lowbat' + t] + '.val') { + data['oid-slide-handle-lowbat'][t] = vis.states[data['oid-slide-handle-lowbat' + t] + '.val']; + $div.find('.handle-low-battery').each(function (id) { + id++; + if (data['oid-slide-handle-lowbat' + id]) { + if (data['oid-slide-handle-lowbat'][id]) { + $(this).show(); + } else { + $(this).hide(); + } + } + }); + } + } + } + } + + var bound = []; + + for (var i = 1; i <= data.slide_count; i++) { + if (data['oid-slide-sensor' + i]) { + vis.states.bind(data['oid-slide-sensor' + i] + '.val', onChange); + bound.push(data['oid-slide-sensor' + i] + '.val'); + } + if (data['oid-slide-handle' + i]) { + vis.states.bind(data['oid-slide-handle' + i] + '.val', onChange); + bound.push(data['oid-slide-handle' + i] + '.val'); + } + if (data['oid-slide-sensor-lowbat' + i]) { + vis.states.bind(data['oid-slide-sensor-lowbat' + i] + '.val', onChange); + bound.push(data['oid-slide-sensor-lowbat' + i] + '.val'); + } + if (data['oid-slide-handle-lowbat' + i]) { + vis.states.bind(data['oid-slide-handle-lowbat' + i] + '.val', onChange); + bound.push(data['oid-slide-handle-lowbat' + i] + '.val'); + } + } + + if (data.oid) { + if (!vis.editMode) { + // prepare big window + $div.click(function () { + var $big = $div.find('.hq-blind-big'); + if (!$big.length || !$big.data('show')) { + vis.binds.hqwidgets.window.openPopup($div); + } + }); + } + + vis.states.bind(data.oid + '.val', onChange); + bound.push(data.oid + '.val'); + } + + if (bound.length) { + // remember all ids, that bound + $div.data('bound', bound); + // remember bind handler + $div.data('bindHandler', onChange); + } + + var shutterPos = vis.states[data.oid + '.val'] || 0; + if (shutterPos < data.min) shutterPos = data.min; + if (shutterPos > data.max) shutterPos = data.max; + shutterPos = Math.round(100 * (shutterPos - data.min) / (data.max - data.min)); + if (data.invert) shutterPos = 100 - shutterPos; + $div.find('.vis-hq-rightinfo-text').html(shutterPos + '%'); + + if (vis.editMode && vis.activeWidgets.indexOf(wid) !== -1) { + $div.resizable('destroy'); + vis.resizable($div); + } + } + }, + door: { + changeState: function ($div, notUpdateDoor, isFirst) { + var data = $div.data('data'); + if (!data) return; + + var value = data.value; + + if (data['oid-battery']) $div.batteryIndicator('show', data.battery || false); + + if (data['oid-signal']) { + $div.find('.vis-hq-signal').html(data.signal); + } + + if (!notUpdateDoor) { + if (value) { + if (data.noAnimate || isFirst) { + $div.find('.vis-hq-door-sheet').css({width: '80%'}); + $div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).css({width: '20%'}); + $div.find('.vis-hq-door-handle').css({left: (data.door_type !== 'right') ? '60%': '30%'}); + } else { + $div.find('.vis-hq-door-sheet').animate({width: '80%'}, 500); + $div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).animate({width: '20%'}, 500); + $div.find('.vis-hq-door-handle').animate({left: (data.door_type !== 'right') ? '60%': '30%'}, 500); + } + } else { + if (data.noAnimate || isFirst) { + $div.find('.vis-hq-door-sheet').css({width: '100%'}); + $div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).css({width: 0}); + $div.find('.vis-hq-door-handle').css({left: (data.door_type !== 'right') ? '85%': '15%'}); + } else { + $div.find('.vis-hq-door-sheet').animate({width: '100%'}, 500); + $div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).animate({width: 0}); + $div.find('.vis-hq-door-handle').animate({left: (data.door_type !== 'right') ? '85%': '15%'}, 500); + } + } + } + }, + draw: function ($div) { + var data = $div.data('data'); + if (!data) return; + + // place left-info, right-info, caption and image + if (!$div.find('.vis-hq-main').length) { + var text = ''; + if (!data.descriptionLeftDisabled && data.descriptionLeft) { + if (data.infoLeftPaddingLeft === undefined || data.infoLeftPaddingLeft === null) data.infoLeftPaddingLeft = '15px'; + if (data.infoLeftPaddingRight === undefined || data.infoLeftPaddingRight === null) data.infoLeftPaddingRight = '50px'; + if (!data.infoLeftPaddingLeft.match(/px$|rem$|em$/)) data.infoLeftPaddingLeft = data.infoLeftPaddingLeft + 'px'; + if (!data.infoLeftPaddingRight.match(/px$|rem$|em$/)) data.infoLeftPaddingRight = data.infoLeftPaddingRight + 'px'; + + text += '
' + + (data.descriptionLeft || '').replace(/\s/g, ' ').replace(/\\n/g, '
') + '
\n'; + } + if (data.infoRight || data.wType === 'number' || data.hoursLastAction) { + if (data.infoRightPaddingLeft === undefined || data.infoRightPaddingLeft === null) data.infoRightPaddingLeft = '15px'; + if (data.infoRightPaddingRight === undefined || data.infoRightPaddingRight === null) data.infoRightPaddingRight = '15px'; + if (!data.infoRightPaddingRight.match(/px$|rem$|em$/)) data.infoRightPaddingRight = data.infoRightPaddingRight + 'px'; + + text += '
' + + (data.infoRight || '').replace(/\s/g, ' ').replace(/\\n/g, '
') + ''; + + if (data.hoursLastAction) { + if (data.infoRight || data.wType === 'number') text += '
'; + text += ''; + } + + text += '
\n'; + } + text += '' + + '' + + '' + + '' + + '' + + '
\n'; + $div.append(text); + } + $div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).css({background: data.emptyColor || '#515151'}); + if (data.door_type === 'right') { + $div.find('.vis-hq-door-handle').css({left: '15%'}); + } else { + $div.find('.vis-hq-door-handle').css({left: '85%'}); + } + + $div.css({ + 'padding-top': data.border_width, + 'padding-bottom' : data.border_width - 1, + 'padding-right': data.border_width + 1, + 'padding-left': data.border_width + 1 + }); + + var width = $div.width(); + var offset = width - 20; + if (offset < width / 2) offset = width / 2; + $div.find('.vis-hq-leftinfo').css({right: offset + 'px'}); + }, + init: function (wid, view, data, style) { + vis.binds.hqwidgets.showVersion(); + + var $div = $('#' + wid).addClass('vis-hq-button-base'); + if (!$div.length) { + setTimeout(function () { + vis.binds.hqwidgets.door.init(wid, view, data, style); + }, 100); + return; + } + var _data = {wid: wid, view: view}; + for (var a in data) { + if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue; + if (a[0] !== '_') _data[a] = data[a]; + } + data = _data; + + if (!data.border_width && data.border_width !== '0') data.border_width = 3; + data.border_width = parseInt(data.border_width, 10); + if (data['oid-battery']) data.battery = vis.states.attr(data['oid-battery'] + '.val'); + if (data['oid-signal']) data.signal = vis.states.attr(data['oid-signal'] + '.val'); + + $div.data('data', data); + $div.data('style', style); + + vis.binds.hqwidgets.door.draw($div); + + function onChange(e, newVal) { + if (e.type === data.oid + '.val') { + var doorState = newVal; + if (newVal === 'true' || newVal === true) { + doorState = true; + } else if (newVal === 'false' || newVal === false) { + doorState = false; + } else if (typeof newVal === 'string') { + doorState = parseFloat(newVal) > 0; + } else { + doorState = !!newVal; + } + + if (data.invert) doorState = !doorState; + data.value = doorState; + + vis.binds.hqwidgets.door.changeState($div); + } else if (e.type === data['oid-signal'] + '.val') { + data.signal = newVal; + vis.binds.hqwidgets.door.changeState($div, true); + } else if (e.type === data['oid-battery'] + '.val') { + data.battery = newVal; + vis.binds.hqwidgets.door.changeState($div, true); + } + } + var bound = []; + + if (data.oid) { + if (!vis.editMode) { + // prepare big window + $div.click(function () { + var $big = $div.find('.hq-blind-big'); + if (!$big.length || !$big.data('show')) { + //vis.binds.hqwidgets.window.openPopup($div); + } + }); + } + + vis.states.bind(data.oid + '.val', onChange); + bound.push(data.oid + '.val'); + var newVal = vis.states.attr(data.oid + '.val'); + var doorState; + + if (newVal === 'true' || newVal === true) { + doorState = true; + } else if (newVal === 'false' || newVal === false) { + doorState = false; + } else if (typeof newVal === 'string') { + doorState = parseFloat(newVal) > 0; + } else { + doorState = !!newVal; + } + + if (data.invert) doorState = !doorState; + data.value = doorState; + } + if (data['oid-battery']) { + $div.batteryIndicator(); + vis.states.bind(data['oid-battery'] + '.val', onChange); + bound.push(data['oid-battery'] + '.val'); + } + + if (data['oid-signal']) { + vis.states.bind(data['oid-signal'] + '.val', onChange); + bound.push(data['oid-signal'] + '.val'); + } + if (bound.length) { + // remember all ids, that bound + $div.data('bound', bound); + // remember bind handler + $div.data('bindHandler', onChange); + } + vis.binds.hqwidgets.door.changeState($div, false, true); + } + }, + lock: { + draw: function ($div, isInit) { + var data = $div.data('data'); + if (!data) return; + + var $img = $div.find('img:first'); + if (!$img.length) { + if (!$div.is(':visible')) { + return setTimeout(function () { + vis.binds.hqwidgets.lock.draw($div, isInit); + }, 400); + } + + $div.html('' + + ''); + $img = $div.find('.vis-hq-lock1'); + var $big = $div.find('.vis-hq-biglock'); + data.popupRadius = parseInt(data.popupRadius, 10) || 75; + $big.css({'border-radius': data.popupRadius, width: data.popupRadius * 2, height: data.popupRadius * 2}); + $div.find('.vis-hq-biglock-button').css({borderRadius: parseInt(data.buttonRadius, 10) || 0}); + + $big.css({top: ($div.height() - $big.height()) / 2, left: ($div.width() - $big.width()) / 2}); + + if (data.oid && data.oid !== 'nothing_selected') { + if (data.openValue === undefined || data.openValue === null || data.openValue === '') { + data.openValue = true; + } else { + if (data.openValue === 'true') data.openValue = true; + if (data.openValue === 'false') data.openValue = false; + if (parseFloat(data.openValue).toString() == data.openValue) data.openValue = parseFloat(data.openValue); + } + if (data.closeValue === undefined || data.closeValue === null || data.closeValue === '') { + data.closeValue = false; + } else { + if (data.closeValue === 'true') data.closeValue = true; + if (data.closeValue === 'false') data.closeValue = false; + if (parseFloat(data.closeValue).toString() == data.closeValue) data.closeValue = parseFloat(data.closeValue); + } + + $img.click(function () { + $div.popupShow($big, {relative: true}); + // hide + if (data.showTimeout) { + data.timer = setTimeout(function () { + data.timer = null; + $div.popupHide($big, {relative: true}); + }, data.showTimeout) + } + }); + if (!vis.editMode) { + $div.find('.vis-hq-biglock-close').click(function () { + if (data.timer) { + clearTimeout(data.timer); + data.timer = null; + } + $div.popupHide($big, {relative: true}); + vis.setValue(data.oid, data.closeValue); + }); + $div.find('.vis-hq-biglock-open').click(function () { + if (data.timer) { + clearTimeout(data.timer); + data.timer = null; + } + $div.popupHide($big, {relative: true}); + vis.setValue(data.oid, data.openValue); + }); + } + } + if (!data['oid-open']) { + $div.find('.vis-hq-biglock-openDoor').hide(); + } else { + if (data.openDoorValue === undefined || data.openDoorValue === null || data.openDoorValue === '') { + data.openDoorValue = true; + } else { + if (data.openDoorValue === 'true') data.openDoorValue = true; + if (data.openDoorValue === 'false') data.openDoorValue = false; + if (parseFloat(data.openDoorValue).toString() == data.openDoorValue) data.openDoorValue = parseFloat(data.openDoorValue); + } + if (!vis.editMode) { + $div.find('.vis-hq-biglock-openDoor').click(function () { + $div.popupHide($big, {relative: true}); + if (data.timer) { + clearTimeout(data.timer); + data.timer = null; + } + vis.setValue(data['oid-open'], data.openDoorValue); + }); + } + } + } + if (!data.oid || data.oid === 'nothing_selected' || vis.binds.hqwidgets.lock.isFalse(vis.states.attr(data.oid + '.val'), data.closeValue, data.openValue)) { + $div.removeClass(data.styleActive).addClass(data.styleNormal); + $img.attr('src', data.closedIcon || ''); + } else { + $div.removeClass(data.styleNormal).addClass(data.styleActive); + $img.attr('src', data.openedIcon || data.closedIcon || ''); + } + + // Show change effect + if (data.changeEffect && (!isInit || (vis.editMode && data.testActive))) { + $div.animateDiv(data.changeEffect, {color: data.waveColor}); + } + }, + isFalse: function (val, min, max) { + if (min !== undefined && min !== null && min !== '') { + if (max !== undefined && max !== null && max !== '') { + return val != max; + } else { + return val == min; + } + } + if (val === undefined || val === null || val === false || val === 'false' || val === '') return true; + if (val === '0' || val === 0) return true; + var f = parseFloat(val); + if (f.toString() !== 'NaN') return !f; + return false; + }, + init: function (wid, view, data, style) { + vis.binds.hqwidgets.showVersion(); + var $div = $('#' + wid).addClass('vis-hq-button-base'); + if (!$div.length) { + setTimeout(function () { + vis.binds.hqwidgets.lock.init(wid, view, data, style); + }, 100); + return; + } + var _data = {wid: wid, view: view}; + for (var a in data) { + if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue; + if (a[0] !== '_') { + _data[a] = data[a]; + } + } + data = _data; + + if (data.closeValue === undefined || data.closeValue === null || data.closeValue === '') data.closeValue = false; + if (data.openValue === undefined || data.openValue === null || data.openValue === '') data.openValue = true; + + data.styleNormal = data.usejQueryStyle ? 'ui-state-default' : (data.styleNormal || 'hq-button-no-background'); + data.styleActive = data.usejQueryStyle ? 'ui-state-active' : (data.styleActive || 'hq-button-no-background'); + $div.data('data', data); + function onChange(e, newVal, oldVal) { + data.signal = newVal; + vis.binds.hqwidgets.lock.draw($div); + } + + if (data.oid) { + vis.states.bind(data.oid + '.val', onChange); + // remember all ids, that bound + $div.data('bound', [data.oid + '.val']); + // remember bind handler + $div.data('bindHandler', onChange); + } + + vis.binds.hqwidgets.lock.draw($div, true); + } + }, + circle: { + init: function (wid, view, data) { + vis.binds.hqwidgets.showVersion(); + + var $div = $('#' + wid); + if (!$div.length) { + setTimeout(function () { + vis.binds.hqwidgets.circle.init(wid, view, data); + }, 100); + return; + } + + var settings = data; + var $scalaInput = $div.find('input'); + $div.addClass('vis-hq-button-base'); + + function onChange(e, newVal, oldVal) { + settings.value = newVal; + $scalaInput.val(settings.value).trigger('change'); + } + + if (settings.oid) { + $scalaInput.val(vis.states.attr(settings.oid + '.val')); + if (1 || !vis.editMode) { + vis.states.bind(settings.oid + '.val', onChange); + // remember all ids, that bound + $div.data('bound', [settings.oid + '.val']); + // remember bind handler + $div.data('bindHandler', onChange); + } + } else { + $scalaInput.val(settings.min); + } + + var offset = settings.angleOffset; + if (settings.angleArc !== undefined && !offset && offset !== 0 && offset !== '0') { + offset = 180 + (360 - parseInt(settings.angleArc, 10)) / 2; + } + + $scalaInput.attr('data-angleOffset', offset); + $scalaInput.attr('data-angleArc', settings.angleArc); + $scalaInput.attr('data-thickness', settings.thickness); + $scalaInput.attr('data-linecap', (settings.linecap === 'true' || settings.linecap === true) ? 'round' : 'butt'); + $scalaInput.show(); + + $scalaInput.knobHQ({ + width: parseInt($div.width(), 10), + height: parseInt($div.height(), 10), + release: function () { + if (settings.readOnly) return; + // remove unit + var oldValue = $scalaInput.data('oldValue'); + var val = $scalaInput.val(); + + if ((settings.unit || settings.unit === 0) && val.substring(val.length - settings.unit.length, val.length) === settings.unit) { + val = val.substring(0, val.length - settings.unit.length); + } + if (oldValue != val && !vis.editMode && settings.oid) { + $scalaInput.data('oldValue', val); + val = parseFloat(val.toString().replace(',', '.')); + vis.setValue(settings.oid, val); + } + }, + cancel: function () { + }, + change: function (value) { + }, + format: function (v) { + v = parseFloat(v) || 0; + if (settings.digits !== null) v = v.toFixed(settings.digits); + if ((settings.is_comma === 'true' || settings.is_comma === true) && v) v = v.toString().replace('.', ','); + if (settings.unit) v = v + settings.unit; + return v; + }, + displayPrevious : settings.displayPrevious, + displayInput: !settings.hideNumber, + bgColor: settings.bgcolor || undefined, + readOnly: settings.readOnly, + fgColor: settings.color, + inputColor: settings.color, + colorize: settings.colorize ? settings.colorize : undefined, + min: parseFloat(settings.min), + max: parseFloat(settings.max), + step: settings.step, + cursor: settings.cursor, + rotation: settings.anticlockwise ? 'anticlockwise' : 'clockwise' + + }); + + if (settings.caption) { + $scalaInput.after('
' + settings.caption + '
'); + } + + $scalaInput.prop('readonly', true); + var parentFont = $div.parent().css('font-size'); + var font = $div.css('font-size'); + if (font !== parentFont) $scalaInput.css('font-size', font); + + parentFont = $div.parent().css('font-weight'); + font = $div.css('font-weight'); + if (font !== parentFont) $scalaInput.css('font-weight', font); + + parentFont = $div.parent().css('font-style'); + font = $div.css('font-style'); + if (font !== parentFont) $scalaInput.css('font-style', font); + + parentFont = $div.parent().css('font-variant'); + font = $div.css('font-variant'); + if (font !== parentFont) $scalaInput.css('font-variant', font); + } + }, + checkbox: { + styles: [ + 'orange', 'blue', 'green', 'grey' + ], + isTrue: function (value, max) { + if (value === 'true') value = true; + if (value === 'false') value = false; + if (value == parseFloat(value)) value = parseFloat(value); + if (max === true && typeof value === 'number') { + value = value > 0; + } + + return value == max; + }, + init: function (wid, view, data) { + vis.binds.hqwidgets.showVersion(); + + var $div = $('#' + wid); + if (!$div.length) { + setTimeout(function () { + vis.binds.hqwidgets.checkbox.init(wid, view, data); + }, 100); + return; + } + if (data.val_false === undefined || data.val_false === 'false') data.val_false = false; + if (data.val_false === 'true') data.val_false = true; + if (data.val_false == parseFloat(data.val_false)) data.val_false = parseFloat(data.val_false); + + if (data.val_true === undefined || data.val_true === 'true') data.val_true = true; + if (data.val_true === 'false') data.val_true = false; + if (data.val_true == parseFloat(data.val_true)) data.val_true = parseFloat(data.val_true); + + var settings = { + oid: data.oid || null, + staticValue: data.staticValue, + checkboxSize: data.checkboxSize || 'big', + checkboxColor: data.checkboxColor || 'grey', + checkboxColorOn: data.checkboxColorOn || data.checkboxColor || 'orange', + readOnly: vis.editMode || data.readOnly || false, + min: data.val_false, + max: data.val_true + }; + if (settings.checkboxSize === 'small') { + $div.css({width: 108, height: 34}); + } + + if (!$div.find('input').length) $div.append(''); + var $input = $div.find('input'); + + var $shineCheckbox = $input.shineCheckbox(settings); + function onChange(e, newVal, oldVal) { + $shineCheckbox.shineCheckbox('value', vis.binds.hqwidgets.checkbox.isTrue(newVal, settings.max)); + } + + if (settings.oid && settings.oid !== 'nothing_selected') { + $shineCheckbox.shineCheckbox('value', vis.binds.hqwidgets.checkbox.isTrue(vis.states.attr(settings.oid + '.val'), settings.max)); + $shineCheckbox.data('update', false); + vis.states.bind(settings.oid + '.val', onChange); + // remember all ids, that bound + $div.data('bound', [settings.oid + '.val']); + // remember bind handler + $div.data('bindHandler', onChange); + + $div.find('input').change(function (evt) { + if ($(this).data('update')) { + $(this).data('update', false); + } else { + vis.setValue(settings.oid, $(this).prop('checked') ? settings.max : settings.min); + } + }); + } else { + $shineCheckbox.shineCheckbox('value', vis.binds.hqwidgets.checkbox.isTrue(settings.staticValue, settings.max)); + } + } + }, + odometer: function (view, data) { + vis.binds.hqwidgets.showVersion(); + + var $div = $('#' + data.wid); + if (!$div.length) { + setTimeout(function () { + vis.binds.hqwidgets.odometer(view, data); + }, 100); + return; + } else + if (!$div.is(':visible')) { + setTimeout(function () { + vis.binds.hqwidgets.odometer(view, data); + }, 500); + return; + } + + Odometer.prototype.watchForMutations = function() {}; + + var oid = data.oid; + var format = data.format || '(.ddd),dd'; + var factor = parseFloat(data.factor) || 1; + var max = 0; + var $od = $div.find('.odometer'); + if ($od.length) { + $od.innerHTML = ''; + $od.remove(); + } + $div.append('
'); + $od = $div.find('.odometer'); + + if (data.leadingZeros) { + var m = format.match(/\([,.\s]?(d+)\)/); + if (m && m[1]) { + max = m[1].length; + max = Math.pow(10, max); + } + m = format.match(/(\(+\))?[,.](d+)/); + if (m && m[2]) { + format += 'd'; + max += Math.pow(0.1, m[2].length + 1); + } else { + max *= 10; + format = format.replace('d', 'dd'); + factor *= 10; + } + $od.parent().addClass('odometer-leading'); + } + + var od = new Odometer({ + el: $od[0], + value: (vis.states[oid + '.val'] || 0) * factor + max, + duration: parseInt(data.duration, 10) || 3000, + theme: data.style || 'car', + format: format + }); + + + if (oid && oid !== 'nothing_selected') { + vis.states.bind(oid + '.val', function (e, newVal) { + od.update(parseFloat(newVal) * factor + max); + }); + od.update(parseFloat(vis.states[oid + '.val']) * factor + max); + } else { + od.update(max); + } + } +}; + +if (vis.editMode) { +/* + "tpl": "tplHqShutter", + "hqoptions" : "{ + "x":1095, + "y":336, + "height":54, + "width":54, + "radius":0, + "zindex":3, + "buttonType":3, + "windowConfig":"1", + "title":"Schlaffzimmer.Rolladen.Aktor", + "room":"Schlafzimmer", + + }", + + * / + /* + "tpl": "tplHqButton", + "hqoptions": "{ + "x":1040, + "y":429, + "height":46, + "width":46, + "radius":22, + "zindex":2, + "iconName":"img/KinderBug.png", + "title":"LampeAmFenster.Aktor", + "room":"Kinderzimmer", + "hm_id":"7480" + }", + */ + /* + "tpl": "tplHqOutTemp", + "hqoptions": "{ + "x":481, + "y":45, + "width":46, + "radius":22, + "zindex":2, + "buttonType":2, + "iconName":"Temperature.png", + "title":"Temperatur.Sensor", + "room":"Balkon", + "hm_id":"12871", + "charts":{ + "navigator":"", + "percentaxis":"true", + "period":"72", + "theme":"dark-blue", + "range":"24", + "scrollbar":"true", + "grouping":"true", + "legend":"inline", + "zoom":"true", + "loader":"false" + } + }", + "informWindow": "{"x":85, + "y":20, + "width":656, + "height":491}" + }, +*//* + "tpl": "tplHqInTemp", + "hqoptions": "{ + "x":877, + "y":430, + "height":44, + "width":46, + "radius":22, + "zindex":2, + "buttonType":1, + "iconName":"Temperature.png", + "title":"Heizung.Regler", + "room":"Kinderzimmer", + "hm_id":"3837", + "hm_idV":"3822", + "charts":{ + "navigator":"", + "percentaxis":"true", + "period":"72", + "theme":"dark-green", + "range":"24", + "scrollbar":"true", + "grouping":"true", + "legend":"inline", + "zoom":"true", + "loader":"false" + } + }", + "informWindow": "{ + "x":500, + "y":253, + "width":800, + "height":400 + }" + */ + + vis.binds.hqwidgets.convertOldWidgets = function (widget) { + if (widget.data && widget.data.hqoptions) { + try { + var hqoptions = JSON.parse(widget.data.hqoptions); + widget.style.height = 45; + widget.style.width = 45; + for (var opt in hqoptions) { + if (opt === 'width') { + widget.style.width = hqoptions.width || 45; + } else if (opt === 'height') { + widget.style.height = hqoptions.height || 45; + } else if (opt === 'radius') { + widget.style['border-radius'] = hqoptions.radius + 'px'; + } else if (opt === 'zindex') { + widget.style['z-index'] = hqoptions.zindex; + } else if (opt === 'iconName') { + widget.data.btIconWidth = 32; + if (hqoptions.iconName === 'Temperature.png') { + widget.data.iconName = 'img/Heating.png' + } else + if (hqoptions.iconName === 'Lamp.png') { + widget.data.iconName = 'img/Lamp.png' + } else + if (hqoptions.iconName && hqoptions.iconName.indexOf('http://') === -1 && hqoptions.iconName[0] !== '/') { + widget.data.iconName = '/' + vis.conn.namespace + '/' + vis.projectPrefix + hqoptions.iconName; + } else { + widget.data.iconName = hqoptions.iconName; + } + } else if (opt === 'iconOn') { + if (hqoptions.iconOn === 'Temperature.png') { + widget.data.iconOn = 'img/Heating.png' + } else + if (hqoptions.iconOn === 'Lamp.png') { + widget.data.iconOn = 'img/Lamp.png' + } else + if (hqoptions.iconOn && hqoptions.iconOn.indexOf('http://') === -1 && hqoptions.iconOn[0] !== '/') { + widget.data.iconOn = '/' + vis.conn.namespace + '/' + vis.projectPrefix + hqoptions.iconOn; + } else { + widget.data.iconOn = hqoptions.iconOn; + } + } else if (opt === 'title') { + widget.data.descriptionLeft = hqoptions.title; + } else if (opt === 'room') { + widget.data.descriptionLeft += '
' + hqoptions.room; + } else if (opt === 'windowConfig') { + var parts = hqoptions.windowConfig.split(','); + widget.data.slide_count = parts.length || 1; + for (var p = 0; p < parts.length; p++) { + if (parts[p] === '0') { + widget.data['slide_type' + (p + 1)] = ''; + } else if (parts[p] === '1') { + widget.data['slide_type' + (p + 1)] = 'left'; + } else if (parts[p] === '2') { + widget.data['slide_type' + (p + 1)] = 'right'; + } else if (parts[p] === '3') { + widget.data['slide_type' + (p + 1)] = 'top'; + } + } + widget.data.border_width = 1; + if (widget.data.hm_id !== undefined) delete widget.data.hm_id; + if (widget.data.digits !== undefined) delete widget.data.digits; + if (widget.data.factor !== undefined) delete widget.data.factor; + } + } + } catch (e) { + console.log('Cannot convert. Invalid JSON in hqoptions: ' + widget.data.hqoptions); + } + delete widget.data.hqoptions; + } + return widget; + }; + + vis.binds.hqwidgets.changedSensorId = function (widgetID, view, newId, attr, isCss, oldValue) { + var index = attr.match(/(\d+)$/); + var bName = (attr === 'oid-slide-handle' + index[1]) ? 'oid-slide-handle-lowbat' : 'oid-slide-sensor-lowbat'; + bName += index[1]; + var fields = {}; + fields[bName] = 'indicator.battery'; + + return vis.binds.hqwidgets.changedId (widgetID, view, newId, fields); + }; + + vis.binds.hqwidgets.changedWindowId = function (widgetID, view, newId, attr, isCss, oldValue) { + if (oldValue && oldValue !== 'nothing_selected') return; + return vis.binds.hqwidgets.changedId (widgetID, view, newId, { + 'oid-battery': 'indicator.battery', + 'oid-working': 'indicator.working', + 'oid-signal': 'indicator.signal', + 'oid-humidity': 'value.humidity' + }); + }; + + vis.binds.hqwidgets.changedId = function (widgetID, view, newId, fields) { + var obj = vis.objects[newId]; + var changed = []; + // If it is real object and SETPOINT + if (obj && obj.common && obj.type === 'state') { + var roles = []; + + // If some attributes are not set + for (var field in fields) { + if (!fields.hasOwnProperty(field)) continue; + if (!vis.views[view].widgets[widgetID].data[field]) roles.push(fields[field]); + } + + if (roles.length) { + var result = vis.findByRoles(newId, roles); + if (result) { + var name; + for (var r in result) { + if (!result.hasOwnProperty(r)) continue; + name = null; + for (field in fields) { + if (!fields.hasOwnProperty(field)) continue; + if (fields[field] == r) { + name = field; + break; + } + } + if (name) { + changed.push(name); + vis.views[view].widgets[widgetID].data[name] = result[r]; + vis.widgets[widgetID].data[name] = result[r]; + } + } + } + } + + if (!vis.views[view].widgets[widgetID].data.descriptionLeft && obj.common.name) { + vis.views[view].widgets[widgetID].data.descriptionLeft = obj.common.name; + } + } + + return changed.length ? changed : null; + }; + + vis.binds.hqwidgets.changedTempId = function (widgetID, view, newId, attr, isCss, oldValue) { + if (oldValue && oldValue !== 'nothing_selected') return; + return vis.binds.hqwidgets.changedId (widgetID, view, newId, { + 'oid-battery': 'indicator.battery', + 'oid-working': 'indicator.working', + 'oid-signal': 'indicator.signal', + 'oid-humidity': 'value.humidity' + }); + }; + + vis.binds.hqwidgets.changedButtonId = function (widgetID, view, newId, attr, isCss, oldValue) { + if (oldValue && oldValue !== 'nothing_selected') return; + return vis.binds.hqwidgets.changedId (widgetID, view, newId, { + 'oid-battery': 'indicator.battery', + 'oid-working': 'indicator.working', + 'oid-signal': 'indicator.signal' + }); + }; + + vis.binds.hqwidgets.changedLockId = function (widgetID, view, newId, attr, isCss, oldValue) { + if (oldValue && oldValue !== 'nothing_selected') return; + return vis.binds.hqwidgets.changedId (widgetID, view, newId, { + 'oid-battery': 'indicator.battery', + 'oid-working': 'indicator.working', + 'oid-signal': 'indicator.signal' + }); + }; + + vis.binds.hqwidgets.changedTemperatureId = function (widgetID, view, newId, attr, isCss, oldValue) { + if (oldValue && oldValue !== 'nothing_selected') return; + return vis.binds.hqwidgets.changedId (widgetID, view, newId, { + 'oid-humidity': 'value.humidity' + }); + }; +} diff --git a/widgets/hqwidgets/js/jquery.knob.js b/widgets/hqwidgets/js/jquery.knob.js new file mode 100644 index 0000000..f0b0029 --- /dev/null +++ b/widgets/hqwidgets/js/jquery.knob.js @@ -0,0 +1,820 @@ +/*!jQuery Knob*/ +/** + * Downward compatible, touchable dial + * + * Version: 1.2.11 + * Requires: jQuery v1.7+ + * + * Copyright (c) 2012 Anthony Terrien + * Under MIT License (http://www.opensource.org/licenses/mit-license.php) + * + * small modifications by bluefox in this version + * + * Thanks to vor, eskimoblood, spiffistan, FabrizioC + */ +(function (factory) { + if (typeof exports === 'object') { + // CommonJS + module.exports = factory(require('jquery')); + } else if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + /** + * Kontrol library + */ + "use strict"; + + /** + * Definition of globals and core + */ + var k = {}, // kontrol + max = Math.max, + min = Math.min; + + k.c = {}; + k.c.d = $(document); + k.c.t = function (e) { + return e.originalEvent.touches.length - 1; + }; + + /** + * Kontrol Object + * + * Definition of an abstract UI control + * + * Each concrete component must call this one. + * + * k.o.call(this); + * + */ + k.o = function () { + var s = this; + + this.o = null; // array of options + this.$ = null; // jQuery wrapped element + this.i = null; // mixed HTMLInputElement or array of HTMLInputElement + this.g = null; // deprecated 2D graphics context for 'pre-rendering' + this.v = null; // value ; mixed array or integer + this.cv = null; // change value ; not commited value + this.x = 0; // canvas x position + this.y = 0; // canvas y position + this.w = 0; // canvas width + this.h = 0; // canvas height + this.$c = null; // jQuery canvas element + this.c = null; // rendered canvas context + this.t = 0; // touches index + this.isInit = false; + this.fgColor = null; // main color + this.pColor = null; // previous color + this.dH = null; // draw hook + this.cH = null; // change hook + this.eH = null; // cancel hook + this.rH = null; // release hook + this.scale = 1; // scale factor + this.relative = false; + this.relativeWidth = false; + this.relativeHeight = false; + this.$div = null; // component div + + this.run = function () { + var cf = function (e, conf) { + var k; + for (k in conf) { + s.o[k] = conf[k]; + } + s._carve().init(); + s._configure() + ._draw(); + }; + + if (this.$.data('kontroled')) return; + this.$.data('kontroled', true); + + this.extend(); + this.o = $.extend({ + // Config + min: this.$.data('min') !== undefined ? this.$.data('min') : 0, + max: this.$.data('max') !== undefined ? this.$.data('max') : 100, + stopper: true, + readOnly: this.$.data('readonly') || (this.$.attr('readonly') === 'readonly'), + + // UI + cursor: this.$.data('cursor') === true && 30 + || this.$.data('cursor') || 0, + thickness: this.$.data('thickness') + && Math.max(Math.min(this.$.data('thickness'), 1), 0.01) + || 0.35, + lineCap: this.$.data('linecap') || 'butt', + width: this.$.data('width') || 200, + height: this.$.data('height') || 200, + displayInput: this.$.data('displayinput') == null || this.$.data('displayinput'), + displayPrevious: this.$.data('displayprevious'), + fgColor: this.$.data('fgcolor') || '#87CEEB', + inputColor: this.$.data('inputcolor'), + font: this.$.data('font') || 'Arial', + fontWeight: this.$.data('font-weight') || 'bold', + inline: false, + step: this.$.data('step') || 1, + rotation: this.$.data('rotation'), + + // Hooks + draw: null, // function () {} + change: null, // function (value) {} + cancel: null, // function () {} + release: null, // function (value) {} + + // Output formatting, allows to add unit: %, ms ... + format: function(v) { + return v; + }, + parse: function (v) { + return parseFloat(v); + }, + colorize: function (color, v) { + return color; + } + }, this.o + ); + + // finalize options + this.o.flip = this.o.rotation === 'anticlockwise' || this.o.rotation === 'acw'; + if (!this.o.inputColor) { + this.o.inputColor = this.o.fgColor; + } + + // routing value + if (this.$.is('fieldset')) { + + // fieldset = array of integer + this.v = {}; + this.i = this.$.find('input'); + this.i.each(function(k) { + var $this = $(this); + s.i[k] = $this; + s.v[k] = s.o.parse($this.val()); + + $this.bind( + 'change blur', + function () { + var val = {}; + var setByUser = false; + val[k] = $this.val(); + if ($this.data('setByUser')) { + $this.data('setByUser', false); + setByUser = true; + } + s.val(s._validate(val), undefined, setByUser); + } + ); + }); + this.$.find('legend').remove(); + } else { + + // input = integer + this.i = this.$; + this.v = this.o.parse(this.$.val()); + this.v === '' && (this.v = this.o.min); + this.$.bind( + 'change blur', + function () { + var setByUser = false; + if (s.$.data('setByUser')) { + s.$.data('setByUser', false); + setByUser = true; + } + s.val(s._validate(s.o.parse(s.$.val())), undefined, setByUser); + } + ); + + } + + !this.o.displayInput && this.$.hide(); + + // adds needed DOM elements (canvas, div) + this.$c = $(document.createElement('canvas')).attr({ + width: this.o.width, + height: this.o.height + }); + + // wraps all elements in a div + // add to DOM before Canvas init is triggered + this.$div = $('
'); + + this.$.wrap(this.$div).before(this.$c); + this.$div = this.$.parent(); + + if (typeof G_vmlCanvasManager !== 'undefined') { + G_vmlCanvasManager.initElement(this.$c[0]); + } + + this.c = this.$c[0].getContext ? this.$c[0].getContext('2d') : null; + + if (!this.c) { + throw { + name: "CanvasNotSupportedException", + message: "Canvas not supported. Please use excanvas on IE8.0.", + toString: function(){return this.name + ": " + this.message} + } + } + + // hdpi support + this.scale = (window.devicePixelRatio || 1) / ( + this.c.webkitBackingStorePixelRatio || + this.c.mozBackingStorePixelRatio || + this.c.msBackingStorePixelRatio || + this.c.oBackingStorePixelRatio || + this.c.backingStorePixelRatio || 1 + ); + + // detects relative width / height + this.relativeWidth = this.o.width % 1 !== 0 + && this.o.width.indexOf('%'); + this.relativeHeight = this.o.height % 1 !== 0 + && this.o.height.indexOf('%'); + this.relative = this.relativeWidth || this.relativeHeight; + + // computes size and carves the component + this._carve(); + + // prepares props for transaction + if (this.v instanceof Object) { + this.cv = {}; + this.copy(this.v, this.cv); + } else { + this.cv = this.v; + } + + // binds configure event + this.$ + .bind("configure", cf) + .parent() + .bind("configure", cf); + + // finalize init + this._listen() + ._configure() + ._xy() + .init(); + + this.isInit = true; + + this.$.val(this.o.format(this.v)); + this._draw(); + + return this; + }; + + this._carve = function() { + if (this.relative) { + var w = this.relativeWidth ? + this.$div.parent().width() * + parseInt(this.o.width) / 100 + : this.$div.parent().width(), + h = this.relativeHeight ? + this.$div.parent().height() * + parseInt(this.o.height) / 100 + : this.$div.parent().height(); + + // apply relative + this.w = this.h = Math.min(w, h); + } else { + this.w = this.o.width; + this.h = this.o.height; + } + + // finalize div + this.$div.css({ + 'width': this.w + 'px', + 'height': this.h + 'px' + }); + + // finalize canvas with computed width + this.$c.attr({ + width: this.w, + height: this.h + }); + + // scaling + if (this.scale !== 1) { + this.$c[0].width = this.$c[0].width * this.scale; + this.$c[0].height = this.$c[0].height * this.scale; + this.$c.width(this.w); + this.$c.height(this.h); + } + + return this; + } + + this._draw = function () { + + // canvas pre-rendering + var d = true; + + s.g = s.c; + + s.clear(); + + s.dH && (d = s.dH()); + + d !== false && s.draw(); + }; + + this._touch = function (e, x, y) { + var touchMove = function (e) { + var v = s.xy2val( + e.originalEvent.touches[s.t].pageX, + e.originalEvent.touches[s.t].pageY + ); + + if (v == s.cv) return; + + if (s.cH && s.cH(v) === false) return; + + s.change(s._validate(v)); + s._draw(); + }; + + // get touches index + this.t = k.c.t(e); + + // First touch + touchMove(e); + + // Touch events listeners + k.c.d + .bind("touchmove.k", touchMove) + .bind( + "touchend.k", + function () { + k.c.d.unbind('touchmove.k touchend.k'); + s.val(s.cv, undefined, true); + } + ); + + return this; + }; + + this._mouse = function (e) { + var mouseMove = function (e) { + var v = s.xy2val(e.pageX, e.pageY); + + if (v == s.cv) return; + + if (s.cH && (s.cH(v) === false)) return; + + s.change(s._validate(v)); + s._draw(); + }; + + // First click + mouseMove(e); + + // Mouse events listeners + k.c.d + .bind("mousemove.k", mouseMove) + .bind( + // Escape key cancel current change + "keyup.k", + function (e) { + if (e.keyCode === 27) { + k.c.d.unbind("mouseup.k mousemove.k keyup.k"); + + if (s.eH && s.eH() === false) + return; + + s.cancel(); + } + } + ) + .bind( + "mouseup.k", + function (e) { + k.c.d.unbind('mousemove.k mouseup.k keyup.k'); + s.val(s.cv, undefined, true); + } + ); + + return this; + }; + + this._xy = function () { + var o = this.$c.offset(); + this.x = o.left; + this.y = o.top; + + return this; + }; + + this._listen = function () { + if (!this.o.readOnly) { + this.$c + .bind( + "mousedown", + function (e) { + e.preventDefault(); + s._xy()._mouse(e); + } + ) + .bind( + "touchstart", + function (e) { + e.preventDefault(); + s._xy()._touch(e); + } + ); + + this.listen(); + } else { + this.$.attr('readonly', 'readonly'); + } + + if (this.relative) { + $(window).resize(function() { + s._carve().init(); + s._draw(); + }); + } + + return this; + }; + + this._configure = function () { + + // Hooks + if (this.o.draw) this.dH = this.o.draw; + if (this.o.change) this.cH = this.o.change; + if (this.o.cancel) this.eH = this.o.cancel; + if (this.o.release) this.rH = this.o.release; + + if (this.o.displayPrevious) { + this.pColor = this.h2rgba(this.o.fgColor, "0.4"); + this.fgColor = this.h2rgba(this.o.fgColor, "0.6"); + } else { + this.fgColor = this.o.fgColor; + } + + return this; + }; + + this._clear = function () { + this.$c[0].width = this.$c[0].width; + }; + + this._validate = function (v) { + var val = (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; + return Math.round(val * 100) / 100; + }; + + // Abstract methods + this.listen = function () {}; // on start, one time + this.extend = function () {}; // each time configure triggered + this.init = function () {}; // each time configure triggered + this.change = function (v) {}; // on change + this.val = function (v) {}; // on release + this.xy2val = function (x, y) {}; // + this.draw = function () {}; // on change / on release + this.clear = function () { this._clear(); }; + + // Utils + this.h2rgba = function (h, a) { + var rgb; + h = h.substring(1,7) + rgb = [ + parseInt(h.substring(0,2), 16), + parseInt(h.substring(2,4), 16), + parseInt(h.substring(4,6), 16) + ]; + + return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; + }; + + this.copy = function (f, t) { + for (var i in f) { + t[i] = f[i]; + } + }; + }; + + + /** + * k.Dial + */ + k.Dial = function () { + k.o.call(this); + + this.startAngle = null; + this.xy = null; + this.radius = null; + this.lineWidth = null; + this.cursorExt = null; + this.w2 = null; + this.PI2 = 2*Math.PI; + + this.extend = function () { + this.o = $.extend({ + bgColor: this.$.data('bgcolor') || '#EEEEEE', + angleOffset: this.$.data('angleoffset') || 0, + angleArc: this.$.data('anglearc') || 360, + inline: true + }, this.o); + }; + + this.val = function (v, triggerRelease, setByUser) { + if (null != v) { + + // reverse format + v = this.o.parse(v); + + if (triggerRelease !== false + && v != this.v + && this.rH + && this.rH(v, setByUser) === false) { return; } + + this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; + this.v = this.cv; + this.$.val(this.o.format(this.v)); + this._draw(); + } else { + return this.v; + } + }; + + this.xy2val = function (x, y) { + var a, ret; + + a = Math.atan2( + x - (this.x + this.w2), + - (y - this.y - this.w2) + ) - this.angleOffset; + + if (this.o.flip) { + a = this.angleArc - a - this.PI2; + } + + if (this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) { + + // if isset angleArc option, set to min if .5 under min + a = 0; + } else if (a < 0) { + a += this.PI2; + } + + ret = (a * (this.o.max - this.o.min) / this.angleArc) + this.o.min; + + this.o.stopper && (ret = max(min(ret, this.o.max), this.o.min)); + + return ret; + }; + + this.listen = function () { + + // bind MouseWheel + var s = this, mwTimerStop, + mwTimerRelease, + mw = function (e) { + e.preventDefault(); + + var ori = e.originalEvent, + deltaX = ori.detail || ori.wheelDeltaX, + deltaY = ori.detail || ori.wheelDeltaY, + v = s._validate(s.o.parse(s.$.val())) + + ( + deltaX > 0 || deltaY > 0 + ? s.o.step + : deltaX < 0 || deltaY < 0 ? -s.o.step : 0 + ); + + v = max(min(v, s.o.max), s.o.min); + + s.val(v, false); + + if (s.rH) { + // Handle mousewheel stop + clearTimeout(mwTimerStop); + mwTimerStop = setTimeout(function () { + s.rH(v, true); + mwTimerStop = null; + }, 100); + + // Handle mousewheel releases + if (!mwTimerRelease) { + mwTimerRelease = setTimeout(function () { + if (mwTimerStop) + s.rH(v, true); + mwTimerRelease = null; + }, 200); + } + } + }, + kval, + to, + m = 1, + kv = { + 37: -s.o.step, + 38: s.o.step, + 39: s.o.step, + 40: -s.o.step + }; + + this.$ + .bind( + "keydown", + function (e) { + var kc = e.keyCode; + + // numpad support + if (kc >= 96 && kc <= 105) { + kc = e.keyCode = kc - 48; + } + + kval = parseInt(String.fromCharCode(kc)); + + if (isNaN(kval)) { + (kc !== 13) // enter + && kc !== 8 // bs + && kc !== 9 // tab + && kc !== 189 // - + && (kc !== 190 + || s.$.val().match(/\./)) // . allowed once + && e.preventDefault(); + + // arrows + if ($.inArray(kc,[37,38,39,40]) > -1) { + e.preventDefault(); + + var v = s.o.parse(s.$.val()) + kv[kc] * m; + s.o.stopper && (v = max(min(v, s.o.max), s.o.min)); + + s.change(s._validate(v)); + s._draw(); + + // long time keydown speed-up + to = window.setTimeout(function () { + m *= 2; + }, 30); + } + } + } + ) + .bind( + "keyup", + function (e) { + if (isNaN(kval)) { + if (to) { + window.clearTimeout(to); + to = null; + m = 1; + s.val(s.$.val(), undefined, true); + } + } else { + // kval postcond + (s.$.val() > s.o.max && s.$.val(s.o.max)) + || (s.$.val() < s.o.min && s.$.val(s.o.min)); + } + } + ); + + this.$c.bind("mousewheel DOMMouseScroll", mw); + this.$.bind("mousewheel DOMMouseScroll", mw) + }; + + this.init = function () { + if (this.v < this.o.min + || this.v > this.o.max) { this.v = this.o.min; } + + this.$.val(this.o.format(this.v)); + this.w2 = this.w / 2; + this.cursorExt = this.o.cursor / 100; + this.xy = this.w2 * this.scale; + this.lineWidth = this.xy * this.o.thickness; + this.lineCap = this.o.lineCap; + this.radius = this.xy - this.lineWidth / 2; + + this.o.angleOffset + && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset); + + this.o.angleArc + && (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc); + + // deg to rad + this.angleOffset = this.o.angleOffset * Math.PI / 180; + this.angleArc = this.o.angleArc * Math.PI / 180; + + // compute start and end angles + this.startAngle = 1.5 * Math.PI + this.angleOffset; + this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc; + + var s = max( + String(Math.abs(this.o.max)).length, + String(Math.abs(this.o.min)).length, + 2 + ) + 2; + + this.o.displayInput + && this.i.css({ + 'width' : ((this.w / 2 + 4) >> 0) + 'px', + 'height' : ((this.w / 3) >> 0) + 'px', + 'position' : 'absolute', + 'vertical-align' : 'middle', + 'margin-top' : ((this.w / 3) >> 0) + 'px', + 'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px', + 'border' : 0, + 'background' : 'none', + 'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font, + 'text-align' : 'center', + 'color' : this.o.inputColor || this.o.fgColor, + 'padding' : '0px', + '-webkit-appearance': 'none' + }) || this.i.css({ + 'width': '0px', + 'visibility': 'hidden' + }); + }; + + this.change = function (v) { + this.cv = v; + this.$.val(this.o.format(v)); + }; + + this.angle = function (v) { + return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min); + }; + + this.arc = function (v) { + var sa, ea; + v = this.angle(v); + if (this.o.flip) { + sa = this.endAngle + 0.00001; + ea = sa - v - 0.00001; + } else { + sa = this.startAngle - 0.00001; + ea = sa + v + 0.00001; + } + this.o.cursor + && (sa = ea - this.cursorExt) + && (ea = ea + this.cursorExt); + + return { + s: sa, + e: ea, + d: this.o.flip && !this.o.cursor + }; + }; + + this.draw = function () { + var c = this.g, // context + a = this.arc(this.cv), // Arc + pa, // Previous arc + r = 1; + + c.lineWidth = this.lineWidth; + c.lineCap = this.lineCap; + + if (this.o.bgColor !== "none") { + c.beginPath(); + c.strokeStyle = this.o.bgColor; + c.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, this.startAngle + 0.00001, true); + c.stroke(); + } + + if (this.o.displayPrevious) { + pa = this.arc(this.v); + c.beginPath(); + c.strokeStyle = this.o.colorize(this.pColor, this.v, true); + c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d); + c.stroke(); + r = this.cv == this.v; + } + + c.beginPath(); + c.strokeStyle = r ? this.o.colorize(this.o.fgColor, this.cv, true) : this.o.colorize(this.o.fgColor, this.cv, false); + c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d); + c.stroke(); + }; + + this.cancel = function () { + this.val(this.v); + }; + }; + + $.fn.dial = $.fn.knobHQ = function (o) { + return this.each( + function () { + var d = new k.Dial(); + d.o = o; + d.$ = $(this); + d.run(); + } + ).parent(); + }; + +})); diff --git a/widgets/hqwidgets/js/odometer.min.js b/widgets/hqwidgets/js/odometer.min.js new file mode 100644 index 0000000..2c08ad7 --- /dev/null +++ b/widgets/hqwidgets/js/odometer.min.js @@ -0,0 +1,2 @@ +/*! odometer 0.4.7 */ +(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G=[].slice;q='',n=''+q+"",d='8'+n+"",g='',c="(,ddd).dd",h=/^\(?([^)]*)\)?(?:(.)(d+))?$/,i=30,f=2e3,a=20,j=2,e=.5,k=1e3/i,b=1e3/a,o="transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",y=document.createElement("div").style,p=null!=y.transition||null!=y.webkitTransition||null!=y.mozTransition||null!=y.oTransition,w=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,l=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,s=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},v=function(a,b){return a.className=a.className.replace(new RegExp("(^| )"+b.split(" ").join("|")+"( |$)","gi")," ")},r=function(a,b){return v(a,b),a.className+=" "+b},z=function(a,b){var c;return null!=document.createEvent?(c=document.createEvent("HTMLEvents"),c.initEvent(b,!0,!0),a.dispatchEvent(c)):void 0},u=function(){var a,b;return null!=(a=null!=(b=window.performance)&&"function"==typeof b.now?b.now():void 0)?a:+new Date},x=function(a,b){return null==b&&(b=0),b?(a*=Math.pow(10,b),a+=.5,a=Math.floor(a),a/=Math.pow(10,b)):Math.round(a)},A=function(a){return 0>a?Math.ceil(a):Math.floor(a)},t=function(a){return a-x(a)},C=!1,(B=function(){var a,b,c,d,e;if(!C&&null!=window.jQuery){for(C=!0,d=["html","text"],e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(function(a){var b;return b=window.jQuery.fn[a],window.jQuery.fn[a]=function(a){var c;return null==a||null==(null!=(c=this[0])?c.odometer:void 0)?b.apply(this,arguments):this[0].odometer.update(a)}}(a));return e}})(),setTimeout(B,0),m=function(){function a(b){var c,d,e,g,h,i,l,m,n,o,p=this;if(this.options=b,this.el=this.options.el,null!=this.el.odometer)return this.el.odometer;this.el.odometer=this,m=a.options;for(d in m)g=m[d],null==this.options[d]&&(this.options[d]=g);null==(h=this.options).duration&&(h.duration=f),this.MAX_VALUES=this.options.duration/k/j|0,this.resetFormat(),this.value=this.cleanValue(null!=(n=this.options.value)?n:""),this.renderInside(),this.render();try{for(o=["innerHTML","innerText","textContent"],i=0,l=o.length;l>i;i++)e=o[i],null!=this.el[e]&&!function(a){return Object.defineProperty(p.el,a,{get:function(){var b;return"innerHTML"===a?p.inside.outerHTML:null!=(b=p.inside.innerText)?b:p.inside.textContent},set:function(a){return p.update(a)}})}(e)}catch(q){c=q,this.watchForMutations()}}return a.prototype.renderInside=function(){return this.inside=document.createElement("div"),this.inside.className="odometer-inside",this.el.innerHTML="",this.el.appendChild(this.inside)},a.prototype.watchForMutations=function(){var a,b=this;if(null!=l)try{return null==this.observer&&(this.observer=new l(function(){var a;return a=b.el.innerText,b.renderInside(),b.render(b.value),b.update(a)})),this.watchMutations=!0,this.startWatchingMutations()}catch(c){a=c}},a.prototype.startWatchingMutations=function(){return this.watchMutations?this.observer.observe(this.el,{childList:!0}):void 0},a.prototype.stopWatchingMutations=function(){var a;return null!=(a=this.observer)?a.disconnect():void 0},a.prototype.cleanValue=function(a){var b;return"string"==typeof a&&(a=a.replace(null!=(b=this.format.radix)?b:".",""),a=a.replace(/[.,]/g,""),a=a.replace("","."),a=parseFloat(a,10)||0),x(a,this.format.precision)},a.prototype.bindTransitionEnd=function(){var a,b,c,d,e,f,g=this;if(!this.transitionEndBound){for(this.transitionEndBound=!0,b=!1,e=o.split(" "),f=[],c=0,d=e.length;d>c;c++)a=e[c],f.push(this.el.addEventListener(a,function(){return b?!0:(b=!0,setTimeout(function(){return g.render(),b=!1,z(g.el,"odometerdone")},0),!0)},!1));return f}},a.prototype.resetFormat=function(){var a,b,d,e,f,g,i,j;if(a=null!=(i=this.options.format)?i:c,a||(a="d"),d=h.exec(a),!d)throw new Error("Odometer: Unparsable digit format");return j=d.slice(1,4),g=j[0],f=j[1],b=j[2],e=(null!=b?b.length:void 0)||0,this.format={repeating:g,radix:f,precision:e}},a.prototype.render=function(a){var b,c,d,e,f,g,h;for(null==a&&(a=this.value),this.stopWatchingMutations(),this.resetFormat(),this.inside.innerHTML="",f=this.options.theme,b=this.el.className.split(" "),e=[],g=0,h=b.length;h>g;g++)c=b[g],c.length&&((d=/^odometer-theme-(.+)$/.exec(c))?f=d[1]:/^odometer(-|$)/.test(c)||e.push(c));return e.push("odometer"),p||e.push("odometer-no-transitions"),e.push(f?"odometer-theme-"+f:"odometer-auto-theme"),this.el.className=e.join(" "),this.ribbons={},this.formatDigits(a),this.startWatchingMutations()},a.prototype.formatDigits=function(a){var b,c,d,e,f,g,h,i,j,k;if(this.digits=[],this.options.formatFunction)for(d=this.options.formatFunction(a),j=d.split("").reverse(),f=0,h=j.length;h>f;f++)c=j[f],c.match(/0-9/)?(b=this.renderDigit(),b.querySelector(".odometer-value").innerHTML=c,this.digits.push(b),this.insertDigit(b)):this.addSpacer(c);else for(e=!this.format.precision||!t(a)||!1,k=a.toString().split("").reverse(),g=0,i=k.length;i>g;g++)b=k[g],"."===b&&(e=!0),this.addDigit(b,e)},a.prototype.update=function(a){var b,c=this;return a=this.cleanValue(a),(b=a-this.value)?(v(this.el,"odometer-animating-up odometer-animating-down odometer-animating"),b>0?r(this.el,"odometer-animating-up"):r(this.el,"odometer-animating-down"),this.stopWatchingMutations(),this.animate(a),this.startWatchingMutations(),setTimeout(function(){return c.el.offsetHeight,r(c.el,"odometer-animating")},0),this.value=a):void 0},a.prototype.renderDigit=function(){return s(d)},a.prototype.insertDigit=function(a,b){return null!=b?this.inside.insertBefore(a,b):this.inside.children.length?this.inside.insertBefore(a,this.inside.children[0]):this.inside.appendChild(a)},a.prototype.addSpacer=function(a,b,c){var d;return d=s(g),d.innerHTML=a,c&&r(d,c),this.insertDigit(d,b)},a.prototype.addDigit=function(a,b){var c,d,e,f;if(null==b&&(b=!0),"-"===a)return this.addSpacer(a,null,"odometer-negation-mark");if("."===a)return this.addSpacer(null!=(f=this.format.radix)?f:".",null,"odometer-radix-mark");if(b)for(e=!1;;){if(!this.format.repeating.length){if(e)throw new Error("Bad odometer format without digits");this.resetFormat(),e=!0}if(c=this.format.repeating[this.format.repeating.length-1],this.format.repeating=this.format.repeating.substring(0,this.format.repeating.length-1),"d"===c)break;this.addSpacer(c)}return d=this.renderDigit(),d.querySelector(".odometer-value").innerHTML=a,this.digits.push(d),this.insertDigit(d)},a.prototype.animate=function(a){return p&&"count"!==this.options.animation?this.animateSlide(a):this.animateCount(a)},a.prototype.animateCount=function(a){var c,d,e,f,g,h=this;if(d=+a-this.value)return f=e=u(),c=this.value,(g=function(){var i,j,k;return u()-f>h.options.duration?(h.value=a,h.render(),void z(h.el,"odometerdone")):(i=u()-e,i>b&&(e=u(),k=i/h.options.duration,j=d*k,c+=j,h.render(Math.round(c))),null!=w?w(g):setTimeout(g,b))})()},a.prototype.getDigitCount=function(){var a,b,c,d,e,f;for(d=1<=arguments.length?G.call(arguments,0):[],a=e=0,f=d.length;f>e;a=++e)c=d[a],d[a]=Math.abs(c);return b=Math.max.apply(Math,d),Math.ceil(Math.log(b+1)/Math.log(10))},a.prototype.getFractionalDigitCount=function(){var a,b,c,d,e,f,g;for(e=1<=arguments.length?G.call(arguments,0):[],b=/^\-?\d*\.(\d*?)0*$/,a=f=0,g=e.length;g>f;a=++f)d=e[a],e[a]=d.toString(),c=b.exec(e[a]),e[a]=null==c?0:c[1].length;return Math.max.apply(Math,e)},a.prototype.resetDigits=function(){return this.digits=[],this.ribbons=[],this.inside.innerHTML="",this.resetFormat()},a.prototype.animateSlide=function(a){var b,c,d,f,g,h,i,j,k,l,m,n,o,p,q,s,t,u,v,w,x,y,z,B,C,D,E;if(s=this.value,j=this.getFractionalDigitCount(s,a),j&&(a*=Math.pow(10,j),s*=Math.pow(10,j)),d=a-s){for(this.bindTransitionEnd(),f=this.getDigitCount(s,a),g=[],b=0,m=v=0;f>=0?f>v:v>f;m=f>=0?++v:--v){if(t=A(s/Math.pow(10,f-m-1)),i=A(a/Math.pow(10,f-m-1)),h=i-t,Math.abs(h)>this.MAX_VALUES){for(l=[],n=h/(this.MAX_VALUES+this.MAX_VALUES*b*e),c=t;h>0&&i>c||0>h&&c>i;)l.push(Math.round(c)),c+=n;l[l.length-1]!==i&&l.push(i),b++}else l=function(){E=[];for(var a=t;i>=t?i>=a:a>=i;i>=t?a++:a--)E.push(a);return E}.apply(this);for(m=w=0,y=l.length;y>w;m=++w)k=l[m],l[m]=Math.abs(k%10);g.push(l)}for(this.resetDigits(),D=g.reverse(),m=x=0,z=D.length;z>x;m=++x)for(l=D[m],this.digits[m]||this.addDigit(" ",m>=j),null==(u=this.ribbons)[m]&&(u[m]=this.digits[m].querySelector(".odometer-ribbon-inner")),this.ribbons[m].innerHTML="",0>d&&(l=l.reverse()),o=C=0,B=l.length;B>C;o=++C)k=l[o],q=document.createElement("div"),q.className="odometer-value",q.innerHTML=k,this.ribbons[m].appendChild(q),o===l.length-1&&r(q,"odometer-last-value"),0===o&&r(q,"odometer-first-value");return 0>t&&this.addDigit("-"),p=this.inside.querySelector(".odometer-radix-mark"),null!=p&&p.parent.removeChild(p),j?this.addSpacer(this.format.radix,this.digits[j-1],"odometer-radix-mark"):void 0}},a}(),m.options=null!=(E=window.odometerOptions)?E:{},setTimeout(function(){var a,b,c,d,e;if(window.odometerOptions){d=window.odometerOptions,e=[];for(a in d)b=d[a],e.push(null!=(c=m.options)[a]?(c=m.options)[a]:c[a]=b);return e}},0),m.init=function(){var a,b,c,d,e,f;if(null!=document.querySelectorAll){for(b=document.querySelectorAll(m.options.selector||".odometer"),f=[],c=0,d=b.length;d>c;c++)a=b[c],f.push(a.odometer=new m({el:a,value:null!=(e=a.innerText)?e:a.textContent}));return f}},null!=(null!=(F=document.documentElement)?F.doScroll:void 0)&&null!=document.createEventObject?(D=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&m.options.auto!==!1&&m.init(),null!=D?D.apply(this,arguments):void 0}):document.addEventListener("DOMContentLoaded",function(){return m.options.auto!==!1?m.init():void 0},!1),"function"==typeof define&&define.amd?define(["jquery"],function(){return m}):"undefined"!=typeof exports&&null!==exports?module.exports=m:window.Odometer=m}).call(this); \ No newline at end of file