Commit 9daa6c3e authored by Xiaowu Zhang's avatar Xiaowu Zhang

improve playlist show

parent 56dfb49c
......@@ -8,11 +8,11 @@
$.mobile.pushStateEnabled = false;
var gadget_list = {
"upload" : {"0" : "../audioplayer_upload/index.html",
"1" : "../audioplayer_playlist/index.html",
"2" : "../audioplayer_playlist/index.html"},
"playlist" : {"0" : "../audioplayer_playlist/index.html",
"1" : "../audioplayer_playlist/index.html",
"2" : "../audioplayer_playlist/index.html"},
"1" : "../audioplayer_playlist_local/index.html",
"2" : "../audioplayer_playlist_online/index.html"},
"playlist" : {"0" : "../audioplayer_playlist_offline/index.html",
"1" : "../audioplayer_playlist_local/index.html",
"2" : "../audioplayer_playlist_online/index.html"},
"control" : {"0" : "../audioplayer_control/index.html",
"1" : "../audioplayer_control/index.html",
"2" : "../audioplayer_control/index.html"}
......@@ -70,6 +70,9 @@
var key = Object.keys(param_list[0]);
this.save[key[0]] = param_list[0][key[0]];
})
.allowPublicAcquisition("plGiveStorageType", function () {
return storageType(this.storageType);
})
.allowPublicAcquisition("plGive", function (param_list) {
if (this.save === undefined) {
return this.save;
......
.ui-page{
// margin: 0;
// width: 100%;
// height: 100%;
width: 100%;
height: 100%;
// font-family: 'arial';
// background-color: #272822;
// color: #ddd;
......
/*global window, rJS, RSVP, console, URL, Math, parseInt, document, jIO,
Uint8Array, Audio, loopEventListener, jQuery, promiseEventListener*/
/*jslint nomen: true*/
......@@ -220,7 +219,7 @@
if (!(error instanceof RSVP.CancellationError)) {
window.location = g.__element
.getElementsByClassName("next")[0].href;
if ((error.status === "404")
if ((error.status === 404)
&& (error.method === "getAttachment")) {
return g.jio_remove({"_id" : error.id});
}
......
<!DOCTYPE html>
<html lang="en">
<head>
<!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.handlebars.relative_dest%>"></script>
<script src="http://git.erp5.org/gitweb/dream.git/blob_plain/refs/heads/renderjs2:/dream/platform/src2/dream/mixin_promise.js" type="text/javascript"></script>
<script id="network" type="text/x-handlebars-template">
{{#each rows}}
<li>
<a href=#page=control&id={{this.id}}>
{{this.doc.title}}
</a>
</li>
{{/each}}
</script>
<!-- custom script -->
<script src="./playlist.js" type="text/javascript"></script>
<body>
<input type="search" class="research" placeholder="research..."/>
<div data-role="content">
<ul data-role="listview" data-split-icon="delete" data-split-theme="d">
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" >
<ul>
<li><a data-role="button" class="offline" data-icon="search">offline</a></li>
<li><a data-role="button" class="online" data-icon="search">online</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
/*global window, rJS, RSVP, console, jQuery, $, JSON, Handlebars,
loopEventListener, RegExp */
/*jslint maxlen:80, nomen: true */
(function (window, rJS, $, Handlebars, loopEventListener) {
"use strict";
var gk = rJS(window),
network_source = gk.__template_element
.getElementById('network').innerHTML,
network = Handlebars.compile(network_source);
gk.declareAcquiredMethod("allDocs", "allDocs")
.declareAcquiredMethod("displayThisPage", "displayThisPage")
.declareAcquiredMethod("displayThisTitle", "displayThisTitle")
.declareAcquiredMethod("plEnablePage", "plEnablePage")
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareMethod('render', function (options) {
var gadget = this,
list = gadget.__element.getElementsByTagName('ul')[0];
return new RSVP.Queue()
.push(function () {
return RSVP.all([
gadget.displayThisPage({page: "playlist",
id : "offline"}),
gadget.displayThisPage({page: "playlist",
id : "online"})
]);
})
.push(function (param_list) {
gadget.__element.getElementsByClassName('offline')[0]
.href = param_list[0];
gadget.__element.getElementsByClassName('online')[0]
.href = param_list[1];
})
.push(function () {
return gadget.allDocs({"include_docs": true});
})
.push(function (e) {
var tmp = e.data.rows,
i,
j,
exp;
if (options.id !== undefined && options.id !== "localhost") {
tmp = [];
for (i = 0, j = 0; i < e.data.rows.length; i += 1) {
exp = new RegExp(options.id, "i");
if (e.data.rows[i].doc.title.search(exp) !== -1) {
tmp[j] = e.data.rows[i];
j += 1;
}
}
gadget.id = options.id;
}
list.innerHTML = network({
"rows" : tmp
});
$(list).listview("refresh");
return gadget.displayThisTitle("localhost playlist: " +
tmp.length + " music");
})
.fail(function (error) {
if (!(error instanceof RSVP.CancellationError)) {
console.log("error");
}
});
})
.declareMethod('startService', function () {
var g = this,
research = g.__element.getElementsByClassName('research')[0];
if (g.id !== undefined) {
research.value = g.id;
}
return new RSVP.Queue()
.push(function () {
return g.plEnablePage();
})
.push(function () {
return loopEventListener(research, "change", false, function () {
return new RSVP.Queue()
.push(function () {
return g.displayThisPage({page: "playlist",
id: research.value});
})
.push(function (url) {
window.location = url;
});
});
});
});
}(window, rJS, jQuery, Handlebars, loopEventListener));
......@@ -23,16 +23,10 @@
</li>
{{/each}}
</script>
<!-- custom script -->
<script src="./playlist.js" type="text/javascript"></script>
<body>
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
<h1>online mode ip</h1>
<input type="text" class="inputIp" placeholder="http://xxx.xxx.xxx.xx:port/"/>
</div>
<input type="search" class="research" placeholder="research..."/>
<div data-role="content">
......@@ -44,7 +38,6 @@
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" >
<ul>
<li><a data-role="button" class="offline" data-icon="search">offline</a></li>
<li><a data-role="button" class="localhost" data-icon="search">localhost</a></li>
<li><a data-role="button" class="online" data-icon="search">online</a></li>
</ul>
......
......@@ -10,12 +10,9 @@
.getElementById('rows-template').innerHTML,
rows_template = Handlebars.compile(rows_template_source);
gk.declareAcquiredMethod("allDocs", "allDocs")
.declareAcquiredMethod("plSave", "plSave")
.declareAcquiredMethod("plGive", "plGive")
.declareAcquiredMethod("jio_remove", "jio_remove")
.declareAcquiredMethod("displayThisPage", "displayThisPage")
.declareAcquiredMethod("displayThisTitle", "displayThisTitle")
.declareAcquiredMethod("plCreateHttpStorage", "plCreateHttpStorage")
.declareAcquiredMethod("plEnablePage", "plEnablePage")
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareMethod('render', function (options) {
......@@ -24,8 +21,6 @@
return new RSVP.Queue()
.push(function () {
return RSVP.all([
gadget.displayThisPage({page: "playlist",
id : "offline"}),
gadget.displayThisPage({page: "playlist",
id : "localhost"}),
gadget.displayThisPage({page: "playlist",
......@@ -33,22 +28,13 @@
]);
})
.push(function (param_list) {
gadget.__element.getElementsByClassName('offline')[0]
.href = param_list[0];
gadget.__element.getElementsByClassName('localhost')[0]
.href = param_list[1];
.href = param_list[0];
gadget.__element.getElementsByClassName('online')[0]
.href = param_list[2];
.href = param_list[1];
})
.push(function () {
return gadget.plGive("ip");
})
.push(function (value) {
var id = options.id;
if (value !== undefined) {
gadget.__element.getElementsByClassName('inputIp')[0]
.value = value;
}
if (options.action === "delete") {
delete options.id;
return gadget.jio_remove({"_id" : id});
......@@ -62,9 +48,7 @@
i,
j,
exp;
if (options.id !== undefined && options.id !== "offline"
&& options.id !== "localhost"
&& options.id !== "online") {
if (options.id !== undefined && options.id !== "offline") {
tmp = [];
for (i = 0, j = 0; i < e.data.rows.length; i += 1) {
exp = new RegExp(options.id, "i");
......@@ -79,23 +63,18 @@
"rows" : tmp
});
$(list).listview("refresh");
return tmp.length;
})
.push(function (value) {
return gadget.displayThisTitle("playlist: " +
value + " music");
return gadget.displayThisTitle("offline playlist: " +
tmp.length + " music");
})
.fail(function (error) {
if (!(error instanceof RSVP.CancellationError)) {
document.getElementsByTagName('body')[0].textContent =
"network error";
console.log("error");
}
});
})
.declareMethod('startService', function () {
var g = this,
research = g.__element.getElementsByClassName('research')[0],
ip = g.__element.getElementsByClassName('inputIp')[0];
research = g.__element.getElementsByClassName('research')[0];
if (g.id !== undefined) {
research.value = g.id;
}
......@@ -104,27 +83,16 @@
return g.plEnablePage();
})
.push(function () {
return RSVP.any([
loopEventListener(research, "change", false, function () {
return new RSVP.Queue()
.push(function () {
return g.displayThisPage({page: "playlist",
id: research.value});
})
.push(function (url) {
window.location = url;
});
}),
loopEventListener(ip, "change", false, function () {
return new RSVP.Queue()
.push(function () {
return g.plCreateHttpStorage(ip.value);
})
.push(function () {
return g.plSave({"ip": ip.value});
});
})
]);//any
return loopEventListener(research, "change", false, function () {
return new RSVP.Queue()
.push(function () {
return g.displayThisPage({page: "playlist",
id: research.value});
})
.push(function (url) {
window.location = url;
});
});
});//rsvp
});//startService
}(window, rJS, jQuery, Handlebars, loopEventListener));
<!DOCTYPE html>
<html lang="en">
<head>
<!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.handlebars.relative_dest%>"></script>
<script src="http://git.erp5.org/gitweb/dream.git/blob_plain/refs/heads/renderjs2:/dream/platform/src2/dream/mixin_promise.js" type="text/javascript"></script>
<script id="network" type="text/x-handlebars-template">
{{#each rows}}
<li>
<a href=#page=control&id={{this.id}}>
{{this.doc.title}}
</a>
</li>
{{/each}}
</script>
<!-- custom script -->
<script src="./playlist.js" type="text/javascript"></script>
<body>
<input type="text" class="inputIp" placeholder="input ip: http://xxx.xxx.xxx.xxx:port/ xxx is between 0 ~ 255"/>
<input type="search" class="research" placeholder="research..."/>
<div data-role="content">
<ul data-role="listview" data-split-icon="delete" data-split-theme="d">
</ul>
</div>
<div class="info">
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" >
<ul>
<li><a data-role="button" class="offline" data-icon="search">offline</a></li>
<li><a data-role="button" class="localhost" data-icon="search">localhost</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
/*global window, rJS, RSVP, console, jQuery, $, JSON, Handlebars,
loopEventListener, RegExp, alert */
/*jslint maxlen:180, nomen: true */
(function (window, rJS, $, Handlebars, loopEventListener) {
"use strict";
var gk = rJS(window),
network_source = gk.__template_element
.getElementById('network').innerHTML,
network = Handlebars.compile(network_source);
function checkIp(ip) {
var re = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if (!re.test(ip)) {
return false;
}
return true;
}
gk.declareAcquiredMethod("allDocs", "allDocs")
.declareAcquiredMethod("plSave", "plSave")
.declareAcquiredMethod("plGive", "plGive")
.declareAcquiredMethod("displayThisPage", "displayThisPage")
.declareAcquiredMethod("displayThisTitle", "displayThisTitle")
.declareAcquiredMethod("plCreateHttpStorage", "plCreateHttpStorage")
.declareAcquiredMethod("plEnablePage", "plEnablePage")
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareMethod('render', function (options) {
var gadget = this,
ipValue,
list = gadget.__element.getElementsByTagName('ul')[0];
return new RSVP.Queue()
.push(function () {
return RSVP.all([
gadget.displayThisPage({page: "playlist",
id : "offline"}),
gadget.displayThisPage({page: "playlist",
id : "localhost"})
]);
})
.push(function (param_list) {
gadget.__element.getElementsByClassName('offline')[0]
.href = param_list[0];
gadget.__element.getElementsByClassName('localhost')[0]
.href = param_list[1];
})
.push(function () {
return gadget.plGive("ip");
})
.push(function (value) {
if (value !== undefined) {
ipValue = value;
gadget.__element.getElementsByClassName('inputIp')[0]
.value = value;
}
return gadget.allDocs({"include_docs": true});
})
.push(function (e) {
var tmp = e.data.rows,
i,
j,
exp;
if (options.id !== undefined && options.id !== "online") {
tmp = [];
for (i = 0, j = 0; i < e.data.rows.length; i += 1) {
exp = new RegExp(options.id, "i");
if (e.data.rows[i].doc.title.search(exp) !== -1) {
tmp[j] = e.data.rows[i];
j += 1;
}
}
gadget.id = options.id;
}
list.innerHTML = network({
"rows" : tmp
});
$(list).listview("refresh");
return gadget.displayThisTitle("online playlist: " +
tmp.length + " music");
})
.fail(function (error) {
if (!(error instanceof RSVP.CancellationError)) {
if (ipValue) {
gadget.__element.getElementsByClassName('info')[0].innerHTML =
"network error";
}
return gadget.displayThisTitle("online playlist: " +
"0 music");
}
});
})
.declareMethod('startService', function () {
var g = this,
research = g.__element.getElementsByClassName('research')[0],
ip = g.__element.getElementsByClassName('inputIp')[0];
if (g.id !== undefined) {
research.value = g.id;
}
return new RSVP.Queue()
.push(function () {
return g.plEnablePage();
})
.push(function () {
return RSVP.any([
loopEventListener(research, "change", false, function () {
return new RSVP.Queue()
.push(function () {
return g.displayThisPage({page: "playlist",
id: research.value});
})
.push(function (url) {
window.location = url;
});
}),
loopEventListener(ip, "change", false, function () {
var info = g.__element.getElementsByClassName('info')[0],
http,
port,
ipValue = ip.value;
http = ipValue.indexOf("http");
ipValue = ipValue.substring(ipValue.indexOf("//") + 2);
port = ipValue.indexOf(":");
if (port !== -1) {
ipValue = ipValue.substring(0, port);
}
if (http === -1) {
info.innerHTML = " please start ip with http";
return;
}
if (checkIp(ipValue) === false) {
info.innerHTML =
"invalide ip: ip should like xxx.xxx.xxx.xxx(xxx is between 0 ~ 255)";
return;
}
if (port === -1) {
info.innerHTML = "input port number";
return;
}
return new RSVP.Queue()
.push(function () {
return g.plCreateHttpStorage(ip.value);
})
.push(function () {
return g.plSave({"ip": ip.value});
})
.push(function () {
return g.displayThisPage({page: "playlist",
action: ip.value});
})
.push(function (url) {
window.location = url;
});
})
]);//any
});//rsvp
});//startService
}(window, rJS, jQuery, Handlebars, loopEventListener));
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment