yunkong2/yunkong2.vis-metro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
zhongjin 2018-07-23 23:06:37 +08:00
commit e7e3d2f209
56 changed files with 21036 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/node_modules
/.idea

6
.npmignore Normal file
View File

@ -0,0 +1,6 @@
Gruntfile.js
tasks
node_modules
test
.travis.yml
appveyor.yml

7
.travis.yml Normal file
View File

@ -0,0 +1,7 @@
os:
- linux
language: node_js
node_js:
- '4'
- '8'
- '10'

157
Gruntfile.js Normal file
View File

@ -0,0 +1,157 @@
// 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";
module.exports = function (grunt) {
var srcDir = __dirname + '/';
var dstDir = srcDir + '.build/';
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;
// Project configuration.
grunt.initConfig({
pkg: pkg,
replace: {
core: {
options: {
patterns: [
{
match: /version: *"[\.0-9]*"/,
replacement: 'version: "' + version + '"'
},
{
match: /"version": *"[\.0-9]*",/g,
replacement: '"version": "' + version + '",'
},
{
match: /version: *"[\.0-9]*",/g,
replacement: 'version: "' + version + '",'
}
]
},
files: [
{
expand: true,
flatten: true,
src: [
srcDir + 'package.json',
srcDir + 'io-package.json'
],
dest: srcDir
},
{
expand: true,
flatten: true,
src: [
srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '.html'
],
dest: srcDir + 'widgets'
},
{
expand: true,
flatten: true,
src: [
srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '/js/' + pkg.name.substring('yunkong2.vis-'.length) + '.js'
],
dest: srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '/js'
}
]
}
},
// Javascript code styler
jscs: require(__dirname + '/tasks/jscs.js'),
// Lint
jshint: require(__dirname + '/tasks/jshint.js'),
http: {
get_hjscs: {
options: {
url: 'https://git.spacen.net/yunkong2/yunkong2.js-controller/master/tasks/jscs.js'
},
dest: 'tasks/jscs.js'
},
get_jshint: {
options: {
url: 'https://git.spacen.net/yunkong2/yunkong2.js-controller/master/tasks/jshint.js'
},
dest: 'tasks/jshint.js'
},/*
get_gruntfile: {
options: {
url: 'https://git.spacen.net/yunkong2/yunkong2.build/master/adapters/Gruntfile.js'
},
dest: 'Gruntfile.js'
},
get_utilsfile: {
options: {
url: 'https://git.spacen.net/yunkong2/yunkong2.build/master/adapters/utils.js'
},
dest: 'lib/utils.js'
},*/
get_jscsRules: {
options: {
url: 'https://git.spacen.net/yunkong2/yunkong2.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');
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', [
'exec',
'http',
'clean',
'replace',
'updateReadme',
'compress',
'copy',
'jshint',
'jscs'
]);
grunt.registerTask('prepublish', [
'http',
'replace',
'updateReadme'
]);
grunt.registerTask('p', [
'prepublish'
]);
};

22
LICENSE Normal file
View File

@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2015
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.

82
README.md Normal file
View File

@ -0,0 +1,82 @@
![Logo](admin/metro.png)
yunkong2.vis-metro
============
[![NPM version](http://img.shields.io/npm/v/yunkong2.vis-metro.svg)](https://www.npmjs.com/package/yunkong2.vis-metro)
[![Downloads](https://img.shields.io/npm/dm/yunkong2.vis-metro.svg)](https://www.npmjs.com/package/yunkong2.vis-metro)
[![NPM](https://nodei.co/npm/yunkong2.vis-metro.png?downloads=true)](https://nodei.co/npm/yunkong2.vis-metro/)
Metro widget sets for yunkong2.vis. Widgets are styled as Windows Metro interface.
![Screenshot](img/Demo2.png)
Build with http://metroui.org.ua/.
## Changelog
### 1.1.2 (2017-12-17)
- (bluefox) Fixed metro-string widget
### 1.1.1 (2017-05-27)
- (mctom) 2 Widgets added
- (buanet) fix tplMetroTileStateNumber
### 1.1.0 (2016-11-12)
- (bluefox) Support of new concept by vis
### 1.0.4 (2016-10-11)
- (bluefox) fix Metro Widget Heating
### 1.0.3 (2016-09-21)
- (bluefox) fix Metro Widget Tile State / val Badge Number
### 1.0.1 (2016-09-13)
- (bluefox) fix Metro Widget "Tile Dialog"
### 1.0.0 (2016-03-15)
- (bluefox) remove configuration dialog
### 0.2.1 (2016-01-31)
- (vore) add tplMetroTileBoolDialog
### 0.2.0 (2015-12-14)
- (bluefox) add custom icon for badges
### 0.1.11 (2015-12-03)
- (bluefox) fix Tile ValueList 8: badge icon.
### 0.1.10 (2015-12-01)
- (bluefox) fix bool/number widget: badge icon.
### 0.1.9 (2015-09-19)
- (bluefox) fix Navigation widget: Brand Background wird nicht angezeigt, sobald Brand Background inactive und Brand Background active den selben Wert haben.
- (instalator) support of old browsers
### 0.1.8 (2015-09-06)
- (bluefox) remove prepublish script because installation is not possible
### 0.1.6 (2015-08-14)
- (bluefox) prepublish script
- (bluefox) update toggle widget
### 0.1.5 (2015-08-12)
- (bluefox) protect against double event: click and touchstart
### 0.1.3 (2015-08-05)
- (bluefox) fix metro-tile-heating window icon
### 0.1.2 (2015-07-25)
- (bluefox) add mfd icons
- (bluefox) fix widgets with sliders if "min" != 0
### 0.1.1 (2015-07-10)
- (bluefox) make content_oid of "Tile Dialog / Badge Number" as object ID
### 0.1.0 (2015-06-29)
- (siedi) Add: Service status and humidity to heating tile
### 0.0.1 (2015-06-28)
- (bluefox) initial checkin
## License
Copyright (c) 2013-2015 hobbyquaker https://git.spacen.net/hobbyquaker, bluefox https://git.spacen.net/GermanBluefox
MIT

61
admin/index.html Normal file
View File

@ -0,0 +1,61 @@
<html>
<!-- these 4 files always have to be included -->
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/jquery.multiselect-1.13.css"/>
<script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
<!-- these two file always have to be included -->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<style>
.table_header {
background-color: blue;
color: white;
}
.ip {
width: 150px;
text-align: right;
}
</style>
<!-- you have to define 2 functions in the global scope: -->
<script type="text/javascript">
systemDictionary = {
"Metro Widgets settings": {
"en": "Metro Widgets settings",
"de": "Metro Widgets Einstellungen",
"ru": "Настройки Metro Widgets"
},
"There is nothing to setup": {
"en": "There is nothing to setup",
"de": "Es gibt nichts einzustellen",
"ru": "Нечего настраивать"
},
};
function load(settings, onChange) {
if (!settings) return;
onChange(false);
}
function save(callback) {
callback(null);
}
</script>
<div id="adapter-container">
<table><tr>
<td><img src="metro.png"></td>
<td style="padding-top: 20px;padding-left: 10px"><h3 class="translate">Metro Widgets settings</h3></td>
</tr></table>
<div class="translate">There is nothing to setup</h4>
</div>
</html>

BIN
admin/metro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
img/Demo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

85
io-package.json Normal file
View File

@ -0,0 +1,85 @@
{
"common": {
"name": "vis-metro",
"version": "1.1.2",
"news": {
"1.1.2": {
"en": "Fixed metro-string widget",
"de": "Korrigiert metro-string widget",
"ru": "Исправлен metro-string widget",
"nl": "Vaste metro-string widget",
"pt": "Atualizado o widget Metro-string",
"fr": "Widget de metro-string fixe"
},
"1.1.1": {
"en": "2 Widgets added\nfix tplMetroTileStateNumber",
"de": "2 Widgets hinzugefügt\nfix tplMetroTileStateNumber",
"ru": "Добавлено 2 виджета\nИсправлен MetroTileStateNumber"
},
"1.1.0": {
"en": "Support of new concept by vis",
"de": "Unterstützung vom neuen vis-Konzept",
"ru": "Поддержка нового концепта vis"
},
"1.0.4": {
"en": "fix Metro Widget Heating",
"de": "Korrigiert Metro Widget Heating",
"ru": "Исправлен виджет Metro Widget Heating"
},
"1.0.3": {
"en": "fix Metro Widget Tile State / val Badge Number",
"de": "Korrigiert Widget Tile State / val Badge Number",
"ru": "Исправлен виджет Tile State / val Badge Number"
},
"1.0.1": {
"en": "fix Metro Widget Tile Dialog",
"de": "Korrigiert Widget Tile Dialog",
"ru": "Исправлен виджет навигации"
}
},
"title": "yunkong2 Visualisation - metro style Widgets",
"desc": {
"en": "metro Widgets for yunkong2.vis",
"de": "metro Widgets für yunkong2.vis",
"ru": "metro Widgets для yunkong2.vis"
},
"platform": "Javascript/Node.js",
"loglevel": "info",
"icon": "metro.png",
"enabled": true,
"mode": "once",
"extIcon": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/master/admin/metro.png",
"keywords": [
"metro",
"vis",
"GUI",
"graphical",
"scada"
],
"readme": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/blob/master/README.md",
"authors": [
"hobbyquaker <hq@ccu.io>"
],
"localLink": "%web_protocol%://%ip%:%web_port%/vis/edit.html",
"license": "MIT",
"dependencies": [
{
"vis": ">=0.11.1"
}
],
"onlyWWW": true,
"singleton": true,
"type": "visualization-widgets",
"restartAdapters": [
"vis"
],
"noConfig": true
},
"native": {
"dependencies": [
"jqui-mfd",
"basic"
]
},
"instanceObjects": []
}

50
package.json Normal file
View File

@ -0,0 +1,50 @@
{
"name": "yunkong2.vis-metro",
"description": "Metro Widgets for yunkong2.vis",
"version": "1.1.2",
"author": {
"name": "hobbyquaker",
"email": "hq@ccu.io"
},
"contributors": [
"bluefox <dogafox@gmail.com>",
"hobbyquaker <hq@ccu.io>"
],
"homepage": "https://git.spacen.net/yunkong2/yunkong2.vis-metro",
"repository": {
"type": "git",
"url": "https://git.spacen.net/yunkong2/yunkong2.vis-metro"
},
"licenses": [
{
"type": "MIT",
"url": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/blob/master/LICENSE"
}
],
"keywords": [
"yunkong2",
"GUI",
"DashUI",
"web interface",
"home automation",
"SCADA",
"metro 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-metro/issues"
},
"main": "widgets/metro.html",
"scripts": {
"test": "node node_modules/mocha/bin/mocha --exit"
},
"license": "MIT"
}

17
tasks/jscs.js Normal file
View File

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

36
tasks/jscsRules.js Normal file
View File

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

17
tasks/jshint.js Normal file
View File

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

91
test/testPackageFiles.js Normal file
View File

@ -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 <my@email.com>');
}
}
else {
expect(ioPackage.common.authors, 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name <my@email.com>');
}
}
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();
});
});

1890
widgets/metro.html Normal file
View File

File diff suppressed because it is too large Load Diff

1851
widgets/metro/css/iconFont.min.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

10483
widgets/metro/css/metro-bootstrap.css Normal file
View File

File diff suppressed because it is too large Load Diff

40
widgets/metro/doc.html Normal file
View File

@ -0,0 +1,40 @@
<html>
<head>
<link rel="stylesheet" href="../../css/doc.css" />
<title>Dokumentation Widget-Set Metro</title>
</head>
<body>
basiert auf http://metroui.org.ua/
<h4>Attribute</h4>
<dd>
<dt>bg_class[_false,_true,_active,...]</dt>
<dd>Tile Hintergrundfarbe</dd>
<dt>brand_bg_class[_false,_true,_active,...]</dt>
<dd>Tile Beschriftungsfeld Hintergrundfarbe</dd>
<dt>badge_bg_class[_false,_true,_active,...]</dt>
<dd>Tile Beschriftungsfeld Icon/Zahl Hintergrundfarbe</dd>
<dt>[badge,dialog]icon_class[_false,_true,_active,...]</dt>
<dd>vordefinierte Icons</dd>
<dt>[badge,dialog]icon[_false,_true,_active,...]</dt>
<dd>eigene Icons</dd>
<dt>transform</dt>
<dd>Tile bei Click animieren</dd>
<dt>hover</dt>
<dd>Tile bei Hover umrahmen</dd>
</dd>
<hr/>
</body>
</html>

2569
widgets/metro/fonts/iconFont.dev.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 355 KiB

BIN
widgets/metro/fonts/iconFont.eot Normal file
View File

Binary file not shown.

1
widgets/metro/fonts/iconFont.json Normal file
View File

File diff suppressed because one or more lines are too long

2569
widgets/metro/fonts/iconFont.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 340 KiB

BIN
widgets/metro/fonts/iconFont.ttf Normal file
View File

Binary file not shown.

BIN
widgets/metro/fonts/iconFont.woff Normal file
View File

Binary file not shown.

3
widgets/metro/fonts/metroSysIcons.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
widgets/metro/fonts/metroSysIcons.ttf Normal file
View File

Binary file not shown.

BIN
widgets/metro/fonts/metroSysIcons.woff Normal file
View File

Binary file not shown.

BIN
widgets/metro/img/Prev_Shutter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B

7
widgets/metro/img/authors.txt Normal file
View File

@ -0,0 +1,7 @@
KNX-User-Forum
http://knx-user-forum.de
mfd.gfx@gmail.com
User:
mfd

BIN
widgets/metro/img/fts_shutter_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
widgets/metro/img/fts_shutter_100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
widgets/metro/img/fts_shutter_20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
widgets/metro/img/fts_shutter_30.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
widgets/metro/img/fts_shutter_40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
widgets/metro/img/fts_shutter_50.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
widgets/metro/img/fts_shutter_60.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
widgets/metro/img/fts_shutter_70.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
widgets/metro/img/fts_shutter_80.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
widgets/metro/img/fts_shutter_90.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
widgets/metro/img/fts_window_2w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

2
widgets/metro/img/license.txt Normal file
View File

@ -0,0 +1,2 @@
http://creativecommons.org/licenses/by-sa/3.0/de/
Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz

BIN
widgets/metro/img/light_light_dim.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
widgets/metro/img/light_light_dim_00.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
widgets/metro/img/light_light_dim_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
widgets/metro/img/light_light_dim_100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
widgets/metro/img/light_light_dim_20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
widgets/metro/img/light_light_dim_30.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
widgets/metro/img/light_light_dim_40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
widgets/metro/img/light_light_dim_50.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
widgets/metro/img/light_light_dim_60.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
widgets/metro/img/light_light_dim_70.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
widgets/metro/img/light_light_dim_80.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
widgets/metro/img/light_light_dim_90.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
widgets/metro/img/sani_heating_temp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

988
widgets/metro/js/metro.js Normal file
View File

@ -0,0 +1,988 @@
var hasTouch = 'ontouchend' in window, eventTimer;
var moveDirection = 'undefined', startX, startY, deltaX, deltaY, mouseDown = false;
function addTouchEvents(element){
if (hasTouch) {
element.addEventListener("touchstart", touch2Mouse, true);
element.addEventListener("touchmove", touch2Mouse, true);
element.addEventListener("touchend", touch2Mouse, true);
}
}
function touch2Mouse(e)
{
var theTouch = e.changedTouches[0];
var mouseEv;
switch(e.type)
{
case "touchstart": mouseEv="mousedown"; break;
case "touchend": mouseEv="mouseup"; break;
case "touchmove": mouseEv="mousemove"; break;
default: return;
}
if (mouseEv == "mousedown") {
eventTimer = (new Date()).getTime();
startX = theTouch.clientX;
startY = theTouch.clientY;
mouseDown = true;
}
if (mouseEv == "mouseup") {
if ((new Date()).getTime() - eventTimer <= 500) {
mouseEv = "click";
} else if ((new Date()).getTime() - eventTimer > 1000) {
mouseEv = "longclick";
}
eventTimer = 0;
mouseDown = false;
}
if (mouseEv == "mousemove") {
if (mouseDown) {
deltaX = theTouch.clientX - startX;
deltaY = theTouch.clientY - startY;
moveDirection = deltaX > deltaY ? 'horizontal' : 'vertical';
}
}
var mouseEvent = document.createEvent("MouseEvent");
mouseEvent.initMouseEvent(mouseEv, true, true, window, 1, theTouch.screenX, theTouch.screenY, theTouch.clientX, theTouch.clientY, false, false, false, false, 0, null);
theTouch.target.dispatchEvent(mouseEvent);
e.preventDefault();
}
(function( $ ) {
$.widget("metro.tileTransform", {
version: "1.1.1",
options: {
},
_create: function(){
var element = this.element;
var dim = {w: element.width(), h: element.height()};
element.on('mousedown.metroTransform', function(e){
var X = e.pageX - $(this).offset().left, Y = e.pageY - $(this).offset().top;
var transform = 'top';
if (X < dim.w * 1/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) {
transform = 'left';
} else if (X > dim.w * 2/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) {
transform = 'right'
} else if (X > dim.w*1/3 && X<dim.w*2/3 && Y > dim.h/2) {
transform = 'bottom';
}
setTimeout(function ($this) {
$this.addClass("tile-transform-"+transform);
}, 10, $(this));
});
element.on('mouseup.metroTransform', function(){
setTimeout(function ($this) {
$this.removeClass("tile-transform-left")
.removeClass("tile-transform-right")
.removeClass("tile-transform-top")
.removeClass("tile-transform-bottom");
}, 10, $(this));
});
element.on('mouseleave.metroTransform', function(){
$(this)
.removeClass("tile-transform-left")
.removeClass("tile-transform-right")
.removeClass("tile-transform-top")
.removeClass("tile-transform-bottom");
});
},
_destroy: function(){
},
_setOption: function(key, value){
this._super('_setOption', key, value);
}
})
$.widget("metro.inputControl", {
version: "1.0.0",
options: {
},
_create: function(){
var that = this,
control = this.element;
if (control.hasClass('text')) {
this.initTextInput(control, that);
} else if (control.hasClass('password')) {
this.initPasswordInput(control, that);
} else if (control.hasClass('checkbox') || control.hasClass('radio') || control.hasClass('switch')) {
this.initCheckboxInput(control, that);
} else if (control.hasClass('file')) {
this.initFileInput(control, that);
}
},
initCheckboxInput: function(el, that) {
},
initFileInput: function(el, that){
var button, input, wrapper;
wrapper = $("<input type='text' id='__input_file_wrapper__' readonly style='z-index: 1; cursor: default;'>");
button = el.children('.btn-file');
input = el.children('input[type="file"]');
input.css('z-index', 0);
wrapper.insertAfter(input);
input.attr('tabindex', '-1');
//button.attr('tabindex', '-1');
button.attr('type', 'button');
input.on('change', function(){
var val = $(this).val();
if (val != '') {
wrapper.val(val);
}
});
button.on('click', function(){
input.trigger('click');
});
},
initTextInput: function(el, that){
var button = el.children('.btn-clear'),
input = el.children('input[type=text]');
//console.log(button.length);
//button = el.children('.btn-clear');
if (button.length == 0) return;
button.attr('tabindex', '-1');
button.attr('type', 'button');
button.on('click', function(){
input = el.children('input');
if (input.prop('readonly')) return;
input.val('');
input.focus();
that._trigger("onClear", null, el);
});
if (!input.attr("disabled")) input.on('click', function(){$(this).focus();});
},
initPasswordInput: function(el, that){
var button = el.children('.btn-reveal'),
input = el.children('input[type=password]');
var wrapper;
if (button.length == 0) return;
button.attr('tabindex', '-1');
button.attr('type', 'button');
button.on('mousedown', function(e){
input.attr('type', 'text');
//e.preventDefault();
// wrapper = el.find(".__wrapper__").length == 0 ? $('<input type="text" class="__wrapper__" />') : el.find(".__wrapper__");
//
// input.hide();
// wrapper.appendTo(that.element);
// wrapper.val(input.val());
//
// that._trigger("onPasswordShow", null, that.element);
});
button.on('mouseup, mouseleave, blur', function(e){
input.attr('type', 'password').focus();
//e.preventDefault();
// input.show().focus();
// wrapper.remove();
//
// that._trigger("onPasswordHide", null, that.element);
});
if (!input.attr("disabled")) input.on('click', function(){$(this).focus();});
},
_destroy: function(){
},
_setOption: function(key, value){
this._super('_setOption', key, value);
}
});
$.widget("metro.inputTransform", {
version: "1.0.0",
options: {
transformType: "text"
},
_create: function(){
var that = this,
element = this.element,
inputType;
var checkTransform = element.parent().hasClass("input-control");
if (checkTransform) return;
inputType = element.get(0).tagName.toLowerCase();
if (inputType == "textarea") {
this.options.transformType = "textarea";
} else if (inputType == "select") {
this.options.transformType = "select";
} else {
if (element.data('transformType') != undefined) {
this.options.transformType = element.data('transformType');
} else {
this.options.transformType = element.attr("type");
}
}
var control = undefined;
switch (this.options.transformType) {
case "password": control = this._createInputPassword(); break;
case "file": control = this._createInputFile(); break;
case "checkbox": control = this._createInputCheckbox(); break;
case "radio": control = this._createInputRadio(); break;
case "switch": control = this._createInputSwitch(); break;
case "select": control = this._createInputSelect(); break;
case "textarea": control = this._createInputTextarea(); break;
case "search": control = this._createInputSearch(); break;
case "email": control = this._createInputEmail(); break;
case "tel": control = this._createInputTel(); break;
case "number": control = this._createInputNum(); break;
default: control = this._createInputText();
}
control.inputControl();
},
_createInputTextarea: function(){
var element = this.element;
var wrapper = $("<div/>").addClass("input-control").addClass("textarea");
var clone = element.clone(true);
var parent = element.parent();
clone.appendTo(wrapper);
wrapper.insertBefore(element);
element.remove();
return wrapper;
},
_createInputSelect: function(){
var element = this.element;
var wrapper = $("<div/>").addClass("input-control").addClass("select");
var clone = element.clone(true);
var parent = element.parent();
clone.val(element.val()).appendTo(wrapper);
wrapper.insertBefore(element);
element.remove();
return wrapper;
},
_createInputSwitch: function(){
var element = this.element;
var wrapper = $("<div/>").addClass("input-control").addClass("switch");
var label = $("<label/>");
var button = $("<span/>").addClass("check");
var clone = element.clone(true);
var parent = element.parent();
var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
label.appendTo(wrapper);
clone.appendTo(label);
button.appendTo(label);
caption.appendTo(label);
wrapper.insertBefore(element);
element.remove();
return wrapper;
},
_createInputCheckbox: function(){
console.log('checkbox!');
var element = this.element;
var wrapper = $("<div/>").addClass("input-control").addClass("checkbox");
var label = $("<label/>");
var button = $("<span/>").addClass("check");
var clone = element.clone(true);
var parent = element.parent();
var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
label.appendTo(wrapper);
clone.appendTo(label);
button.appendTo(label);
caption.appendTo(label);
wrapper.insertBefore(element);
element.remove();
return wrapper;
},
_createInputRadio: function(){
var element = this.element;
var wrapper = $("<div/>").addClass("input-control").addClass("radio");
var label = $("<label/>");
var button = $("<span/>").addClass("check");
var clone = element.clone(true);
var parent = element.parent();
var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
label.appendTo(wrapper);
clone.appendTo(label);
button.appendTo(label);
caption.appendTo(label);
wrapper.insertBefore(element);
element.remove();
return wrapper;
},
_createInputSearch: function(){
return this._createInputVal("text", "btn-search");
},
_createInputNum: function(){
return this._createInputVal("number", "btn-clear");
},
_createInputTel: function(){
return this._createInputVal("tel", "btn-clear");
},
_createInputEmail: function(){
return this._createInputVal("email", "btn-clear");
},
_createInputText: function(){
return this._createInputVal("text", "btn-clear");
},
_createInputPassword: function(){
return this._createInputVal("password", "btn-reveal");
},
_createInputFile: function(){
return this._createInputVal("file", "btn-file");
},
_createInputVal: function(name, buttonName) {
var element = this.element;
var wrapper = $("<div/>").addClass("input-control").addClass(name);
var button = $("<button/>").addClass(buttonName);
var clone = element.clone(true);
var parent = element.parent();
clone.appendTo(wrapper);
button.appendTo(wrapper);
wrapper.insertBefore(element);
element.remove();
return wrapper;
},
_destroy: function(){},
_setOption: function(key, value){
this._super('_setOption', key, value);
}
});
/* To add touch support for element need create listeners for component dom element
if (hasTouch) {
element.addEventListener("touchstart", touch2Mouse, true);
element.addEventListener("touchmove", touch2Mouse, true);
element.addEventListener("touchend", touch2Mouse, true);
}*/
$.widget("metro.metroSlider", {
version: "1.0.2",
options: {
position: 0,
accuracy: 0,
color: 'default',
completeColor: 'default',
markerColor: 'default',
colors: [],
showHint: false,
sliderActive: false,
change: function(value, slider){},
changed: function(value, slider){},
min: 0,
max: 100,
animate: true,
_slider: {
vertical: false,
offset: 0,
length: 0,
marker: 0,
ppp: 0,
start: 0,
stop: 0
}
},
_create: function(){
var that = this,
element = this.element,
o = this.options,
s = this.options._slider;
if (element.data('accuracy') != undefined) {
o.accuracy = element.data('accuracy') > 0 ? element.data('accuracy') : 0;
}
if (element.data('animate') != undefined) {
o.animate = element.data('animate');
}
if (element.data('min') != undefined) {
o.min = element.data('min');
}
o.min = o.min < 0 ? 0 : o.min;
o.min = o.min > o.max ? o.max : o.min;
if (element.data('max') != undefined) {
o.max = element.data('max');
}
o.max = o.max > 100 ? 100 : o.max;
o.max = o.max < o.min ? o.min : o.max;
if (element.data('position') != undefined) {
o.position = this._correctValue(element.data('position') > this.options.min ? (element.data('position') > this.options.max ? this.options.max : element.data('position')) : this.options.min);
}
if (element.data('color') != undefined) {
o.color = element.data('color');
}
if (element.data('completeColor') != undefined) {
o.completeColor = element.data('completeColor');
}
if (element.data('markerColor') != undefined) {
o.markerColor = element.data('markerColor');
}
if (element.data('colors') != undefined) {
o.colors = element.data('colors').split(",");
}
if (element.data('showHint') != undefined) {
o.showHint = element.data('showHint');
}
s.vertical = element.hasClass("vertical");
this._createSlider();
setTimeout(function (_this, _that, _element) {
_this._initPoints();
_this._placeMarker(o.position);
addTouchEvents(_element[0]);
_element.children('.marker').on('mousedown.metroSlider', function (e) {
e.preventDefault();
_that._startMoveMarker(e);
});
_element.on('mousedown.metroSlider', function (e) {
e.preventDefault();
_that._startMoveMarker(e);
});
}, 0, this, that, element);
},
_startMoveMarker: function(e){
var element = this.element, o = this.options, that = this, hint = element.children('.hint');
that.sliderActive = true;
$(document).on('touchend.metroSlider', function () {
$(document).off('mousemove.metroSlider');
$(document).off('mouseup.metroSlider');
element.data('value', that.options.position);
element.trigger('changed', that.options.position);
o.changed(that.options.position, element);
if (!element.hasClass('permanent-hint')) {
hint.css('display', 'none');
}
});
$(document).on('mousemove.metroSlider', function (event) {
that._movingMarker(event);
if (!element.hasClass('permanent-hint')) {
hint.css('display', 'block');
}
});
$(document).on('mouseup.metroSlider', function () {
that.sliderActive = false;
$(document).off('mousemove.metroSlider');
$(document).off('mouseup.metroSlider');
element.data('value', that.options.position);
element.trigger('changed', that.options.position);
o.changed(that.options.position, element);
if (!element.hasClass('permanent-hint')) {
hint.css('display', 'none');
}
});
this._initPoints();
this._movingMarker(e)
},
_movingMarker: function (event) {
var cursorPos,
percents,
valuePix,
vertical = this.options._slider.vertical,
sliderOffset = this.options._slider.offset,
sliderStart = this.options._slider.start,
sliderEnd = this.options._slider.stop,
sliderLength = this.options._slider.length,
markerSize = this.options._slider.marker;
if (vertical) {
cursorPos = event.pageY - sliderOffset;
} else {
cursorPos = event.pageX - sliderOffset;
}
if (cursorPos < sliderStart) {
cursorPos = sliderStart;
} else if (cursorPos > sliderEnd) {
cursorPos = sliderEnd;
}
if (vertical) {
valuePix = sliderLength - cursorPos - markerSize / 2;
} else {
valuePix = cursorPos - markerSize / 2;
}
percents = this._pixToPerc(valuePix);
this._placeMarker(percents);
this.options.position = percents;
this.options.change(Math.round(percents), this.element);
},
_placeMarker: function (value) {
var size, size2, o = this.options, colorParts = 0, colorIndex = 0, colorDelta = 0,
marker = this.element.children('.marker'),
complete = this.element.children('.complete'),
hint = this.element.children('.hint'),
oldPos = this._percToPix(this.options.position);
colorParts = o.colors.length;
colorDelta = o._slider.length / colorParts;
if (this.options._slider.vertical) {
var oldSize = this._percToPix(this.options.position) + this.options._slider.marker,
oldSize2 = this.options._slider.length - oldSize;
size = this._percToPix(value) + this.options._slider.marker;
size2 = this.options._slider.length - size;
this._animate(marker.css('top', oldSize2),{top: size2});
this._animate(complete.css('height', oldSize),{height: size});
if (colorParts) {
colorIndex = Math.round(size / colorDelta)-1;
complete.css('background-color', o.colors[colorIndex<0?0:colorIndex]);
}
if (o.showHint) {
hint.html(Math.round(value)).css('top', size2 - hint.height()/2);
}
} else {
size = this._percToPix(value);
this._animate(marker.css('left', oldPos),{left: size});
this._animate(complete.css('width', oldPos),{width: size});
if (colorParts) {
colorIndex = Math.round(size / colorDelta)-1;
complete.css('background-color', o.colors[colorIndex<0?0:colorIndex]);
}
if (o.showHint) {
this._animate(hint.html(Math.round(value)).css('left', oldPos - hint.width() / 2), {left: size - hint.width() / 2});
}
}
},
_animate: function (obj, val) {
if(this.options.animate) {
obj.stop(true).animate(val);
} else {
obj.css(val);
}
},
_pixToPerc: function (valuePix) {
var valuePerc;
valuePerc = valuePix * this.options._slider.ppp;
return this._correctValue(valuePerc);
},
_percToPix: function (value) {
if (this.options._slider.ppp === 0) {
return 0;
}
return value / this.options._slider.ppp;
},
_correctValue: function (value) {
var accuracy = this.options.accuracy;
var max = this.options.max;
var min = this.options.min;
if (accuracy === 0) {
return value;
}
if (value === max) {
return max;
}
if (value === min) {
return min;
}
value = Math.floor(value / accuracy) * accuracy + Math.round(value % accuracy / accuracy) * accuracy;
if (value > max) {
return max;
}
if (value < min) {
return min;
}
return value;
},
_initPoints: function(){
var s = this.options._slider, element = this.element;
if (s.vertical) {
s.offset = element.offset().top;
s.length = element.height();
s.marker = element.children('.marker').height();
} else {
s.offset = element.offset().left;
s.length = element.width();
s.marker = element.children('.marker').width();
}
s.ppp = this.options.max / (s.length - s.marker);
s.start = s.marker / 2;
s.stop = s.length - s.marker / 2;
},
_createSlider: function(){
var element = this.element,
options = this.options,
complete, marker, hint;
element.html('');
complete = $("<div/>").addClass("complete").appendTo(element);
marker = $("<a/>").addClass("marker").appendTo(element);
if (options.showHint) {
hint = $("<span/>").addClass("hint").appendTo(element);
}
if (options.color != 'default') {
element.css('background-color', options.color);
}
if (options.completeColor != 'default') {
complete.css('background-color', options.completeColor);
}
if (options.markerColor != 'default') {
marker.css('background-color', options.markerColor);
}
},
value: function (value) {
if (this.sliderActive) return false;
value = value > this.options.max ? this.options.max : value;
value = value < this.options.min ? this.options.min : value;
if (typeof value !== 'undefined') {
this._placeMarker(parseInt(value));
this.options.position = parseInt(value);
//this.options.change(Math.round(parseInt(value)), this.element);
return this;
} else {
return Math.round(this.options.position);
}
},
_destroy: function(){},
_setOption: function(key, value){
this._super('_setOption', key, value);
}
});
if (typeof METRO_DIALOG == "undefined") {
var METRO_DIALOG = false;
}
$.metroDialog = function (params) {
if (!$.metroDialog.opened) {
$.metroDialog.opened = true;
} else {
return METRO_DIALOG;
}
$.metroDialog.settings = params;
params = $.extend({
icon: false,
title: '',
content: '',
flat: false,
shadow: false,
overlay: false,
width: 'auto',
height: 'auto',
position: 'default',
padding: false,
overlayClickClose: false,
sysButtons: {
btnClose: true
},
onShow: function(_dialog){},
sysBtnCloseClick: function(event){},
sysBtnMinClick: function(event){},
sysBtnMaxClick: function(event){}
}, params);
var _overlay, _window, _caption, _content;
_overlay = $("<div/>").addClass("metro window-overlay");
if (params.overlay) {
_overlay.css({
backgroundColor: 'rgba(0,0,0,.7)'
});
}
_window = $("<div/>").addClass("window");
if (params.flat) _window.addClass("flat");
if (params.shadow) _window.addClass("shadow").css('overflow', 'hidden');
_caption = $("<div/>").addClass("caption");
_content = $("<div/>").addClass("content");
_content.css({
paddingTop: params.padding, // +32
paddingLeft: params.padding,
paddingRight: params.padding,
paddingBottom: params.padding
});
if (params.sysButtons) {
if (params.sysButtons.btnClose) {
$("<button/>").addClass("btn-close").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$.metroDialog.close();
params.sysBtnCloseClick(e);
}).appendTo(_caption);
}
if (params.sysButtons.btnMax) {
$("<button/>").addClass("btn-max").on('click', function(e){
e.preventDefault();
e.stopPropagation();
params.sysBtnMaxClick(e);
}).appendTo(_caption);
}
if (params.sysButtons.btnMin) {
$("<button/>").addClass("btn-min").on('click', function(e){
e.preventDefault();
e.stopPropagation();
params.sysBtnMinClick(e);
}).appendTo(_caption);
}
}
if (params.icon) $(params.icon).addClass("icon").appendTo(_caption);
$("<div/>").addClass("title").html(params.title).appendTo(_caption);
_content.html(params.content);
_caption.appendTo(_window);
_content.appendTo(_window);
_window.appendTo(_overlay);
if (params.width != 'auto') _window.css('width', params.width);
if (params.height != 'auto') _window.css('height', params.height);
_overlay.hide().appendTo('body').fadeIn('fast');
METRO_DIALOG = _window;
_window
.css("position", "fixed")
.css("z-index", parseInt(_overlay.css('z-index'))+1)
.css("top", ($(window).height() - METRO_DIALOG.outerHeight()) / 2 )
.css("left", ($(window).width() - _window.outerWidth()) / 2)
;
addTouchEvents(_window[0]);
if(params.draggable) {
_caption.on("mousedown", function(e) {
$.metroDialog.drag = true;
_caption.css('cursor', 'move');
var z_idx = _window.css('z-index'),
drg_h = _window.outerHeight(),
drg_w = _window.outerWidth(),
pos_y = _window.offset().top + drg_h - e.pageY,
pos_x = _window.offset().left + drg_w - e.pageX;
_window.css('z-index', 99999).parents().on("mousemove", function(e) {
var t = (e.pageY > 0)?(e.pageY + pos_y - drg_h):(0);
var l = (e.pageX > 0)?(e.pageX + pos_x - drg_w):(0);
if ($.metroDialog.drag) {
if(t >= 0 && t <= window.innerHeight - _window.outerHeight()) {
_window.offset({top: t});
}
if(l >= 0 && l <= window.innerWidth - _window.outerWidth()) {
_window.offset({left: l});
}
}
});
e.preventDefault();
}).on("mouseup", function () {
_window.removeClass('draggable');
$.metroDialog.drag = false;
_caption.css('cursor', 'default');
});
}
_window.on('click', function (e){
e.stopPropagation();
});
if (params.overlayClickClose) {
_overlay.on('click', function (e){
e.preventDefault();
$.metroDialog.close();
});
}
params.onShow(METRO_DIALOG);
$.metroDialog.autoResize();
return METRO_DIALOG;
}
$.metroDialog.content = function(newContent) {
if(!$.metroDialog.opened || METRO_DIALOG == undefined) {
return false;
}
if(newContent) {
METRO_DIALOG.children(".content").html(newContent);
$.metroDialog.autoResize();
return true;
} else {
return METRO_DIALOG.children(".content").html();
}
}
$.metroDialog.title = function(newTitle) {
if(!$.metroDialog.opened || METRO_DIALOG == undefined) {
return false;
}
var _title = METRO_DIALOG.children('.caption').children('.title');
if(newTitle) {
_title.html(newTitle);
} else {
_title.html();
}
return true;
};
$.metroDialog.autoResize = function () {
if(!$.metroDialog.opened || METRO_DIALOG == undefined) {
return false;
}
var _content = METRO_DIALOG.children(".content");
var top = ($(window).height() - METRO_DIALOG.outerHeight()) / 2;
var left = ($(window).width() - METRO_DIALOG.outerWidth()) / 2;
METRO_DIALOG.css({
width: _content.outerWidth(),
height: _content.outerHeight(),
top: top,
left: left
});
return true;
};
$.metroDialog.close = function () {
if(!$.metroDialog.opened || !METRO_DIALOG) {
return false;
}
$.metroDialog.opened = false;
var _overlay = METRO_DIALOG.parent(".window-overlay");
_overlay.fadeOut(function () {
$(this).remove();
METRO_DIALOG = false;
});
return false;
}
})(jQuery);