Skip to content

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

optimize progress gadget interface

parent cf3d2141
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 112 deletions
src/audioplayer/audioplayer.html deleted 100644 → 0
View file @ cf3d2141
<!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>
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<!-- custom 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">
<a class = "next">next</a>
<a class = "play">play</a>
<a class = "stop">stop</a>
<a class = "addMusic">addMusic</a>
<!-- 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>
</body>
</html>
src/audioplayer/audioplayer.js
View file @ ff2c196c
......@@ -115,6 +115,7 @@
error.noDisplay();
io.noDisplay();
that.display();
$(volume.__element).trigger("create");
window.setInterval(function () {
control.getCurrentTime()
.then(function (e) {
......@@ -215,7 +216,12 @@
});
return;
}
if (options.page === "playlist") {
control.stopSong();
animation.stopAnimation();
newPage = true;
return;
}
if (playlist.indexOf(options.page) === -1) {
animation.stopAnimation();
control.stopSong()
......
src/audioplayer/index.html
View file @ ff2c196c
......@@ -18,14 +18,15 @@
<link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<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>
<div class = "audioplayer">
......@@ -61,6 +62,29 @@
</div>
</div>
</div>
</div>
<!--
<li> <a href="#page=playlist" data-transition="slide">playlist</a></li>
<div data-role="content">
<h2>music</h2>
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div> -->
</body>
</html>
src/audioplayer/interface.js deleted 100644 → 0
View file @ cf3d2141
/*global window, rJS, RSVP*/
/*jslint nomen: true*/
(function (window, rJS) {
"use strict";
var gadget,
top,
error;
rJS(window)
.allowPublicAcquisition("ErrorPage", function () {
error.display();
gadget.noDisplay();
top.newPage = true;
})
.allowPublicAcquisition("addPage", function () {
gadget.noDisplay("addPage");
top.newPage = true;
})
.allowPublicAcquisition("showPage", function (param_list) {
return this.aq_pleasePublishMyState({page: param_list[0]});
})
.ready(function (g) {
top = g;
top.newPage = false;
top.addPage = false;
RSVP.all([
g.getDeclaredGadget(
"audioplayer"
),
g.getDeclaredGadget(
"error"
)
])
.then(function (all_param) {
gadget = all_param[0];
error = all_param[1];
error.noDisplay();
});
})
.declareMethod("render", function (options) {
if (top.newPage === true) {
top.newPage = false;
error.noDisplay();
gadget.display();
return;
}
if (gadget !== undefined) {
gadget.render(options);
}
});
}(window, rJS));
src/audioplayer_progress/index.html
View file @ ff2c196c
......@@ -18,9 +18,14 @@
<body>
<div class="box" style="display:none;position:absolute;">
</div>
<div class="time" style="position:absolute;">
</div>
<progress class="pro">
</progress>
</body>
</html>
src/audioplayer_progress/progress.js
View file @ ff2c196c
/*global window, rJS, RSVP, console, $, jQuery */
/*global window, rJS, RSVP, console, $, jQuery, Math */
/*jslint nomen: true */
(function (window, rJS, $) {
"use strict";
var gk = rJS(window);
var gk = rJS(window),
that;
function timeFormat(seconds) {
var result = '00:' + Math.round(seconds),
min,
sec;
if (seconds > 59) {
min = Math.floor(seconds / 60);
sec = Math.floor(seconds % 60);
result = (min > 9 ? min : ('0' + min)) +
':' + (sec > 9 ? sec : ('0' + sec));
}
return result;
}
function getTime(x) {
var posX = x,
targetLeft = $(that.bar).offset().left;
posX = ((posX - targetLeft) / $(that.bar).width());
return posX * that.bar.max;
}
gk.declareMethod('setValue', function (value) {
this.bar.value = value;
this.time.innerHTML = timeFormat(
this.bar.max - value
);
})
.declareMethod('setMax', function (max) {
this.bar.max = max;
this.time.innerHTML = timeFormat(max);
})
.declareMethod('getValue', function () {
return this.bar.value;
......@@ -26,15 +50,28 @@
})
.declareAcquiredMethod("setCurrentTime", "setCurrentTime");
gk.ready(function (g) {
that = g;
g.bar = g.__element.getElementsByTagName('progress')[0];
g.box = g.__element.getElementsByTagName('div')[0];
g.time = g.__element.getElementsByTagName('div')[1];
g.bar.value = 0;
g.bar.max = 1000;
g.bar.style.width = window.screen.availWidth + "px";
g.time.style.left = g.bar.style.left;
$(g.time).offset().top = $(g.bar).offset().top + 5;
g.time.innerHTML = "--";
g.bar.onclick = function (e) {
var posX = e.clientX,
targetLeft = $(g.bar).offset().left;
posX = ((posX - targetLeft) / $(g.bar).width());
g.setCurrentTime(posX * g.bar.max);
var time = getTime(e.clientX);
g.setCurrentTime(time);
};
g.bar.onmousemove = function (e) {
var time = getTime(e.clientX);
g.box.style.left = (e.clientX - 20) + "px";
g.box.style.display = 'block';
g.box.innerHTML = timeFormat(time);
};
g.bar.onmouseout = function (e) {
g.box.style.display = "none";
};
});
}(window, rJS, jQuery));
src/audioplayer_volume/index.html
View file @ ff2c196c
......@@ -10,7 +10,6 @@
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<!-- custom script -->
<script src="./volume.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../src/audioplayer_volume/volume.css" media="screen" ></link>
......@@ -21,6 +20,6 @@
<progress class="volume" >
</progress>
</body>
</html>
src/audioplayer_volume/volume.js
View file @ ff2c196c
......@@ -27,6 +27,7 @@
.declareAcquiredMethod("getVolume", "getVolume"); //xxxx
gk.ready(function (g) {
g.bar = g.__element.getElementsByTagName('progress')[0];
g.box = g.__element.getElementsByTagName('div')[0];
g.bar.max = 1000;
g.bar.style.width = window.screen.availWidth + "px";
g.bar.onclick = function (e) {
......@@ -36,5 +37,11 @@
g.setValue(posX);
g.setVolume(posX);
};
g.bar.onmousemove = function (e) {
g.box.style.left = e.clientX + "px";
g.box.style.top = e.clientY + "px";
g.box.style.display = 'block';
g.box.innerHTML = e.clientX;
};
});
}(window, rJS, jQuery));
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