From 96dfd22d9d32b6c05f6faec803eabe514d1d7670 Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Tue, 3 Jan 2017 17:33:01 +0100 Subject: [PATCH] Frio: implent switcher element --- view/theme/frio/css/style.css | 40 +++- .../frameworks/bootstrap-toggle/Gruntfile.js | 37 ++++ .../frio/frameworks/bootstrap-toggle/LICENSE | 21 ++ .../frameworks/bootstrap-toggle/README.md | 175 +++++++++++++++++ .../frameworks/bootstrap-toggle/bower.json | 32 ++++ .../bootstrap-toggle/css/bootstrap-toggle.css | 83 ++++++++ .../css/bootstrap-toggle.min.css | 28 +++ .../css/bootstrap2-toggle.css | 85 +++++++++ .../css/bootstrap2-toggle.min.css | 28 +++ .../bootstrap-toggle/js/bootstrap-toggle.js | 180 ++++++++++++++++++ .../js/bootstrap-toggle.min.js | 9 + .../js/bootstrap-toggle.min.js.map | 1 + .../bootstrap-toggle/js/bootstrap2-toggle.js | 180 ++++++++++++++++++ .../js/bootstrap2-toggle.min.js | 9 + .../js/bootstrap2-toggle.min.js.map | 1 + .../frameworks/bootstrap-toggle/package.json | 28 +++ view/theme/frio/js/theme.js | 41 ++++ view/theme/frio/templates/field_yesno.tpl | 19 ++ view/theme/frio/templates/head.tpl | 1 + 19 files changed, 994 insertions(+), 4 deletions(-) create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/Gruntfile.js create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/LICENSE create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/README.md create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/bower.json create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.css create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.min.css create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.css create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.min.css create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap-toggle.js create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap-toggle.min.js create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap-toggle.min.js.map create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap2-toggle.js create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap2-toggle.min.js create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap2-toggle.min.js.map create mode 100644 view/theme/frio/frameworks/bootstrap-toggle/package.json create mode 100644 view/theme/frio/templates/field_yesno.tpl diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 6f1fcf74ad..74eb25d08b 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -169,6 +169,10 @@ a#item-delete-selected { line-height: 1.5; border-radius: 3px; } +.btn-xs { + padding: 1px 5px; + font-size: 12px; +} .btn-primary { background: $nav_bg; color: $btn_primary_color !important; @@ -191,7 +195,6 @@ a#item-delete-selected { } .btn-link { -/* color: #6fdbe8;*/ color: $link_color; } .btn-link:focus, .btn-link:hover { @@ -220,20 +223,49 @@ a#item-delete-selected { }*/ .btn-main { - /*background: #6fdbe8;*/ background: $link_color; color: #fff!important; } .btn-main:hover, .btn-main:focus { - /*background: #59d6e4!important;*/ background: $link_hover_color !important; text-decoration: none; } .btn-main:active, .btn-main.active { outline: 0; - /*background: #59d6e4;*/ background: $link_hover_color; } +.toggle.btn { + border: 1px solid transparent; +} +.toggle.btn-xs { + min-width: 45px; +} +.toggle.off { + border-color: #ccc; +} +.toggle .toggle-off, +.toggle .toggle-off:hover { + color: #ccc; + background-color: #eee; + box-shadow: none; +} +.toggle.off .toggle-handle { + background-color: #eee; +} +.toggle-handle { + background-color: #fff; + border-width: 0 1px; + border: 1px solid transparent; + border-color: #ccc; +} +.field.yesno:hover .toggle { + border-color: $link_hover_color; + transition: all 0.25s ease-in-out; +} +.field.yesno:hover .toggle-handle { + background-color: #fff; + transition: all 0.25s ease-in-out; +} .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn { padding: .275rem .75rem; diff --git a/view/theme/frio/frameworks/bootstrap-toggle/Gruntfile.js b/view/theme/frio/frameworks/bootstrap-toggle/Gruntfile.js new file mode 100644 index 0000000000..9ac6fc5212 --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/Gruntfile.js @@ -0,0 +1,37 @@ +module.exports = function(grunt) { + 'use strict'; + + grunt.initConfig({ + clean: ['dist'], + uglify: { + options: { + preserveComments: 'some', + sourceMap: true + }, + build: { + expand: true, + cwd: 'js', + src: ['**/*.js', ['!**/*.min.js']], + dest: 'js', + ext: '.min.js', + } + }, + cssmin: { + options: { + keepBreaks: true + }, + build: { + expand: true, + cwd: 'css', + src: ['**/*.css', ['!**/*.min.css']], + dest: 'css', + ext: '.min.css', + } + } + }); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.registerTask('default', ['clean', 'uglify', 'cssmin']); + +}; \ No newline at end of file diff --git a/view/theme/frio/frameworks/bootstrap-toggle/LICENSE b/view/theme/frio/frameworks/bootstrap-toggle/LICENSE new file mode 100644 index 0000000000..88bb5abfce --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2011-2014 Min Hur, The New York Times Company + +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. \ No newline at end of file diff --git a/view/theme/frio/frameworks/bootstrap-toggle/README.md b/view/theme/frio/frameworks/bootstrap-toggle/README.md new file mode 100644 index 0000000000..301ff034fb --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/README.md @@ -0,0 +1,175 @@ +# Bootstrap Toggle +Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles. + +Visit http://www.bootstraptoggle.com for demos. + +## Getting Started + +### Installation +You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library. + +`Warning` If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead. + +```html + + +``` + +### Bower Install +```bash +bower install bootstrap-toggle +``` + +## Usage + +### Basic example +Simply add `data-toggle="toggle"` to convert checkboxes into toggles. + +```html + +``` + +### Stacked checkboxes +Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles. + +```html +
+ +
+
+ +
+``` + +### Inline Checkboxes +Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles. + +```html + + + +``` + +## API + +### Initialize by JavaScript +Initialize toggles with id `toggle-one` with a single line of JavaScript. + +```html + + +``` + +### Options +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`. + +```html + + + +``` + +Name|Type|Default|Description| +---|---|---|--- +on|string/html|"On"|Text of the on toggle +off|string/html|"Off"|Text of the off toggle +size|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`. +onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger` +offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger` +style|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. +width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated. +height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated. + +### Methods +Methods can be used to control toggles directly. + +```html + +``` + +Method|Example|Description +---|---|--- +initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options +destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle +on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state +off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state +toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle +enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle +disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle + +## Events + +### Event Propagation +Note All events are propagated to and from input element to the toggle. + +You should listen to events from the `` directly rather than look for custom events. + +```html + +
+ +``` + +### API vs Input +This also means that using the API or Input to trigger events will work both ways. + +```html + + + + + + +``` + +### Integration + +#### [KnockoutJS](http://knockoutjs.com) + +A binding for knockout is available here: [aAXEe/knockout-bootstrap-toggle](https://github.com/aAXEe/knockout-bootstrap-toggle) + +## Demos + +Visit http://www.bootstraptoggle.com for demos. diff --git a/view/theme/frio/frameworks/bootstrap-toggle/bower.json b/view/theme/frio/frameworks/bootstrap-toggle/bower.json new file mode 100644 index 0000000000..9d941dff9f --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/bower.json @@ -0,0 +1,32 @@ +{ + "name": "bootstrap-toggle", + "description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles", + "version": "2.2.1", + "keywords": [ + "bootstrap", + "toggle", + "bootstrap-toggle", + "switch", + "bootstrap-switch" + ], + "homepage": "http://www.bootstraptoggle.com", + "repository": { + "type": "git", + "url": "https://github.com/minhur/bootstrap-toggle.git" + }, + "license": "MIT", + "authors": [ + "Min Hur " + ], + "main": [ + "./js/bootstrap-toggle.min.js", + "./css/bootstrap-toggle.min.css" + ], + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.css b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.css new file mode 100644 index 0000000000..057d08b36f --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.css @@ -0,0 +1,83 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + +.checkbox label .toggle, +.checkbox-inline .toggle { + margin-left: -20px; + margin-right: 5px; +} + +.toggle { + position: relative; + overflow: hidden; +} +.toggle input[type="checkbox"] { + display: none; +} +.toggle-group { + position: absolute; + width: 200%; + top: 0; + bottom: 0; + left: 0; + transition: left 0.35s; + -webkit-transition: left 0.35s; + -moz-user-select: none; + -webkit-user-select: none; +} +.toggle.off .toggle-group { + left: -100%; +} +.toggle-on { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 50%; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-off { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + right: 0; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-handle { + position: relative; + margin: 0 auto; + padding-top: 0px; + padding-bottom: 0px; + height: 100%; + width: 0px; + border-width: 0 1px; +} + +.toggle.btn { min-width: 59px; min-height: 34px; } +.toggle-on.btn { padding-right: 24px; } +.toggle-off.btn { padding-left: 24px; } + +.toggle.btn-lg { min-width: 79px; min-height: 45px; } +.toggle-on.btn-lg { padding-right: 31px; } +.toggle-off.btn-lg { padding-left: 31px; } +.toggle-handle.btn-lg { width: 40px; } + +.toggle.btn-sm { min-width: 50px; min-height: 30px;} +.toggle-on.btn-sm { padding-right: 20px; } +.toggle-off.btn-sm { padding-left: 20px; } + +.toggle.btn-xs { min-width: 35px; min-height: 22px;} +.toggle-on.btn-xs { padding-right: 12px; } +.toggle-off.btn-xs { padding-left: 12px; } + diff --git a/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.min.css b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.min.css new file mode 100644 index 0000000000..0d42ed09cd --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.min.css @@ -0,0 +1,28 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ +.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px} +.toggle{position:relative;overflow:hidden} +.toggle input[type=checkbox]{display:none} +.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} +.toggle.off .toggle-group{left:-100%} +.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} +.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} +.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} +.toggle.btn{min-width:59px;min-height:34px} +.toggle-on.btn{padding-right:24px} +.toggle-off.btn{padding-left:24px} +.toggle.btn-lg{min-width:79px;min-height:45px} +.toggle-on.btn-lg{padding-right:31px} +.toggle-off.btn-lg{padding-left:31px} +.toggle-handle.btn-lg{width:40px} +.toggle.btn-sm{min-width:50px;min-height:30px} +.toggle-on.btn-sm{padding-right:20px} +.toggle-off.btn-sm{padding-left:20px} +.toggle.btn-xs{min-width:35px;min-height:22px} +.toggle-on.btn-xs{padding-right:12px} +.toggle-off.btn-xs{padding-left:12px} \ No newline at end of file diff --git a/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.css b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.css new file mode 100644 index 0000000000..3f48927ed6 --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.css @@ -0,0 +1,85 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + +label.checkbox .toggle, +label.checkbox.inline .toggle { + margin-left: -20px; + margin-right: 5px; +} +.toggle { + min-width: 40px; + height: 20px; + position: relative; + overflow: hidden; +} +.toggle input[type="checkbox"] { + display: none; +} +.toggle-group { + position: absolute; + width: 200%; + top: 0; + bottom: 0; + left: 0; + transition: left 0.35s; + -webkit-transition: left 0.35s; + -moz-user-select: none; + -webkit-user-select: none; +} +.toggle.off .toggle-group { + left: -100%; +} +.toggle-on { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 50%; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-off { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + right: 0; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-handle { + position: relative; + margin: 0 auto; + padding-top: 0px; + padding-bottom: 0px; + height: 100%; + width: 0px; + border-width: 0 1px; +} +.toggle-handle.btn-mini { + top: -1px; +} +.toggle.btn { min-width: 30px; } +.toggle-on.btn { padding-right: 24px; } +.toggle-off.btn { padding-left: 24px; } + +.toggle.btn-large { min-width: 40px; } +.toggle-on.btn-large { padding-right: 35px; } +.toggle-off.btn-large { padding-left: 35px; } + +.toggle.btn-small { min-width: 25px; } +.toggle-on.btn-small { padding-right: 20px; } +.toggle-off.btn-small { padding-left: 20px; } + +.toggle.btn-mini { min-width: 20px; } +.toggle-on.btn-mini { padding-right: 12px; } +.toggle-off.btn-mini { padding-left: 12px; } + diff --git a/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.min.css b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.min.css new file mode 100644 index 0000000000..1509c5730c --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap2-toggle.min.css @@ -0,0 +1,28 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ +label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px} +.toggle{min-width:40px;height:20px;position:relative;overflow:hidden} +.toggle input[type=checkbox]{display:none} +.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} +.toggle.off .toggle-group{left:-100%} +.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} +.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} +.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} +.toggle-handle.btn-mini{top:-1px} +.toggle.btn{min-width:30px} +.toggle-on.btn{padding-right:24px} +.toggle-off.btn{padding-left:24px} +.toggle.btn-large{min-width:40px} +.toggle-on.btn-large{padding-right:35px} +.toggle-off.btn-large{padding-left:35px} +.toggle.btn-small{min-width:25px} +.toggle-on.btn-small{padding-right:20px} +.toggle-off.btn-small{padding-left:20px} +.toggle.btn-mini{min-width:20px} +.toggle-on.btn-mini{padding-right:12px} +.toggle-off.btn-mini{padding-left:12px} \ No newline at end of file diff --git a/view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap-toggle.js b/view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap-toggle.js new file mode 100644 index 0000000000..533914edd2 --- /dev/null +++ b/view/theme/frio/frameworks/bootstrap-toggle/js/bootstrap-toggle.js @@ -0,0 +1,180 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + + +function ($) { + 'use strict'; + + // TOGGLE PUBLIC CLASS DEFINITION + // ============================== + + var Toggle = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, this.defaults(), options) + this.render() + } + + Toggle.VERSION = '2.2.0' + + Toggle.DEFAULTS = { + on: 'On', + off: 'Off', + onstyle: 'primary', + offstyle: 'default', + size: 'normal', + style: '', + width: null, + height: null + } + + Toggle.prototype.defaults = function() { + return { + on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, + off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, + onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, + offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, + size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, + style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, + width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, + height: this.$element.attr('data-height') || Toggle.DEFAULTS.height + } + } + + Toggle.prototype.render = function () { + this._onstyle = 'btn-' + this.options.onstyle + this._offstyle = 'btn-' + this.options.offstyle + var size = this.options.size === 'large' ? 'btn-lg' + : this.options.size === 'small' ? 'btn-sm' + : this.options.size === 'mini' ? 'btn-xs' + : '' + var $toggleOn = $('