Creation of Medium.Toolbar & Medium.Drag and option to turn Medium.Dr…

…ag on.

Cleanup of codebase, combination of html assistant into utilities, and bring some utilities into Medium directly.

docs/docs.css

@@ -257,4 +257,7 @@ pre[data-src]{
 }
 pre[class*='language-'] > code[data-language] {
 	overflow: auto ! important;
+}
+div[data-src] {
+	position: relative;
 }

docs/docs.js

@@ -10,11 +10,15 @@ var applyPrism = function(){
 			dataType:'text',
 			success: function(d){
 				if (that.nodeName === 'PRE') {
-					$(that)
+					var html = $(that)
 						.text(d)
 						.addClass(src.match('.js') ? 'language-javascript' : 'language-markup');
 
 					Prism.highlightElement(that);
+
+					setTimeout(function() {
+						html.attr('data-language', src.match('.js') ? 'javascript' : 'html');
+					}, 1);
 				} else {
 					var htmlPre = $('<pre>').insertAfter(that),
 						html = $('<code>')
@@ -32,7 +36,9 @@ var applyPrism = function(){
 					Prism.highlightElement(html[0]);
 					Prism.highlightElement(js[0]);
 
-					html.attr('data-language', 'html');
+					setTimeout(function() {
+						html.attr('data-language', 'html');
+					},1);
 
 					jsPre.hide();
 					htmlPre.hide();
@@ -61,7 +67,7 @@ var applyPrism = function(){
 };
 
 //override the internal event handler to use jQuery for easy demoing
-Medium.Utilities.prototype.triggerEvent = function(element, eventName) {
+Medium.Utilities.triggerEvent = function(element, eventName) {
 	$(element).trigger(eventName);
 };
 

docs/index.html

@@ -164,6 +164,24 @@ <h4 id="invoke"><a href="#invoke">Rich with Invoke Element (domesticated only)</
 	            </div>
             </div>
 
+            <div class="domesticated demo-container">
+	            <h4 id="invoke-drag"><a href="#invoke">Rich with Invoke Element (domesticated only)</a></h4>
+	            <div id="rich5" data-src="rich5.js">
+		            <div class="toolbar-top">
+			            <span class="toolbar">
+				            <span id="rich5-bold" style="font-weight: bold; color: #66d9ef">B</span>
+				            <span id="rich5-underline" style="text-decoration: underline; color: #a6e22e">U</span>
+				            <span id="rich5-italic" style="font-style: italic; color: #f92672">I</span>
+				            <span id="rich5-strike" style="text-decoration: line-through; color: #e6db74">S</span>
+			            </span>
+		            </div>
+		            <div id="article5" class="article demo">
+			            <p contenteditable="false">Widget</p>
+			            <br />
+		            </div>
+	            </div>
+            </div>
+
 
             <hr/>
 
@@ -413,5 +431,6 @@ <h4 id="Licensing">Licensing</h4>
         <script src="partials/rich2.js"></script>
         <script src="partials/rich3.js"></script>
         <script src="partials/rich4.js"></script>
+        <script src="partials/rich5.js"></script>
     </body>
 </html>

docs/partials/rich5.js

@@ -0,0 +1,52 @@
+var article5 = document.getElementById('article5'),
+	article5Medium = new Medium({
+        element: article5,
+        mode: Medium.richMode,
+        placeholder: 'Your Article 5',
+        attributes: null,
+        tags: null,
+	    pasteAsText: false,
+	    drag: true
+    });
+
+article5.highlight = function() {
+	if (document.activeElement !== article4) {
+		article5Medium.select();
+	}
+};
+
+document.getElementById('rich5-bold').onmousedown = function() {
+	article5.highlight();
+	article5Medium.invokeElement('b', {
+	    title: "I'm bold!",
+	    style: "color: #66d9ef"
+    });
+	return false;
+};
+
+document.getElementById('rich5-underline').onmousedown = function() {
+	article5.highlight();
+	article5Medium.invokeElement('u', {
+		title: "I'm underlined!",
+		style: "color: #a6e22e"
+	});
+	return false;
+};
+
+document.getElementById('rich5-italic').onmousedown = function() {
+	article5.highlight();
+	article5Medium.invokeElement('i', {
+		title: "I'm italics!",
+		style: "color: #f92672"
+	});
+	return false;
+};
+
+document.getElementById('rich5-strike').onmousedown = function() {
+	article5.highlight();
+	article5Medium.invokeElement('strike', {
+		title: "I've been struck!",
+		style: "color: #e6db74"
+	});
+	return false;
+};

medium.css

@@ -40,4 +40,53 @@
 .Medium-placeholder-inlineRich div{
 	overflow: hidden;
 	white-space: nowrap;
+	}
+.Medium-drag {
+	position: absolute;
+	cursor: move;
+	margin-left: -5px;
+	margin-top: -20px;
+	}
+.Medium-toolbar-hide {
+	overflow: hidden;
+	max-height: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	transition-property: opacity;
+	-moz-transition-duration: 0.3s;
+	-webkit-transition-duration: 0.3s;
+	-o-transition-duration: 0.3s;
+	transition-duration: 0.3s;
+	-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+	-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+	-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+	opacity: 0;
+	}
+
+.Medium-toolbar-show {
+	transition-property: opacity;
+	-moz-transition-duration: 0.3s;
+	-webkit-transition-duration: 0.3s;
+	-o-transition-duration: 0.3s;
+	transition-duration: 0.3s;
+	-moz-transition-timing-function: ease-in;
+	-webkit-transition-timing-function: ease-in;
+	-o-transition-timing-function: ease-in;
+	transition-timing-function: ease-in;
+	max-height: 1000px;
+	opacity: 1;
+	width: auto !important;
+	}
+
+.Medium-toolbar-fixed {
+	position: fixed;
+	}
+.Medium-focused {
+	transition: all 500ms ease-in-out 0s;
+	-moz-box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.2);
+	-webkit-box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.2);
+	box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.2);
 	}