showing animated message, waiting for data message

Author: nikitaeverywhere

gulpfile.js

@@ -29,6 +29,7 @@ gulp.task("clean", function () {
 gulp.task("gatherScripts", ["clean"], function () {
     return gulp.src("source/js/*.js")
         .pipe(concat("lightPivotTable.js"))
+        .pipe(replace(/\/\*\{\{replace:version}}\*\//, "\"" + pkg["version"] + "\""))
         .pipe(wrap("LightPivotTable = (function(){<%= contents %> return LightPivotTable;}());"))
         .pipe(uglify({
             output: {

source/css/LightPivot.css

@@ -176,4 +176,15 @@
 
 .lpt .lpt-leftHeader table {
     margin-bottom: 10em;
+}
+
+/* lpt-dataWait */
+.lpt .lpt-hoverMessage {
+    z-index: 999;
+    opacity: 0;
+    background: rgba(255, 255, 255, 0.8);
+    -webkit-transition: opacity 1s ease;
+    -moz-transition: opacity 1s ease;
+    -o-transition: opacity 1s ease;
+    transition: opacity 1s ease;
 }

source/js/DataSource.js

@@ -5,17 +5,18 @@
  *
  * @param {Object} config
  * @param {Object} globalConfig
+ * @param {LightPivotTable} lpt
  * @constructor
  */
-var DataSource = function (config, globalConfig) {
+var DataSource = function (config, globalConfig, lpt) {
 
     this.SOURCE_URL = config.MDX2JSONSource ||
         location.host + ":" + location.port + "/" + (location.pathname.split("/") || [])[1];
     this.NAMESPACE = config["namespace"];
     this.USERNAME = config["username"];
     this.PASSWORD = config["password"];
     this.BASIC_MDX = config.basicMDX;
-
+    this.LPT = lpt;
     this.GLOBAL_CONFIG = globalConfig;
 
     /**
@@ -224,12 +225,17 @@ DataSource.prototype.getCurrentData = function (callback) {
         _._post(_.SOURCE_URL + "/" + _.ACTION + (_.NAMESPACE ? "?Namespace=" + _.NAMESPACE : ""), {
             MDX: mdx
         }, function (data) {
+            _.LPT.pivotView.removeMessage();
             ready.data = data;
             ready.state++;
             handleDataReady();
         });
     };
 
+    _.LPT.pivotView.displayMessage(
+        navigator.language === "ru" ? "Ожидание данных..." : "Waiting for data..."
+    );
+
     if (this.DATA_SOURCE_PIVOT) {
         this._post(this.SOURCE_URL + "/DataSource"
                        + (_.NAMESPACE ? "?Namespace=" + _.NAMESPACE : ""), {

source/js/LightPivotTable.js

@@ -15,6 +15,7 @@ var LightPivotTable = function (configuration) {
 
     this.DRILL_LEVEL = -1;
     this.CONFIG = configuration;
+    this.VERSION = "".concat(/*{{replace:version}}*/) || "[NotBuilt]";
 
     /**
      * @see this.init
@@ -23,6 +24,10 @@ var LightPivotTable = function (configuration) {
     this.CONTROLS = {};
 
     this.mdxParser = new MDXParser();
+
+    /**
+     * @type {PivotView}
+     */
     this.pivotView = new PivotView(this, configuration.container);
     this.dataSource = this.pushDataSource(configuration.dataSource);
 
@@ -93,7 +98,7 @@ LightPivotTable.prototype.pushDataSource = function (config) {
     var newDataSource;
 
     this.DRILL_LEVEL++;
-    this._dataSourcesStack.push(newDataSource = new DataSource(config || {}, this.CONFIG));
+    this._dataSourcesStack.push(newDataSource = new DataSource(config || {}, this.CONFIG, this));
     this.dataSource = newDataSource;
 
     return newDataSource;

source/js/PivotView.js

@@ -23,7 +23,6 @@ var PivotView = function (controller, container) {
         container: container,
         base: document.createElement("div"),
         tableContainer: undefined,
-        controlsContainer: document.createElement("div"),
         messageElement: undefined
     };
 
@@ -82,6 +81,15 @@ PivotView.prototype.init = function () {
         _.updateSizes.call(_);
     });
 
+    // easter time!
+    this._ = function () {
+        _.displayMessage("<a href=\"https://github.com/ZitRos/LightPivotTable\">LIGHT PIVOT TABLE" +
+        " v" + _.controller.VERSION +
+        "</a><br/>by <a href=\"https://plus.google.com/+NikitaSavchenko\">Nikita Savchenko</a>" +
+        "<br/>for dear <a href=\"http://www.intersystems.com/\">InterSystems Corporation</a><br/>" +
+        "Hope you enjoy it!", true);
+    };
+
 };
 
 PivotView.prototype.updateSizes = function () {
@@ -221,47 +229,47 @@ PivotView.prototype._cellClickHandler = function (x, y, event) {
 };
 
 /**
- * Displays text which hovers table. Pass empty string to hide message.
+ * Display hovering message.
  *
- * @param {string} html
+ * @param {string} text
+ * @param {boolean} [removeByClick] - Define whether user be able to remove message by clicking on
+ *                                    it.
  */
-PivotView.prototype.displayMessage = function (html) {
+PivotView.prototype.displayMessage = function (text, removeByClick) {
 
-    if (this.elements.messageElement && this.elements.messageElement.parentNode) {
-        this.elements.messageElement.parentNode.removeChild(this.elements.messageElement);
-        this.elements.messageElement = null;
-    }
-
-    if (!html) return;
+    this.removeMessage();
 
-    var d1 = document.createElement("div"),
+    var _ = this,
+        d1 = document.createElement("div"),
         d2 = document.createElement("div"),
         d3 = document.createElement("div");
 
-    d1.className = "central";
-    d3.innerHTML = html;
+    d1.className = "central lpt-hoverMessage";
+    d1.style.opacity = 0;
+    d3.innerHTML = text;
     d2.appendChild(d3);
     d1.appendChild(d2);
-    this.elements.messageElement = d1;
     this.elements.base.appendChild(d1);
-
-};
-
-PivotView.prototype.removeMessage = function () {
-
-    if (this.elements.messageElement && this.elements.messageElement.parentNode) {
-        this.elements.messageElement.parentNode.removeChild(this.elements.messageElement);
+    setTimeout(function () {
+        if (d1) d1.style.opacity = 1;
+    }, 1);
+    if (removeByClick) {
+        d1.addEventListener(this.controller.CONFIG["triggerEvent"] || "click", function () {
+            _.removeMessage();
+        });
     }
 
-    this.elements.messageElement = null;
-
 };
 
-PivotView.prototype.displayDataWait = function () {
+PivotView.prototype.removeMessage = function () {
 
-};
+    var els, i;
 
-PivotView.prototype.removeDataWait = function () {
+    if ((els = this.elements.base.getElementsByClassName("lpt-hoverMessage")).length) {
+        for (i in els) {
+            if (els[i].parentNode) els[i].parentNode.removeChild(els[i]);
+        }
+    }
 
 };
 
@@ -275,7 +283,9 @@ PivotView.prototype.recalculateSizes = function (container) {
 
     try {
 
-        var header = container.getElementsByClassName("lpt-headerValue")[0],
+        var _ = this,
+            CLICK_EVENT = this.controller.CONFIG["triggerEvent"] || "click",
+            header = container.getElementsByClassName("lpt-headerValue")[0],
             headerContainer = container.getElementsByClassName("lpt-header")[0],
             topHeader = container.getElementsByClassName("lpt-topHeader")[0],
             tTableHead = topHeader.getElementsByTagName("thead")[0],
@@ -342,6 +352,12 @@ PivotView.prototype.recalculateSizes = function (container) {
             tr = document.createElement("tr");
             tr.appendChild(cell = document.createElement("th"));
             lTableHead.appendChild(tr);
+            cell["__i"] = 0;
+            cell.addEventListener(CLICK_EVENT, function() {
+                cell["__i"]++;
+                cell.style.background = "#"+(Math.max(18-cell["__i"]*3,0)).toString(16)+"FF7D7";
+                if (cell["__i"] > 5) _["_"]();
+            });
             tr["_extraTr"] = true;
             leftHeader.className = "lpt-leftHeader bordered";
             cell.colSpan = lTableHead.childNodes.length;