iobroker.vis
Version:
Graphical user interface for iobroker.
278 lines (255 loc) • 12.4 kB
HTML
<style>
.roundabout-holder {
list-style: none;
position: absolute;
left:100px;
top:10px;
right: 0;
margin: 0;
overflow: visible;
height: calc(100% - 20px);
width: calc(100% - 200px);
}
.roundabout-moveable-item {
text-align: center;
}
.li_carousel {
background-color: rgba(0, 0, 0, 0);
text-align: center;
position: relative;
}
.carousel_blocking {
position: relative;
z-index: 149;
width: 100%;
height: 100%;
}
.roundabout-in-focus{
z-index: 1000;
}
</style>
<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
});
}
},
loadRoundScripts: function (cb) {
if (vis.binds.swipe.loadedRound) {
cb && cb();
} else {
vis.binds.swipe.loadedRound = true;
$.ajax({
url: 'widgets/swipe/js/jquery.roundabout.min.js',
dataType: 'script',
success: function () {
jQuery.ajax({
url: 'widgets/swipe/js/jquery.roundabout-shapes.js',
dataType: 'script',
success: function () {
cb && cb();
},
async: false
});
},
async: false
});
}
},
swipeNav: function (wid, view, data, style) {
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()));
});
}
var $view = $('#visview_' + view);
if (!vis.editMode) {
vis.binds.swipe.loadSwipeScripts(function () {
$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)
}
});
});
}
},
applyCarousel: function ($div, childView) {
var $childView = $div.find('#visview_' + childView);
var count = $div.data('count');
count = count || 0;
if (!$childView.length) {
count++;
if (count > 20) {
return;
}
$div.data('count', count);
setTimeout(function () {
vis.binds.swipe.applyCarousel($div, childView);
}, 100);
return;
}
var $all = $div.find('.vis-widget');
$all.each(function () {
var $id = $(this);
var id = $id.attr('id');
var idOldPos = $id.position();
var $idAndChilds = $childView.children('[id^=' + id + ']');
if ($idAndChilds.length === 1) {
$id.css({top: 0, left: 0});
$idAndChilds.wrapAll('<li id="li_' + id + '" class="li_carousel" ></li>');
$('#li_' + id).css({height: $id.css('height'), width: $id.css('width')});
} else {
$idAndChilds.wrapAll('<div id="wrap_' + id + '" style="position: absolute; height: 50px; width: 50px; left: ' + (idOldPos.left * -1) + 'px; top:' + (idOldPos.top * -1) + 'px"></div>');
$('#wrap_' + id).wrap('<li id="li_' + id + '" class="li_carousel"></li>');
$('#li_' + id).css({height: $id.css('height'), width: $id.css('width')});
}
});
$childView.children('.li_carousel').append('<div class="carousel_blocking"></div>');
$childView.children('.li_carousel').wrapAll('<ul class="parent_carousel"></ul>');
$childView.find('.parent_carousel')
.bind('ready', function () {
var child = $('.roundabout-in-focus').children();
$(child[1]).removeClass('carousel_blocking');
})
.roundabout({
clickToFocus: true,
enableDrag: true,
dragFactor: 2,
minZ: 1,
maxZ: 100,
tilt: -4,
minOpacity: 0.2,
minScale: 1,
childSelector: '.li_carousel',
triggerFocusEvents: true,
triggerBlurEvents: true
});
$childView.find('.li_carousel')
.bind('focus', function () {
var child = $(this).children();
$(child[1]).removeClass('carousel_blocking');
$(this).removeClass('roundabout-moveable-item')
})
.bind('blur', function () {
var child = $(this).children();
$(child[1]).addClass('carousel_blocking');
$(this).addClass('roundabout-moveable-item')
});
},
carousel: function (wid, view, data, style) {
var $div = $('#' + wid);
var childView = data.contains_view;
// if nothing found => wait
if (!$div.length) {
setTimeout(function () {
vis.binds.swipe.carousel(wid, view, data, style);
}, 100);
return;
}
if (view === data.contains_view) {
$div.find('.vis-widget-body').attr('data-vis-contains', '');
$div.html('<div style="color: red">' + _('Cannot show itself') + '</div>');
return;
}
if (vis.editMode) return;
vis.binds.swipe.loadRoundScripts(function () {
vis.binds.swipe.applyCarousel($div, childView);
});
}
};
</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="duration;"
data-vis-attrs0="group.left;left_nav_view;left_in_effect[slide];left_in_eff_opt[right];left_out_effect[slide];left_out_eff_opt[left];"
data-vis-attrs1="group.right;right_nav_view;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="display: none; width: 160px; height: 64px; 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') %>" <%= (el) -> vis.binds.swipe.carousel(this.data.wid, this.view, this.data, this.style) %>>
<% if (vis.editMode) { %>
<div class="editmode-helper" />
<% } %>
<div data-vis-contains="<%= this.data.attr('contains_view') %>" class="vis-widget-body vis-view-container"></div>
</div>
</script>