iobroker.vis-2
Version:
Next generation graphical user interface for ioBroker.
125 lines (121 loc) • 6.53 kB
HTML
<script type="text/javascript">
if (vis.editMode) {
// Add words for basic widgets
$.extend(true, systemDictionary, {
"group_left": {"en": "Swipe to left", "de": "Swipe nach links", "ru": "Сдвиг влево"},
"left_nav_view": {"en": "View name", "de": "Viewname", "ru": "Имя страницы"},
"left_in_effect": {"en": "In effect", "de": "In-Effekt", "ru": "In эффект"},
"left_in_eff_opt": {"en": "In options", "de": "In-Optionen", "ru": "In опции"},
"left_out_effect": {"en": "Out effect", "de": "Out-Effekt", "ru": "Out эффект"},
"left_out_eff_opt": {"en": "Out options", "de": "Out-Optionen", "ru": "Out опции"},
"group_right": {"en": "Swipe to right", "de": "Swipe nach rechts", "ru": "Сдвиг вправо"},
"right_nav_view": {"en": "View name", "de": "Viewname", "ru": "Имя страницы"},
"right_in_effect": {"en": "In effect", "de": "In-Effekt", "ru": "In эффект"},
"right_in_eff_opt": {"en": "In options", "de": "In-Optionen", "ru": "In опции"},
"right_out_effect": {"en": "Out effect", "de": "Out-Effekt", "ru": "Out эффект"},
"right_out_eff_opt": {"en": "Out options", "de": "Out-Optionen", "ru": "Out опции"},
"Swipe Navigation": {"en": "Swipe Navigation", "de": "Swipe Navigation", "ru": "Swipe навигация"}
});
}
vis.binds.swipe = {
loadedSwipe: false,
loadedRound: false,
loadSwipeScripts: function (cb) {
if (vis.binds.swipe.loadedSwipe) {
cb && cb();
} else {
vis.binds.swipe.loadedSwipe = true;
$.ajax({
url: 'widgets/swipe/js/jquery.touchSwipe.min.js',
dataType: 'script',
success: function () {
cb && cb();
},
async: false
});
}
},
swipeNav: function (wid, view, data, style) {
console.log('SWIPE ' + wid);
var $div = $('#' + wid);
// if nothing found => wait
if (!$div.length) {
setTimeout(function () {
vis.binds.swipe.swipeNav(wid, view, data, style);
}, 100);
return;
}
if (vis.editMode) {
$div.show()
.find('.translate-it')
.each(function () {
$(this).html(_($(this).text()));
});
} else {
$div.hide();
vis.binds.swipe.loadSwipeScripts(function () {
var $view = $('#visview_' + view);
$view.swipe({
swipeLeft: function () {
vis.changeView(data['left_nav_view'], data['left_nav_view'], {
effect: data['left_out_effect'],
options: {
direction: data['left_out_eff_opt'],
queue: false
}, duration: $div.attr('duration')
}, {
effect: data['left_in_effect'],
options: {direction: data['left_in_eff_opt'], queue: false},
duration: $div.attr('duration')
}, true)
},
swipeRight: function () {
vis.changeView(data['right_nav_view'], data['right_nav_view'], {
effect: data['right_out_effect'],
options: {direction: data['right_out_eff_opt'], queue: false},
duration: $div.attr('duration')
}, {
effect: data['right_in_effect'],
options: {direction: data['right_in_eff_opt'], queue: false},
duration: $div.attr('duration')
}, true)
}
});
});
}
},
};
</script>
<script id="tplSwipe"
type="text/ejs"
class="vis-tpl"
data-vis-set="swipe"
data-vis-prev='<img src="widgets/swipe/img/Prev_Swipe.png"></img>'
data-vis-name="swipe Navigation"
data-vis-attrs="left_nav_view;right_nav_view;"
data-vis-no-palette="true"
data-vis-disabled-attrs2="duration;"
data-vis-disabled-attrs3="left_in_effect[slide];left_in_eff_opt[right];left_out_effect[slide];left_out_eff_opt[left];"
data-vis-disabled-attrs4="right_in_effect[slide];right_in_eff_opt[left];right_out_effect[slide];right_out_eff_opt[right];"
>
<div class="vis-widget <%== this.data.attr('class') %>" style="width: 160px; height: 82px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.swipe.swipeNav(this.data.wid, this.view, this.data, this.style) %>>
<div class="vis-widget-body">
<div style="font-weight: bold" class="translate-it">Swipe Navigation</div>
<table>
<tr><td style="width: 40px" class="translate-it">left</td><td style="width: 20px">></td><td><%= this.data.attr('left_nav_view') %></td></tr>
<tr><td style="width: 40px" class="translate-it">right</td><td style="width: 20px"><</td><td><%= this.data.attr('right_nav_view') %></td></tr>
</table>
</div>
</div>
</script>
<script id="tplCarousel"
type="text/ejs"
class="vis-tpl"
data-vis-set="swipe"
data-vis-prev='<img src="widgets/swipe/img/Prev_Carousel.png"></img>'
data-vis-name="Carousel"
data-vis-attrs="contains_view/views">
<div class="vis-widget <%== this.data.attr('class') %>" style="width: 300px; height: 100px;" id="<%= this.data.attr('wid') %>">
Does not work in vis-2.0
</div>
</script>