Enh: Added data-ui-addition way of definint ui additions

protected/humhub/docs/CHANGELOG_DEV.md

@@ -23,7 +23,7 @@ HumHub Change Log (DEVELOP)
 - Enh: Add `OnlineModuleManager::EVENT_BEFORE_UPDATE`, `OnlineModuleManager::EVENT_AFTER_UPDATE`
 - Fix: Double encoding of `&` in `Richtext::output()`
 - Enh: Added `SocialActivity::getContentPlainTextPreview()` mainly used in mail subjects
-
+- Enh: Added `data-ui-addition` way of definint ui additions
 
 1.4
 ---

protected/humhub/docs/guide/developer/javascript-uiadditions.md

@@ -21,6 +21,22 @@ In this example we added a `toggle` addition which will be applied to all nodes
 
 > Tip: You should only add new additions in case they are used regularly within your application, since each new addition will add an additional selector search to your initialization process.
 
+###### Register Addition without selector (since v1.4)
+
+It is also possible to register additions without a selector as in the following example:
+
+```javascript
+require('ui.additions').register('someAddition', function($match) {
+    $match.on('click', function() {
+        $(this).toggle();
+    });
+});
+```
+
+The actual selector for such an addition would be `[data-ui-addition="someAddition"]`.
+
+> Note: This way of defining additions is preferred since we save additional addition queries.
+
 ###### Extend Additions:
 
 The `register` method also accepts an optional `options` parameter after the handler function, which can be used to extend already registered additions.
@@ -45,7 +61,8 @@ additions.extend('toggle', '.toggle', function($match) { /* ... */ });
 
 ### Apply Additions
 
-By default the document `body` will be parsed for additions within the humhub initialization phase. If you require to apply additions to nodes inserted after the initialization phase e.g. nodes loaded by ajax, you'll either have to call the `applyTo()` function on your new nodes as
+By default the document `body` will be parsed for additions within the humhub initialization phase. If you require to apply 
+additions to nodes inserted after the initialization phase e.g. nodes loaded by ajax, you'll either have to call the `applyTo()` function on your new nodes as
 
 ```javascript
 client.get(url).then(function(response) {
@@ -62,19 +79,19 @@ or add a `MutationObserver` to your container as follows
 additions.observe($('#myContainer'));
 ```
 
-> Info: You won't have to worry about the applying of additions when using the `modal` API to load content to your modals.
+> Info: You won't have to worry about the applying of additions when using the `modal` or `stream` API .
 
 You can also just apply specific additions by using the apply options filter:
 
 ```javascript
     // only apply the toggle addition to #myContainer
     additions.applyTo($('#myContainer'), {
-        filter: ['toggle']
+        include: ['toggle']
     });
 
     // or respectively
     additions.observe($('#myContainer'), {
-        filter: ['toggle']
+        include: ['toggle']
     });
 ```
 
@@ -82,8 +99,7 @@ You can also just apply specific additions by using the apply options filter:
 
  - *autosize* - `.autosize`: adds the autosize behaviour to textarea fields
  - *select2* - `[data-ui-select2]`: transforms a dropdown to a select2 dropdown
- - *tooltip* - `.tt`: adds an jQuery tooltip to the element on hover 
- - *markdown* - `[data-ui-markdown]`: parses the content of the given node for markdown syntax
+ - *tooltip* - `.tt`: adds an jQuery tooltip to the element on hover
  - *popover* - `.po`: adds the bootstrap popover behaviour to the given elements
  - *form_elements*, `:checkbox, :radio`: renders styled radiobuttons and checkboxes
  - *showMore*, `[data-ui-show-more]`: used for cutting long texts (e.g in stream entries)

static/js/humhub/humhub.ui.additions.js

@@ -17,13 +17,24 @@ humhub.module('ui.additions', function (module, require, $) {
     /**
      * Registers an addition for a given jQuery selector. There can be registered
      * multiple additions for the same selector.
-     * 
-     * @param string id additionid
-     * @param string selector jQuery selector
-     * @param function addition addition function
+     *
      * @returns {undefined}
+     * @param id
+     * @param selector
+     * @param handler
+     * @param options
      */
     var register = function (id, selector, handler, options) {
+
+        // Register an addition without selector data-ui-addition="additionId"
+        if(object.isFunction(selector)) {
+            options = handler;
+            handler = selector;
+            selector = null;
+        }
+
+        var hasSelector = selector != null && object.isDefined(selector);
+
         options = options || {};
 
         if (!_additions[id] || options.overwrite) {
@@ -32,17 +43,23 @@ humhub.module('ui.additions', function (module, require, $) {
                 'handler': handler
             };
 
-            if(options.after && _additions[options.after]) {
+            if(hasSelector && options.after && _additions[options.after]) {
                 _order.splice(_order.indexOf(options.after) + 1, 0, id);
-            } else if(options.before &&  _additions[options.before]) {
+            } else if(hasSelector && options.before &&  _additions[options.before]) {
                 _order.splice(_order.indexOf(options.before), 0, id);
-            } else {
+            } else if(hasSelector) {
                 _order.push(id);
             }
 
             // Make sure additions registrated after humhub:ready also affect element
             if (humhub.initialized) {
-                apply($('body'), id);
+                if(hasSelector) {
+                    apply($('body'), id);
+                } else {
+
+                    apply($('body'), 'addition', '[data-ui-addition="'+id+'"]');
+                }
+
             }
         } else if (options.extend) {
             options.selector = selector;
@@ -53,6 +70,7 @@ humhub.module('ui.additions', function (module, require, $) {
     /**
      * Applies all matched additions to the given element and its children
      * @param {type} element
+     * @param options
      * @returns {undefined}
      */
     var applyTo = function (element, options) {
@@ -85,14 +103,16 @@ humhub.module('ui.additions', function (module, require, $) {
      * @param {type} addition
      * @returns {undefined}
      */
-    var apply = function ($element, id) {
+    var apply = function ($element, id, selector) {
         var addition = _additions[id];
 
         if (!addition) {
             return;
         }
 
-        var $match = $element.find(addition.selector).addBack(addition.selector);
+        selector = object.isDefined(selector) ? selector : addition.selector;
+
+        var $match = $element.find(selector).addBack(selector);
 
         // only apply addition if we actually find a match
         if (!$match.length) {
@@ -102,6 +122,16 @@ humhub.module('ui.additions', function (module, require, $) {
         addition.handler.apply($match, [$match, $element]);
     };
 
+    var applyAddition = function($element, id) {
+        var addition = _additions[id];
+
+        if (!addition) {
+            return;
+        }
+
+        addition.handler.apply($element, [$element, $element]);
+    };
+
     var init = function () {
         event.on('humhub:ready', function (evt) {
             module.applyTo($('body'));
@@ -140,6 +170,13 @@ humhub.module('ui.additions', function (module, require, $) {
             $(this).closest('.jp-controls').find('.jp-pause').css('display', 'block');
         });
 
+        module.register('addition', '[data-ui-addition]', function($match) {
+            $match.each(function(i, e) {
+                var $this = $(this);
+                applyAddition($(this), $this.data('uiAddition'));
+            });
+        });
+
         // Autosize textareas
         module.register('autosize', '.autosize', function ($match) {
             $match.autosize();