The smiley popup is now draggable...had to use yet another jQuery plugin, not sure if we want to use many...

Signed-off-by: emanuele <[email protected]>

Themes/default/css/jquery.sceditor.css

@@ -90,6 +90,9 @@ div.sceditor-dropdown, div.sceditor-dropdown div {
 		div.sceditor-insertemail {
 			padding: 5px;
 		}
+		div.sceditor-dropdown {
+			margin: 0;
+		}
 		.sceditor-insertemoticon img, .sceditor-smileyPopup img {
 			cursor: pointer;
 			margin: 2px;
@@ -185,7 +188,15 @@ div.sceditor-dropdown, div.sceditor-dropdown div {
 		.sceditor-button:hover { background: #eee; }
 			.sceditor-button-emoticon { display:none; }
 
+.sceditor-popup-grip {
+	display: block;
+	height: 15px;
+}
+
 /* SMF buttons styles */
+.sceditor-button-source div {
+	background: url('../images/bbc/toggle.png');
+}
 .sceditor-button-font div {
 	background: url('../images/bbc/font.png');
 }

Themes/default/scripts/jquery.sceditor.js

@@ -2608,7 +2608,7 @@
 		createPermanentDropDown: function() {
 				var	emoticons	= $.extend({}, this.options.emoticons.dropdown);
 				var popup_exists = false;
-				content = $('<div />').attr({class: "sceditor-insertemoticon"});
+				content = $('<div class="sceditor-insertemoticon" />');
 				line = $('<div />');
 
 				base = this;
@@ -2620,7 +2620,7 @@
 				if (popup_exists)
 				{
 					this.options.emoticons.more = this.options.emoticons.popup;
-					moreButton = $('<div />').attr({class: "sceditor-more"}).text('[' + this._('More') + ']').click(function () {
+					moreButton = $('<div class="sceditor-more-button" />').attr({class: "sceditor-more"}).text('[' + this._('More') + ']').click(function () {
 						if ($(".sceditor-smileyPopup").length > 0)
 						{
 							$(".sceditor-smileyPopup").fadeIn('fast');
@@ -2628,9 +2628,11 @@
 						else
 						{
 							var emoticons = $.extend({}, base.options.emoticons.popup);
-							var basement = $('<div />').attr({class: "sceditor-popup"});
+							var popup_position;
+							var titlebar = $('<div class="catbg sceditor-popup-grip"/>');
+								popupContent = $('<div id="sceditor-popup"/>');
 								allowHide = true;
-								popupContent = $('<div />');
+								popupContent.append(titlebar);
 								line = $('<div />');
 								closeButton = $('<span />').text('[' + base._('Close') + ']').click(function () {
 									$(".sceditor-smileyPopup").fadeOut('fast');
@@ -2661,6 +2663,11 @@
 								"max-width": "50%"
 							});
 
+							$('.sceditor-smileyPopup').animaDrag({ 
+								speed: 150, 
+								interval: 120, 
+								grip: '.sceditor-popup-grip' 
+							});
 							// stop clicks within the dropdown from being handled
 							$dropdown.click(function (e) {
 								e.stopPropagation();
@@ -2746,3 +2753,116 @@ $.sceditor.setCommand(
 	},
 	'Pre'
 );
+
+/**
+ * AnimaDrag
+ * Animated jQuery Drag and Drop Plugin
+ * Version 0.5.1 beta
+ * Author Abel Mohler
+ * Released with the MIT License: http://www.opensource.org/licenses/mit-license.php
+ */
+(function($){
+	$.fn.animaDrag = function(o, callback) {
+		var defaults = {
+			speed: 400,
+			interval: 300,
+			easing: null,
+			cursor: 'move',
+			boundary: document.body,
+			grip: null,
+			overlay: true,
+			after: function(e) {},
+			during: function(e) {},
+			before: function(e) {},
+			afterEachAnimation: function(e) {}
+		}
+		if(typeof callback == 'function') {
+				defaults.after = callback;
+		}
+		o = $.extend(defaults, o || {});
+		return this.each(function() {
+			var id, startX, startY, draggableStartX, draggableStartY, dragging = false, Ev, draggable = this,
+			grip = ($(this).find(o.grip).length > 0) ? $(this).find(o.grip) : $(this);
+			if(o.boundary) {
+				var limitTop = $(o.boundary).offset().top, limitLeft = $(o.boundary).offset().left,
+				limitBottom = limitTop + $(o.boundary).innerHeight(), limitRight = limitLeft + $(o.boundary).innerWidth();
+			}
+			grip.mousedown(function(e) {
+				o.before.call(draggable, e);
+
+				var lastX, lastY;
+				dragging = true;
+
+				Ev = e;
+
+				startX = lastX = e.pageX;
+				startY = lastY = e.pageY;
+				draggableStartX = $(draggable).offset().left;
+				draggableStartY = $(draggable).offset().top;
+
+				$(draggable).css({
+					position: 'absolute',
+					left: draggableStartX + 'px',
+					top: draggableStartY + 'px',
+					cursor: o.cursor,
+					zIndex: '1010'
+				}).addClass('anima-drag').appendTo(document.body);
+				if(o.overlay && $('#anima-drag-overlay').length == 0) {
+					$('<div id="anima-drag-overlay"></div>').css({
+						position: 'absolute',
+						top: '0',
+						left: '0',
+						zIndex: '1000',
+						width: $(document.body).outerWidth() + 'px',
+						height: $(document.body).outerHeight() + 'px'
+					}).appendTo(document.body);
+				}
+				else if(o.overlay) {
+					$('#anima-drag-overlay').show();
+				}
+				id = setInterval(function() {
+					if(lastX != Ev.pageX || lastY != Ev.pageY) {
+						var positionX = draggableStartX - (startX - Ev.pageX), positionY = draggableStartY - (startY - Ev.pageY);
+						if(positionX < limitLeft && o.boundary) {
+							positionX = limitLeft;
+						}
+						else if(positionX + $(draggable).innerWidth() > limitRight && o.boundary) {
+							positionX = limitRight - $(draggable).outerWidth();
+						}
+						if(positionY < limitTop && o.boundary) {
+							positionY = limitTop;
+						}
+						else if(positionY + $(draggable).innerHeight() > limitBottom && o.boundary) {
+							positionY = limitBottom - $(draggable).outerHeight();
+						}
+						$(draggable).stop().animate({
+							left: positionX + 'px',
+							top: positionY + 'px'
+						}, o.speed, o.easing, function(){o.afterEachAnimation.call(draggable, Ev)});
+					}
+					lastX = Ev.pageX;
+					lastY = Ev.pageY;
+				}, o.interval);
+				($.browser.safari || e.preventDefault());
+			});
+			$(document).mousemove(function(e) {
+				if(dragging) {
+					Ev = e;
+					o.during.call(draggable, e);
+				}
+			});
+			$(document).mouseup(function(e) {
+				if(dragging) {
+					$(draggable).css({
+						cursor: '',
+						zIndex: '990'
+					}).removeClass('anima-drag');
+					$('#anima-drag-overlay').hide().appendTo(document.body);
+					clearInterval(id);
+					o.after.call(draggable, e);
+					dragging = false;
+				}
+			});
+		});
+	}
+})(jQuery);