JS Dialog widget (e107 version of Prototype UI Window) - initial import, work in progress

e107_files/jslib/core/dialog/dialog.css

@@ -0,0 +1,86 @@
+.e-dialog {
+  position: absolute;
+}
+
+.e-dialog .move_handle { 
+  cursor:move !important;
+}
+
+/*.e-dialog .e {
+  position: relative;
+}*/
+
+.e-dialog .resize_handle {
+  line-height: 1px;
+  font-size:1px;
+  width: 8px;
+  height: 8px;
+  z-index: 90;
+  position: absolute;
+}
+
+.e-dialog .se_sizer { 
+  cursor: se-resize;
+  z-index: 100;
+  bottom:0;
+  right:0;
+}          
+    
+.e-dialog .sw_sizer { 
+  cursor: sw-resize;
+  z-index: 100;
+  bottom:0;
+  left:0;  
+}
+
+.e-dialog .nw_sizer { 
+  cursor: nw-resize;
+  z-index: 100;
+  top:0;
+  left:0;  
+}
+
+.e-dialog .ne_sizer { 
+  cursor: ne-resize;
+  z-index: 100;
+  top:0;
+  right:0;  
+}
+            
+.e-dialog .n_sizer { 
+  cursor: n-resize;
+  width:100%;
+  top:0;
+  left:0;  
+}
+ 
+.e-dialog .s_sizer { 
+  cursor: s-resize;
+  width: 100%;
+  bottom:0;
+  left:0;
+}
+
+.e-dialog .e_sizer { 
+  cursor: e-resize;
+  height:100%;
+  top:0;
+  right:0;  
+}
+
+.e-dialog .w_sizer { 
+  cursor: w-resize;
+  height:100%;
+  top:0;
+  left:0;  
+}
+
+.e-dialog .content {
+  overflow: auto;
+  position: relative;
+}
+
+html>body .e-dialog .content {
+  /* fixes an unbelievable rendering bug in Safari 2 */
+  border-top: 1px solid transparent;
+}

e107_files/jslib/core/dialog/e107/e107.css

@@ -0,0 +1,194 @@
+.e107 .nw {
+	background:transparent url(icons/top_unactive.gif) no-repeat scroll 0px 0px;
+	height:22px;
+	padding-left:10px;
+}      
+.e107_focused .nw {
+	background:transparent url(icons/top.gif) no-repeat scroll 0px 0px !important;
+}       
+
+.e107 .ne {
+	background:transparent url(icons/top_unactive.gif) no-repeat scroll right -44px;
+	height:22px;
+	padding-right:10px;
+}
+
+.e107_focused .ne {
+	background:transparent url(icons/top.gif) no-repeat scroll right -44px !important;
+}
+
+.e107 .n {
+	background:transparent url(icons/top_unactive.gif) repeat-x scroll right -22px;
+	color:#17385B;
+	font:normal 14px/26px Arial, sans-serif;
+	height:22px;
+	margin:0;
+	padding:0;
+	text-align:center;
+	overflow: hidden;
+	padding-left:60px;
+	line-height: 20px; 
+	color: #000;
+}
+
+.e107_focused .n {
+	background:transparent url(icons/top.gif) repeat-x scroll right -22px !important;
+}
+
+.e107 .content {
+	background:#FFF;
+	color:#000;
+	font:normal 12px/1em Verdana, Arial, sans-serif;
+	overflow:auto;
+}
+
+.e107 .w {
+	border-left:1px solid #DDD;
+	border-right:1px solid #DDD;
+}
+
+.e107 .e {
+	border-left:1px solid #EEE;
+	border-right:1px solid #EEE;
+}
+
+
+.e107 .sw {
+	background:transparent url(icons/bottom_unactive.gif) no-repeat scroll 0 0px;
+	font-size:2px;
+	height:15px;
+	padding-left:12px;
+}
+
+.e107_focused .sw {
+	background:transparent url(icons/bottom.gif) no-repeat scroll 0 0px !important;
+}
+
+.e107 .se {
+	background:transparent url(icons/bottom_unactive.gif) no-repeat scroll right -30px;
+	font-size:2px;
+	height:15px;
+	padding-right:12px;
+}
+
+.e107_focused .se {
+	background:transparent url(icons/bottom.gif) no-repeat scroll right -30px !important;
+}
+
+.e107_focused .se_sizer { 
+  width:12px;
+  height:12px;
+}          
+ 
+.e107 .se_resize_handle {
+	background:transparent url(icons/bottom_unactive.gif) no-repeat scroll right -45px;
+	font-size:2px;
+	height:15px;
+	padding-right:12px;
+}                                                                          
+
+.e107_focused .se_resize_handle {
+	background:transparent url(icons/bottom.gif) no-repeat scroll right -45px !important;
+}
+
+.e107 .s {
+	background:transparent url(icons/bottom_unactive.gif) repeat-x scroll 0 -15px;
+	font-size:12px;
+	line-height:15px;
+	height:15px;
+	overflow:hidden;
+	border: 0 none;
+} 
+
+.e107_focused .s {
+	background:transparent url(icons/bottom.gif) repeat-x scroll 0 -15px !important;
+}
+
+.e107 .buttons {
+  position: absolute;
+  top:1px;
+  right:7px;
+  height: 20px;   
+}
+
+.e107 .buttons a.close {
+  	float:left;
+	background:transparent url(icons/button_unactive.gif) no-repeat 0 0; 
+	background-repeat: no-repeat;
+	height:15px;
+	width:14px;
+	margin: 3px 7px 0 0px;        
+	padding-top:0px; /* padding-top = buttons order, it will be reset to 0, do not use padding, use margin*/       
+	overflow:hidden;
+}
+  
+.e107_focused .buttons a.close {
+	background:transparent url(icons/buttons.gif) no-repeat 0 0 !important;    
+	background-repeat: no-repeat;
+}
+
+.e107 .buttons.over a.close {
+	background:transparent url(icons/buttons_over.gif) no-repeat 0 0px !important; 
+}
+
+.e107 .buttons a.maximize {
+  float:left;
+	background:transparent url(icons/button_unactive.gif) no-repeat 0 0;
+	height:15px;
+	width:14px;
+	margin: 3px 7px 0 0;
+	padding-top:2px; /* padding-top = buttons order, it will be reset to 0, do not use padding, use margin*/ 
+	overflow:hidden;
+}
+  
+.e107_focused .buttons a.maximize {
+	background:transparent url(icons/buttons.gif) no-repeat 0 -30px !important;
+}
+
+.e107 .buttons.over a.maximize {
+	background:transparent url(icons/buttons_over.gif) no-repeat 0 -30px !important;  
+}
+
+.e107 .buttons a.minimize {
+  float:left;
+	background:transparent url(icons/button_unactive.gif) no-repeat 0 0;
+	height:15px;
+	width:14px;
+	margin: 3px 7px 0 0;
+	padding-top:1px; /* padding-top = buttons order, it will be reset to 0, do not use padding, use margin*/ 
+	overflow:hidden;
+}  
+
+.e107_focused .buttons a.minimize {
+	background:transparent url(icons/buttons.gif) no-repeat 0 -15px !important;
+}
+
+.e107 .buttons.over a.minimize {
+	background:transparent url(icons/buttons_over.gif) no-repeat 0 -15px !important;
+}         
+
+.e107 .buttons a.minimize.disabled, .e107 .buttons.over a.minimize.disabled  {
+	background:transparent url(icons/button_unactive.gif) no-repeat 0 0  !important; 
+}
+
+.e107_overlay {
+	position:absolute;
+	top:0;            
+	left:0;
+	width:100%;
+	background-color:#DDD;
+	filter:alpha(opacity=60);
+	opacity: 0.6;
+	-moz-opacity: 0.6;
+}
+
+.e107_wired {
+	position:absolute;
+	border: 3px dashed #f0f0f0;
+	background-color: #fff;
+	filter:alpha(opacity=60);
+	opacity: 0.6;
+	-moz-opacity: 0.6;
+}
+
+

e107_files/jslib/core/draggable.js

@@ -0,0 +1,99 @@
+/*
+ * Prototype UI http://prototype-ui.com/
+ * 
+ * Group: Drag UI provides Element#enableDrag method that allow elements to fire
+ * drag-related events.
+ * 
+ * Events fired: - drag:started : fired when a drag is started (mousedown then
+ * mousemove) - drag:updated : fired when a drag is updated (mousemove) -
+ * drag:ended : fired when a drag is ended (mouseup)
+ * 
+ * Notice it doesn't actually move anything, drag behavior has to be implemented
+ * by attaching handlers to drag events.
+ * 
+ * Drag-related informations: event.memo contains useful information about the
+ * drag occuring: - dx : difference between pointer x position when drag started
+ * and actual x position - dy : difference between pointer y position when drag
+ * started and actual y position - mouseEvent : the original mouse event, useful
+ * to know pointer absolute position, or if key were pressed.
+ * 
+ * Example, with event handling for a specific element: > // Now "resizable"
+ * will fire drag-related events > $('resizable').enableDrag(); > > // Let's
+ * observe them > $('resizable').observe('drag:started', function(event) { >
+ * this._dimensions = this.getDimensions(); > }).observe('drag:updated',
+ * function(event) { > var drag = event.memo; > > this.setStyle({ > width:
+ * this._dimensions.width + drag.dx + 'px', > height: this._dimensions.height +
+ * drag.dy + 'px' > }); > });
+ * 
+ * Example, with event delegating on the whole document: > // All elements in
+ * the having the "draggable" class name will fire drag events. >
+ * $$('.draggable').invoke('enableDrag'); > > document.observe('drag:started',
+ * function(event) { > UI.logger.info('trying to drag ' + event.element().id); >
+ * }):
+ */
+Element.addMethods( {
+	enableDrag : function(element) {
+		return $(element).writeAttribute('draggable');
+	},
+
+	disableDrag : function(element) {
+		return $(element).writeAttribute('draggable', null);
+	},
+
+	isDraggable : function(element) {
+		return $(element).hasAttribute('draggable');
+	}
+});
+
+(function() {
+	var initPointer, draggedElement;
+
+	document.observe('mousedown', function(event) { 
+		if (draggedElement = findDraggable(event.element())) {
+			// prevent default browser action to avoid selecting text for
+			// instance
+			event.preventDefault();
+			initPointer = event.pointer();
+			
+			document.observe('mousemove', startDrag);
+			document.observe('mouseup', cancelDrag);
+		}
+	});
+
+	function findDraggable(element) {
+		while (element && element !== document) {
+			if (element.hasAttribute('draggable'))
+				return element;
+			element = $(element.parentNode);
+		}
+	}
+
+	function startDrag(event) {
+		document.stopObserving('mousemove', startDrag).stopObserving('mouseup', cancelDrag).observe('mousemove', drag).observe('mouseup', endDrag);
+		fire('drag:started', event);
+	}
+
+	function cancelDrag(event) {
+		document.stopObserving('mousemove', startDrag).stopObserving('mouseup', cancelDrag);
+	}
+
+	function drag(event) {
+		fire('drag:updated', event);
+	}
+
+	function endDrag(event) {
+		document.stopObserving('mousemove', drag).stopObserving('mouseup', endDrag);
+
+		fire('drag:ended', event);
+	}
+
+	function fire(eventName, event) {
+		var pointer = event.pointer();
+
+		draggedElement.fire(eventName, {
+			dx : pointer.x - initPointer.x,
+			dy : pointer.y - initPointer.y,
+			mouseEvent : event
+		});
+	}
+})();

e107_files/jslib/e107.js.php

@@ -8,9 +8,9 @@
  * e107 Javascript API
  *
  * $Source: /cvs_backup/e107_0.8/e107_files/jslib/e107.js.php,v $
- * $Revision: 1.38 $
- * $Date: 2009-11-18 01:04:43 $
- * $Author: e107coders $
+ * $Revision: 1.39 $
+ * $Date: 2009-12-16 18:34:01 $
+ * $Author: secretr $
  *
 */
 
@@ -60,10 +60,10 @@ function SyncWithServerTime(serverTime)
  * @desc Retrieve the browser version
  */
 (function() {
-    var nav       = navigator;
-    var userAgent = ua = navigator.userAgent;
-    var v         = nav.appVersion;
-    var version   = parseFloat(v);
+    var nav       = navigator,
+    	userAgent = ua = navigator.userAgent,
+    	v         = nav.appVersion,
+    	version   = parseFloat(v);
 
     e107API.Browser = {
         IE      : (Prototype.Browser.IE)    ? parseFloat(v.split("MSIE ")[1]) || 0 : 0,
@@ -525,7 +525,7 @@ var e107Base = {
     },
 
     getParseData: function (data) {
-        Object.extend(data || {},
+        data = Object.extend(data || {},
           Object.extend(this.getLanVars(), this.getPathVars())
         );
 
@@ -1145,7 +1145,57 @@ Element.addMethods( {
 	downHide: e107Helper.downHide,
 	downShow: e107Helper.downShow,
 	downToggle: e107Helper.downToggle,
-	downExternalLinks: e107Helper.downExternalLinks
+	downExternalLinks: e107Helper.downExternalLinks,
+	
+	// -- more useful extensions - taken from Prototype UI --
+	getScrollDimensions: function(element) {
+	    element = $(element);
+	    return {
+	      width:  element.scrollWidth,
+	      height: element.scrollHeight
+	    }
+	},
+
+	getScrollOffset: function(element) {
+	    element = $(element);
+	    return Element._returnOffset(element.scrollLeft, element.scrollTop);
+	 },
+
+	setScrollOffset: function(element, offset) {
+	    element = $(element);
+	    if (arguments.length == 3)
+	      offset = { left: offset, top: arguments[2] };
+	    element.scrollLeft = offset.left;
+	    element.scrollTop  = offset.top;
+	    return element;
+	},
+
+	// returns "clean" numerical style (without "px") or null if style can not be resolved
+	// or is not numeric
+	getNumStyle: function(element, style) {
+	    var value = parseFloat($(element).getStyle(style));
+	    return isNaN(value) ? null : value;
+	},
+
+	// (http://tobielangel.com/2007/5/22/prototype-quick-tip)
+	appendText: function(element, text) {
+	    element = $(element);
+	    element.appendChild(document.createTextNode(String.interpret(text)));
+	    return element;
+	}
+});
+
+Object.extend(document.viewport, {
+	// Alias this method for consistency
+	getScrollOffset: document.viewport.getScrollOffsets,
+	
+	setScrollOffset: function(offset) {
+		Element.setScrollOffset(Prototype.Browser.WebKit ? document.body : document.documentElement, offset);
+	},
+	
+	getScrollDimensions: function() {
+		return Element.getScrollDimensions(Prototype.Browser.WebKit ? document.body : document.documentElement);
+	}
 });
 
 Element.addMethods('INPUT', {