swipe ok, independent scrolling playlists in flatui
This commit is contained in:
woutervanwijk
parent
029e5d44fa
commit
0a34a845c6
@ -2841,9 +2841,9 @@ div.ui-slider-switch.ui-mini {
|
||||
}
|
||||
/* animate class is added to panel, wrapper and fixed toolbars */
|
||||
.ui-panel-animate {
|
||||
-webkit-transition: -webkit-transform 350ms ease;
|
||||
-moz-transition: -moz-transform 350ms ease;
|
||||
transition: transform 350ms ease;
|
||||
-webkit-transition: -webkit-transform 200ms ease;
|
||||
-moz-transition: -moz-transform 200ms ease;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
/* hardware acceleration for smoother transitions on WebKit browsers */
|
||||
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
width: 32.95%;
|
||||
}
|
||||
.pl-breakpoint.ui-grid-a .ui-block-b {
|
||||
width: 65.2%;
|
||||
width: 65.4%;
|
||||
}
|
||||
.pl-breakpoint.ui-grid-a .ui-block-a {
|
||||
clear: left;
|
||||
@ -102,10 +102,11 @@
|
||||
width: 100%;
|
||||
}
|
||||
#playlistspane, .scroll {
|
||||
overflow-y: auto;
|
||||
/* overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
*/
|
||||
width: 100%;
|
||||
heigth: 100%;
|
||||
heigth: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -346,8 +347,8 @@
|
||||
* Now Playing area
|
||||
*******************/
|
||||
.nowPlayingControls{
|
||||
font-size: 2em;
|
||||
line-height: 80px;
|
||||
font-size: 1.2em;
|
||||
line-height: 50px;
|
||||
}
|
||||
.nowPlayingControls .fa{
|
||||
vertical-align: -webkit-baseline-middle;
|
||||
@ -407,6 +408,13 @@
|
||||
/***************
|
||||
* common use
|
||||
***************/
|
||||
|
||||
#playlistspane {
|
||||
/* height: 90% !important;*/
|
||||
margin: 0px !important;
|
||||
padding: 2px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@ -573,4 +581,13 @@ a {
|
||||
font-size: 1.3em;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable text selection for mouse swipe */
|
||||
body * {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
new FastClick(document.body);
|
||||
}, false);
|
||||
</script>
|
||||
<script src="js/jquery.mobile-1.3.1.min.js"></script>
|
||||
<script src="js/jquery.mobile-1.3.2.min.js"></script>
|
||||
<meta name="description" content="MusicBox">
|
||||
<meta name="author" content="Wouter van Wijk">
|
||||
<meta name="copyright" content="(c) 2012-2013 Wouter van Wijk"/>
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
<body>
|
||||
<div data-role="page" id="page" class="ui-responsive-panel" data-theme="c">
|
||||
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="reveal" data-position-fixed="true">
|
||||
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="reveal"> <!-- data-position-fixed="true"> -->
|
||||
|
||||
|
||||
<ul class="ui-listview mainNav" data-role="listview" data-theme="a">
|
||||
@ -185,10 +185,12 @@
|
||||
|
||||
<div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="ui-grid-b header-breakpoint headerbtn">
|
||||
<a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu" id="headermenubtn"></a>
|
||||
<!-- <a id="headerplaylistsbtn" href="#" class="" onclick="switchContent('playlists' ); return false;">
|
||||
<i class="fa fa-star"></i></a>
|
||||
-->
|
||||
<h1 id="contentHeadline" >Musicbox</h1>
|
||||
<a id="headersearchbtn" href="#search" class="ui-btn-icon-right headerbtn" onclick="switchContent('search' ); return false;">
|
||||
<a id="headersearchbtn" href="#" class="ui-btn-icon-right headerbtn" onclick="switchContent('search' ); return false;">
|
||||
<i class="fa fa-search"></i></a>
|
||||
|
||||
</div>
|
||||
<!-- /header -->
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ var customPlaylists = [];
|
||||
var customTracklists = [];
|
||||
|
||||
var ua = navigator.userAgent,
|
||||
isMobileSafari = /Mac/.test(ua) && /Mobile/.test(ua), isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua), isMobile = /Mobile/.test(ua);
|
||||
isMobileSafari = /Mac/.test(ua) && /Mobile/.test(ua), isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua), isMobile = /Mobile/.test(ua), isWebkit = /WebKit/.test(ua);
|
||||
|
||||
//constants
|
||||
PROGRAM_NAME = 'MusicBox';
|
||||
@ -156,7 +156,7 @@ function renderSongLi(song, liID, uri){
|
||||
} else {
|
||||
playlistType = 'playTrackByUri';
|
||||
}
|
||||
console.log(playlistType);
|
||||
// console.log(playlistType);
|
||||
|
||||
// songLi = '';
|
||||
songLi = '<li class="song albumli" id="' + liID + '">' +
|
||||
@ -178,7 +178,7 @@ function resultsToTables(results, target, uri) {
|
||||
} else {
|
||||
playlistType = 'playTrackByUri';
|
||||
}
|
||||
console.log(playlistType);
|
||||
// console.log(playlistType);
|
||||
|
||||
var newalbum = [];
|
||||
var nexturi = '';
|
||||
@ -395,7 +395,7 @@ function validUri(str) {
|
||||
return regexp.test(str);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
$.event.special.swipe = $.extend($.event.special.swipe, {
|
||||
start: function( event ) {
|
||||
var data = event.originalEvent.touches ?
|
||||
@ -406,6 +406,7 @@ $.event.special.swipe = $.extend($.event.special.swipe, {
|
||||
origin: $( event.target ),
|
||||
offset: $('body').scrollTop()
|
||||
};
|
||||
// console.log('start');
|
||||
},
|
||||
|
||||
stop: function( event ) {
|
||||
@ -416,6 +417,7 @@ $.event.special.swipe = $.extend($.event.special.swipe, {
|
||||
coords: [ data.pageX, data.pageY ],
|
||||
offset: $('body').scrollTop()
|
||||
};
|
||||
alert.log('stop');
|
||||
},
|
||||
|
||||
handleSwipe: function( start, stop ) {
|
||||
@ -424,10 +426,13 @@ $.event.special.swipe = $.extend($.event.special.swipe, {
|
||||
y = Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ),
|
||||
offset = Math.abs( start.offset - stop.offset ),
|
||||
time = stop.time - start.time;
|
||||
if ( time < swipe.durationThreshold && x > swipe.horizontalDistanceThreshold && ( y + offset )
|
||||
if ( time < swipe.durationThreshold && x > swipe.horizontalDistanceThreshold && ( y + offset )
|
||||
< swipe.verticalDistanceThreshold ) {
|
||||
|
||||
start.origin.trigger( "swipe" ).trigger( ( start.coords[ 0 ] - stop.coords[ 0 ] ) ? "swipeleft" : "swiperight" );
|
||||
|
||||
// alert(x + ' ' + y + ' ' + time + ' ' + offset + ' ' + swipe.verticalDistanceThreshold);
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
@ -20,7 +20,7 @@ function resetSong() {
|
||||
setSongInfo(data);
|
||||
}
|
||||
}
|
||||
console.log('test');
|
||||
//console.log('test');
|
||||
|
||||
function resizeMb() {
|
||||
$("#infoname").html(songdata.name);
|
||||
@ -41,40 +41,38 @@ function resizeMb() {
|
||||
// });
|
||||
|
||||
|
||||
// //initialize iScroll if MobileWebkit and large window
|
||||
// if (isMobileWebkit) {
|
||||
// if ($(window).width() > 480) {
|
||||
// if (!playlistslistScroll) {
|
||||
// playlistslistScroll = new iScroll('playlistslistdiv');
|
||||
// playlisttracksScroll = new iScroll('playlisttracksdiv');
|
||||
// }
|
||||
// } else {
|
||||
// if (playlistslistScroll) {
|
||||
// playlistslistScroll.destroy();
|
||||
// playlistslistScroll = null;
|
||||
// playlisttracksScroll.destroy();
|
||||
// playlisttracksScroll = null;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//initialize iScroll if MobileWebkit and large window
|
||||
if (isMobileWebkit && $(window).width() > 480) {
|
||||
if (!playlistslistScroll) {
|
||||
playlistslistScroll = new iScroll('playlistslistdiv');
|
||||
playlisttracksScroll = new iScroll('playlisttracksdiv');
|
||||
}
|
||||
} else {
|
||||
if (playlistslistScroll) {
|
||||
playlistslistScroll.destroy();
|
||||
playlistslistScroll = null;
|
||||
playlisttracksScroll.destroy();
|
||||
playlisttracksScroll = null;
|
||||
}
|
||||
}
|
||||
|
||||
// //set height of playlist scrollers
|
||||
//
|
||||
// if ($(window).width() > 480) {
|
||||
// $('.scroll').height($(window).height() - 111);
|
||||
// //jqm added something which it shouldnt (at least in this case) I guess
|
||||
// // $('#playlistspane').removeClass('height').height($(window).height() - 110);
|
||||
// $('.scroll').removeClass('height').removeClass('width');
|
||||
// $('#playlistspane').removeClass('height').removeClass('width');
|
||||
// } else {
|
||||
// $('.scroll').addClass('height', '100%').addClass('width', '100%');
|
||||
// $('#playlistspane').addClass('height', '100%').addClass('width', '100%');
|
||||
// }
|
||||
//
|
||||
// if (isMobileWebkit && ($(window).width() > 480)) {
|
||||
// playlistslistScroll.refresh();
|
||||
// playlisttracksScroll.refresh();
|
||||
// }
|
||||
|
||||
if ($(window).width() > 480) {
|
||||
$('.scroll').height($(window).height() - 96);
|
||||
//jqm added something which it shouldnt (at least in this case) I guess
|
||||
// $('#playlistspane').removeClass('height').height($(window).height() - 110);
|
||||
$('.scroll').removeClass('height').removeClass('width');
|
||||
$('#playlistspane').removeClass('height').removeClass('width');
|
||||
} else {
|
||||
$('.scroll').addClass('height', '99%').addClass('width', '99%');
|
||||
$('#playlistspane').addClass('height', '99%').addClass('width', '99%');
|
||||
}
|
||||
|
||||
if (isMobileWebkit && ($(window).width() > 480)) {
|
||||
playlistslistScroll.refresh();
|
||||
playlisttracksScroll.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
function setSongInfo(data) {
|
||||
@ -304,114 +302,6 @@ function initSocketevents() {
|
||||
});
|
||||
}
|
||||
|
||||
/**********************
|
||||
* initialize software
|
||||
**********************/
|
||||
$(document).ready(function() {
|
||||
//check for websockets
|
||||
if (!window.WebSocket) {
|
||||
switchContent("playlists");
|
||||
$('#playlistspane').html('<h2>Old Browser</h2><p>Sorry. Your browser isn\'t modern enough for this webapp. Modern versions of Chrome, Firefox, Safari all will do. Maybe Opera and Internet Explorer 10 also work, but it\'s not tested.</p>');
|
||||
exit;
|
||||
}
|
||||
//workaround for a bug in jQuery Mobile, without that the panel doesn't close on mobile devices...
|
||||
$('.ui-panel-dismiss').on( "tap", function() { $("#panel").panel("close"); } );
|
||||
//end of workaround
|
||||
|
||||
|
||||
|
||||
$(window).hashchange();
|
||||
|
||||
// Connect to server
|
||||
mopidy = new Mopidy();
|
||||
// mopidy.on(console.log.bind(console)); // Log all events
|
||||
|
||||
//initialize events
|
||||
initSocketevents();
|
||||
|
||||
resetSong();
|
||||
|
||||
if (location.hash.length < 2) {
|
||||
switchContent("playlists");
|
||||
}
|
||||
|
||||
initgui = false;
|
||||
window.onhashchange = locationHashChanged;
|
||||
// Log all events
|
||||
//mopidy.on(function() {
|
||||
//});
|
||||
|
||||
//update gui status every x seconds from mopdidy
|
||||
setInterval(updateTimer, STATUS_TIMER);
|
||||
//only show backbutton if in UIWebview
|
||||
if (window.navigator.standalone) {
|
||||
$("#btback").show();
|
||||
} else {
|
||||
$("#btback").hide();
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
resizeMb();
|
||||
});
|
||||
|
||||
|
||||
//navigation temporary, rewrite this!
|
||||
$('#normalFooter').click(
|
||||
function() {
|
||||
if(!$(event.target).is("#playimg"))
|
||||
{return switchContent('nowPlaying')} }
|
||||
);
|
||||
$('#navEnterFullscreen').click(function(){
|
||||
enterFullscreen();
|
||||
});
|
||||
$('#navExitFullscreen').click(function(){
|
||||
exitFullscreen();
|
||||
});
|
||||
|
||||
|
||||
|
||||
//navigation stuff
|
||||
|
||||
$(document).keypress( function (event) {
|
||||
//console.log('kp: '+event);
|
||||
if (event.target.tagName != 'INPUT') {
|
||||
event.preventDefault();
|
||||
switch(event.which) {
|
||||
case 32:
|
||||
doPlay();
|
||||
break;
|
||||
case '>':
|
||||
doNext();
|
||||
break;
|
||||
case '<':
|
||||
doPrevious();
|
||||
break;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
initRadio();
|
||||
|
||||
if ($(window).width() <= 1024) {
|
||||
$("#panel").panel("close");
|
||||
}else{
|
||||
$("#panel").panel("open");
|
||||
}
|
||||
|
||||
//hide fullscreen button if in UIWebview
|
||||
if (window.navigator.standalone) {
|
||||
$('#navExitFullscreen').hide();
|
||||
}
|
||||
|
||||
// swipe songinfo and panel
|
||||
$( "#normalFooter" ).on( "swiperight", doPrevious );
|
||||
$( "#normalFooter" ).on( "swipeleft", doNext );
|
||||
$( "#panel, .pane" ).on( "swiperight", function() { $("#panel").panel("open") } );
|
||||
$( "#panel, .pane" ).on( "swipeleft", function() { $("#panel").panel("close") });
|
||||
$( "#header" ).on( "swiperight", function() { $("#panel").panel("open") } );
|
||||
$( "#header" ).on( "swipeleft", function() { $("#panel").panel("close") });
|
||||
});
|
||||
|
||||
$(document).bind("pageinit", function() {
|
||||
resizeMb();
|
||||
|
||||
@ -421,7 +311,7 @@ $(document).bind("pageinit", function() {
|
||||
* diverse
|
||||
************************/
|
||||
function enterFullscreen() {
|
||||
if (isMobileSafari) { alert ("Go make this app Full Screen, you have to add this app to your home-screen using the Share button."); exit(); }
|
||||
if (isMobileSafari) { alert ("To get this app in Full Screen, you have to add it to your home-screen using the Share button."); exit(); }
|
||||
var elem = document.querySelector("#page");
|
||||
elem.onwebkitfullscreenchange = onFullScreenEnter;
|
||||
elem.onmozfullscreenchange = onFullScreenEnter;
|
||||
@ -562,10 +452,117 @@ function locationHashChanged() {
|
||||
return false;
|
||||
}
|
||||
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.event.special.swipe.horizontalDistanceThreshold = 30; // (default: 30px) Swipe horizontal displacement must be more than this.
|
||||
$.event.special.swipe.verticalDistanceThreshold = 75; // (default: 75px) Swipe vertical displacement must be less than this.
|
||||
$.event.special.swipe.scrollSupressionThreshold = 30;
|
||||
/**********************
|
||||
* initialize software
|
||||
**********************/
|
||||
$(document).ready(function(event) {
|
||||
//check for websockets
|
||||
if (!window.WebSocket) {
|
||||
switchContent("playlists");
|
||||
$('#playlistspane').html('<h2>Old Browser</h2><p>Sorry. Your browser isn\'t modern enough for this webapp. Modern versions of Chrome, Firefox, Safari all will do. Maybe Opera and Internet Explorer 10 also work, but it\'s not tested.</p>');
|
||||
exit;
|
||||
}
|
||||
|
||||
//workaround for a bug in jQuery Mobile, without that the panel doesn't close on mobile devices...
|
||||
$('.ui-panel-dismiss').on( "tap", function() { $("#panel").panel("close"); } );
|
||||
//end of workaround
|
||||
|
||||
|
||||
|
||||
$(window).hashchange();
|
||||
|
||||
// Connect to server
|
||||
mopidy = new Mopidy();
|
||||
// mopidy.on(console.log.bind(console)); // Log all events
|
||||
|
||||
//initialize events
|
||||
initSocketevents();
|
||||
|
||||
resetSong();
|
||||
|
||||
if (location.hash.length < 2) {
|
||||
switchContent("playlists");
|
||||
}
|
||||
|
||||
initgui = false;
|
||||
window.onhashchange = locationHashChanged;
|
||||
// Log all events
|
||||
//mopidy.on(function() {
|
||||
//});
|
||||
|
||||
//update gui status every x seconds from mopdidy
|
||||
setInterval(updateTimer, STATUS_TIMER);
|
||||
//only show backbutton if in UIWebview
|
||||
if (window.navigator.standalone) {
|
||||
$("#btback").show();
|
||||
} else {
|
||||
$("#btback").hide();
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
resizeMb();
|
||||
});
|
||||
|
||||
|
||||
//navigation temporary, rewrite this!
|
||||
$('#normalFooter').click(
|
||||
function() {
|
||||
if(!$(event.target).is("#playimg"))
|
||||
{return switchContent('nowPlaying')} }
|
||||
);
|
||||
$('#nowPlayingpane, #controlspopupimage').click(
|
||||
function() {return switchContent('current')}
|
||||
);
|
||||
$('#navEnterFullscreen').click(function(){
|
||||
enterFullscreen();
|
||||
});
|
||||
$('#navExitFullscreen').click(function(){
|
||||
exitFullscreen();
|
||||
});
|
||||
|
||||
|
||||
|
||||
//navigation stuff
|
||||
|
||||
$(document).keypress( function (event) {
|
||||
//console.log('kp: '+event);
|
||||
if (event.target.tagName != 'INPUT') {
|
||||
event.preventDefault();
|
||||
switch(event.which) {
|
||||
case 32:
|
||||
doPlay();
|
||||
break;
|
||||
case '>':
|
||||
doNext();
|
||||
break;
|
||||
case '<':
|
||||
doPrevious();
|
||||
break;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
initRadio();
|
||||
|
||||
if ($(window).width() <= 1024) {
|
||||
$("#panel").panel("close");
|
||||
}else{
|
||||
$("#panel").panel("open");
|
||||
}
|
||||
|
||||
//hide fullscreen button if in UIWebview
|
||||
if (window.navigator.standalone) {
|
||||
$('#navExitFullscreen').hide();
|
||||
}
|
||||
|
||||
$.event.special.swipe.horizontalDistanceThreshold = 150; // (default: 30px) Swipe horizontal displacement must be more than this.
|
||||
$.event.special.swipe.verticalDistanceThreshold = 50; // (default: 75px) Swipe vertical displacement must be less than this.
|
||||
// $.event.special.swipe.scrollSupressionThreshold = 20;
|
||||
$.event.special.swipe.durationThreshold = 500;
|
||||
|
||||
// swipe songinfo and panel
|
||||
$( "#normalFooter" ).on( "swiperight", doPrevious );
|
||||
$( "#normalFooter" ).on( "swipeleft", doNext );
|
||||
$( "#page, #header, #panel, .pane" ).on( "swiperight", function() { $("#panel").panel("open") } );
|
||||
$( "#page, #header, #panel, .pane" ).on( "swipeleft", function() { $("#panel").panel("close") });
|
||||
});
|
||||
|
||||
9
flatclient/js/jquery.mobile-1.3.2.min.js
vendored
Normal file
9
flatclient/js/jquery.mobile-1.3.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user