Improvements for plugin integration

CHANGELOG

@@ -76,6 +76,7 @@ General:
 - Improved performance for PDF generation significantly (by upgrading
   to pdfmake 0.1.30) [#3278, #3285].
 - Bugfixes for PDF creation [#3227, #3251, #3279, #3286, #3346].
+- Improvements for plugin integration [#3330].
 
 
 Version 2.1.1 (2017-04-05)

openslides/agenda/static/templates/agenda/item-list.html

@@ -335,6 +335,7 @@
                 </span>
               </div>
             </div>
+            <template-hook hook-name="agendaListAdditionalContentColumn"></template-hook>
           </small>
         </div>
         <div style="width: 40%;" class="pull-right">

openslides/core/static/css/app.css

@@ -1512,6 +1512,11 @@ img {
     margin-left: 2px;
 }
 
+/* Bootbox: override z-index, that bootboxes are higher than ngDialogs */
+.bootbox {
+    z-index: 100000;
+}
+
 /* angular-chosen: override default width of select fields in quickmode */
 .chosen-container {
     width: 100% !important;

openslides/core/static/js/core/base.js

@@ -476,6 +476,17 @@ angular.module('OpenSlidesApp.core', [
 ])
 
 // Template hooks
+// 2 possible uses:
+// - { Id: 'myHookId', template: '<button>click me</button>' }
+// - { Id: 'myHookId', templateUrl: '/static/templates/plugin_name/my-hook.html' }
+// It is possible to provide a scope, that is merged into the scope of the templateHook.
+// This overrides functions/values of the parent scope, but there may are conflicts
+// with other plugins defining the same function/value. E.g.:
+// { Id: 'hookId', template: '<button ng-click="customFn()">click me</button>',
+//   scope: {
+//     customFn: function () { /*Do something */ },
+//   },
+// }
 .factory('templateHooks', [
     function () {
         var hooks = {};
@@ -493,22 +504,36 @@ angular.module('OpenSlidesApp.core', [
 
 .directive('templateHook', [
     '$compile',
+    '$http',
+    '$q',
+    '$templateCache',
     'templateHooks',
-    function ($compile, templateHooks) {
+    function ($compile, $http, $q, $templateCache, templateHooks) {
         return {
             restrict: 'E',
             template: '',
             link: function (scope, iElement, iAttr) {
                 var hooks = templateHooks.hooks[iAttr.hookName];
-                var html;
                 if (hooks) {
-                    html = hooks.map(function (hook) {
-                        return '<div>' + hook.template + '</div>';
-                    }).join('');
-                } else {
-                    html = '';
+                    var templates = _.map(hooks, function (hook) {
+                        // Populate scope
+                        _.forEach(hook.scope, function (value, key) {
+                            if (!scope.hasOwnProperty(key)) {
+                                scope[key] = value;
+                            }
+                        });
+                        // Either a template (html given as string) or a templateUrl has
+                        // to be given. If a scope is provided, the schope of this templateHook
+                        // is populated with the given functions/values.
+                        if (hook.template) {
+                            return '<div>' + hook.template + '</div>';
+                        } else {
+                            return $templateCache.get(hook.templateUrl);
+                        }
+                    });
+                    var html = templates.join('');
+                    iElement.append($compile(html)(scope));
                 }
-                iElement.append($compile(html)(scope));
             }
         };
     }

openslides/core/static/js/core/site.js

@@ -80,7 +80,9 @@ angular.module('OpenSlidesApp.core.site', [
                     this.scope = scope;
                 },
                 updateMainMenu: function () {
-                    this.scope.elements = this.getElements();
+                    if (this.scope) {
+                        this.scope.elements = this.getElements();
+                    }
                 },
                 getElements: function() {
                     var elements = mainMenuList.filter(function (element) {