382 lines
27 KiB
HTML
382 lines
27 KiB
HTML
|
<!--
|
||
|
|
yunkong2.vis fancyswitch Widget-Set
|
||
|
|
|
||
|
|
version: "1.0.0"
|
||
|
|
|
||
|
|
Copyright 2013-2015 hobbyquaker, bluefox<dogafox@gmail.com>
|
||
|
|
-->
|
||
|
|
<style type="text/css">
|
||
|
|
.fancy-switch{
|
||
|
|
border:none;
|
||
|
|
background:left no-repeat;
|
||
|
|
width:105px;
|
||
|
|
height:46px;
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fancy-on, .fancy-off{
|
||
|
|
width:50px;
|
||
|
|
height:40px;
|
||
|
|
display:inline-block;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<link rel="stylesheet" type="text/css" href="widgets/fancyswitch/css/jquery.ibutton.min.css"/>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="widgets/fancyswitch/js/jquery-ui.toggleSwitch.js"></script>
|
||
|
|
<script type="text/javascript" src="widgets/fancyswitch/js/jquery.ibutton.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
if (vis.editMode) {
|
||
|
|
// Add words for basic widgets
|
||
|
|
$.extend(true, systemDictionary, {
|
||
|
|
"text_true": {"en": "Label for true", "de": "Text für TRUE", "ru": "Текст для 1"},
|
||
|
|
"text_false": {"en": "Label for false", "de": "Text für FALSE", "ru": "Текст для 0"},
|
||
|
|
"width": {"en": "Width", "de": "Breite", "ru": "Ширина"},
|
||
|
|
"auto": {"en": "auto", "de": "auto", "ru": "автоматически"},
|
||
|
|
"true": {"en": "true", "de": "true", "ru": "да"},
|
||
|
|
"false": {"en": "false", "de": "false", "ru": "нет"},
|
||
|
|
"labelOn": {"en": "Label for 'ON'", "de": "Text für AN", "ru": "Подпись для 'истина/1'"},
|
||
|
|
"labelOff": {"en": "Label for 'OFF'", "de": "Text für AUS", "ru": "Подпись для 'ложь/0'"},
|
||
|
|
"resizeHandle": {"en": "resizeHandle", "de": "Hebelgröße", "ru": "Изменить размер клавиши"},
|
||
|
|
"resizeContainer": {"en": "resizeContainer", "de": "Konteinergröße", "ru": "Изменить размер виджета"},
|
||
|
|
"enableDrag": {"en": "Enable drag", "de": "Ziehen erlaubt", "ru": "Можно тащить мышкой"},
|
||
|
|
"enableFx": {"en": "Animation", "de": "Animation", "ru": "Анимация"},
|
||
|
|
"duration": {"en": "Effect duration(ms)", "de": "Umschaltdauer(ms)", "ru": "Длительность анимации"},
|
||
|
|
"highlight_switch": {"en": "Highlight switch", "de": "Highlight Schalter", "ru": "Подсветить выключатель"},
|
||
|
|
"invert": {"en": "Invert state", "de": "Zustand invertieren", "ru": "Инвертировать состояние"},
|
||
|
|
"test": {"en": "Test", "de": "Testen", "ru": "Тест"},
|
||
|
|
"valFalse": {"en": "False value", "de": "Falsch-Wert", "ru": "False-значение"},
|
||
|
|
"valTrue": {"en": "True value", "de": "Wahr-Wert", "ru": "True-значение"},
|
||
|
|
"lightStyle": {"en": "Light style", "de": "Hellstil", "ru": "Светлый стиль"},
|
||
|
|
"autoOff": {"en": "Auto OFF in (ms)", "de": "Auto AUS(ms)", "ru": "Авто Выкл.(мс)"},
|
||
|
|
"autoOff_tooltip": {
|
||
|
|
"en": "Chnage to previous state after given interval automatically",
|
||
|
|
"de": "Ändert Zustand auf vorheriger nach eingegebenem Intervall",
|
||
|
|
"ru": "Меняет состояние на обратное по истечении указанного времени"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
vis.binds.fancyswitch = {
|
||
|
|
version: "1.0.0",
|
||
|
|
showVersion: function () {
|
||
|
|
if (vis.binds.fancyswitch.version) {
|
||
|
|
console.log('Version vis-fancyswitch:' + vis.binds.fancyswitch.version);
|
||
|
|
vis.binds.fancyswitch.version = null;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fancyswitch: function (el, options) {
|
||
|
|
vis.binds.fancyswitch.showVersion();
|
||
|
|
var $this = $(el).parent().find('.fancy-switch');
|
||
|
|
var oid = $this.attr('data-oid');
|
||
|
|
options.valTrue = (options.valTrue === null || options.valTrue === '' || options.valTrue === undefined) ? null: options.valTrue;
|
||
|
|
options.valFalse = (options.valFalse === null || options.valFalse === '' || options.valFalse === undefined) ? null: options.valFalse;
|
||
|
|
if (options.valTrue === null) options.valTrue = 1;
|
||
|
|
if (options.valTrue === "true") options.valTrue = true;
|
||
|
|
if (options.valTrue === "false") options.valTrue = false;
|
||
|
|
if (options.valFalse === null) options.valFalse = 0;
|
||
|
|
if (options.valFalse === "true") options.valFalse = true;
|
||
|
|
if (options.valFalse === "false") options.valFalse = false;
|
||
|
|
if (oid && oid != 'nothing_selected') {
|
||
|
|
vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
|
||
|
|
if (newVal === null || newVal === undefined) newVal = options.valFalse;
|
||
|
|
var num = newVal;
|
||
|
|
if (num === "true") num = true;
|
||
|
|
if (num === "false") num = false;
|
||
|
|
if (num !== true && num !== false) {
|
||
|
|
if (typeof num === 'string') {
|
||
|
|
var f = parseFloat(num);
|
||
|
|
if (f == num) {
|
||
|
|
num = f;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if ((typeof num === 'number' && num > 0) || (options.valTrue === 1 && newVal === true) || newVal.toString() === options.valTrue) {
|
||
|
|
num = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
num = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (num === options.valTrue) num = true;
|
||
|
|
else num = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (options.invert) {
|
||
|
|
num = !num;
|
||
|
|
}
|
||
|
|
$this.css('background-position', num ? 'left' : 'right');
|
||
|
|
$this.find('input.fancy-on_off[value="' + options.valFalse + '"]').prop('checked', !num);
|
||
|
|
$this.find('input.fancy-on_off[value="' + options.valTrue + '"]').prop('checked', num);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$this.css('background', 'url("' + options.src + '")');
|
||
|
|
$this.find('.fancy-on_off').css('display', 'none');
|
||
|
|
$this.find('.fancy-on, .fancy-off').css('text-indent', '-10000px');
|
||
|
|
|
||
|
|
var newVal = vis.states.attr(oid + '.val');
|
||
|
|
if (newVal === null || newVal === undefined) newVal = options.valFalse;
|
||
|
|
var num = newVal;
|
||
|
|
if (num === "true") num = true;
|
||
|
|
if (num === "false") num = false;
|
||
|
|
if (num !== true && num !== false) {
|
||
|
|
if (typeof num === 'string') {
|
||
|
|
var f = parseFloat(num);
|
||
|
|
if (f == num) {
|
||
|
|
num = f;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if ((typeof num === 'number' && num > 0) || (options.valTrue === 1 && newVal === true) || newVal.toString() === options.valTrue) {
|
||
|
|
num = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
num = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (num === options.valTrue) num = true;
|
||
|
|
else num = false;
|
||
|
|
}
|
||
|
|
if (options.invert) {
|
||
|
|
num = !num;
|
||
|
|
}
|
||
|
|
$this.css('background-position', num ? 'left' : 'right');
|
||
|
|
|
||
|
|
if (!vis.editMode && oid && oid != 'nothing_selected') {
|
||
|
|
options.autoOff = parseInt(options.autoOff, 10) || 0;
|
||
|
|
|
||
|
|
$this.find("input.fancy-on_off").change(function() {
|
||
|
|
var newVal = $(this).val();
|
||
|
|
if (newVal === null || newVal === undefined) newVal = options.valFalse;
|
||
|
|
var num = newVal;
|
||
|
|
if (num === "true") num = true;
|
||
|
|
if (num === "false") num = false;
|
||
|
|
if (num !== true && num !== false) {
|
||
|
|
if (typeof num === 'string') {
|
||
|
|
var f = parseFloat(num);
|
||
|
|
if (f == num) {
|
||
|
|
num = f;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if ((typeof num === 'number' && num > 0) || (options.valTrue === 1 && newVal === true) || newVal.toString() === options.valTrue) {
|
||
|
|
num = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
num = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (num === options.valTrue) num = true;
|
||
|
|
else num = false;
|
||
|
|
}
|
||
|
|
if (options.invert) {
|
||
|
|
num = !num;
|
||
|
|
}
|
||
|
|
|
||
|
|
$this.css('background-position', num ? 'left' : 'right');
|
||
|
|
vis.setValue(oid, num ? options.valTrue : options.valFalse);
|
||
|
|
if (options.autoOff) {
|
||
|
|
setTimeout(function () {
|
||
|
|
vis.setValue(oid, num ? options.valFalse : options.valTrue);
|
||
|
|
}, options.autoOff);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toggleSwitch: function (el, options) {
|
||
|
|
vis.binds.fancyswitch.showVersion();
|
||
|
|
var $this = $(el).prev();
|
||
|
|
$this.toggleSwitch({
|
||
|
|
highlight: options.highlight,
|
||
|
|
width: parseInt(options.width, 10) || 40/*,
|
||
|
|
change: function (e) {
|
||
|
|
console.log(e);
|
||
|
|
}*/
|
||
|
|
});
|
||
|
|
|
||
|
|
if (vis.editMode) {
|
||
|
|
if (options.test) {
|
||
|
|
$this.val(!parseInt($this.val(), 10) ? '1' : '0').trigger('change');
|
||
|
|
}
|
||
|
|
setTimeout(function () {
|
||
|
|
var id = $this.attr('id');
|
||
|
|
id = id.substring(0, id.length - '_select'.length);
|
||
|
|
$('#' + id).find('.ui-toggle-switch').css({'pointer-events': 'none'});
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
iButton: function (el, options) {
|
||
|
|
vis.binds.fancyswitch.showVersion();
|
||
|
|
var $this = $(el);
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
$this.iButton(options);
|
||
|
|
}, 20);
|
||
|
|
|
||
|
|
if (!options.enableFx) options.enableFx = false;
|
||
|
|
if (!options.enableDrag) options.enableDrag = false;
|
||
|
|
if (options.resizeHandle === 'false') options.resizeHandle = false;
|
||
|
|
if (options.resizeContainer === 'false') options.resizeContainer = false;
|
||
|
|
|
||
|
|
var oid = $this.attr('data-oid');
|
||
|
|
if (oid != 'nothing_selected') {
|
||
|
|
vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
|
||
|
|
var num = (parseFloat(newVal) > 0 || newVal === 'true' || newVal === true);
|
||
|
|
$this.prop('checked', num).trigger('change');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (vis.editMode) {
|
||
|
|
if (options.test) $this.prop('checked', !$this.prop('checked')).trigger('change');
|
||
|
|
setTimeout(function () {
|
||
|
|
var id = $this.attr('id');
|
||
|
|
id = id.substring(0, id.length - '_checkbox'.length);
|
||
|
|
$('#' + id).find('.ibutton-container').css({'pointer-events': 'none'});
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="tplFancySwitch1"
|
||
|
|
type="text/ejs"
|
||
|
|
class="vis-tpl"
|
||
|
|
data-vis-prev='<div id="prev_tplFancySwitch1" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev" style="width: 104px; height: 40px; left: 179.5px; top: 46px; position: absolute;" > <div class="vis-widget-prev-body"> <fieldset class="fancy-switch" data-o style="background-image: url(widgets/fancyswitch/img/fancyswitch-1.png); background-position: 100% 50%; background-repeat: initial initial;"> <label class="fancy-off" style="text-indent: -10000px;">Off<input type="radio" class="fancy-on_off" name="w00004_on_off" value="0" style="display: none;"></label> <label class="fancy-on" style="text-indent: -10000px;">On<input type="radio" class="fancy-on_off" name="w00004_on_off" value="1" style="display: none;"></label> </fieldset> <div></div> </div> </div>'
|
||
|
|
data-vis-set="fancyswitch"
|
||
|
|
data-vis-type="ctrl - Bool"
|
||
|
|
data-vis-name="Switch light Off/On"
|
||
|
|
data-vis-attrs="oid;invert/checkbox;valFalse[0];valTrue[1];autoOff/slider,0,5000,100">
|
||
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="width:105px; height:46px;" id="<%= this.data.attr('wid') %>">
|
||
|
|
<div class="vis-widget-body">
|
||
|
|
<fieldset id="<%= this.data.attr('wid') %>_fancy" class="fancy-switch" data-oid="<%= this.data.attr('oid') %>">
|
||
|
|
<label class="fancy-off">Off<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valFalse') !== undefined) ? this.data.attr('valFalse') : 0 %>"/></label>
|
||
|
|
<label class="fancy-on">On<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valTrue') === '' || this.data.attr('valTrue') === null || this.data.attr('valTrue') === undefined) ? 1 : this.data.attr('valTrue') %>"/></label>
|
||
|
|
</fieldset>
|
||
|
|
<div <%= (el) -> vis.binds.fancyswitch.fancyswitch(el, {src: "widgets/fancyswitch/img/fancyswitch-1.png", invert: data.attr('invert'), valTrue: this.data.attr('valTrue'), valFalse: this.data.attr('valFalse'), autoOff: this.data.attr('autoOff')}) %>></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="tplFancySwitch2"
|
||
|
|
type="text/ejs"
|
||
|
|
class="vis-tpl"
|
||
|
|
data-vis-prev='<div id="prev_tplFancySwitch2" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-selectee" style="width: 105px; height: 46px; left: 408px; top: 404px;" > <div class="vis-widget-prev-body"> <fieldset class="fancy-switch" data-o style="background-image: url(widgets/fancyswitch/img/fancyswitch-2.png); background-position: 100% 50%; background-repeat: initial initial;"> <label class="fancy-off" style="text-indent: -10000px;">Off<input type="radio" class="fancy-on_off" name="w00005_on_off" value="0" style="display: none;"></label> <label class="fancy-on" style="text-indent: -10000px;">On<input type="radio" class="fancy-on_off" name="w00005_on_off" value="1" style="display: none;"></label> </fieldset> <div></div> </div> </div>'
|
||
|
|
data-vis-set="fancyswitch"
|
||
|
|
data-vis-type="ctrl - Bool"
|
||
|
|
data-vis-name="Slider dark Off/On"
|
||
|
|
data-vis-attrs="oid;invert/checkbox;valFalse[0];valTrue[1];autoOff/slider,0,5000,100">
|
||
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="width:105px; height:46px;" id="<%= this.data.attr('wid') %>">
|
||
|
|
<div class="vis-widget-body">
|
||
|
|
<fieldset id="<%= this.data.attr('wid') %>_fancy" class="fancy-switch" data-oid="<%= this.data.attr('oid') %>">
|
||
|
|
<label class="fancy-off">Off<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valFalse') !== undefined) ? this.data.attr('valFalse') : 0 %>"/></label>
|
||
|
|
<label class="fancy-on">On<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valTrue') === '' || this.data.attr('valTrue') === null || this.data.attr('valTrue') === undefined) ? 1 : this.data.attr('valTrue') %>"/></label>
|
||
|
|
</fieldset>
|
||
|
|
<div <%= (el) -> vis.binds.fancyswitch.fancyswitch(el, {src: "widgets/fancyswitch/img/fancyswitch-2.png", invert: data.attr('invert'), valTrue: this.data.attr('valTrue'), valFalse: this.data.attr('valFalse'), autoOff: this.data.attr('autoOff')}) %>></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="tplFancyDarkAnAus"
|
||
|
|
type="text/ejs"
|
||
|
|
class="vis-tpl"
|
||
|
|
data-vis-prev='<div id="prev_tplFancyDarkAnAus" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev" style="width: 105px; height: 46px; left: 136px; top: 613px;" > <div class="vis-widget-prev-body"> <fieldset class="fancy-switch" data-o style="background-image: url(widgets/fancyswitch/img/fancyswitch-3.png); background-position: 100% 50%; background-repeat: initial initial;"> <label class="fancy-off" style="text-indent: -10000px;">Off<input type="radio" class="fancy-on_off" name="w00006_on_off" value="0" style="display: none;"></label> <label class="fancy-on" style="text-indent: -10000px;">On<input type="radio" class="fancy-on_off" name="w00006_on_off" value="1" style="display: none;"></label> </fieldset> <div></div> </div> </div>'
|
||
|
|
data-vis-set="fancyswitch"
|
||
|
|
data-vis-type="ctrl - Bool"
|
||
|
|
data-vis-name="Schieber dunkel Ein/Aus"
|
||
|
|
data-vis-attrs="oid;invert/checkbox;valFalse[0];valTrue[1];autoOff/slider,0,5000,100">
|
||
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="width:105px; height:46px;" id="<%= this.data.attr('wid') %>">
|
||
|
|
<div class="vis-widget-body">
|
||
|
|
<fieldset id="<%= this.data.attr('wid') %>_fancy" class="fancy-switch" data-oid="<%= this.data.attr('oid') %>">
|
||
|
|
<label class="fancy-off">Off<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valFalse') !== undefined) ? this.data.attr('valFalse') : 0 %>"/></label>
|
||
|
|
<label class="fancy-on">On<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valTrue') === '' || this.data.attr('valTrue') === null || this.data.attr('valTrue') === undefined) ? 1 : this.data.attr('valTrue') %>"/></label>
|
||
|
|
</fieldset>
|
||
|
|
<div <%= (el) -> vis.binds.fancyswitch.fancyswitch(el, {src: "widgets/fancyswitch/img/fancyswitch-3.png", invert: data.attr('invert'), valTrue: this.data.attr('valTrue'), valFalse: this.data.attr('valFalse'), autoOff: this.data.attr('autoOff')}) %>></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="tplFancyDarkAnAusRev"
|
||
|
|
type="text/ejs"
|
||
|
|
class="vis-tpl"
|
||
|
|
data-vis-prev='<div id="prev_tplFancyDarkAnAusRev" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev" style="width: 105px; height: 46px; left: 278px; top: 527px;" > <div class="vis-widget-prev-body"> <fieldset class="fancy-switch" data-o style="background-image: url(widgets/fancyswitch/img/fancyswitch-4.png); background-position: 100% 50%; background-repeat: initial initial;"> <label class="fancy-off" style="text-indent: -10000px;">Off<input type="radio" class="fancy-on_off" name="w00007_on_off" value="0" style="display: none;"></label> <label class="fancy-on" style="text-indent: -10000px;">On<input type="radio" class="fancy-on_off" name="w00007_on_off" value="1" style="display: none;"></label> </fieldset> <div></div> </div> </div>'
|
||
|
|
data-vis-set="fancyswitch"
|
||
|
|
data-vis-type="ctrl - Bool"
|
||
|
|
data-vis-name="Schieber dunkel Aus/Ein"
|
||
|
|
data-vis-attrs="oid;invert/checkbox;valFalse[0];valTrue[1];autoOff/slider,0,5000,100">
|
||
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="width:105px; height:46px;" id="<%= this.data.attr('wid') %>">
|
||
|
|
<div class="vis-widget-body">
|
||
|
|
<fieldset id="<%= this.data.attr('wid') %>_fancy" class="fancy-switch" data-oid="<%= this.data.attr('oid') %>">
|
||
|
|
<label class="fancy-off">Off<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valFalse') !== undefined) ? this.data.attr('valFalse') : 0 %>"/></label>
|
||
|
|
<label class="fancy-on">On<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valTrue') === '' || this.data.attr('valTrue') === null || this.data.attr('valTrue') === undefined) ? 1 : this.data.attr('valTrue') %>"/></label>
|
||
|
|
</fieldset>
|
||
|
|
<div <%= (el) -> vis.binds.fancyswitch.fancyswitch(el, {src: "widgets/fancyswitch/img/fancyswitch-4.png", invert: data.attr('invert'), valTrue: this.data.attr('valTrue'), valFalse: this.data.attr('valFalse'), autoOff: this.data.attr('autoOff')}) %>></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="tplFancyDarkAnAusWippe"
|
||
|
|
type="text/ejs"
|
||
|
|
class="vis-tpl"
|
||
|
|
data-vis-prev='<div id="prev_tplFancyDarkAnAusWippe" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-selectee" style="width: 102px; height: 49px; left: 73px; top: 232px; position: absolute;" > <div class="vis-widget-prev-body"> <fieldset class="fancy-switch" data-o style="background-image: url(widgets/fancyswitch/img/fancyswitch-5.png); background-position: 100% 50%; background-repeat: initial initial;"> <label class="fancy-off" style="text-indent: -10000px;">Off<input type="radio" class="fancy-on_off" name="w00002_on_off" value="0" style="display: none;"></label> <label class="fancy-on" style="text-indent: -10000px;">On<input type="radio" class="fancy-on_off" name="w00002_on_off" value="1" style="display: none;"></label> </fieldset> <div></div> </div> </div>'
|
||
|
|
data-vis-set="fancyswitch"
|
||
|
|
data-vis-type="ctrl - Bool"
|
||
|
|
data-vis-name="Wippe dunkel Aus/Ein"
|
||
|
|
data-vis-attrs="oid;invert/checkbox;valFalse[0];valTrue[1];autoOff/slider,0,5000,100;lightStyle/checkbox">
|
||
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="width:105px; height:46px;" id="<%= this.data.attr('wid') %>">
|
||
|
|
<div class="vis-widget-body">
|
||
|
|
<fieldset id="<%= this.data.attr('wid') %>_fancy" class="fancy-switch" data-oid="<%= this.data.attr('oid') %>">
|
||
|
|
<label class="fancy-off">Off<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valFalse') !== undefined) ? this.data.attr('valFalse') : 0 %>"/></label>
|
||
|
|
<label class="fancy-on">On<input type="radio" class="fancy-on_off" name="<%= this.data.attr('wid') %>_on_off" value="<%= (this.data.attr('valTrue') === '' || this.data.attr('valTrue') === null || this.data.attr('valTrue') === undefined) ? 1 : this.data.attr('valTrue') %>"/></label>
|
||
|
|
</fieldset>
|
||
|
|
<div <%= (el) -> vis.binds.fancyswitch.fancyswitch(el, {src: data.attr('lightStyle') ? "widgets/fancyswitch/img/fancyswitch-6.png" : "widgets/fancyswitch/img/fancyswitch-5.png", invert: data.attr('invert'), valTrue: this.data.attr('valTrue'), valFalse: this.data.attr('valFalse'), autoOff: this.data.attr('autoOff')}) %>></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="tplFancyGivaIButton"
|
||
|
|
type="text/ejs"
|
||
|
|
class="vis-tpl"
|
||
|
|
data-vis-prev='<div id="prev_tplFancyGivaIButton" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-selectee" style="top: 514px; left: 186px;" > <div class="vis-widget-prev-body"> <div class="ibutton-container" style="pointer-events: none;"><input type="checkbox" name="w00004_checkbox" data-o value="1"><div class="ibutton-handle" style="left: 0px;"><div class="ibutton-handle-right"><div class="ibutton-handle-middle"></div></div></div><div class="ibutton-label-off"><span style="margin-right: 0px;"><label>OFF</label></span></div><div class="ibutton-label-on" style="width: 4px;"><span style="margin-left: -50px;"><label>ON</label></span></div><div class="ibutton-padding-left"></div><div class="ibutton-padding-right"></div></div> </div> </div>'
|
||
|
|
data-vis-set="fancyswitch"
|
||
|
|
data-vis-type="ctrl - Bool"
|
||
|
|
data-vis-name="Giva Labs iButton"
|
||
|
|
data-vis-attrs="oid;labelOn[ON];labelOff[OFF];resizeHandle[auto]/select,auto,true,false;resizeContainer[auto]/select,auto,true,false;enableDrag/checkbox;enableFx/checkbox;duration[200]/slider,0,5000,100;test/checkbox">
|
||
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left:0px;" id="<%= this.data.attr('wid') %>" >
|
||
|
|
<div class="vis-widget-body">
|
||
|
|
<input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox"
|
||
|
|
id="<%= this.data.attr('wid') %>_checkbox"
|
||
|
|
data-oid="<%= this.data.attr('oid') %>"
|
||
|
|
value="1"
|
||
|
|
<%= (el) -> vis.binds.basic.checkbox(el); vis.binds.fancyswitch.iButton(el, {duration: data.attr('duration'), labelOn: data.attr('labelOn'), labelOff: data.attr('labelOff'), resizeHandle: data.attr('resizeHandle'), resizeContainer: data.attr('resizeContainer'), enableDrag: data.attr('enableDrag'), enableFx: data.attr('enableFx'), test: data.attr('test')}); %>/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="tplFancyToggleswitch"
|
||
|
|
type="text/ejs"
|
||
|
|
data-vis-prev='<div id="prev_tplFancyToggleswitch" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-selectee" style="padding-left: 10px; left: 109px; top: 604px; position: absolute; height: 62px; width: 45px;" > <div class="vis-widget-prev-body" style="padding-top:5px; text-align: center"> <select data-oid="" class="ui-toggle-switch" style="display: none; pointer-events: none;"> <option value="0">OFF</option> <option value="1">ON</option> </select> <div></div> <div class="ui-toggle-switch" style="pointer-events: none;"><label style="border: 0px" class="ui-state-active">OFF</label><div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false" style="width: 40px;"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-max" style="width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div><label style="border: 0px">ON</label></div></div> </div>'
|
||
|
|
class="vis-tpl"
|
||
|
|
data-vis-set="fancyswitch"
|
||
|
|
data-vis-type="ctrl - Bool"
|
||
|
|
data-vis-name="Taitem jqui Toggleswitch"
|
||
|
|
data-vis-attrs="html_prepend;html_append;oid;text_true[ON];text_false[OFF];highlight_switch/checkbox;width[40]/slider,10,500,1;test/checkbox">
|
||
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="padding-left:10px;" id="<%= this.data.attr('wid') %>" >
|
||
|
|
<div class="vis-widget-body" style="padding-top:5px; text-align: center">
|
||
|
|
<%== this.data.attr("html_prepend") %>
|
||
|
|
<select id="<%= this.data.attr('wid') %>_select" data-oid="<%= (this.data.attr('oid') == 'nothing_selected' ? '' : this.data.attr('oid')) %>">
|
||
|
|
<option value="0"><%= this.data.attr('text_false') %></option>
|
||
|
|
<option value="1"><%= this.data.attr('text_true') %></option>
|
||
|
|
</select>
|
||
|
|
<div <%= (el) -> vis.binds.basic.select(el); vis.binds.fancyswitch.toggleSwitch(el, {highlight: data.attr('highlight_switch'), width: data.attr('width'), test: data.attr('test')}); %>></div>
|
||
|
|
<%== this.data.attr("html_append") %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|