Styles and names refactoring

example.html

@@ -45,8 +45,8 @@
 <script src="plugins/paste/paste.js"></script>
 <link rel="stylesheet" href="plugins/paste/paste.css">
 
-<script src="plugins/youtube/youtube.js"></script>
-<link rel="stylesheet" href="plugins/youtube/youtube.css">
+<script src="plugins/video/video.js"></script>
+<link rel="stylesheet" href="plugins/video/video.css">
 
 <script>
     codex.start({
@@ -168,13 +168,13 @@
                 enableLineBreaks: false,
                 allowedToPaste: false
             },
-            youtube: {
-                type: 'youtube',
-                make: youtubeTool.make,
+            video: {
+                type: 'video',
+                make: videoTool.make,
                 appendCallback: null,
                 settings: null,
-                render: youtubeTool.render,
-                save: youtubeTool.save,
+                render: videoTool.render,
+                save: videoTool.save,
                 displayInToolbox: false,
                 enableLineBreaks: false,
                 allowedToPaste: false

plugins/paste/paste.js

@@ -194,17 +194,15 @@ pasteTool.callbacks = {
     /**
      * callback for youtube url's
      * Using iframe to render
-     * @uses Youtube tool
+     * @uses video tool
      * @param url
      */
     youtubeMedia : function(url) {
         var data = {
-            youtube_url: url
+            video_url: url
         };
 
-        console.log(url);
-
-        codex.tools.youtube.make(data, true);
+        codex.tools.video.make(data, true);
     },
 
     /**

plugins/video/video.css

@@ -0,0 +1,12 @@
+.ce-redactor .video {
+    width: 100%;
+    max-width: 650px;
+    margin: 10px auto;
+}
+
+.video__loader {
+    background-image: url("loading.gif") !important;
+    background-repeat: no-repeat;
+    background-position: center center;
+    opacity: 0.5;
+}

plugins/video/video.js

@@ -1,32 +1,32 @@
 /**
- * Youtube plugin by gohabereg
+ * Video plugin by gohabereg
  * @version 1.0.0
  */
-var youtubeTool = {
+var videoTool = {
 
     make : function(data, isInternal) {
 
-        if (!data.youtube_url)
+        if (!data.video_url)
             return;
 
         var properties = {
             width: '560',
             height: '315',
-            src: data.youtube_url,
+            src: data.video_url,
             frameborder: '0',
             allowfullscreen: true
         };
 
-        var frame = codex.draw.node('IFRAME', 'youtube', properties);
+        var frame = codex.draw.node('IFRAME', 'video', properties);
 
         if (isInternal) {
 
-            frame.src = youtubeTool.content.makeEmbedUrl(data.youtube_url);
+            frame.src = videoTool.content.makeEmbedUrl(data.video_url);
 
             setTimeout(function() {
 
                 /** Render block */
-                youtubeTool.content.render(frame);
+                videoTool.content.render(frame);
 
             }, 200);
         }
@@ -47,7 +47,7 @@ var youtubeTool = {
             return;
 
         data = {
-            youtube_url: blockContent.src
+            video_url: blockContent.src
         };
 
         return data;
@@ -58,23 +58,23 @@ var youtubeTool = {
      * Render data
      */
     render : function(data) {
-        return youtubeTool.make(data);
+        return videoTool.make(data);
     }
 
 };
 
-youtubeTool.content = {
+videoTool.content = {
 
     render: function (content) {
-        codex.content.switchBlock(codex.content.currentNode, content, 'youtube');
+        codex.content.switchBlock(codex.content.currentNode, content, 'video');
 
         var blockContent = codex.content.currentNode.childNodes[0];
-        blockContent.classList.add('youtube__loader');
+        blockContent.classList.add('video__loader');
 
         setTimeout(function(){
-            blockContent.classList.remove('youtube__loader');
-        }, 500);
-        
+            blockContent.classList.remove('video__loader');
+        }, 1000);
+
     },
 
     makeEmbedUrl: function (url) {

plugins/youtube/youtube.css

@@ -1,10 +0,0 @@
-.ce-redactor .youtube {
-    width: 100%;
-    max-width: 650px;
-    margin: 10px auto;
-}
-
-.youtube__loader {
-    background: url("loading.gif") !important;
-    opacity: 0.1;
-}