add display noDisplay methods for optimization

dd5b7008 · Xiaowu Zhang · b354cac2 · dd5b7008 · dd5b7008 · dd5b7008
Commit dd5b7008 authored Jun 05, 2014 by Xiaowu Zhang
10 changed files
--- a/src/audioplayer/audioplayer.js
+++ b/src/audioplayer/audioplayer.js
@@ -104,6 +104,7 @@
          volume = all_param[3];
          title = all_param[4];
          io = all_param[5];
+          that.display();
          window.setInterval(function () {
            control.getCurrentTime()
              .then(function (e) {
@@ -139,6 +140,30 @@
    });

  rJS(window)
+    .declareMethod("display", function (options) {
+      io.noDisplay();
+      title.display();
+      time.display();
+      volume.display();
+      animation.display();
+      next_context.style.display = "";
+      play_context.style.display = "";
+      stop_context.style.display = "";
+      addMusic_context.style.display = "";
+    })
+    .declareMethod("noDisplay", function (options) {
+      if (options === "addPage") {
+        io.display();
+      }
+      title.noDisplay();
+      time.noDisplay();
+      volume.noDisplay();
+      animation.noDisplay();
+      next_context.style.display = "none";
+      play_context.style.display = "none";
+      stop_context.style.display = "none";
+      addMusic_context.style.display = "none";
+    })
    .declareMethod("render", function (options) {
      var id = nextId(),
        name = playlist[id];

--- a/src/audioplayer/error.html
+++ b/src/audioplayer/error.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>errorPage</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="./error.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div >
+    </div>
+  </body>
+</html>
--- a/src/audioplayer/error.js
+++ b/src/audioplayer/error.js
+/*global  rJS, window*/
+/*jslint nomen: true*/
+
+(function (window, rJS) {
+  "use strict";
+  var h2_context;
+  rJS(window)
+    .ready(function (g) {
+      h2_context = g.__element.getElementsByTagName('div')[0];
+    })
+    .declareMethod("display", function (options) {
+      h2_context.innerHTML = " <h2>ERROR:Music not found</h2>";
+    })
+    .declareMethod("noDisplay", function (options) {
+      h2_context.innerHTML = "";
+    });
+}(window, rJS));
--- a/src/audioplayer/index.html
+++ b/src/audioplayer/index.html
@@ -13,5 +13,10 @@
  <script src="./interface.js" type="text/javascript"></script>
  </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>
+    
  </body>
 </html>
--- a/src/audioplayer/interface.js
+++ b/src/audioplayer/interface.js
-/*global console, jQuery, rJS, RSVP, alert */
+/*global window, rJS, RSVP*/
 /*jslint nomen: true*/
-(function (window, rJS, $) {
+(function (window, rJS) {
  "use strict";
  var gadget,
    top,
-    innerHTML;
+    error;
  rJS(window)
    .allowPublicAcquisition("ErrorPage", function () {
-      top.__element.innerHTML = "ERROR:music does't exist";
-      top.dropGadget("audioplayer");
+      error.display();
+      gadget.noDisplay();
      top.newPage = true;
    })
    .allowPublicAcquisition("addPage", function () {
-      innerHTML = top.__element.innerHTML;
-      top.__element.innerHTML = " ";
-      top.declareGadget("../audioplayer_io/index.html",
-                        { element: top.__element,
-                          scope : "io"
-                        }
-                       );
+      gadget.noDisplay("addPage");
      top.newPage = true;
-      top.addPage = true;
    })
    .allowPublicAcquisition("showPage", function (param_list) {
      return this.aq_pleasePublishMyState({page: param_list[0]});
@@ -29,25 +22,29 @@
      top = g;
      top.newPage = false;
      top.addPage = false;
-      top.declareGadget("./audioplayer.html",
-                        {element: top.__element}
+      RSVP.all([
+        g.getDeclaredGadget(
+          "audioplayer"
+        ),
+        g.getDeclaredGadget(
+          "error"
        )
-        .then(function (result) {
-          gadget = result;
+      ])
+        .then(function (all_param) {
+          gadget = all_param[0];
+          error = all_param[1];
+          error.noDisplay();
        });
    })
    .declareMethod("render", function (options) {
      if (top.newPage === true) {
-        if (top.addPage === true) {
-          top.addPage = false;
-          top.dropGadget("io");
-        }
-        top.__element.innerHTML = innerHTML;
        top.newPage = false;
-      } else {
+        error.noDisplay();
+        gadget.display();
+        return;
+      }
      if (gadget !== undefined) {
        gadget.render(options);
      }
-      }
    });
-}(window, rJS, jQuery));
+}(window, rJS));
--- a/src/audioplayer_animation/animation.js
+++ b/src/audioplayer_animation/animation.js
@@ -59,6 +59,14 @@
      window.cancelAnimationFrame(
        this.animationPlayId
      ); //stop the previous animation
+    })
+    .declareMethod("display", function (options) {
+      this.canvas.style.display = "";
+      this.mirror.style.display = "";
+    })
+    .declareMethod("noDisplay", function (options) {
+      this.canvas.style.display = "none";
+      this.mirror.style.display = "none";
    });

  gk.ready(function (g) {

--- a/src/audioplayer_io/io.js
+++ b/src/audioplayer_io/io.js
@@ -3,7 +3,8 @@
 (function (window, jIO, rJS) {
  "use strict";

-  var gk = rJS(window);
+  var gk = rJS(window),
+    input_context;

  gk.declareMethod('createIO', function (description, key) {
   // indexedDB.deleteDatabase("jio:test");
@@ -31,6 +32,12 @@
        return "jio getIO error : " + response.target.result;
      });
    })
+    .declareMethod('display', function (attachment) {
+      input_context.style.display = "";
+    })
+    .declareMethod('noDisplay', function (attachment) {
+      input_context.style.display = "none";
+    })
    .declareMethod('setIO', function (attachment, file) {
      var gadget = this;
      return gadget.jio.putAttachment({
@@ -55,7 +62,7 @@
    })
    .declareAcquiredMethod("sendPlaylist", "sendPlaylist");
  gk.ready(function (g) {
-    var input_context = g.__element.getElementsByTagName('input')[0];
+    input_context = g.__element.getElementsByTagName('input')[0];
    g.playlist = [];
    g.createIO({ "type" : "indexeddb",
                 "database": "test"},
@@ -70,7 +77,6 @@
          g.sendPlaylist(g.playlist);
        });
      });
-
    input_context.onchange = function () {
      var tmp,
        index,

--- a/src/audioplayer_progress/progress.js
+++ b/src/audioplayer_progress/progress.js
@@ -18,6 +18,12 @@
    .declareMethod('getMax', function () {
      return this.bar.max;
    })
+    .declareMethod('display', function (attachment) {
+      this.bar.style.display = "";
+    })
+    .declareMethod('noDisplay', function (attachment) {
+      this.bar.style.display = "none";
+    })
    .declareAcquiredMethod("setCurrentTime", "setCurrentTime");
  gk.ready(function (g) {
    g.bar = g.__element.getElementsByTagName('progress')[0];

--- a/src/audioplayer_title/title.js
+++ b/src/audioplayer_title/title.js
@@ -34,6 +34,12 @@
    })
    .declareMethod('getSize', function (size) {
      return this.input.size;
+    })
+    .declareMethod('display', function (attachment) {
+      this.input.style.display = "";
+    })
+    .declareMethod('noDisplay', function (attachment) {
+      this.input.style.display = "none";
    });
  gk.ready(function (g) {
    g.scroll = new BannerObject();

--- a/src/audioplayer_volume/volume.js
+++ b/src/audioplayer_volume/volume.js
@@ -17,11 +17,18 @@
    .declareMethod('getMax', function () {
      return this.bar.max;
    })
+    .declareMethod('display', function (attachment) {
+      this.bar.style.display = "";
+    })
+    .declareMethod('noDisplay', function (attachment) {
+      this.bar.style.display = "none";
+    })
    .declareAcquiredMethod("setVolume", "setVolume")
    .declareAcquiredMethod("getVolume", "getVolume");   //xxxx
  gk.ready(function (g) {
    g.bar = g.__element.getElementsByTagName('progress')[0];
    g.bar.max = 1000;
+    //g.bar.style.display = "none";
    g.bar.onclick = function (e) {
      var posX = e.clientX,
        targetLeft = $(g.bar).offset().left;