Youtube plugin added

Youtube videos can be added by pasting video-url.

example.html

@@ -45,6 +45,9 @@
 <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>
     codex.start({
         textareaId : "codex_area",
@@ -164,6 +167,17 @@
                 displayInToolbox: false,
                 enableLineBreaks: false,
                 allowedToPaste: false
+            },
+            youtube: {
+                type: 'youtube',
+                make: youtubeTool.make,
+                appendCallback: null,
+                settings: null,
+                render: youtubeTool.render,
+                save: youtubeTool.save,
+                displayInToolbox: false,
+                enableLineBreaks: false,
+                allowedToPaste: false
             }
         },
         data : {

plugins/paste/paste.js

@@ -90,13 +90,15 @@ pasteTool.callbacks = {
                 twitter : new RegExp("http?.+twitter.com?.+\/"),
                 facebook : /https?.+facebook.+\/\d+\?/,
                 vk : /https?.+vk?.com\/feed\?w=wall\d+_\d+/,
+                youtube : /https?.+youtube.com\/watch\?v=.{11}/
             },
 
             image  = regexTemplates.image.test(string),
             instagram = regexTemplates.instagram.exec(string),
             twitter = regexTemplates.twitter.exec(string),
             facebook = regexTemplates.facebook.test(string),
-            vk = regexTemplates.vk.test(string);
+            vk = regexTemplates.vk.test(string),
+            youtube = regexTemplates.youtube.test(string);
 
         if (image) {
 
@@ -118,6 +120,10 @@ pasteTool.callbacks = {
 
             pasteTool.callbacks.vkMedia(string);
 
+        } else if (youtube) {
+
+            pasteTool.callbacks.youtubeMedia(string);
+
         }
 
     },
@@ -173,7 +179,6 @@ pasteTool.callbacks = {
      * @param url
      */
     instagramMedia : function(url) {
-
         var fullUrl = url.input,
             data;
 
@@ -186,6 +191,22 @@ pasteTool.callbacks = {
 
     },
 
+    /**
+     * callback for youtube url's
+     * Using iframe to render
+     * @uses Youtube tool
+     * @param url
+     */
+    youtubeMedia : function(url) {
+        var data = {
+            youtube_url: url
+        };
+
+        console.log(url);
+
+        codex.tools.youtube.make(data, true);
+    },
+
     /**
      * callback for tweets
      * Using Twittter Widget to render

plugins/youtube/youtube.css

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

plugins/youtube/youtube.js

@@ -0,0 +1,93 @@
+/**
+ * Youtube plugin by gohabereg
+ * @version 1.0.0
+ */
+var youtubeTool = {
+
+    make : function(data, isInternal) {
+
+        if (!data.youtube_url)
+            return;
+
+        var properties = {
+            width: '560',
+            height: '315',
+            src: data.youtube_url,
+            frameborder: '0',
+            allowfullscreen: true
+        };
+
+        var frame = codex.draw.node('IFRAME', 'youtube', properties);
+
+        if (isInternal) {
+
+            frame.src = youtubeTool.content.makeEmbedUrl(data.youtube_url);
+
+            console.log(frame.src);
+
+            setTimeout(function() {
+
+                /** Render block */
+                youtubeTool.content.render(frame);
+
+            }, 200);
+        }
+
+        return frame;
+
+    },
+
+    /**
+     * Saving JSON output.
+     * Upload data via ajax
+     */
+    save : function(blockContent) {
+
+        var data;
+
+        if (!blockContent)
+            return;
+
+        data = {
+            youtube_url: blockContent.src
+        };
+
+        return data;
+
+    },
+
+    /**
+     * Render data
+     */
+    render : function(data) {
+        return youtubeTool.make(data);
+    }
+
+};
+
+youtubeTool.content = {
+
+    render: function (content) {
+        codex.content.switchBlock(codex.content.currentNode, content, 'youtube');
+
+        var blockContent = codex.content.currentNode.childNodes[0];
+        blockContent.classList.add('youtube__loader');
+
+        setTimeout(function(){
+            blockContent.classList.remove('youtube__loader');
+        }, 500);
+
+        codex.content.insertBlock({
+            type  : 'paragraph',
+            block : codex.tools['paragraph'].render({
+                text : ''
+            })
+        }, true );
+    },
+
+    makeEmbedUrl: function (url) {
+
+        return url.replace(/watch\?v=/, 'embed/');
+
+    }
+};