Commit cf3d2141 authored by Xiaowu Zhang's avatar Xiaowu Zhang

optimize interface

parent e3bebadc
.progress_volume{
position: absolute;
top: 0%;
margin: 30px 0 20px 0;
}
.title {
position: absolute;
top: 10px;
margin: 50px 0 20px 0;
top: 1%;
margin: 30px 0 20px 0;
}
input.notice{
width:400px;
background: black;
color: white;
}
.progress_time{
position: absolute;
top: 400px;
margin: 50px 0 20px 0;
}
.progress_volume{
position: absolute;
top: 310px;
top: 65%;
margin: 50px 0 20px 0;
}
progress.pro{
width:400px;
}
progress.volume{
width:400px;
}
\ No newline at end of file
/*global window, rJS, RSVP, console, $, jQuery, URL, location */
/*jslint nomen: true*/
(function (window, rJS, $) {
(function (window, rJS, $, RSVP) {
"use strict";
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
var control,
animation,
time,
volume,
title,
io,
error,
totalId = -1,
that,
next_context,
......@@ -17,6 +22,7 @@
addMusic_context,
currentId = -1,
initializeFlag = false,
newPage,
playlist = [];
function nextId() {
if (totalId === -1) {
......@@ -28,9 +34,6 @@
}
rJS(window)
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareAcquiredMethod("showPage", "showPage")
.declareAcquiredMethod("addPage", "addPage")
.declareAcquiredMethod("ErrorPage", "ErrorPage")
.allowPublicAcquisition("setCurrentTime", function (value) {
control.setCurrentTime(value[0]);
})
......@@ -75,6 +78,7 @@
play_context = g.__element.getElementsByTagName('a')[1];
stop_context = g.__element.getElementsByTagName('a')[2];
addMusic_context = g.__element.getElementsByTagName('a')[3];
newPage = false;
that = g;
initializeFlag = false;
RSVP.all([
......@@ -95,6 +99,9 @@
),
g.getDeclaredGadget(
"io"
),
g.getDeclaredGadget(
"error"
)
])
.then(function (all_param) {
......@@ -104,6 +111,9 @@
volume = all_param[3];
title = all_param[4];
io = all_param[5];
error = all_param[6];
error.noDisplay();
io.noDisplay();
that.display();
window.setInterval(function () {
control.getCurrentTime()
......@@ -164,9 +174,18 @@
stop_context.style.display = "none";
addMusic_context.style.display = "none";
})
.declareMethod("showPage", function (param) {
return this.aq_pleasePublishMyState({page: param});
})
.declareMethod("render", function (options) {
var id = nextId(),
name = playlist[id];
if (newPage === true) {
newPage = false;
error.noDisplay();
that.display();
return;
}
if (initializeFlag === false) {
return;
}
......@@ -190,14 +209,21 @@
if (options.page === "addMusic") {
animation.stopAnimation();
control.stopSong()
.then(that.addPage());
.then(function () {
that.noDisplay("addPage");
newPage = true;
});
return;
}
if (playlist.indexOf(options.page) === -1) {
animation.stopAnimation();
control.stopSong()
.then(that.ErrorPage())
.then(function () {
error.display();
that.noDisplay();
newPage = true;
})
.fail(function (e) {
console.log("error drop gadget " + e);
});
......@@ -212,4 +238,4 @@
});
}
});
}(window, rJS, jQuery));
}(window, rJS, jQuery, RSVP));
......@@ -8,15 +8,59 @@
<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="../<%= curl.jquerymobilejs.relative_dest %>"></script>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<!-- custom script -->
<script src="./interface.js" type="text/javascript"></script>
<script src="./audioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>
</head>
<body>
<div class = "audioplayer" data-gadget-url="./audioplayer.html" data-gadget-scope="audioplayer">
</div>
<div class = "error" data-gadget-url="./error.html" data-gadget-scope="error">
<div data-role="page">
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li> <a class ="next" data-transition="slide" >next</a></li>
<li> <a class ="play" data-transition="slide" >play</a></li>
</ul>
</div>
</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 = "error" data-gadget-url="./error.html" data-gadget-scope="error">
</div>
<div data-role="footer" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li> <a class ="stop" data-transition="slide" >stop</a></li>
<li> <a class ="addMusic" data-transition="slide">addMusic</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
#visualizer {
text-align: relative;
text-align: center;
}
#visualizer #canvas {
margin-top: 2%;
position: relative;
margin-top: 4%;
}
canvas#mirror{
......@@ -17,14 +16,14 @@ canvas#mirror{
transform: scaleY(-0.3);
}
div#mirrorWrapper{
height: 100px;
height: 150px;
}
div#mirrorWrapper:after {
display: block;
height: 100px;
width: 400px;
width: 100%;
position: relative;
top: -257px;
content: " ";
......
......@@ -16,7 +16,7 @@
cheight = canvas.height - 2,
meterWidth = 10, //width of the meters in the spectrum
capHeight = 2,
meterNum = 50,
meterNum = 300,
array,
drawFrame,
step,
......
......@@ -17,11 +17,11 @@
<body>
<div id="visualizer">
<canvas width="400" height="350" id="canvas">
<canvas width="800" height="350" id="canvas">
!Canvas not supported by your browser
</canvas>
<div id="mirrorWrapper">
<canvas width="400" height="250" id="mirror"></canvas>
<canvas width="800" height="250" id="mirror"></canvas>
</div>
</div>
......
......@@ -63,6 +63,7 @@
.declareAcquiredMethod("sendPlaylist", "sendPlaylist");
gk.ready(function (g) {
input_context = g.__element.getElementsByTagName('input')[0];
input_context.style.display = "none";
g.playlist = [];
g.createIO({ "type" : "indexeddb",
"database": "test"},
......
progress {
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
......
......@@ -29,6 +29,7 @@
g.bar = g.__element.getElementsByTagName('progress')[0];
g.bar.value = 0;
g.bar.max = 1000;
g.bar.style.width = window.screen.availWidth + "px";
g.bar.onclick = function (e) {
var posX = e.clientX,
targetLeft = $(g.bar).offset().left;
......
......@@ -15,6 +15,6 @@
<body>
<input type="text" class="notice" size="50" >
<input type="text" class="notice" size="150">
</body>
</html>
......@@ -10,7 +10,7 @@
this.out = " ";
this.Position = 0;
this.pos = 0;
this.delay = 200;
this.delay = 50;
this.i = 0;
this.size = 0;
this.reset = function () {
......@@ -44,6 +44,7 @@
gk.ready(function (g) {
g.scroll = new BannerObject();
g.input = g.__element.getElementsByTagName('input')[0];
g.input.style.width = window.screen.availWidth + "px";
g.scroll.size = g.input.size;
function scroller() {
g.scroll.out += " ";
......
......@@ -18,7 +18,7 @@
<body>
<progress class="volume">
<progress class="volume" >
</progress>
......
progress {
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
......
......@@ -28,7 +28,7 @@
gk.ready(function (g) {
g.bar = g.__element.getElementsByTagName('progress')[0];
g.bar.max = 1000;
//g.bar.style.display = "none";
g.bar.style.width = window.screen.availWidth + "px";
g.bar.onclick = function (e) {
var posX = e.clientX,
targetLeft = $(g.bar).offset().left;
......
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