/** * Twitter plugin * @version 1.0.0 */ var twitter = (function(twitter_plugin) { /** * User's configuration object */ var config_ = {}; /** * CSS classes */ var css_ = { pluginWrapper : 'cdx-tweet' }; var methods = { /** * Twitter render method appends content after block * @param tweetId */ twitter : function(data, twitterBlock) { var tweet = methods.drawTwitterHolder(), twittersCaption = methods.drawTwittersCaptionBlock(); if (data.caption) { twittersCaption.innerHTML = data.caption; } /** * add created tweet to holder */ tweet.appendChild(twitterBlock); // setTimeout(function() { window.twttr.widgets.createTweet(data.id_str, twitterBlock).then(tweetInsertedCallback_); // }, 1000); tweet.classList.add('ce-redactor__loader'); if (codex.editor.content.currentNode) { tweet.dataset.statusUrl = data.status_url; codex.editor.content.switchBlock(codex.editor.content.currentNode, tweet, 'tweet'); } /** * in case if we need extra data */ if ( !data.user ) { codex.editor.core.ajax({ url : config_.fetchUrl + '?tweetId=' + data.id_str, type: "GET", success: function(result) { methods.saveTwitterData(result, tweet); } }); } else { tweet.dataset.profileImageUrl = data.user.profile_image_url; tweet.dataset.profileImageUrlHttps = data.user.profile_image_url_https; tweet.dataset.screenName = data.user.screen_name; tweet.dataset.name = data.user.name; tweet.dataset.id = +data.id; tweet.dataset.idStr = data.id_str; tweet.dataset.text = data.text; tweet.dataset.createdAt = data.created_at; tweet.dataset.statusUrl = data.status_url; tweet.dataset.media = data.media; tweet.classList.remove('ce-redactor__loader'); } /** * add caption to tweet */ setTimeout(function() { tweet.appendChild(twittersCaption); }, 1000); return tweet; }, drawTwitterHolder : function() { var block = document.createElement('DIV'); block.classList.add(css_.pluginWrapper); return block; }, drawTwitterBlock : function() { var block = codex.editor.draw.node('DIV', '', { height: "20px" }); return block; }, drawTwittersCaptionBlock : function() { var block = codex.editor.draw.node('DIV', ['ce-twitter__caption'], { contentEditable : true }); return block; }, saveTwitterData : function(result, tweet) { var data = JSON.parse(result), twitterContent = tweet; setTimeout(function() { /** * Save twitter data via data-attributes */ twitterContent.dataset.profileImageUrl = data.user.profile_image_url; twitterContent.dataset.profileImageUrlHttps = data.user.profile_image_url_https; twitterContent.dataset.screenName = data.user.screen_name; twitterContent.dataset.name = data.user.name; twitterContent.dataset.id = +data.id; twitterContent.dataset.idStr = data.id_str; twitterContent.dataset.text = data.text; twitterContent.dataset.createdAt = data.created_at; twitterContent.dataset.media = data.entities.urls.length > 0 ? "false" : "true"; }, 50); } }; /** * @private * Fires after tweet widget rendered */ function tweetInsertedCallback_(widget) { var pluginWrapper = findParent_( widget , css_.pluginWrapper ); pluginWrapper.classList.remove('ce-redactor__loader'); } /** * @private * Find closiest parent Element with CSS class */ function findParent_ (el, cls) { while ((el = el.parentElement) && !el.classList.contains(cls)); return el; } /** * Prepare twitter scripts * @param {object} config */ twitter_plugin.prepare = function(config) { /** * Save configs */ config_ = config; return new Promise(function(resolve, reject){ codex.editor.core.importScript("https://platform.twitter.com/widgets.js", 'twitter-api').then(function(){ resolve(); }).catch(function(){ reject(Error('Twitter API was not loaded')); }); }); }; /** * @private * * @param data * @returns {*} */ make_ = function(data) { if (!data.id || !data.status_url) return; if (!data.id_str) { data.id_str = data.status_url.match(/[^\/]+$/)[0]; } var twitterBlock = methods.drawTwitterBlock(); var tweet = methods.twitter(data, twitterBlock); return tweet; }; twitter_plugin.validate = function(data) { return true; }; twitter_plugin.save = function(blockContent) { var data, caption = blockContent.querySelector('.ce-twitter__caption'); data = { media:blockContent.dataset.media, conversation:false, user:{ profile_image_url: blockContent.dataset.profileImageUrl, profile_image_url_https: blockContent.dataset.profileImageUrlHttps, screen_name: blockContent.dataset.screenName, name: blockContent.dataset.name }, id: blockContent.dataset.id || blockContent.dataset.tweetId, id_str : blockContent.dataset.idStr, text: blockContent.dataset.text, created_at: blockContent.dataset.createdAt, status_url: blockContent.dataset.statusUrl, caption: caption.innerHTML || '' }; return data; }; twitter_plugin.render = function(data) { return make_(data); }; twitter_plugin.urlPastedCallback = function(url) { var tweetId, arr, data; arr = url.split('/'); tweetId = arr.pop(); /** Example */ data = { "media" : true, "conversation" : false, "user" : null, "id" : +tweetId, "text" : null, "created_at" : null, "status_url" : url, "caption" : null }; make_(data); }; twitter_plugin.pastePatterns = [ { type: 'twitter', regex: /http?.+twitter.com?.+\//, callback: twitter_plugin.urlPastedCallback } ]; twitter_plugin.destroy = function () { twitter = null; delete window.twttr; }; return twitter_plugin; })({});