Skip to content

O
officejs
Commit 1cb4047f authored by Xiaowu Zhang's avatar Xiaowu Zhang
Browse files
Options

improve interface & respect renderjs use regles

parent a4f9ad46
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 867 additions and 476 deletions
src/audioplayer/audioplayer.css deleted 100644 → 0
View file @ a4f9ad46
.progress_volume{
position: absolute;
top: 200px;
margin: 30px 0 20px 0;
left :-100px;
}
input.notice{
background: black;
color: white;
position: absolute;
top: 30px;
}
.progress_time{
position: relative;
top: -180px;
margin: 50px 0 20px 0;
}
src/audioplayer/audioplayer.js
View file @ 1cb4047f
This diff is collapsed.
src/audioplayer/audioplayer.less 0 → 100644
View file @ 1cb4047f
.ui-page{
// margin: 0;
// width: 100%;
// height: 100%;
// font-family: 'arial';
// background-color: #272822;
// color: #ddd;
}
.page{
position: absolute;
top: 30%;
left: 50%;
}
.loader{
position: relative;
}
.loader .circle {
position: absolute;
width: 2.5em;
height: 2.5em;
opacity: 0;
transform: rotate(225deg);
animation-iteration-count: infinite;
animation-name: orbit;
animation-duration: 5.5s;
-webkit-transform: rotate(225deg);
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: orbit;
-webkit-animation-duration: 5.5s;
-moz-transform: rotate(225deg);
-moz-animation-iteration-count: infinite;
-moz-animation-name: orbit;
-moz-animation-duration: 5.5s;
}
.loader .circle:after {
content: '';
position: absolute;
width: 0.3em;
height: 0.3em;
border-radius: 0.3em;
background: #0E0D0D
}
.loader .circle:nth-child(2) {
animation-delay: 240ms;
-webkit-delay: 240ms;
-moz-delay: 240ms;
}
.loader .circle:nth-child(3) {
animation-delay: 480ms;
-webkit-animation-delay: 480ms;
-moz-animation-delay: 480ms;
}
.loader .circle:nth-child(4) {
animation-delay: 720ms;
-webkit-animation-delay: 720ms;
-moz-animation-delay: 720ms;
}
.loader .circle:nth-child(5) {
animation-delay: 960ms;
-webkit-animation-delay: 960ms;
-moz-animation-delay: 960ms;
}
@keyframes orbit {
0% {
transform: rotate(225deg);
opacity: 1;
animation-timing-function: ease-out;
}
7% {
transform: rotate(345deg);
animation-timing-function: linear;
}
30% {
transform: rotate(455deg);
animation-timing-function: ease-in-out;
}
39% {
transform: rotate(690deg);
animation-timing-function: linear;
}
70% {
transform: rotate(815deg);
opacity: 1;
animation-timing-function: ease-out;
}
75% {
transform: rotate(945deg);
animation-timing-function: ease-out;
}
76% {
transform: rotate(945deg);
opacity: 0;
}
100% {
transform: rotate(945deg);
opacity: 0;
}
}
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotate(225deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
7% {
-webkit-transform: rotate(345deg);
-webkit-animation-timing-function: linear;
}
30% {
-webkit-transform: rotate(455deg);
-webkit-animation-timing-function: ease-in-out;
}
39% {
-webkit-transform: rotate(690deg);
-webkit-animation-timing-function: linear;
}
70% {
-webkit-transform: rotate(815deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
75% {
-webkit-transform: rotate(945deg);
-webkit-animation-timing-function: ease-out;
}
76% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
100% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
}
@-moz-keyframes orbit {
0% {
-moz-transform: rotate(225deg);
opacity: 1;
-moz-animation-timing-function: ease-out;
}
7% {
-moz-transform: rotate(345deg);
-moz-animation-timing-function: linear;
}
30% {
-moz-transform: rotate(455deg);
-moz-animation-timing-function: ease-in-out;
}
39% {
-moz-transform: rotate(690deg);
-moz-animation-timing-function: linear;
}
70% {
-moz-transform: rotate(815deg);
opacity: 1;
-moz-animation-timing-function: ease-out;
}
75% {
-moz-transform: rotate(945deg);
-moz-animation-timing-function: ease-out;
}
76% {
-moz-transform: rotate(945deg);
opacity: 0;
}
100% {
-moz-transform: rotate(945deg);
opacity: 0;
}
}
src/audioplayer/index.html
View file @ 1cb4047f
<!DOCTYPE html>
<html lang="en">
<head>
<title>audioPlayer</title>
<!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
......@@ -14,59 +11,22 @@
<!-- custom script -->
<script src="./audioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>
</head>
<link rel="stylesheet" href="./audioplayer.css" media="screen" ></link> </head>
<body>
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li> <a class="next">next</a></li>
<li> <a class="play">stop</a></li>
</ul>
</div>
<div class="nav" data-role="header" data-theme="b">
<h1>music player</h1>
<a data-icon="plus" href="#page=upload" >add</a>
<a data-icon="grid" href="#page=playlist" >playlist</a>
</div>
<div class="audioplayer">
<!-- data-gadget-sandbox="iframe" -->
<div class="control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
</div>
<div class="animation" data-gadget-url="../audioplayer_animation/index.html" data-gadget-scope="animation">
</div>
<div class="progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time">
</div>
<div class="progress_volume" data-gadget-url="../audioplayer_volume/index.html" data-gadget-scope="volume">
</div>
<div class="title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" >
</div>
<div class="io" data-gadget-url="../audioplayer_io/index.html" data-gadget-scope="io" >
</div>
<div class="page">
</div>
<div class="error" data-gadget-url="./error.html" data-gadget-scope="error">
</div>
<div class="playlist" data-gadget-url="../audioplayer_playlist/index.html" data-gadget-scope="playlist">
</div>
<div data-role="footer" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li> <a class="addMusic">addMusic</a></li>
<li> <a href="#page=playlist">playlist</a></li>
</ul>
</div>
</div>
<div class="jio" data-gadget-url="../audioplayer_bridge/index.html" data-gadget-scope="jio" >
</div>
<article class="gadget_container"></article>
</body>
</html>
src/audioplayer_bridge/audiogadget.js 0 → 100644
View file @ 1cb4047f
/*global rJS, jIO, console */
(function (rJS, jIO) {
"use strict";
rJS(window)
.ready(function (gadget) {
// Initialize the gadget local parameters
gadget.state_parameter_dict = {};
})
.declareMethod('createJio', function (jio_options) {
this.state_parameter_dict.jio_storage = jIO.createJIO(jio_options);
})
.declareMethod('allDocs', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.allDocs.apply(storage, arguments);
})
.declareMethod('get', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.get.apply(storage, arguments);
})
.declareMethod('getAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.getAttachment.apply(storage, arguments)
// XXX Where to put this &@! blob reading
.then(function (response) {
return response.data;
//return jIO.util.readBlobAsText(response.data);
});
/*
.then(function (lala) {
console.log(lala.target.result);
return lala.target.result;
});*/
})
.declareMethod('putAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.putAttachment.apply(storage, arguments);
})
.declareMethod('post', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.post.apply(storage, arguments);
});
}(rJS, jIO));
src/audioplayer_bridge/index.html 0 → 100644
View file @ 1cb4047f
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Jio Gadget</title>
<!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
<script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
<!-- custom script -->
<script src="audiogadget.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
src/audioplayer_control/control.js
View file @ 1cb4047f
This diff is collapsed.
src/audioplayer_control/control.less 0 → 100644
View file @ 1cb4047f
#visualizer {
text-align: center;
}
canvas#can{
width: 50%;
height: 20%;
}
progress.bar {
position: inherit;
display: block;
height: 1em;
// padding: 0.5em;
width:100%;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
-moz-box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
-webkit-box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
}
\ No newline at end of file
src/audioplayer_control/index.html
View file @ 1cb4047f
......@@ -5,18 +5,70 @@
<!-- 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.uri.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
<script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></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>
<!-- custom script -->
<script src="./control.js" type="text/javascript"></script>
<link rel="stylesheet" href="./control.css" media="screen" ></link>
</head>
<body>
<progress class="bar" style="width: 100%;">
</progress>
<div class="box" style="display:none;position:absolute;">
</div>
<div class="time" style="position:relative;">
</div>
<div id="visualizer">
<canvas id="can" width="800" height="350">
!Canvas not supported by your browser
</canvas>
</div>
<audio controls>
<type="audio/mpeg">
</audio>
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
<h1>Equalizer</h1>
<div data-role="fieldcontain">
<select name="type" class="type">
<option value="0">lowpass</option>
<option value="1">highpass</option>
<option value="2">bandpass</option>
<option value="3">lowshelf</option>
<option value="4">highself</option>
<option value="5">peaking</option>
<option value="6">notch</option>
<option value="7">allpass</option>
</select>
</div>
<div data-role="fieldcontain">
<input type="range" class="filter" value="5000" max="10000" min="0">
</div>
</div>
<!-- data-position="fixed" -->
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a data-role="button" class="mute" data-icon="info" >mute</a></li>
<li><a data-role="button" class="command" data-icon="gear">stop</a></li>
<li><a data-role="button" class="next" data-icon="arrow-r">next</a></li>
<li><a data-role="button" class="share" data-icon="star" target="_blank">share</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
src/audioplayer_io/index.html
View file @ 1cb4047f
......@@ -13,7 +13,7 @@
<!-- custom script -->
<script src="./http.js" type="text/javascript"></script>
<script src="./io2.js" type="text/javascript"></script>
</head>
......
src/audioplayer_playlist/index.html
View file @ 1cb4047f
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<!-- 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 src="../<%= curl.jquerymobilejs.relative_dest %>"></script>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<script id="rows-template" 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>
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li><a href="#page" class="home">home</a></li>
</ul>
</div>
</div>
<input type="search" class="research" placeholder="research..."/>
<div data-role="content">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-split-icon="delete" data-split-theme="d">
<ul data-role="listview" data-split-theme="d">
</ul>
</div>
</body>
......
src/audioplayer_playlist/playlist.js
View file @ 1cb4047f
/*global window, rJS, RSVP, console, jQuery, $ */
/*global window, rJS, RSVP, console, jQuery, $, JSON, Handlebars,
promiseEventListener, RegExp */
/*jslint maxlen:80, nomen: true */
(function (window, rJS, $) {
(function (window, rJS, $, Handlebars, promiseEventListener) {
"use strict";
var gk = rJS(window);
gk.declareMethod('display', function (attachment) {
this.playlist.style.display = "";
this.home.style.display = "";
})
.declareMethod('noDisplay', function (attachment) {
this.playlist.style.display = "none";
this.home.style.display = "none";
var gk = rJS(window),
rows_template_source = gk.__template_element
.getElementById('rows-template').innerHTML,
rows_template = Handlebars.compile(rows_template_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 gadget.displayThisTitle("playlist");
})
.push(function () {
return gadget.allDocs({"include_docs": true});
})
.push(function (e) {
var tmp = [],
i,
j,
exp;
if (options.id !== undefined) {
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;
}
}
e.data.rows = tmp;
}
gadget.id = options.id;
list.innerHTML = rows_template({
"rows" : e.data.rows
});
$(list).listview("refresh");
});
})
.declareMethod('initList', function (playlist) {
var i,
docFragment = document.createDocumentFragment(),
li;
this.list.innerHTML = "";
for (i = 0; i < playlist.url.length; i += 1) {
li = document.createElement("li");
li.innerHTML =
"<a href=#page="
+ playlist.url[i]
+ ">"
+ playlist.name[i]
+ "</a> "
+ " <a href=#page="
+ playlist.name[i]
+ "&id=delete "
+ "data-rel=popup "
+ "data-position-to=window "
+ "</a>";
docFragment.appendChild(li);
.declareMethod('startService', function () {
var g = this,
research = g.__element.getElementsByClassName('research')[0];
if (g.id !== undefined) {
research.value = g.id;
}
this.list.appendChild(docFragment);
$(this.list).listview("refresh");
return new RSVP.Queue()
.push(function () {
return g.plEnablePage();
})
.push(function () {
return promiseEventListener(research, "change", false);
})
.push(function (e) {
return g.displayThisPage({page: "playlist",
id: research.value});
})
.push(function (url) {
window.location = url;
});
});
gk.ready(function (g) {
g.playlist = g.__element.getElementsByTagName('div')[2];
g.list = g.__element.getElementsByTagName('ul')[1];
g.home = g.__element.getElementsByTagName('div')[0];
$(g.__element).trigger("create");
});
}(window, rJS, jQuery));
}(window, rJS, jQuery, Handlebars, promiseEventListener));
src/audioplayer_upload/index.html 0 → 100644
View file @ 1cb4047f
<!DOCTYPE html>
<html lang="en">
<head>
<title>audioplayer io</title>
<!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<!-- jio core dependencies -->
<script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
<script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></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>
<!-- custom script -->
<script src="./upload.js" type="text/javascript"></script>
</head>
<body>
<input type="file" multiple />
<ul class="info">
</ul>
</body>
</html>
src/audioplayer_upload/upload.js 0 → 100644
View file @ 1cb4047f
/*global window, rJS, RSVP, jIO, JSON, promiseEventListener */
/*jslint nomen: true*/
(function (window, jIO, rJS) {
"use strict";
var gk = rJS(window);
gk.declareAcquiredMethod("jio_post", "jio_post")
.declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareAcquiredMethod("displayThisPage", "displayThisPage")
.declareAcquiredMethod("displayThisTitle", "displayThisTitle")
.declareAcquiredMethod("plEnablePage", "plEnablePage")
.declareAcquiredMethod("plDisablePage", "plDisablePage")
.declareMethod("render", function () {
this.__element.getElementsByClassName('info')[0]
.innerHTML = "";
return this.displayThisTitle("upload");
})
.declareMethod("startService", function () {
var g = this,
input_context =
g.__element.getElementsByTagName('input')[0],
info_context =
g.__element.getElementsByClassName('info')[0],
i,
queue,
uploaded = 0,
length;
function post(index) {
var now = new Date();
return g.jio_post({"title" : input_context.files[index].name,
"type" : "file",
"format" : input_context.files[index].type,
"size" : input_context.files[index].size,
"modified" : now.toUTCString(),
"date" : now.getFullYear() + "-" +
(now.getMonth() + 1) + "-" + now.getDate()
})
.push(function (res) {
return g.jio_putAttachment({
"_id" : res.id,
"_attachment" : "enclosure",
"_blob": input_context.files[index]
});
})
.push(function () {
uploaded += 1;
info_context.innerHTML += "<li>" + input_context.files[index].name
+ " uploaded " + uploaded + "/" + length + " </li>";
if (uploaded === length) {
return g.plEnablePage();
}
});
}
queue = new RSVP.Queue();
queue.push(function () {
return g.plEnablePage();
})
.push(function () {
return promiseEventListener(input_context, "change", false);
})
.push(function () {
return g.plDisablePage();
})
.push(function () {
length = input_context.files.length;
for (i = 0; i < length; i += 1) {
queue.push(post(i));
}
});
return queue;
});
}(window, jIO, rJS));
src/audioplayer_upload/upload.less 0 → 100644
View file @ 1cb4047f
.info{
top: 10%;
}
\ No newline at end of file
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7