andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Webclient used in MusicBox 0.4.2

Browse Source 
added shutdown/reboot
initial work for settings page
This commit is contained in:
woutervanwijk 2013-12-28 15:39:15 +01:00
parent a3d4cddcb1
commit 7af0626538
14 changed files with 315 additions and 1469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
flatclient/dialog-success.html Executable file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" class="dialog-actionsheet">
<div data-role="content">
<h3>Initiating shutdown/reboot...</h3>
</div>
</div>
</body>
</html>

4
flatclient/index.html
View File

@ -84,6 +84,10 @@
<span class="navtxt"> Exit Fullscreen </span><i class="fa fa-desktop"></i></a>
</li>
<li id="navshutdown" data-icon="false">
<a href="system.html" data-rel="dialog" data-transition="slidedown">
<span class="navtxt">System </span><i class="fa fa-power-off"></i></a>
</li>
<li id="" data-icon="false">
<div><!-- slider for volume -->
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt=""/></a>

13
flatclient/js/controls.js vendored
View File

@ -264,7 +264,7 @@ function setRandom(nwrandom) {
function doRandom() {
if (random == false) {
//mopidy.tracklist.setRandom(true).then();
// mopidy.tracklist.setRandom(true).then();
mopidy.playback.setRandom(true).then();
} else {
//mopidy.tracklist.setRandom(false).then();
@ -526,3 +526,14 @@ function saveRadioStations() {
$.cookie('radioStations', radioStations);
}
function haltSystem() {
window.history.back();
$.post("/haltSystem");
toast('Stopping system...', 3000);
}
function rebootSystem() {
window.history.back();
$.post("/rebootSystem");
toast('Rebooting...', 3000);
}

20
flatclient/js/functionsvars.js
View File

@ -227,15 +227,17 @@ function resultsToTables(results, target, uri) {
html += '<li class="albumdivider">';
html += '<a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');"><img id="' +
targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" /><h1>' + results[i].album.name + '</h1><p>';
for (j = 0; j < results[i].album.artists.length; j++) {
html += results[i].album.artists[j].name;
html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
//stop after 3
if (j > 2) {
child += '...';
break;
}
}
if (results[i].album.artists) {
for (j = 0; j < results[i].album.artists.length; j++) {
html += results[i].album.artists[j].name;
html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
//stop after 3
if (j > 2) {
child += '...';
break;
}
}
}
html += '</p></a></li>';
for (j = 0; j < newalbum.length; j++) {
popupData[newalbum[j].uri] = newalbum[j];

BIN
flatclient/settings/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

29
flatclient/settings/index.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mopidy Settings</title>
<link rel="stylesheet" type="text/css" href="mopidy.css">
</head>
<body>
<div class="box focus">
<h1>Settings</h1>
<h2>Spotify</h2>
<p>Please provide your username, password to enable playing music from Spotify.</p>
<form action="/updateSettings" method="post">
<p>Username</p>
<input type="text" name="SPOTIFY_USERNAME" value="" size="15" maxlength="40"/>
<p>Password</p>
<input type="password" name="SPOTIFY_PASSWORD" value="" size="10" maxlength="40"/>
<h2>Last.FM</h2>
<p>Please provide the username, password to enable scrobbling via Last.FM.</p>
<p>Username</p>
<input type="text" name="LASTFM_USERNAME" value="" size="15" maxlength="40"/>
<p>Password</p>
<input type="password" name="LASTFM_PASSWORD" value="" size="10" maxlength="40"/>
<p><input type="submit" value="Update"/></p>
</form>
</div>
</body>
</html>

75
flatclient/settings/mopidy.css Normal file
View File

@ -0,0 +1,75 @@
html {
background: #e8ecef;
color: #555;
font-family: "Droid Serif", "Georgia", "Times New Roman", "Palatino",
"Hoefler Text", "Baskerville", serif;
font-size: 150%;
line-height: 1.4em;
}
body {
max-width: 20em;
margin: 0 auto;
}
div.box {
background: white;
border-radius: 5px;
box-shadow: 5px 5px 5px #d8dcdf;
margin: 2em 0;
padding: 1em;
}
div.box.focus {
background: #465158;
color: #e8ecef;
}
div.icon {
float: right;
}
h1, h2 {
font-family: "Ubuntu", "Arial", "Helvetica", "Lucida Grande",
"Verdana", "Gill Sans", sans-serif;
line-height: 1.1em;
}
h2 {
margin: 0.2em 0 0;
}
p.next {
text-align: right;
}
a {
color: #555;
text-decoration: none;
border-bottom: 1px dotted;
}
img {
border: 0;
}
code, pre {
font-family: "Droid Sans Mono", Menlo, Courier New, Courier, Mono, monospace;
font-size: 9pt;
line-height: 1.2em;
padding: 0.5em 1em;
margin: 1em 0;
white-space: pre;
overflow: auto;
}
.box code,
.box pre {
background: #e8ecef;
color: #555;
}
.box a {
color: #465158;
}
.box a:hover {
opacity: 0.8;
}
.box.focus a {
color: #e8ecef;
}
.center {
text-align: center;
}
#ws-console {
height: 200px;
overflow: auto;
}

25
flatclient/system.html Executable file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/controls.js"></script>
<script src="js/functionsvars.js"></script>
</head>
<body>
<div data-role="page" class="dialog-actionsheet">
<div data-role="content" data-theme="c">
<h2>System</h2>
<a href="#" onclick="haltSystem(); return false;" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Shutdown</a>
<a href="#" onclick="rebootSystem(); return false;" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Reboot</a>
<a href="index.html" data-role="button" data-rel="back" data-theme="a">Cancel</a>
</div>
</div>
</body>
</html>

0
webclient/css/jquery.mobile.iscrollview.css Normal file → Executable file
View File

260
webclient/js/controls.js vendored
View File

@ -1,18 +1,17 @@
/********************************************************
* play an uri from a tracklist
* play an uri from a tracklist
*********************************************************/
function playTrack(addtoqueue) {
//stop directly, for user feedback
if (!addtoqueue) {
mopidy.playback.stop(true);
mopidy.tracklist.clear();
mopidy.tracklist.clear();
}
$('#popupTracks').popup('close');
$('#controlspopup').popup('close');
toast('Loading...');
playlisturi = $('#popupTracks').data("list");
uri = $('#popupTracks').data("track");
var trackslist = new Array();
@ -20,44 +19,44 @@ function playTrack(addtoqueue) {
var tracks = getTracksFromUri(playlisturi);
//find track that was selected
for (var selected = 0; selected < tracks.length; selected++) {
for (var selected = 0; selected < tracks.length; selected++) {
if (tracks[selected].uri == uri) {
break;
}
break;
}
}
//find track that is playing
for (var playing = 0; playing < currentplaylist.length; playing++) {
if (currentplaylist[playing].uri == songdata.uri) {
break;
}
break;
}
}
//switch popup options
switch (addtoqueue) {
case ADD_THIS_BOTTOM:
case ADD_THIS_BOTTOM:
mopidy.tracklist.add(tracks.slice(selected, selected + 1));
return false;
case PLAY_NEXT:
mopidy.tracklist.add(tracks.slice(selected, selected + 1), playing + 1);
return false;
case ADD_ALL_BOTTOM:
return false;
case PLAY_NEXT:
mopidy.tracklist.add(tracks.slice(selected, selected + 1), playing + 1);
return false;
case ADD_ALL_BOTTOM:
mopidy.tracklist.add(tracks);
return false;
return false;
}
// first add track to be played, then the other tracks
// mopidy.tracklist.add(null, 0, playlisturi);
mopidy.tracklist.add(tracks); //.slice(selected, selected + 1) );
//wait 1.5 second before adding the rest to give server the time to start playing
/* setTimeout(function() {
mopidy.tracklist.add(tracks.slice(0, selected), 0);
if (selected < tracks.length) {
mopidy.tracklist.add(tracks.slice(selected + 1) );
}
}, 1500);
*/
mopidy.tracklist.add( tracks.slice(selected, selected + 1) );
//wait .5 second before adding the rest to give server the time to start playing
setTimeout(function() {
mopidy.tracklist.add(tracks.slice(0, selected), 0);
if (selected < tracks.length) {
mopidy.tracklist.add(tracks.slice(selected + 1) );
}
}, 500);
// mopidy.playback.changeTrack(tracks[selected]);
for (var i = 0; i <= selected; i++) {
@ -65,75 +64,22 @@ function playTrack(addtoqueue) {
}
mopidy.playback.play(); //tracks[selected]);
//console.log(selected);
return false;
}
/***
* Plays a Track given by an URI
* @param uri
* @returns {boolean}
*/
function playTrackByUri(uri, playlisturi){
//console.log('playuri');
//stop directly, for user feedback
mopidy.playback.stop(true);
mopidy.tracklist.clear();
//this is deprecated, remove when popuptracks is removed completly
$('#popupTracks').popup('close');
$('#controlspopup').popup('close');
//end of deprecated
toast('Loading...');
var trackslist = new Array();
var track, tracksbefore, tracksafter;
var tracks = getTracksFromUri(playlisturi);
//find track that was selected
for (var selected = 0; selected < tracks.length; selected++) {
if (tracks[selected].uri == uri) {
break;
}
}
//find track that is playing
for (var playing = 0; playing < currentplaylist.length; playing++) {
if (currentplaylist[playing].uri == songdata.uri) {
break;
}
}
mopidy.tracklist.add(tracks);
for (var i = 0; i <= selected; i++) {
mopidy.playback.next();
}
mopidy.playback.play(); //tracks[selected]);
// console.log(selected);
console.log(selected);
return false;
}
/********************************************************
* play an uri from the queue
*********************************************************/
/***
* Plays a Track from a Playlist.
* @param uri
* @param playlisturi
* @returns {boolean}
*/
function playTrackQueueByUri(uri, playlisturi){
//console.log('playqu');
function playTrackQueue() {
//stop directly, for user feedback
//console.log('qu');
mopidy.playback.stop(true);
$('#popupQueue').popup('close');
toast('Loading...');
playlisturi = $('#popupQueue').data("list");
uri = $('#popupQueue').data("track");
var track;
for (var i = 0; i < currentplaylist.length; i++) {
if (currentplaylist[i].uri == uri) {
@ -146,20 +92,10 @@ function playTrackQueueByUri(uri, playlisturi){
}
mopidy.playback.play(); //currentplaylist[track]);
//console.log(track, currentplaylist[track]);
console.log(track, currentplaylist[track]);
return false;
}
/***
* @deprecated
* @returns {boolean}
*/
function playTrackQueue() {
playlisturi = $('#popupQueue').data("list");
uri = $('#popupQueue').data("track");
return playTrackByUri(uri, playlisturi);
}
/********************************************************
* remove a track from the queue
*********************************************************/
@ -181,7 +117,7 @@ function removeTrack() {
console.log(currentplaylist[i].uri);
}
function clearQueue() {
function clearQueue () {
mopidy.tracklist.clear();
return false;
}
@ -200,10 +136,8 @@ function doShuffle() {
function setPlayState(nwplay) {
if (nwplay) {
$("#playimg").attr('src', 'images/icons/pause_32x32.png');
$("#btplayNowPlaying >i").removeClass('fa-play').addClass('fa-pause');
} else {
$("#playimg").attr('src', 'images/icons/play_alt_32x32.png');
$("#btplayNowPlaying >i").removeClass('fa-pause').addClass('fa-play');
}
play = nwplay;
}
@ -264,70 +198,22 @@ function setRandom(nwrandom) {
function doRandom() {
if (random == false) {
mopidy.tracklist.setRandom(true).then();
// mopidy.playback.setRandom(true).then();
mopidy.playback.setRandom(true);
} else {
mopidy.tracklist.setRandom(false).then();
// mopidy.playback.setRandom(false).then();
mopidy.playback.setRandom(false);
}
setRandom(!random);
}
function doRepeat() {
if (repeat == false) {
mopidy.tracklist.setRepeat(true).then();
// mopidy.playback.setRepeat(true).then();
mopidy.playback.setRepeat(true).then();
} else {
mopidy.tracklist.setRepeat(false).then();
// mopidy.playback.setRepeat(false).then();
mopidy.playback.setRepeat(false).then();
}
setRepeat(!repeat);
}
/*
function setRepeat(nwrepeat) {
if (repeat == nwrepeat) {
return
}
if (!nwrepeat) {
$("#repeatbt").attr('src', 'images/icons/reload_alt_18x21.png');
} else {
$("#repeatbt").attr('src', 'images/icons/reload_18x21.png');
}
repeat = nwrepeat;
}
function setRandom(nwrandom) {
if(nwrandom){
$("#flip-random").val('On');
}else{
$("#flip-random").val('Off');
}
console.log('function setRandom called: '+nwrandom);
}
function doRandom() {
console.log('obsolete function doRandom called');
}
*/
//$("#flip-random").change(function () {
// if ($(this).val() == "on") {
// mopidy.tracklist.setRandom(true).then();
// } else if ($(this).val() == "off") {
// mopidy.tracklist.setRandom(false).then();
// }
//});
//
//$("#flip-repeat").change(function () {
// if ($(this).val() == "on") {
// mopidy.tracklist.setRepeat(true).then();
// } else if ($(this).val() == "off") {
// mopidy.tracklist.setRepeat(false).then();
// }
//});
/*********************
* Track Slider
* Use a timer to prevent looping of commands
@ -340,7 +226,7 @@ function doSeekPos(value) {
pauseTimer();
//set timer to not trigger it too much
clearTimeout(seekTimer);
$("#songelapsed").html(timeFromSeconds(val / 1000));
$("#songelapsed").html(timeFromSeconds(val / 1000));
seekTimer = setTimeout(triggerPos, 500);
}
}
@ -352,7 +238,7 @@ function triggerPos() {
// console.log(newposition);
mopidy.playback.seek(newposition);
// mopidy.playback.resume();
resumeTimer();
resumeTimer();
posChanging = false;
}
}
@ -425,8 +311,8 @@ function updateTimer() {
function resumeTimer() {
pauseTimer();
if (songlength > 0) {
posTimer = setInterval(updateTimer, TRACK_TIMER);
if(songlength > 0) {
posTimer = setInterval(updateTimer, TRACK_TIMER);
}
}
@ -455,44 +341,43 @@ function addRadioUri(name, uri) {
//value of name is based on the passing of an uri as a parameter or not
var name = '';
if (!uri) {
name = $('#radionameinput').val();
name = $('#radionameinput').val();
} else {
$('#radionameinput').val('');
$('#radionameinput').val('');
}
uri = uri || $('#radiouriinput').val();
if (validUri(uri)) {
toast('Selecting radiostation...');
//stop directly, for user feedback
mopidy.playback.stop(true);
//stop directly, for user feedback
mopidy.playback.stop(true);
//hide ios/android keyboard
document.activeElement.blur();
$("input").blur();
clearQueue();
mopidy.tracklist.add(null, 0, uri);
clearQueue();
mopidy.tracklist.add(null,0, uri );
mopidy.playback.play();
var tmpname = name || '';
var i = 0;
//add station to list and check for doubles and add no more than 25
var tmpname = name || '';
var i = 0;
//add station to list and check for doubles and add no more than 25
for (var key in radioStations) {
rs = radioStations[key];
if (i > 25) {
delete radioStations[key];
continue;
}
i++;
if (rs && rs[1] == uri) {
tmpname = name || radioStations[key][0];
delete radioStations[key];
}
}
;
$('#radionameinput').val(tmpname);
$('#radiouriinput').val(uri);
radioStations.unshift([tmpname, uri]);
saveRadioStations();
updateRadioStations();
rs = radioStations[key];
if (i > 25) {
delete radioStations[key];
continue;
}
i++;
if (rs && rs[1] == uri) {
tmpname = name || radioStations[key][0];
delete radioStations[key];
}
};
$('#radionameinput').val(tmpname);
$('#radiouriinput').val(uri);
radioStations.unshift([tmpname, uri]);
saveRadioStations();
updateRadioStations();
} else {
toast('No valid url!');
toast ('No valid url!');
}
return false;
}
@ -502,15 +387,14 @@ function updateRadioStations() {
$('#radiostationstable').empty();
var child = '';
for (var key in radioStations) {
var rs = radioStations[key];
if (rs) {
name = rs[0] || rs[1];
child = '<li><a href="#" onclick="return addRadioUri(\'' + rs[0] + '\', \'' + rs[1] + '\');">';
child += '<h1>' + name + '</h1></a></li>';
tmp += child;
}
}
;
var rs = radioStations[key];
if(rs) {
name = rs[0] || rs[1];
child = '<li><a href="#" onclick="return addRadioUri(\'' + rs[0] + '\', \'' + rs[1] + '\');">';
child += '<h1>' + name + '</h1></a></li>';
tmp += child;
}
};
$('#radiostationstable').html(tmp);
}

8
webclient/js/functionsvars.js
View File

@ -148,11 +148,7 @@ function resultsToTables(results, target, uri) {
newalbum = [];
$(target).html('');
//quick fix, sorry
<<<<<<< HEAD
if (!results) {exit;}
=======
if (!results) { return;}
>>>>>>> master
//break into albums and put in tables
var html = '';
@ -200,11 +196,7 @@ function resultsToTables(results, target, uri) {
} else {
html += '<li class="albumdivider">';
<<<<<<< HEAD
html += '<a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');"><img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" /><h1>' + results[i].album.name + '</h1><p>';
=======
html += '<a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');"><img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="80" height="80" /><h1>' + results[i].album.name + '</h1><p>';
>>>>>>> master
if (results[i].album.artists) {
for ( j = 0; j < results[i].album.artists.length; j++) {
html += results[i].album.artists[j].name;

1104
webclient/js/iscroll.bk
View File

File diff suppressed because it is too large Load Diff

73
webclient/js/iscroll.js Normal file → Executable file
View File

@ -1,5 +1,5 @@
/*!
* iScroll v4.2 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
* iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
(function(window, doc){
@ -37,7 +37,7 @@ var m = Math,
has3d = prefixStyle('perspective') in dummyStyle,
hasTouch = 'ontouchstart' in window && !isTouchPad,
hasTransform = !!vendor,
hasTransform = vendor !== false,
hasTransitionEnd = prefixStyle('transition') in dummyStyle,
RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
@ -45,7 +45,6 @@ var m = Math,
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup',
CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel',
TRNEND_EV = (function () {
if ( vendor === false ) return false;
@ -53,7 +52,7 @@ var m = Math,
'' : 'transitionend',
'webkit' : 'webkitTransitionEnd',
'Moz' : 'transitionend',
'O' : 'oTransitionEnd',
'O' : 'otransitionend',
'ms' : 'MSTransitionEnd'
};
@ -177,9 +176,10 @@ var m = Math,
that._bind(RESIZE_EV, window);
that._bind(START_EV);
if (!hasTouch) {
that._bind('mouseout', that.wrapper);
if (that.options.wheelAction != 'none')
that._bind(WHEEL_EV);
if (that.options.wheelAction != 'none') {
that._bind('DOMMouseScroll');
that._bind('mousewheel');
}
}
if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () {
@ -210,8 +210,7 @@ iScroll.prototype = {
case END_EV:
case CANCEL_EV: that._end(e); break;
case RESIZE_EV: that._resize(); break;
case WHEEL_EV: that._wheel(e); break;
case 'mouseout': that._mouseout(e); break;
case 'DOMMouseScroll': case 'mousewheel': that._wheel(e); break;
case TRNEND_EV: that._transitionEnd(e); break;
}
},
@ -377,11 +376,11 @@ iScroll.prototype = {
if (that.options.useTransform) {
// Very lame general purpose alternative to CSSMatrix
matrix = getComputedStyle(that.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(',');
x = matrix[4] * 1;
y = matrix[5] * 1;
x = +(matrix[12] || matrix[4]);
y = +(matrix[13] || matrix[5]);
} else {
x = getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '') * 1;
y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '') * 1;
x = +getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '');
y = +getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '');
}
if (x != that.x || y != that.y) {
@ -389,6 +388,7 @@ iScroll.prototype = {
else cancelFrame(that.aniTime);
that.steps = [];
that._pos(x, y);
if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);
}
}
@ -404,9 +404,9 @@ iScroll.prototype = {
if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
that._bind(MOVE_EV);
that._bind(END_EV);
that._bind(CANCEL_EV);
that._bind(MOVE_EV, window);
that._bind(END_EV, window);
that._bind(CANCEL_EV, window);
},
_move: function (e) {
@ -506,9 +506,9 @@ iScroll.prototype = {
snap,
scale;
that._unbind(MOVE_EV);
that._unbind(END_EV);
that._unbind(CANCEL_EV);
that._unbind(MOVE_EV, window);
that._unbind(END_EV, window);
that._unbind(CANCEL_EV, window);
if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
@ -566,7 +566,7 @@ iScroll.prototype = {
}
}
that._resetPos(200);
that._resetPos(400);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return;
@ -700,19 +700,6 @@ iScroll.prototype = {
}
},
_mouseout: function (e) {
var t = e.relatedTarget;
if (!t) {
this._end(e);
return;
}
while (t = t.parentNode) if (t == this.wrapper) return;
this._end(e);
},
_transitionEnd: function (e) {
var that = this;
@ -899,13 +886,13 @@ iScroll.prototype = {
// Remove the event listeners
that._unbind(RESIZE_EV, window);
that._unbind(START_EV);
that._unbind(MOVE_EV);
that._unbind(END_EV);
that._unbind(CANCEL_EV);
that._unbind(MOVE_EV, window);
that._unbind(END_EV, window);
that._unbind(CANCEL_EV, window);
if (!that.options.hasTouch) {
that._unbind('mouseout', that.wrapper);
that._unbind(WHEEL_EV);
that._unbind('DOMMouseScroll');
that._unbind('mousewheel');
}
if (that.options.useTransition) that._unbind(TRNEND_EV);
@ -985,7 +972,7 @@ iScroll.prototype = {
if (!that.zoomed) {
that.scroller.style[transitionDuration] = '0';
that._resetPos(200);
that._resetPos(400);
}
},
@ -1056,9 +1043,9 @@ iScroll.prototype = {
this.enabled = false;
// If disabled after touchstart we make sure that there are no left over events
this._unbind(MOVE_EV);
this._unbind(END_EV);
this._unbind(CANCEL_EV);
this._unbind(MOVE_EV, window);
this._unbind(END_EV, window);
this._unbind(CANCEL_EV, window);
},
enable: function () {
@ -1114,4 +1101,4 @@ dummyStyle = null; // for the sake of it
if (typeof exports !== 'undefined') exports.iScroll = iScroll;
else window.iScroll = iScroll;
})(window, document);
})(window, document);

154
webclient/js/jquery.mobile.iscrollview.js Normal file → Executable file
View File

@ -31,7 +31,7 @@ regexp:false, todo:true */
/*
jquery.mobile.iscrollview.js
Version: 1.3.7
Version: 1.2.6
jQuery Mobile iScroll4 view widget
Copyright (c), 2012, 2013 Watusiware Corporation
Distributed under the MIT License
@ -64,29 +64,14 @@ Further changes: @addyosmani
Licensed under the MIT license
dependency: iScroll 4.1.9 https://github.com/cubiq/iscroll or later (4.2 provided in demo)
jQuery - see jQuery Mobile documentation, depends on JQM version
JQuery Mobile = 1.0.1 through 1.3.1
jQuery 1.6.4 (JQM 1.0.1) or 1.7.1 (JQM 1.1) or 1.7.2 (JQM 1.2)
JQuery Mobile = 1.0.1 or 1.1 or 1.2-alpha1
*/
; // Ignore jslint/jshint warning - for safety - terminate previous file if unterminated
// Prevent annoying "layerX/Y is deprecated" console messages when running in some Webkit browsers
// See also _doCallback() function.
//
// This needs to be a global function, (well, outside of the widget self-invoking function, anyway),
// because this code will generate warnings ("cannot delete") if executed within a strict function.
// The warnings are not generated, though, if executed within a non-strict function CALLED from a
// strict function.
//
// (Other than this little bit, the entirety of this widget is strict.)
function jqmIscrollviewRemoveLayerXYProps(e) {
delete e.layerX;
delete e.layerY;
}
(function ($, window, document, undefined) { /* Ignore jslint warning on "undefined" */
"use strict"; // Comment this out whilst debugging with Safari Web Inspector
// Otherwise, you will not be able to see variables when stopped at breakpoints
(function ($, window, document, undefined) { /* Ignore islint warning on "undefined" */
"use strict";
//----------------------------------
// "class constants"
@ -174,10 +159,6 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
// Perform an iScroll callback.
this._doCallback = function(callbackName, e, f) {
if (typeof e === "object") { // Prevent annoying "layerX/layerY is deprecated" console messages
jqmIscrollviewRemoveLayerXYProps(e);
}
var v = this.iscrollview,
then = v._logCallback(callbackName, e);
if (f) { f.call(this, e); } // Perform passed function if present
@ -331,17 +312,15 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
bottomOffset: 0,
emulateBottomOffset: true,
pageClass: "iscroll-page", // Class to be applied to pages containing this widget
wrapperClass: "iscroll-wrapper", // Class to be applied to wrapper containing this widget
scrollerClass: "iscroll-scroller", // Class to be applied to scroller within wrapper
pullDownClass: "iscroll-pulldown", // Class for pulldown element (if any)
pullUpClass: "iscroll-pullup", // Class for pullup element (if any)
pullLabelClass: "iscroll-pull-label", // Class for pull element label span
pullUpSpacerClass: "iscroll-pullup-spacer", // Class added to generated pullup spacer
topSpacerClass: "iscroll-top-spacer",
bottomSpacerClass: "iscroll-bottom-spacer",
scrollerContentClass: "iscroll-content", // Real content of scroller, not including pull-up, pull-down
fixedHeightClass: "iscroll-fixed", // Class applied to elements that match fixedHeightSelector
pageClass: "iscroll-page", // Class to be applied to pages containing this widget
wrapperClass: "iscroll-wrapper", // Class to be applied to wrapper containing this widget
scrollerClass: "iscroll-scroller", // Class to be applied to scroller within wrapper
pullDownClass: "iscroll-pulldown", // Class for pulldown element (if any)
pullUpClass: "iscroll-pullup", // Class for pullup element (if any)
pullLabelClass: "iscroll-pull-label", // Class for pull element label span
pullUpSpacerClass: "iscroll-pullup-spacer", // Class added to generated pullup spacer
scrollerContentClass: "iscroll-content", // Real content of scroller, not including pull-up, pull-down
fixedHeightClass: "iscroll-fixed", // Class applied to elements that match fixedHeightSelector
// The widget adds the fixedHeightClass to all elements that match fixedHeightSelector.
// Don't add the fixedHeightClass to elements manually. Use data-iscroll-fixed instead.
@ -400,19 +379,13 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
// inside any pull-down/pull-up to replace the padding removed from the wrapper.
addScrollerPadding: true,
// Add convenient spacer divs at top and bottom of content.
// These initially have no height. They are useful in situations
// where padding collapses into the document. For example, can be
// used to work with fullscreen header/footer
addSpacers: true,
// On some platforms (iOS, for example) we need to scroll to top after orientation change,
// because the address bar pushed the window down. jQuery Mobile handles this for page links,
// but doesn't for orientationchange.
// If you have multiple scrollers, only enable this for one of them
scrollTopOnResize: true,
scrollTopOnOrientationChange: true,
scrollTopOnOrientatationChange: true,
// iScroll scrolls the first child of the wrapper. I don't see a use case for having more
// than one child. What kind of mess is going to be shown in that case? So, by default, we
@ -530,9 +503,6 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
"scrollerContentClass",
"pullLabelClass",
"pullUpSpacerClass",
"topSpacerClass",
"bottomSpacerClass",
"addSpacer",
"fixedHeightSelector",
"resizeWrapper",
"resizeEvents",
@ -566,8 +536,7 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
"onpullup",
"onbeforerefresh",
"onafterrefresh",
"fastDestroy",
"preventPageScroll"
"fastDestroy"
],
//-----------------------------------------------------------------------
@ -850,7 +819,7 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
},
_unbindPage: function(types_in) {
var types = this._addEventsNamespace(types_in, this._pageEventNamespace());
var types = this._addEventsNamespace(types_in, this._instanceEventNamespace());
this._logWidgetEvent("unbind $page", types);
this.$page.unbind(types);
},
@ -1014,23 +983,13 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
if (this._instanceCount() === 1) {
this.$page.addClass(this.options.pageClass);
this.$page.find(this.options.fixedHeightSelector).each(function() { // Iterate over headers/footers/etc.
var
$fixedHeightElement = $(this),
// We need to exclude headers/footers in popups and panels.
// We cannot simply use a selector that requires the fixed-height element
// to be a child of .ui-page, because of the complication that JQM
// moves persistent headers/footers out of the page during transitions.
isPopup = $fixedHeightElement.closest(".ui-popup").length !== 0,
isPanel = $fixedHeightElement.closest(".ui-panel").length !== 0;
if (!isPopup && !isPanel) {
$fixedHeightElement.addClass(_this.options.fixedHeightClass);
}
});
$(this).addClass(_this.options.fixedHeightClass);
});
if (HasTouch && this.options.preventPageScroll) {
this._bindPage("touchmove", _pageTouchmoveFunc);
}
}
}
},
},
_undoAdaptPage: function() {
var _this = this;
@ -1049,17 +1008,17 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
var barsHeight = 0,
fixedHeightSelector = "." + this.options.fixedHeightClass,
// Persistent footers are sometimes inside the page, sometimes outside of all pages! (as
// direct descendant of <body>/.ui-mobile-viewport). And sometimes both. During transitions, the page that
// direct descendant of <body>). And sometimes both. During transitions, the page that
// is transitioning in will have had it's persistent footer moved outside of the page,
// while all other pages will have their persistent footer internal to the page.
//
// To deal with this, we find iscroll-fixed elements in the page, as well as outside
// of the page (as direct descendants of <body>/.ui-mobile-viewport). We avoid double-counting persistent
// of the page (as direct descendants of <body>). We avoid double-counting persistent
// footers that have the same data-id. (Experimentally, then, we also permit the user
// to place fixed-height elements outside of the page, but unsure if this is of any
// practical use.)
$barsInPage = this.$page.find(fixedHeightSelector),
$barsOutsidePage = $(".ui-mobile-viewport").children(fixedHeightSelector);
$barsOutsidePage = $("body").children(fixedHeightSelector);
$barsInPage.each(function() { // Iterate over headers/footers/etc.
barsHeight += $(this).outerHeight(true);
@ -1121,15 +1080,8 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
case "content-box": // AKA W3C Ignore jshint warning
default: // Ignore jslint warning
// We will subtract padding, border, margin
// However...
// wrapper will never have padding, at least once we are done
// modifying it. This function is called before any removal of
// padding, though. So, if $wrapper, use same calculation as for padding-box,
// ignoring padding.
// (We actually don't call this for anything but $wrapper, but preseve
// functionality in case we ever use it on another element)
adjust = $elem.outerHeight($elem !== this.$wrapper ) - $elem.height();
break;
adjust = $elem.outerHeight(true) - $elem.height();
break;
}
return adjust;
},
@ -1233,7 +1185,7 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
// will not be visible until the user pulls up.
//--------------------------------------------------------
_expandScrollerToFillWrapper: function() {
if (this.options.scrollShortContent || this.$pullDown.length || this.$pullUp.length) {
if (this.options.scrollShortContent || this.$pullDown.length || this.pullUp.length) {
if (this._firstScrollerExpand) {
this._origScrollerStyle = this.$scroller.attr("style") || null;
this._firstScrollerExpand = false;
@ -1450,9 +1402,7 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
hidden = _this._setPageVisible();
if (_callbackBefore) { _callbackBefore(); }
_this._triggerWidget("onbeforerefresh");
// The if below is reportedly needed when using BackboneJS views when switching
// from one view to another. See pull request #80
if (_this.iscroll) { _this.iscroll.refresh(); }
_this.iscroll.refresh();
_this._triggerWidget("onafterrefresh");
if (_callbackAfter) { _callbackAfter(); }
_this._restorePageVisibility(hidden);
@ -1503,22 +1453,6 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
}
},
//-----------------------------------------
// Create spacers
//-----------------------------------------
_addSpacers: function() {
if(this.options.addSpacers) {
this.$scrollerContent.before( $( '<div class="' + this.options.topSpacerClass + '"></div>' ) );
this.$scrollerContent.after( $( '<div class="' + this.options.bottomSpacerClass + '"></div>' ) );
}
},
_undoAddSpacers: function() {
this.$wrapper.find(this.options.topSpacerClass).remove();
this.$wrapper.find(this.options.bottomSpacerClass).remove();
},
// Temporarily change page CSS to make it "visible" so that dimensions can be read.
// This can be used in any event callback, and so can be used in _create(), since it's called
// from pageinit event. Because event processing is synchronous, the browser won't render the
@ -1552,9 +1486,6 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
this.$wrapper = this.element; // JQuery object containing the element we are creating this widget for
this.$page = this.$wrapper.parents(":jqmData(role='page')"); // The page containing the wrapper
// Merge options from data-iscroll, if present
$.extend(true, this.options, this.$wrapper.jqmData("iscroll"));
if (this.options.debug && this.options.traceCreateDestroy) {
this._log("_create() start", then);
}
@ -1562,7 +1493,7 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
this.createdAt = then;
this._instanceCount(this._instanceCount() + 1); // The count of extant instances of this widget on the page
this.instanceID = this._nextInstanceID(); // The serial ID of this instance of this widget on the page
this._nextInstanceID(this.instanceID + 1);
this._nextInstanceID(this._instanceID + 1);
if (this.instanceID === 1) {
this._pageID(nextPageID);
nextPageID += 1;
@ -1579,10 +1510,14 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
// Find pull elements, if present
this.$pullDown = $("." + this.options.pullDownClass, this.$scroller);
this._modifyPullDown();
this.$pullUp = $("." + this.options.pullUpClass, this.$scroller);
this._modifyPullUp();
this._modifyWrapper(); // Various changes to the wrapper
// Merge options from data-iscroll, if present
$.extend(true, this.options, this.$wrapper.jqmData("iscroll"));
this._modifyWrapper(); // Various changes to the wrapper
// Need this for deferred refresh processing
this._bindPage("pagebeforeshow", this._pageBeforeShowFunc);
@ -1590,9 +1525,7 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
this._setTopOffsetForPullDown(); // If there's a pull-down, set the top offset
this._setBottomOffsetForPullUp(); // If there's a pull-up, set the bottom offset
this._resizeWrapper(); // Resize the wrapper to fill available space
this._addScrollerPadding(); // Put back padding removed from wrapper
this.$scrollerContent = this.$scroller.find("." + this.options.scrollerContentClass);
this._addSpacers(); // Add top/bottom spacers
this._addScrollerPadding(); // Put back padding removed from wrapper
this._create_iscroll_object();
this._merge_from_iscroll_options(); // Merge iscroll options into widget options
this._restorePageVisibility(hidden);
@ -1600,15 +1533,14 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
// Setup bindings for window resize and orientationchange
if (this.options.resizeWrapper) {
if (this.options.resizeEvents.length) {
this._isvBind(this.$window, this.options.resizeEvents, this._windowResizeFunc, "$window");
}
this._isvBind(this.$window, this.options.resizeEvents, this._windowResizeFunc, "$window");
if (this.options.scrollTopOnOrientationChange) {
this._isvBind(this.$window, "orientationchange", this._orientationChangeFunc, "$window");
}
}
// Refresh on trigger of updatelayout of content
this.$scrollerContent = this.$scroller.find("." + this.options.scrollerContentClass);
this._isvBind(this.$scrollerContent, "updatelayout", this._updateLayoutFunc, "$scrollerContent");
if (this.options.debug && this.options.traceCreateDestroy) {
@ -1628,9 +1560,7 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
// Unbind events
this._isvUnbind(this.$scrollerContent, "updatelayout", "$scrollerContent");
if (this.options.resizeEvents.length) {
this._isvUnbind(this.$window, this.options.resizeEvents, "$window");
}
this._isvUnbind(this.$window, this.options.resizeEvents, "$window");
this._isvUnbind(this.$window, "orientationchange", "$window");
if (this._instanceCount() === 1) {
this._unbindPage("pagebeforeshow");
@ -1648,7 +1578,6 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
this._undoExpandScrollerToFillWrapper();
this._undoModifyPullDown();
this._undoModifyPullUp();
this._undoAddSpacers();
this._undoAddScrollerPadding();
this._undoModifyWrapper();
this.$wrapper.removeClass(this.options.wrapperClass);
@ -1792,13 +1721,8 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
// Reset a pull block to the initial state
_pullSetStateReset: function ($pull, text) {
if ($pull.is("." + this.options.pullLoadingClass + ", ." + this.options.pullPulledClass)) {
var
$iconSpan = $pull.find(".iscroll-pull-icon"),
$iconSpanClone = $iconSpan.clone();
$pull.removeClass(this.options.pullPulledClass + " " + this.options.pullLoadingClass);
this._replacePullText($pull, text);
//force animations to stop on iOS, which doesn't seem to want to give up. Stubborn bugger.
$iconSpan.replaceWith($iconSpanClone);
}
},
@ -1917,8 +1841,6 @@ function jqmIscrollviewRemoveLayerXYProps(e) {
}( jQuery, window, document ));
jQuery(document).trigger("iscroll_init");
// Self-init
jQuery(document).bind("pagecreate", function (e) {
"use strict";