penguin/AstroJS

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Video.js

raw · 3566 bytes

(function ()
{
	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );

	/** @type {typeof System.utils.IKey} */
	var IKey                              = __import( "System.utils.IKey" );
	/** @type {typeof System.utils.DataKey} */
	var DataKey                           = __import( "System.utils.DataKey" );
	/** @type {function(...?): Dandelion.IDOMElement} */
	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
	/** @type {typeof Dandelion} */
	var Dand                              = __import( "Dandelion" );
	/** @type {typeof Components.MessageBox} */
	var MessageBox                        = __import( "Components.MessageBox" );

	var getData                           = __import( "System.Net.getData" );
	var BLANK_IMG = __import( "Dandelion.StaticRes.BLANK_IMG" );

	var video = function (insertSnippet, snippetWrap, createContext, override)
	{
		var temp, i, j, imgSrc

		, getVimeoThumbnail = function( v )
		{
			getData(
				"//vimeo.com/api/oembed.json?url=https%3A//vimeo.com/" + v
				, setThumbnail
				, noThumb
			);
		}
		, setImgSrc = function( url )
		{
			if( imgSrc ) imgSrc.src = url;
		}
		, noThumb = function () { }
		, setThumbnail = function (str)
		{
			setImgSrc( JSON.parse(str)["thumbnail_url"] );
		}

		, handler = function ()
		{
			// Input fields
			var input_url = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"));

			// Popup MessageBox
			new MessageBox("Insert video snippet"
				, Dand.wrape([ Dand.wrapc("v_instruction flsf", "Paste a vimeo/Youtube link below:"), input_url ])
				, "OK", "Cancel", visualizer.bind(input_url)
			).show();
		};
		/**
		 * @param {boolean} submitted
		 * @param {*} override
		 */
		var visualizer = function (submitted, override)
		{
			var t, v;

			if (override)
			{
				v = override.value;
				i = override.type;
			}
			else
			{
				t = this.value;
				// Match youtube links
				v = t.match(/\/\/(www\.)?youtube\.com\/watch\?.*?v=([^\&\?\/\#]+)/) || t.match(/\/\/(www\.)?youtube\.com\/embed\/([^\&\?\/]+)/)
						|| t.match(/\/\/(www\.)?youtube\.com\/v\/([^\&\?\/]+)/) || t.match(/\/\/(www\.)?youtu\.be\/([^\&\?\/]+)/);
				if (v)
				{
					i = "youtube";
					v = v[2];
				}
				else
				{
					// match vimeo links
					v = t.match(/\/\/(www\.)?vimeo.com\/(\d+)($|\/)/);
					if (v)
					{
						i = "vimeo";
						v = v[2];
					}
					else
					{
						// None matched, do nothing
						return;
					}
				}
			}

			if (submitted)
			{
				// Visualize component
				temp =  Dand.wrapc('v_box'
					, [
						Dand.wrapc( 'v_description', i[0].toUpperCase() + i.substr(1) + ": " + v )
						, imgSrc = Dand.wrapna( "img", [ new IKey( "src", BLANK_IMG ) ] )
					]
					, [ new DataKey("value", v), new DataKey("type", i) ]
				);

				if( i[0] == "v" )
				{
					getVimeoThumbnail( v );
				}
				else
				{
					setImgSrc( "//img.youtube.com/vi/" + v + "/hqdefault.jpg" );
				}

				insertSnippet(j = snippetWrap("Video", temp), Boolean(override));

				// Set context menu
				createContext(null, j);
			}
		};

		if (override)
		{
			visualizer(true, override);
			override = false;
		}
		else
		{
			return handler;
		}
		return true;
	};

	var compile = function (stage)
	{
		// [video type=\"youtube\"]" + v[2] + "[/video]
		var element = IDOMElement(stage)
		, type = element.getDAttribute("type");

		return "[video type=\"" + type + "\"]" + element.getDAttribute("value") + "[/video]";
	};

	__static_method( video, "compile", compile );

	ns[ NS_EXPORT ]( EX_CLASS, "Video", video );
})();