chardinjs.js

// Generated by CoffeeScript 1.10.0
(function() {
  var slice = [].slice;

  (function($, window) {
    var chardinJs;
    chardinJs = (function() {
      function chardinJs() {
        var args, el;
        el = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
        this.$el = $(el);
        $(window).resize((function(_this) {
          return function() {
            return _this.refresh();
          };
        })(this));
      }

      chardinJs.prototype.start = function() {
        var args, el, i, len, ref;
        args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
        if (this._overlay_visible()) {
          return false;
        }
        this.$el.data("chardinjs-brightness", args[0]);
        this._add_overlay_layer();
        ref = this.$el.find('*[data-intro]:visible');
        for (i = 0, len = ref.length; i < len; i++) {
          el = ref[i];
          this._show_element(el);
        }
        return this.$el.trigger('chardinJs:start');
      };

      chardinJs.prototype.toggle = function() {
        if (!this._overlay_visible()) {
          return this.start.apply(this, arguments);
        } else {
          return this.stop(this, arguments);
        }
      };

      chardinJs.prototype.refresh = function() {
        var el, i, len, ref, results;
        if (this._overlay_visible()) {
          ref = this.$el.find('*[data-intro]:visible');
          results = [];
          for (i = 0, len = ref.length; i < len; i++) {
            el = ref[i];
            results.push(this._position_helper_layer(el));
          }
          return results;
        } else {
          return this;
        }
      };

      chardinJs.prototype.stop = function() {
        this.$el.find(".chardinjs-overlay").fadeOut(function() {
          return $(this).remove();
        });
        this.$el.find('.chardinjs-helper-layer').remove();
        this.$el.find('.chardinjs-relative-position').removeClass('chardinjs-relative-position');
        if (window.removeEventListener) {
          window.removeEventListener("keydown", this._onKeyDown, true);
        } else {
          if (document.detachEvent) {
            document.detachEvent("onkeydown", this._onKeyDown);
          }
        }
        return this.$el.trigger('chardinJs:stop');
      };

      chardinJs.prototype._overlay_visible = function() {
        return this.$el.find('.chardinjs-overlay').length !== 0;
      };

      chardinJs.prototype._add_overlay_layer = function() {
        var element_position, getOpacityStyle, overlay_layer, styleText;
        if (this._overlay_visible()) {
          return false;
        }
        overlay_layer = document.createElement("div");
        styleText = "";
        overlay_layer.className = "chardinjs-overlay";
        if (this.$el.prop('tagName') === "BODY") {
          styleText += "top: 0;bottom: 0; left: 0;right: 0;position: fixed;";
          overlay_layer.setAttribute("style", styleText);
        } else {
          element_position = this._get_offset(this.$el.get()[0]);
          if (element_position) {
            styleText += "width: " + element_position.width + "px; height:" + element_position.height + "px; top:" + element_position.top + "px;left: " + element_position.left + "px;";
            overlay_layer.setAttribute("style", styleText);
          }
        }
        this.$el.get()[0].appendChild(overlay_layer);
        overlay_layer.innerHTML = '<svg style="width:100%;height:100%;"> <defs> <mask id="chardinjs-mask" x="0" y="0" width="' + overlay_layer.offsetWidth + '" height="' + overlay_layer.offsetHeight + '" > <rect x="0" y="0" width="' + overlay_layer.offsetWidth + '" height="' + overlay_layer.offsetHeight + '" fill="white"/> </mask> </defs> <rect x="0" y="0" width="' + overlay_layer.offsetWidth + '" height="' + overlay_layer.offsetHeight + '" style="stroke: none; fill: black; mask: url(#chardinjs-mask)"/> </svg>';
        overlay_layer.onclick = (function(_this) {
          return function() {
            return _this.stop();
          };
        })(this);
        getOpacityStyle = (function(_this) {
          return function() {
            var ref, value;
            value = (ref = _this.$el.data("chardinjs-brightness")) != null ? ref : 0.8;
            return "opacity:" + value + ";background:none;";
          };
        })(this);
        return setTimeout(function() {
          styleText += getOpacityStyle();
          return overlay_layer.setAttribute("style", styleText);
        }, 10);
      };

      chardinJs.prototype._get_position = function(element) {
        return element.getAttribute('data-position') || 'bottom';
      };

      chardinJs.prototype._getStyle = function(el, styleProp, special) {
        if (window.getComputedStyle) {
          return window.getComputedStyle(el, special).getPropertyValue(styleProp);
        } else {
          return el.currentStyle[styleProp];
        }
      };

      chardinJs.prototype._place_tooltip = function(element, tooltip_layer) {
        var my_height, my_width, offset, position, target_element_position, target_height, target_width, tooltipActualWidth, tooltipMaxWidth, tooltip_layer_position;
        tooltip_layer_position = this._get_offset(tooltip_layer);
        tooltip_layer.style.top = null;
        tooltip_layer.style.right = null;
        tooltip_layer.style.bottom = null;
        tooltip_layer.style.left = null;
        position = this._get_position(element);
        switch (position) {
          case "top":
          case "bottom":
            target_element_position = this._get_offset(element);
            target_width = target_element_position.width;
            my_width = $(tooltip_layer).width();
            tooltip_layer.style.left = ((target_width / 2) - (tooltip_layer_position.width / 2)) + "px";
            return tooltip_layer.style[position] = "-" + tooltip_layer_position.height + "px";
          case "left":
          case "right":
            tooltipMaxWidth = parseFloat(this._getStyle(tooltip_layer, "max-width"));
            tooltip_layer.style[position] = "-" + tooltipMaxWidth + "px";
            target_element_position = this._get_offset(element);
            target_height = target_element_position.height;
            my_height = parseFloat(this._getStyle(tooltip_layer, "height"));
            tooltip_layer.style.top = ((target_height / 2) - (my_height / 2)) + "px";
            tooltipActualWidth = parseFloat(this._getStyle(tooltip_layer, "width"));
            offset = 175 - (tooltipMaxWidth - tooltipActualWidth);
            return tooltip_layer.style[position] = "-" + offset + "px";
        }
      };

      chardinJs.prototype._position_helper_layer = function(element) {
        var element_position, height, helper_layer, width, x, y;
        helper_layer = $(element).data('helper_layer');
        element_position = this._get_offset(element);
        x = element_position.left;
        y = element_position.top;
        width = element_position.width;
        height = element_position.height;
        document.getElementById("chardinjs-mask").innerHTML += "<rect x=\"" + x + "\" y=\"" + y + "\" width=\"" + width + "\" height=\"" + height + "\" fill=\"black\"></rect>";
        return helper_layer.setAttribute("style", "width: " + element_position.width + "px; height:" + element_position.height + "px; top:" + element_position.top + "px; left: " + element_position.left + "px;");
      };

      chardinJs.prototype._show_element = function(element) {
        var current_element_position, documentationLink, documentationText, helper_layer, introHTML, isTargetBlank, tooltip_layer, tooltip_link;
        helper_layer = document.createElement("div");
        tooltip_layer = document.createElement("div");
        tooltip_link = document.createElement("a");
        $(element).data('helper_layer', helper_layer).data('tooltip_layer', tooltip_layer).data('tooltip_link', tooltip_link);
        documentationText = element.getAttribute('data-documentation-text');
        documentationLink = element.getAttribute('data-documentation-link');
        isTargetBlank = !element.getAttribute('data-open-documentation-active-window');
        tooltip_link.innerHTML = documentationText != null ? documentationText : "more...";
        tooltip_link.setAttribute("href", documentationLink != null ? documentationLink : "#");
        if (documentationLink && isTargetBlank) {
          tooltip_link.setAttribute("target", "_blank");
        }
        if (element.id) {
          helper_layer.setAttribute("data-id", element.id);
        }
        helper_layer.className = "chardinjs-helper-layer chardinjs-" + (this._get_position(element));
        this._position_helper_layer(element);
        this.$el.get()[0].appendChild(helper_layer);
        tooltip_layer.className = "chardinjs-tooltip chardinjs-" + (this._get_position(element));
        introHTML = element.getAttribute('data-intro');
        if (documentationLink || documentationText) {
          introHTML += " " + tooltip_link.outerHTML;
        }
        tooltip_layer.innerHTML = "<div class='chardinjs-tooltiptext'>" + introHTML + "</div>";
        helper_layer.appendChild(tooltip_layer);
        this._place_tooltip(element, tooltip_layer);
        current_element_position = "";
        if (element.currentStyle) {
          current_element_position = element.currentStyle["position"];
        } else {
          if (document.defaultView && document.defaultView.getComputedStyle) {
            current_element_position = document.defaultView.getComputedStyle(element, null).getPropertyValue("position");
          }
        }
        current_element_position = current_element_position.toLowerCase();
        if (current_element_position !== "absolute" && current_element_position !== "relative") {
          return element.className += " chardinjs-relative-position";
        }
      };

      chardinJs.prototype._get_offset = function(element) {
        var _x, _y, element_position;
        element_position = {
          width: element.offsetWidth,
          height: element.offsetHeight
        };
        _x = 0;
        _y = 0;
        while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
          _x += element.offsetLeft;
          _y += element.offsetTop;
          element = element.offsetParent;
        }
        element_position.top = _y;
        element_position.left = _x;
        return element_position;
      };

      return chardinJs;

    })();
    return $.fn.extend({
      chardinJs: function() {
        var $this, args, data, option;
        option = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
        $this = $(this[0]);
        data = $this.data('chardinJs');
        if (!data) {
          $this.data('chardinJs', (data = new chardinJs(this, option)));
        }
        if (typeof option === 'string') {
          data[option].apply(data, args);
        }
        return data;
      }
    });
  })(window.jQuery, window);

}).call(this);