add audioplayer progress gadget

ffb9eb4a · Xiaowu Zhang · 8c58241e · ffb9eb4a · ffb9eb4a · ffb9eb4a
Commit ffb9eb4a authored May 21, 2014 by Xiaowu Zhang
6 changed files
--- a/src/audioplayer/audioplayer.css
+++ b/src/audioplayer/audioplayer.css
--- a/src/audioplayer/audioplayer.js
+++ b/src/audioplayer/audioplayer.js
+/*global window, rJS, RSVP, console */
+/*jslint maxlen:80, nomen: true */
+(function (window, rJS) {
+  "use strict";
+
+  rJS(window).ready(function (g) {
+    // First, load the progress gadget
+    g.declareGadget('../audioplayer_progress/index.html')
+      .then(function (progress) {
+        progress.setValue(50);
+        progress.setMax(100);
+        return [50, 100];
+      })
+      .then(function (e) {
+        console.log(e[0] + e[1]);
+      })
+      .fail(function (e) {
+        console.log("error" + e);
+      });
+  });
+}(window, rJS));
--- a/src/audioplayer/index.html
+++ b/src/audioplayer/index.html
+<!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>
+
+  <!-- custom script -->
+  <script src="./audioplayer.js" type="text/javascript"></script>
+  
+  <link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>  
+</head>
+<body>
+  
+  
+  <progress>
+   <id="progress">
+  </progress>
+    
+
+
+  
+</body>
+</html>
--- a/src/audioplayer_progress/index.html
+++ b/src/audioplayer_progress/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Progress</title>
+ 
+
+
+  <!-- renderjs -->
+  <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+  <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+
+  <!-- custom script -->
+  <script src="./progress.js" type="text/javascript"></script>
+  
+  <link rel="stylesheet" href="../../src/audioplayer_progress/progress.css" media="screen" ></link>
+</head>
+<body>
+
+
+  <progress>
+   <id="progress">
+  </progress>
+    
+  
+</body>
+</html>
--- a/src/audioplayer_progress/progress.css
+++ b/src/audioplayer_progress/progress.css
+progress {
+    height: 25px;
+    padding: 5px;
+    width: 350px;
+    margin: 50px 0 20px 0;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
+    -webkit-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
+    box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
+}
+
--- a/src/audioplayer_progress/progress.js
+++ b/src/audioplayer_progress/progress.js
+/*global window, rJS, RSVP, console */
+/*jslint maxlen:80, nomen: true */
+
+
+(function (window, rJS) {
+  "use strict";
+  var gk = rJS(window);
+
+  gk.declareMethod('setValue', function (value) {
+    this.bar.value = value;
+  })
+    .declareMethod('setMax', function (max) {
+      this.bar.max = max;
+    })
+    .declareMethod('getValue', function () {
+      return this.bar.value;
+    })
+    .declareMethod('getMax', function () {
+      return this.bar.max;
+    });
+  gk.ready(function (g) {
+    g.bar = g.__element.getElementsByTagName('progress')[0];
+    g.bar.value = 10;
+    g.bar.max = 100;
+  });
+
+}(window, rJS));