Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 2 commits
  • 2 files changed
  • 0 comments
  • 1 contributor
May 30, 2012
Jean-philippe Lannoy + auto-hide-toolbar functionality 1a71e68
Jean-philippe Lannoy * Fix position problem when toolbar is hidden
* Remove editor container height in calculation to set static or fixed position of the toolbar
7608539
9  demo/demo.html
@@ -59,7 +59,7 @@
59 59
       </textarea>
60 60
       
61 61
       <textarea id="left-toolbar-editor">
62  
-        <h1>Editor with toolbar on left</h1>
  62
+        <h1>Editor with auto-hide toolbar on left</h1>
63 63
         <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
64 64
 
65 65
         <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor.</p>
@@ -83,7 +83,12 @@
83 83
   	
84 84
     $('#top-toolbar-editor').html5_editor();
85 85
     
86  
-    $('#left-toolbar-editor').html5_editor( { 'left-toolbar': true } );
  86
+    $('#left-toolbar-editor').html5_editor( { 'left-toolbar': true,
  87
+    																					'auto-hide-toolbar': true } );
  88
+    
  89
+    $('.html5-editor-container').blur(function (e, data) {
  90
+    	console.log(e);
  91
+    });
87 92
     
88 93
   });
89 94
   </script>
95  jquery.html5_editor.js
@@ -5,6 +5,20 @@
5 5
   Copyright: Copyright (c) 2012 Nuno Baldaia
6 6
   License: MIT License (http://www.opensource.org/licenses/mit-license.php)
7 7
   */
  8
+ 
  9
+
  10
+/*
  11
+ * jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
  12
+ * http://benalman.com/projects/jquery-dotimeout-plugin/
  13
+ * 
  14
+ * Copyright (c) 2010 "Cowboy" Ben Alman
  15
+ * Dual licensed under the MIT and GPL licenses.
  16
+ * http://benalman.com/about/license/
  17
+ */
  18
+(function($){var a={},c="doTimeout",d=Array.prototype.slice;$[c]=function(){return b.apply(window,[0].concat(d.call(arguments)))};$.fn[c]=function(){var f=d.call(arguments),e=b.apply(this,[c+f[0]].concat(f));return typeof f[0]==="number"||typeof f[1]==="number"?this:e};function b(l){var m=this,h,k={},g=l?$.fn:$,n=arguments,i=4,f=n[1],j=n[2],p=n[3];if(typeof f!=="string"){i--;f=l=0;j=n[1];p=n[2]}if(l){h=m.eq(0);h.data(l,k=h.data(l)||{})}else{if(f){k=a[f]||(a[f]={})}}k.id&&clearTimeout(k.id);delete k.id;function e(){if(l){h.removeData(l)}else{if(f){delete a[f]}}}function o(){k.id=setTimeout(function(){k.fn()},j)}if(p){k.fn=function(q){if(typeof p==="string"){p=g[p]}p.apply(m,d.call(n,i))===true&&!q?o():e()};o()}else{if(k.fn){j===undefined?e():k.fn(j===false);return true}else{e()}}}})(jQuery);
  19
+
  20
+
  21
+	
8 22
 (function($) {
9 23
 
10 24
 	var methods = {
@@ -42,7 +56,8 @@
42 56
     				]
43 57
     			],
44 58
       		'fix-toolbar-on-top': true,
45  
-      		'left-toolbar': false
  59
+      		'left-toolbar': false,
  60
+      		'auto-hide-toolbar': false
46 61
     		}, options);
47 62
 
48 63
 			return this.each(function() {
@@ -127,7 +142,43 @@
127 142
 				});
128 143
 
129 144
 				var $contenteditable = $('<div class="html5-editor" contenteditable="true"></div>').appendTo($editorContainer);
130  
-				$contenteditable.bind('blur', function() { $this.val($(this).html()); });
  145
+				
  146
+				$toolbar.data('auto-hide-toolbar', settings['auto-hide-toolbar']);
  147
+				$toolbar.data('clicked', false);
  148
+				
  149
+				if (settings['auto-hide-toolbar']) {
  150
+					$toolbar.hide();
  151
+					
  152
+					$contenteditable.focus(function () {
  153
+						// ensure that all toolbars with auto-hide-toolbar at true are hidden
  154
+						$('.html5-editor-container .toolbar').each(function () {
  155
+							if ($(this).data('auto-hide-toolbar') && ! $(this).is($toolbar)) $(this).fadeOut();
  156
+						});
  157
+						// show toolbar on focus
  158
+						$toolbar.fadeIn();
  159
+					});
  160
+				}
  161
+				
  162
+				$contenteditable.blur(function() {
  163
+					$this.val($(this).html());
  164
+					
  165
+					if (settings['auto-hide-toolbar']) {
  166
+						/*
  167
+						 * if ather 250ms the toolbar was not clicked, hide it
  168
+						 * TODO: find a better way do to this, didn't hide toolbar when editor lose focus for the toolbar 
  169
+						 */
  170
+						$.doTimeout(250, function() {
  171
+							if (! $toolbar.data('clicked')) $toolbar.fadeOut();
  172
+							$toolbar.data('clicked', false);
  173
+						});
  174
+					}
  175
+				});
  176
+				
  177
+				$toolbar.find('ul li a').click(function () {
  178
+					// save the clicked status of the toolbar				
  179
+					$toolbar.data('clicked', true);
  180
+				});
  181
+				
131 182
 				$contenteditable.html($this.val());
132 183
 				$this.hide();
133 184
 				
@@ -205,25 +256,27 @@
205 256
       var $this = $(this);
206 257
       var origPosition = $this.css('position');
207 258
       $(window).scroll(function() {
208  
-        if ($(window).scrollTop() > $this.parent().offset().top && (($(window).scrollTop() < $this.parent().offset().top + $this.parent().height() - $this.height()) || settings['left-toolbar'])) {
209  
-          if (!$this.hasClass('fixed')) {
210  
-            $this.addClass('fixed');
211  
-            if (settings['left-toolbar']) {
212  
-	            // translate container local left coordinate to global (browser) coordinate for fixed position
213  
-	            var newLeft = $this.offset().left + $this.parent().offset().left;
214  
-	      			$this.css('left', newLeft);
215  
-	      		}
216  
-          }
217  
-        } else {
218  
-          if ($this.hasClass('fixed')) {
219  
-          	if (settings['left-toolbar']) {
220  
-	          	// translate container global left coordinate to local coordinate
221  
-	          	var newLeft = $this.offset().left - $this.parent().offset().left;
222  
-	      			$this.css('left', newLeft);
223  
-      			}
224  
-            $this.removeClass('fixed');
225  
-          }
226  
-        }
  259
+      	if ($this.is(':visible')) {
  260
+	        if ($(window).scrollTop() > $this.parent().offset().top && ($(window).scrollTop() < $this.parent().offset().top + $this.parent().height())) {
  261
+	          if (!$this.hasClass('fixed')) {
  262
+	            $this.addClass('fixed');
  263
+	            if (settings['left-toolbar']) {
  264
+		            // translate container local left coordinate to global (browser) coordinate for fixed position
  265
+		            var newLeft = $this.offset().left + $this.parent().offset().left;
  266
+		      			$this.css('left', newLeft);
  267
+		      		}
  268
+	          }
  269
+	        } else {
  270
+	          if ($this.hasClass('fixed')) {
  271
+	          	if (settings['left-toolbar']) {
  272
+		          	// translate container global left coordinate to local coordinate
  273
+		          	var newLeft = $this.offset().left - $this.parent().offset().left;
  274
+		      			$this.css('left', newLeft);
  275
+	      			}
  276
+	            $this.removeClass('fixed');
  277
+	          }
  278
+	        }
  279
+	      }
227 280
       });
228 281
 		});
229 282
 	};

No commit comments for this range

Something went wrong with that request. Please try again.