From 065540a782f7d098bedfedbb9dd11c286f0d8643 Mon Sep 17 00:00:00 2001
From: George Berezhnoy <gohabereg@gmail.com>
Date: Thu, 5 Jan 2017 21:53:40 +0300
Subject: [PATCH] Youtube plugin added

Youtube videos can be added by pasting video-url.
---
 example.html                |  14 ++++++
 plugins/paste/paste.js      |  25 +++++++++-
 plugins/youtube/loading.gif | Bin 0 -> 329 bytes
 plugins/youtube/youtube.css |  10 ++++
 plugins/youtube/youtube.js  |  93 ++++++++++++++++++++++++++++++++++++
 5 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 plugins/youtube/loading.gif
 create mode 100644 plugins/youtube/youtube.css
 create mode 100644 plugins/youtube/youtube.js

diff --git a/example.html b/example.html
index 33902c0b..a54710b8 100644
--- a/example.html
+++ b/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 : {
diff --git a/plugins/paste/paste.js b/plugins/paste/paste.js
index 73e3d1f7..81e76ac8 100644
--- a/plugins/paste/paste.js
+++ b/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
diff --git a/plugins/youtube/loading.gif b/plugins/youtube/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..72ea7ccb5321d5384d70437cfaac73011237901e
GIT binary patch
literal 329
zcmZ?wbhEHb<Y3@nn8?7eYSpU$|Nk?9f#QE|Ki808XU70nBRvCVMxdbLPZmxtAgu#Z
z0Mf$1#5;wRb9wgJ5Fhr7kxzB7so-zXTQDQ*d0g~`g(u!D-HO!|ewLP`>9b#5NV>2k
zBC~b@b~P=nNfWAe-b%_i6tS^-1y(h@EsB~1TqDA_h@fkxG$bHgvj}VxE1JLgr!*!^
ILUxTc0Q$^Q5C8xG

literal 0
HcmV?d00001

diff --git a/plugins/youtube/youtube.css b/plugins/youtube/youtube.css
new file mode 100644
index 00000000..3566ff04
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/plugins/youtube/youtube.js b/plugins/youtube/youtube.js
new file mode 100644
index 00000000..0829d910
--- /dev/null
+++ b/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/');
+
+    }
+};