Bläddra i källkod

HUE-724 [core] Create jHueNotify plugin

Improved jHueNotify plugin: introduced a general .notify
Enrico Berti 13 år sedan
förälder
incheckning
dcb1a3c

+ 6 - 2
desktop/core/src/desktop/templates/common_header.mako

@@ -48,6 +48,7 @@ from django.utils.translation import ugettext as _
   <script src="/static/js/Source/jHue/jquery.selector.js"></script>
   <script src="/static/js/Source/jHue/jquery.alert.js"></script>
   <script src="/static/js/Source/jHue/jquery.rowselector.js"></script>
+  <script src="/static/js/Source/jHue/jquery.notify.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.cookie.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.simpleplaceholder.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.dataTables.1.8.2.min.js"></script>
@@ -118,6 +119,9 @@ from django.utils.translation import ugettext as _
         </div>
       </div>
     </div>
-  </div>
-
+</div>
 
+<div id="jHueNotify" class="alert">
+    <button class="close">×</button>
+    <span class="message"></span>
+</div>

+ 16 - 0
desktop/core/static/css/hue2.css

@@ -929,4 +929,20 @@ div.box {
     color: #FFFFFF;
     font-size: 12px;
     text-shadow: -1px 0 1px #333, 0 1px 1px #333, 1px 0 1px #333, 0 -1px 1px #333;
+}
+
+#jHueNotify {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    margin-left: -200px;
+    width: 400px;
+    text-align: center;
+    z-index: 8000;
+    display: none;
+}
+
+#jHueNotify .close {
+    right: -27px;
+    display: none;
 }

+ 90 - 0
desktop/core/static/js/Source/jHue/jquery.notify.js

@@ -0,0 +1,90 @@
+/*
+* jHue notify plugin
+* 
+*/
+;(function ($, window, document, undefined) {
+
+	var pluginName = "jHueNotify",
+    TYPES = {
+        INFO: "INFO",
+        ERROR: "ERROR",
+        GENERAL: "GENERAL"
+    },
+	defaults = {
+        level: TYPES.GENERAL,
+        message: "",
+        sticky: false,
+        css: null
+    };
+
+	function Plugin(options) {
+		this.options = $.extend({}, defaults, options) ;
+		this._defaults = defaults;
+		this._name = pluginName;
+		this.show();
+	}
+	
+	Plugin.prototype.setOptions = function(options) {
+		this.options = $.extend({}, defaults, options) ;
+	};
+
+	Plugin.prototype.show = function () {
+		var _this = this;		
+        var el = $("#jHueNotify");
+        // stops all the current animations and resets the style
+        el.stop(true);
+        el.attr("class", "alert");
+        el.find(".close").hide();
+
+        el.click(function(){
+            $(this).stop(true);
+            $(this).fadeOut();
+        });
+
+        if (_this.options.level == TYPES.ERROR){
+            el.addClass("alert-error");
+            el.find(".message").html("<i class='icon-warning-sign'></i> <strong>" + _this.options.message + "</strong>");
+        }
+        else if (_this.options.level == TYPES.INFO){
+            el.addClass("alert-info");
+            el.find(".message").html("<i class='icon-info-sign'></i> <strong>" + _this.options.message + "</strong>");
+        }
+        else {
+            el.find(".message").html(_this.options.message);
+        }
+
+        if (_this.options.css != null){
+            el.attr("style", _this.options.css);
+        }
+
+        if (_this.options.sticky){
+            el.find(".close").click(function(){
+                el.fadeOut();
+            }).show();
+            el.show();
+        }
+        else {
+            el.show().animate({
+                opacity: 1
+            }, 3000, function(){
+                el.fadeOut();
+            });
+        }
+	};
+
+    $[pluginName] = function () {
+    };
+
+    $[pluginName].info = function (message) {
+        new Plugin({ level: TYPES.INFO, message: message});
+    };
+
+    $[pluginName].error = function (message) {
+        new Plugin({ level: TYPES.ERROR, message: message, sticky: true});
+    };
+
+    $[pluginName].notify = function (options) {
+        new Plugin(options);
+    };
+
+})(jQuery, window, document);