cordova-plugin-nativepagetransitions
Version:
Slide out the current page to reveal the next one. By a native transitions.
295 lines (252 loc) • 10.3 kB
HTML
<html>
<head>
<title>Kendo UI Demo</title>
<script type="text/javascript" src="cordova.js"></script>
<script>
window.onerror = function(msg, file, line) {
alert(msg + '; ' + file + '; ' + line);
};
// window.addEventListener("load", function(){alert('load')}, false);
// document.addEventListener("DOMContentLoaded", function(){alert('dom')}, false);
// this piece of code is an automatic kendoui-cordova-pagetransitions wiring thingy
// .. move to a new js file when done, so users can drop it in
// check that the plugin is loaded (after deviceready ofcourse)
document.addEventListener("deviceready", wireKendoToCordovaPageTransitions, false);
function shown(x) {
// alert(x["sender"].id);
// get old function from element and invoke it
}
function theOldShowFunction() {
alert('in old');
}
function wireKendoToCordovaPageTransitions() {
if (window.plugins && window.plugins.pagetransitions) {
var transAnchors = document.querySelectorAll("a[data-transition]");
for (var i=0; i<transAnchors.length; i++) {
var transAnchor = transAnchors[i];
if (transAnchor.getAttribute("data-transition-native") !== "false") {
var slideDirection = transAnchor.getAttribute("data-transition");
if (slideDirection != null && slideDirection.indexOf("slide:") > -1) {
slideDirection = slideDirection.substring(6);
var href = transAnchor.getAttribute("href");
transAnchor.removeAttribute("href"); // note this removes the link style.. is that ok? for buttons it likely is
transAnchor.removeAttribute("data-transition");
// wire the show event of the to-view to the performPendingTransition funtion of the plugin
if (href.indexOf("#") == 0) {
var toDiv = document.querySelector(href);
// TODO if there is already a data-show, combine them
if (toDiv.hasAttribute("data-show")) {
var oldShowFunction = toDiv.getAttribute("data-show");
toDiv.setAttribute("data-show-old", oldShowFunction);
}
toDiv.setAttribute("data-show", "shown");
}
var androiddelay = transAnchor.getAttribute("data-transition-native-androiddelay");
if (androiddelay == null) {
androiddelay = 100;
}
transAnchor.setAttribute("ontouchend", "slide('"+slideDirection+"', '"+href+"', '"+androiddelay+"')");
}
}
}
} else {
console.log("window.plugins.pagetransitions not available, is it installed correctly?")
}
}
</script>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script>
function slide(direction, href, delay) {
// TODO find kendo on load complete event to fire the actual transition
// see http://docs.telerik.com/kendo-ui/api/mobile/view
window.addEventListener("show", function(){alert('show 1')}, false);
document.addEventListener("show", function(){alert('show 2')}, false);
// setTimeout(function() {
document.location.href = href;
// }, 0);
window.plugins.pagetransitions.slide({
'direction': direction,
'duration': 350,
'androiddelay': delay
// 'href': href // can be a #hash or a .html file
},
function () {
// console.log('slide transition finished');
});
}
</script>
</head>
<body>
<div data-role="view" data-title="Camera App" id="view-transitions" data-persist="true">
<a data-role="button" href="index.html" data-rel="external">Back</a>
<br/>
<img src="http://demos.telerik.com/kendo-ui/content/mobile/shared/color-lens.png" class="camera-image" /><br />
<br/>
<br/>
<a href="#view-transitions-welcome" data-role="button" class="transitions-button" data-transition="slide:left" data-transition-native="false">Forward (css)</a>
<br/>
<br/>
<!--<a href="#view-transitions-welcome" data-role="button" class="transitions-button" data-transition="slide:left">Native transition</a>-->
<a href="#view-transitions-welcome" data-role="button" class="transitions-button" data-transition="slide:left" data-transition-native-androiddelay="220">Forward (native)</a>
</div>
<div data-show="theOldShowFunction" data-role="view" data-title="Welcome" id="view-transitions-welcome" data-persist="true">
<br/>
<br/>
<a data-transition-native="false" data-role="button" href="#view-transitions" data-transition="slide:right" class="transitions-button">Back (css)</a>
<br/>
<a data-transition-native="false" data-role="button" href="#view-transitions-welcome-next" data-transition="slide:left" class="transitions-button">Forward (css)</a>
<br/>
<br/>
<br/>
<a data-role="button" href="#view-transitions" data-transition="slide:right" class="transitions-button">Back (native)</a>
<br/>
<a data-role="button" href="#view-transitions-welcome-next" data-transition="slide:left" class="transitions-button">Forward (native)</a>
<br/>
<br/>
<br/>
<br/>
<p>Just some Kendo widgets..</p>
<br/>
<ul data-role="buttongroup" data-enable="true">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<br/>
<ul data-role="listview">
<li>Item 1<a data-role="detailbutton" data-style="rowinsert" data-click="onClick"></a></li>
<li>Item 2<a data-role="detailbutton" data-style="rowinsert" data-click="onClick"></a></li>
<li>Item 3<a data-role="detailbutton" data-style="rowinsert" data-click="onClick"></a></li>
</ul>
</div>
<div data-role="view" data-title="Welcome" id="view-transitions-welcome-next" data-persist="true">
<br/>
<br/>
<p>And another page</p>
<br/>
<a data-transition-native="false" data-role="button" href="#view-transitions-welcome" data-transition="slide:right" class="transitions-button">Back (css)</a>
<br/>
<br/>
<a data-role="button" href="#view-transitions-welcome" data-transition="slide:right" class="transitions-button">Back (native)</a>
<br/>
<br/>
</div>
<style scoped>
.km-root .transitions-button,
.km-root .transitions-cancel {
display: block;
text-align: center;
margin: .6em .8em 0;
font-size: 1.2em;
background-color: #369;
}
.km-ios7 .transitions-button,
.km-ios7 .transitions-cancel {
color: #fff;
border-color: transparent;
}
.km-blackberry .transitions-button,
.km-blackberry .transitions-cancel {
margin: .6em 1.8em 0;
}
#view-transitions,
#view-transitions-welcome p {
color: #fff;
text-align: center;
}
#view-transitions img,
#view-transitions-welcome img {
display: block;
margin: 30px auto;
}
#view-transitions-login label {
display: inline-block;
width: 100%;
}
#view-transitions .km-content,
#view-transitions-login .km-content,
#view-transitions-welcome .km-content {
background: url(http://demos.telerik.com/kendo-ui/content/shared/images/patterns/pattern1.png) repeat 0 0;
}
#view-transitions-welcome-next .km-content {
background: url(http://demos.telerik.com/kendo-ui/content/shared/images/patterns/pattern8.png) repeat 0 0;
}
.km-ios #view-transitions-welcome .km-button,
.km-ios7 #view-transitions-welcome .km-content .km-button,
.km-blackberry #view-transitions-welcome .km-content .km-button,
.km-flat #view-transitions-welcome .km-content .km-button {
background-color: DarkRed;
color: #fff;
}
.km-ios #view-transitions-login .transitions-button,
.km-ios7 #view-transitions-login .transitions-button,
.km-blackberry #view-transitions-login .km-content .transitions-button,
.km-flat #view-transitions-login .km-content .transitions-button {
background-color: Green;
color: #fff;
}
.km-blackberry #view-transitions *,
.km-blackberry #view-transitions-login *,
.km-blackberry #view-transitions-welcome *
{
color: #fff;
}
.km-ios #view-transitions .km-button,
.km-ios7 #view-transitions .km-button,
.km-ios #view-transitions-login .transitions-cancel,
.km-ios7 #view-transitions-login .transitions-cancel {
background-color: #000;
}
.km-flat #view-transitions .km-button,
.km-flat #view-transitions-login .km-content .transitions-cancel {
background-color: #000;
color: #fff;
}
.km-ios #view-transitions .km-navbar,
.km-ios #view-transitions-login .km-navbar,
.km-ios #view-transitions-welcome .km-navbar,
.km-ios7 #view-transitions .km-navbar,
.km-ios7 #view-transitions-login .km-navbar,
.km-ios7 #view-transitions-welcome .km-navbar,
.km-ios7 .km-view-title,
.km-blackberry #view-transitions .km-navbar,
.km-blackberry #view-transitions-login .km-navbar,
.km-blackberry #view-transitions-welcome .km-navbar,
.km-flat #view-transitions .km-navbar,
.km-flat #view-transitions-login .km-navbar,
.km-flat #view-transitions-welcome .km-navbar {
background-color: #000;
color: #fff;
}
.km-ios7 #view-transitions .km-navbar,
.km-ios7 #view-transitions-login .km-navbar,
.km-ios7 #view-transitions-welcome .km-navbar {
border-color: transparent;
}
.km-ios7 #view-transitions-login .km-list > li,
.km-ios7 #view-transitions-login .km-list > li input,
.km-android-light #view-transitions-login .km-list > li,
.km-wp-light #view-transitions-login .km-list > li {
color: #fff;
}
.km-wp-light #view-transitions .km-view-title {
color: #000;
}
.transitions-button {
width: 60%;
margin-left: 16% ;
}
</style>
<script>
var app = new kendo.mobile.Application(document.body);
function viewShow() {
myListView = $("#listView").refresh();
}
</script>
</body>
</html>