Changeset 3869:97af47e1ee7d

Timestamp:

09/11/18 15:45:42 (7 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Add badge capabilities (used mainly by dashboard modules)

Location:

admin

Files:

• js/common.js (modified) (3 diffs)
• style/default-dark.css (modified) (2 diffs)
• style/default.css (modified) (2 diffs)
• style/scss/partials/_utils.scss (modified) (2 diffs)

admin/js/common.js

@@ -171 +171 @@
   };
   var singleExpander = function singleExpander(line, callback) {
-    $('<button type="button" class="details-cmd" aria-label="' + dotclear.img_plus_alt + '">' + dotclear.img_plus_txt + '</button>').click(function (e) {
+    $('<button type="button" class="details-cmd" aria-label="' + dotclear.img_plus_alt + '">' + dotclear.img_plus_txt + '</button>').click(function(e) {
       toggleArrow(this);
       callback(line);
@@ -178 +178 @@
   };
   var multipleExpander = function multipleExpander(line, lines, callback) {
-    $('<button type="button" class="details-cmd" aria-label="' + dotclear.img_plus_alt + '">' + dotclear.img_plus_txt + '</button>').click(function (e) {
+    $('<button type="button" class="details-cmd" aria-label="' + dotclear.img_plus_alt + '">' + dotclear.img_plus_txt + '</button>').click(function(e) {
       var action = toggleArrow(this);
       lines.each(function() {
@@ -446 +446 @@
       window.open($(this).attr('href'));
     });
-  }
+  },
+
+  badge: function($elt, options = null) {
+    // Cope with selector given as string or DOM element rather than a jQuery object
+    if (typeof $elt === 'string' || $elt instanceof Element) {
+      $elt = $($elt);
+    }
+
+    // Return if elt does not exist
+    if (!$elt.length) return;
+
+    // Cope with options
+    var opt = $.extend({
+      /* sibling: define if the given element is a sibling of the badge or it's parent
+       *  true: use $elt.after() to add badge
+       *  false: use $elt.parent().append() to add badge (default)
+       */
+      sibling: false,
+      /* id: badge unique class
+       *  this class will be used to delete all corresponding badge (used for removing and updating)
+       */
+      id: 'default',
+      /* remove: will remove the badge if set to true */
+      remove: false,
+      /* value: badge value */
+      value: null,
+      /* inline: if set to true, the badge is an inline element (useful for menu item) rather than a block */
+      inline: false,
+      /* icon: if set to true, the badge is attached to a dashboard icon (needed for correct positionning) */
+      icon: false,
+      /* type: Override default background (which may vary)
+       *  by default badge background are soft grey for dashboard icons (see opt.icon) and bright red for all other elements
+       *  possible values:
+       *    'std':  bright red
+       *    'info': blue
+       *    'soft': soft grey
+       */
+      type: '',
+      /* classes: additionnal badge classes */
+      classes: ''
+    }, options);
+
+    // Set some constants
+    const classid = 'span.badge.badge-' + opt.id; // Pseudo unique class
+
+    // Set badgeable class to elt parent's (if sibling) or elt itself, if it is necessary
+    var $parent = (opt.sibling ? $elt.parent() : $elt);
+    if (!opt.inline && !opt.remove && !$parent.hasClass('badgeable')) {
+      $parent.addClass('badgeable');
+    }
+
+    // Remove existing badge if exists
+    var $badge = (opt.sibling ? $parent.children(classid) : $elt.children(classid));
+    if ($badge.length) {
+      $badge.remove();
+    }
+
+    if (!opt.remove && opt.value !== null) {
+      // Add the new badge
+      const cls = 'badge badge-' + opt.id + ' ' +
+        (opt.inline ? 'badge-inline' : 'badge-block') +
+        (opt.icon ? ' badge-icon' : '') +
+        (opt.type !== '' ? ' badge-' + opt.type : '') +
+        (opt.classes !== '' ? ' ' + opt.classes : '');
+      const xml = '<span class="' + cls + '" aria-hidden="true">' + opt.value + '</span>';
+      if (opt.sibling) {
+        // Add badge after it's sibling
+        $elt.after(xml);
+      } else {
+        // Append badge to the elt
+        $elt.append(xml);
+      }
+    }
+  }
+
 };
 /* On document ready

admin/style/default-dark.css

@@ -3211 +3211 @@
   border: 1px solid #c9cbcf; }
 
-/* Badges */
-/*
-   Set .badgeable to badge parent's (not mandatory for menu items), then use:
-      .badge (standard badge)
-    which must be combined with :
-      .badge-icon (dashboard icon) → top right, or
-      .badge-block (dashboard module) → top left, or
-      .badge-inline (menu item) → right centered
-    and may be combined with :
-      .badge-info → blue background
-    and may be combined with (only in dashboard, not in menu) :
-      .badge-block-icon (dashboard icon or module) → soft badge on top right
-*/
+/* Badges (common.js) */
 .badgeable {
   /* class to set to badge parent's, not mandatory for menu items */
@@ -3236 +3224 @@
   padding: 0 .6em; }
 
+.badge-icon {
+  background-color: #708090; }
+
+/* Badge background override */
+.badge-std {
+  background-color: #d54e21; }
+
 .badge-info {
   background-color: #3f51b5; }
 
-.badge-icon {
-  border-radius: 5px; }
-
-.badge-block-icon {
-  background-color: #708090; }
+.badge-soft {
+  background-color: #708090;
+  }
 
 /* Badge position */
-.badge-icon {
-  /* Dashboard icon → badge on top rigt */
-  position: absolute;
-  top: 0;
-  right: 20px; }
-
 .badge-block {
-  /* Dashboard module → badge on top left */
+  /* Dashboard module → badge on top right */
   position: absolute;
   top: -10px;
   right: -10px; }
 
-.badge-block-icon {
-  /* Dashboard icon/module → badge on top rigt */
+.badge-icon {
+  /* Dashboard icon → badge on top right */
   right: 20px; }
 

admin/style/default.css

@@ -3211 +3211 @@
   border: 1px solid #c9c9c9; }
 
-/* Badges */
-/*
-   Set .badgeable to badge parent's (not mandatory for menu items), then use:
-      .badge (standard badge)
-    which must be combined with :
-      .badge-icon (dashboard icon) → top right, or
-      .badge-block (dashboard module) → top left, or
-      .badge-inline (menu item) → right centered
-    and may be combined with :
-      .badge-info → blue background
-    and may be combined with (only in dashboard, not in menu) :
-      .badge-block-icon (dashboard icon or module) → soft badge on top right
-*/
+/* Badges (common.js) */
 .badgeable {
   /* class to set to badge parent's, not mandatory for menu items */
@@ -3236 +3224 @@
   padding: 0 .6em; }
 
+.badge-icon {
+  background-color: #708090; }
+
+/* Badge background override */
+.badge-std {
+  background-color: #d54e21; }
+
 .badge-info {
   background-color: #3f51b5; }
 
-.badge-icon {
-  border-radius: 5px; }
-
-.badge-block-icon {
+.badge-soft {
   background-color: #708090; }
 
 /* Badge position */
-.badge-icon {
-  /* Dashboard icon → badge on top rigt */
-  position: absolute;
-  top: 0;
-  right: 20px; }
-
 .badge-block {
-  /* Dashboard module → badge on top left */
+  /* Dashboard module → badge on top right */
   position: absolute;
   top: -10px;
   right: -10px; }
 
-.badge-block-icon {
-  /* Dashboard icon/module → badge on top rigt */
+.badge-icon {
+  /* Dashboard icon → badge on top right */
   right: 20px; }
 

admin/style/scss/partials/_utils.scss

@@ -22 +22 @@
 }
 
-/* Badges */
-/*
-   Set .badgeable to badge parent's (not mandatory for menu items), then use:
-      .badge (standard badge)
-    which must be combined with :
-      .badge-icon (dashboard icon) → top right, or
-      .badge-block (dashboard module) → top left, or
-      .badge-inline (menu item) → right centered
-    and may be combined with :
-      .badge-info → blue background
-    and may be combined with (only in dashboard, not in menu) :
-      .badge-block-icon (dashboard icon or module) → soft badge on top right
-*/
+/* Badges (common.js) */
 
 .badgeable {
@@ -49 +37 @@
   padding: 0 .6em;
 }
+.badge-icon {
+  background-color: $badge-soft-background;
+}
+
+/* Badge background override */
+.badge-std {
+  background-color: $badge-std-background;
+}
 .badge-info {
-  background-color: $badge-info-background
+  background-color: $badge-info-background;
 }
-.badge-icon {
-  border-radius: 5px;
-}
-.badge-block-icon {
-  background-color: $badge-soft-background
+.badge-soft {
+  background-color: $badge-soft-background;
 }
 
 /* Badge position */
-.badge-icon {
-  /* Dashboard icon → badge on top rigt */
-  position: absolute;
-  top: 0;
-  right: 20px;
-}
 .badge-block {
-  /* Dashboard module → badge on top left */
+  /* Dashboard module → badge on top right */
   position: absolute;
   top: -10px;
   right: -10px;
 }
-.badge-block-icon {
-  /* Dashboard icon/module → badge on top rigt */
+.badge-icon {
+  /* Dashboard icon → badge on top right */
   right: 20px;
 }