278 lines
12 KiB
HTML
278 lines
12 KiB
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> |