Plugins use a loader to include supporting files

Author: stian-andersen

PublishInfo/PublishInfo.js

@@ -1,6 +1,6 @@
 /**
  * PublishInfo
- * See PublishInfo.md for documentation
+ * See readme.md for documentation
  */
 
 var Plugins = Plugins || {};
@@ -12,6 +12,11 @@ Plugins.PublishInfo = function(params) {
 
     this.isActive = false;
 
+    this.init = function(params) {
+        // Add required CSS-file. Set fourth argument to true to load the file in the main window (where the GUI is displayed)
+        params.loader.addCss('/view-resources/lib/edit/plugins/PublishInfo/PublishInfo.css', null, null, true);
+    };
+
     this.start = function() {
         this.isActive = true;
     };
@@ -126,6 +131,8 @@ Plugins.PublishInfo = function(params) {
         );
     };
 
+    this.init(params);
+
     var self = this;
 
     return {

PublishInfo/readme.md

@@ -16,14 +16,7 @@ Config-example for article-structure:
 
 The structure-model will create an instance of the plugin "Plugins.PublishInfo" when needed ("autoStart" = false).
 
-This plugin ships with a css-file. This is included in the front-pages that needs it like this (f.eks: /view/page/front/default/edit_properties.json):
-```json
-"filesForMainWindow": {
-    "css": [
-        "/view-resources/lib/edit/plugins/PublishInfo/PublishInfo.css"
-    ]
-},
-```
+This plugin ships with a css-file. This is included on the pages that needs it using the supplied loader-instance in the init-method.
 
 Config-example for menu-item triggering the plugin:
 ```json

YouTubeEditor/YouTubeEditor.css

@@ -13,8 +13,7 @@
     width: 860px;
     min-height: 560px;
     margin: 2em auto;
-    padding: 2em;
-    /*overflow: hidden;*/
+    padding: 30px;
     -webkit-user-select: none;
     user-select: none;
 }
@@ -187,7 +186,7 @@
 }
 
 .YouTubeEditor .yte-btn:hover {
-    border-color: #000;
+    border-color: #676767;
 }
 
 .YouTubeEditor .yte-btn:active {
@@ -198,14 +197,13 @@
     font-size: 1.7em;
 }
 
-.YouTubeEditor .yte-btn.lab-icon-play.playing:before {
-    content: "";
-    border-left: 3px solid #000;
-    border-right: 3px solid #000;
-    width: 0.5em;
+.YouTubeEditor .yte-btn:before {
     display: inline-block;
-    height: 0.8em;
-    margin-left: 0em;
+    margin-top: 0.35em;
+}
+
+.YouTubeEditor .yte-btn.lab-icon-play.playing:before {
+    content: "\e924";
 }
 
 .YouTubeEditor .yte-btn.lab-icon-backward:before {
@@ -218,6 +216,10 @@
     margin-left: 0.2em;
 }
 
+.YouTubeEditor .yte-btn.lab-icon-play.playing:before {
+    margin-left:0;
+}
+
 .YouTubeEditor .yte-btn.lab-icon-end_point:before {
     margin-left: 0.3em;
 }

YouTubeEditor/YouTubeEditor.js

@@ -25,6 +25,11 @@ Plugins.YouTubeEditor = function(params) {
     this.btn_play = null;
     this.version = "1.0";
 
+    this.init = function(params) {
+        // Add required CSS-file.
+        params.loader.addCss('/view-resources/lib/edit/plugins/YouTubeEditor/YouTubeEditor.css', null, null);
+    };
+
     this.start = function() {
         this.isActive = true;
         this.getData();
@@ -395,7 +400,7 @@ Plugins.YouTubeEditor = function(params) {
 
         var scrollTop = $lab(parent.window).scrollTop() + 30;
         this.editorGui = $lab('<div>').addClass("YouTubeEditor").css("margin-top", scrollTop + "px");
-        this.editorGui.append('<div id="YouTubeEditorContainer"></div>');
+        this.editorGui.append('<div id="YouTubeEditorContainer" style="width:800px;"></div>');
         this.editorGui.click(function(e) {
             e.stopPropagation();
         });
@@ -430,6 +435,8 @@ Plugins.YouTubeEditor = function(params) {
         }
     };
 
+    this.init(params);
+
     var self = this;
 
     return {

YouTubeEditor/readme.md

@@ -50,8 +50,8 @@ Config-example to display a button to start the plugin `/view/menu_settings/stru
 The button `video_edit` is added to all article-boxes that contains a child of type `youtube`. 
 When clicking the button the method `displayEditor` is run on the plugin. If it is not already started it will start now.
 
-This plugin is shipped with a CSS file that should be included in the page-template in edit-mode:
-`<link rel="stylesheet" href="/view-resources/lib/edit/plugins/YouTubeEditor/YouTubeEditor.css" />`
+This plugin is shipped with a CSS file that should be included in the page-template in edit-mode.
+This is done when initializing the plugin.
 
 @category    Labrador
 @package     Labrador 3

readme.md

@@ -94,6 +94,7 @@ When an instance of the plugin is created the plugin reseives one argument: An o
 - `userId` (int) ID of current user 
 - `viewport` (string) Name of current viewport 
 - `viewports` (array) List of all viewports 
+- `loader` (object) Helper to load js and css-files required by the plugin.
 
 Labrador require these public methods for any plugin: 
 - `start` (void) Start the plugin