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

improve playlist show

parent 56dfb49c
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
$.mobile.pushStateEnabled = false; $.mobile.pushStateEnabled = false;
var gadget_list = { var gadget_list = {
"upload" : {"0" : "../audioplayer_upload/index.html", "upload" : {"0" : "../audioplayer_upload/index.html",
"1" : "../audioplayer_playlist/index.html", "1" : "../audioplayer_playlist_local/index.html",
"2" : "../audioplayer_playlist/index.html"}, "2" : "../audioplayer_playlist_online/index.html"},
"playlist" : {"0" : "../audioplayer_playlist/index.html", "playlist" : {"0" : "../audioplayer_playlist_offline/index.html",
"1" : "../audioplayer_playlist/index.html", "1" : "../audioplayer_playlist_local/index.html",
"2" : "../audioplayer_playlist/index.html"}, "2" : "../audioplayer_playlist_online/index.html"},
"control" : {"0" : "../audioplayer_control/index.html", "control" : {"0" : "../audioplayer_control/index.html",
"1" : "../audioplayer_control/index.html", "1" : "../audioplayer_control/index.html",
"2" : "../audioplayer_control/index.html"} "2" : "../audioplayer_control/index.html"}
...@@ -70,6 +70,9 @@ ...@@ -70,6 +70,9 @@
var key = Object.keys(param_list[0]); var key = Object.keys(param_list[0]);
this.save[key[0]] = param_list[0][key[0]]; this.save[key[0]] = param_list[0][key[0]];
}) })
.allowPublicAcquisition("plGiveStorageType", function () {
return storageType(this.storageType);
})
.allowPublicAcquisition("plGive", function (param_list) { .allowPublicAcquisition("plGive", function (param_list) {
if (this.save === undefined) { if (this.save === undefined) {
return this.save; return this.save;
......
.ui-page{ .ui-page{
// margin: 0; // margin: 0;
// width: 100%; width: 100%;
// height: 100%; height: 100%;
// font-family: 'arial'; // font-family: 'arial';
// background-color: #272822; // background-color: #272822;
// color: #ddd; // color: #ddd;
......
/*global window, rJS, RSVP, console, URL, Math, parseInt, document, jIO, /*global window, rJS, RSVP, console, URL, Math, parseInt, document, jIO,
Uint8Array, Audio, loopEventListener, jQuery, promiseEventListener*/ Uint8Array, Audio, loopEventListener, jQuery, promiseEventListener*/
/*jslint nomen: true*/ /*jslint nomen: true*/
...@@ -220,7 +219,7 @@ ...@@ -220,7 +219,7 @@
if (!(error instanceof RSVP.CancellationError)) { if (!(error instanceof RSVP.CancellationError)) {
window.location = g.__element window.location = g.__element
.getElementsByClassName("next")[0].href; .getElementsByClassName("next")[0].href;
if ((error.status === "404") if ((error.status === 404)
&& (error.method === "getAttachment")) { && (error.method === "getAttachment")) {
return g.jio_remove({"_id" : error.id}); 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 @@ ...@@ -23,16 +23,10 @@
</li> </li>
{{/each}} {{/each}}
</script> </script>
<!-- custom script --> <!-- custom script -->
<script src="./playlist.js" type="text/javascript"></script> <script src="./playlist.js" type="text/javascript"></script>
<body> <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..."/> <input type="search" class="research" placeholder="research..."/>
<div data-role="content"> <div data-role="content">
...@@ -44,7 +38,6 @@ ...@@ -44,7 +38,6 @@
<div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" > <div data-role="navbar" >
<ul> <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="localhost" data-icon="search">localhost</a></li>
<li><a data-role="button" class="online" data-icon="search">online</a></li> <li><a data-role="button" class="online" data-icon="search">online</a></li>
</ul> </ul>
......
...@@ -10,12 +10,9 @@ ...@@ -10,12 +10,9 @@
.getElementById('rows-template').innerHTML, .getElementById('rows-template').innerHTML,
rows_template = Handlebars.compile(rows_template_source); rows_template = Handlebars.compile(rows_template_source);
gk.declareAcquiredMethod("allDocs", "allDocs") gk.declareAcquiredMethod("allDocs", "allDocs")
.declareAcquiredMethod("plSave", "plSave")
.declareAcquiredMethod("plGive", "plGive")
.declareAcquiredMethod("jio_remove", "jio_remove") .declareAcquiredMethod("jio_remove", "jio_remove")
.declareAcquiredMethod("displayThisPage", "displayThisPage") .declareAcquiredMethod("displayThisPage", "displayThisPage")
.declareAcquiredMethod("displayThisTitle", "displayThisTitle") .declareAcquiredMethod("displayThisTitle", "displayThisTitle")
.declareAcquiredMethod("plCreateHttpStorage", "plCreateHttpStorage")
.declareAcquiredMethod("plEnablePage", "plEnablePage") .declareAcquiredMethod("plEnablePage", "plEnablePage")
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash") .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
...@@ -24,8 +21,6 @@ ...@@ -24,8 +21,6 @@
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
return RSVP.all([ return RSVP.all([
gadget.displayThisPage({page: "playlist",
id : "offline"}),
gadget.displayThisPage({page: "playlist", gadget.displayThisPage({page: "playlist",
id : "localhost"}), id : "localhost"}),
gadget.displayThisPage({page: "playlist", gadget.displayThisPage({page: "playlist",
...@@ -33,22 +28,13 @@ ...@@ -33,22 +28,13 @@
]); ]);
}) })
.push(function (param_list) { .push(function (param_list) {
gadget.__element.getElementsByClassName('offline')[0]
.href = param_list[0];
gadget.__element.getElementsByClassName('localhost')[0] gadget.__element.getElementsByClassName('localhost')[0]
.href = param_list[1]; .href = param_list[0];
gadget.__element.getElementsByClassName('online')[0] gadget.__element.getElementsByClassName('online')[0]
.href = param_list[2]; .href = param_list[1];
}) })
.push(function () { .push(function () {
return gadget.plGive("ip");
})
.push(function (value) {
var id = options.id; var id = options.id;
if (value !== undefined) {
gadget.__element.getElementsByClassName('inputIp')[0]
.value = value;
}
if (options.action === "delete") { if (options.action === "delete") {
delete options.id; delete options.id;
return gadget.jio_remove({"_id" : id}); return gadget.jio_remove({"_id" : id});
...@@ -62,9 +48,7 @@ ...@@ -62,9 +48,7 @@
i, i,
j, j,
exp; exp;
if (options.id !== undefined && options.id !== "offline" if (options.id !== undefined && options.id !== "offline") {
&& options.id !== "localhost"
&& options.id !== "online") {
tmp = []; tmp = [];
for (i = 0, j = 0; i < e.data.rows.length; i += 1) { for (i = 0, j = 0; i < e.data.rows.length; i += 1) {
exp = new RegExp(options.id, "i"); exp = new RegExp(options.id, "i");
...@@ -79,23 +63,18 @@ ...@@ -79,23 +63,18 @@
"rows" : tmp "rows" : tmp
}); });
$(list).listview("refresh"); $(list).listview("refresh");
return tmp.length; return gadget.displayThisTitle("offline playlist: " +
}) tmp.length + " music");
.push(function (value) {
return gadget.displayThisTitle("playlist: " +
value + " music");
}) })
.fail(function (error) { .fail(function (error) {
if (!(error instanceof RSVP.CancellationError)) { if (!(error instanceof RSVP.CancellationError)) {
document.getElementsByTagName('body')[0].textContent = console.log("error");
"network error";
} }
}); });
}) })
.declareMethod('startService', function () { .declareMethod('startService', function () {
var g = this, var g = this,
research = g.__element.getElementsByClassName('research')[0], research = g.__element.getElementsByClassName('research')[0];
ip = g.__element.getElementsByClassName('inputIp')[0];
if (g.id !== undefined) { if (g.id !== undefined) {
research.value = g.id; research.value = g.id;
} }
...@@ -104,27 +83,16 @@ ...@@ -104,27 +83,16 @@
return g.plEnablePage(); return g.plEnablePage();
}) })
.push(function () { .push(function () {
return RSVP.any([ return loopEventListener(research, "change", false, function () {
loopEventListener(research, "change", false, function () { return new RSVP.Queue()
return new RSVP.Queue() .push(function () {
.push(function () { return g.displayThisPage({page: "playlist",
return g.displayThisPage({page: "playlist", id: research.value});
id: research.value}); })
}) .push(function (url) {
.push(function (url) { window.location = 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
});//rsvp });//rsvp
});//startService });//startService
}(window, rJS, jQuery, Handlebars, loopEventListener)); }(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