add show message gadget

1d25262f · Xiaowu Zhang · dd7729ec · 1d25262f · 1d25262f
Commit 1d25262f authored May 22, 2014 by Xiaowu Zhang
Hide whitespace changes
Inline Side-by-side

Showing with 66 additions and 0 deletions

src/audioplayer_log_message/index.html src/audioplayer_log_message/index.html +20 -0

src/audioplayer_log_message/log.js src/audioplayer_log_message/log.js +46 -0

No files found.
--- a/src/audioplayer_log_message/index.html
+++ b/src/audioplayer_log_message/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>show message</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="./log.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id = "log"> </div>    
+  </body>
+</html>
--- a/src/audioplayer_log_message/log.js
+++ b/src/audioplayer_log_message/log.js
+/*global window, rJS, RSVP, console, document, JSON */
+/*jslint maxlen:80, nomen: true */
+(function (window, rJS) {
+  "use strict";
+  var gk = rJS(window),
+    logColor = 0,
+    arrayColor = ["white", "cyan"];
+  function logGetColor() {
+    logColor = (logColor + 1) % arrayColor.length;
+    return arrayColor[logColor];
+  }
+  gk.declareMethod('showMessage', function (msg) {
+    var node = document.createElement("pre");
+    node.setAttribute(
+      "style",
+      "background-color:" + logGetColor() +
+        ";margin:0;padding:0;"
+    );
+    if (typeof msg === "string") {
+      node.textContent += msg;
+    } else {
+      node.textContent += JSON.stringify(msg, null, " ");
+    }
+    this.log.appendChild(node);
+  })
+    .declareMethod('clear', function () {
+      this.log.innerHTML = "";
+    });
+  gk.ready(function (g) {
+    g.log = g.__element.getElementsByTagName('div')[0];
+    var node = document.createElement("pre");
+    node.setAttribute(
+      "style",
+      "background-color:" + logGetColor() +
+        ";margin:0;padding:0;"
+    );
+    node.textContent = "use for show message";
+    g.log.appendChild(node);
+  });
+}(window, rJS));