Initial commit
This commit is contained in:
@@ -0,0 +1,278 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user