mirror of
https://github.com/e107inc/e107.git
synced 2025-08-03 21:27:25 +02:00
Move JS folder
This commit is contained in:
Cameron
295
e107_web/js/core/shadow.js
Normal file
295
e107_web/js/core/shadow.js
Normal file
@@ -0,0 +1,295 @@
|
||||
|
||||
/**
|
||||
* Global prefs
|
||||
*/
|
||||
e107Base.setPrefs('core-shadow', {
|
||||
theme: "e107_shadow",
|
||||
focus: false,
|
||||
zIndex: 100
|
||||
});
|
||||
|
||||
/*
|
||||
* Class: e107Widgets.Shadow Add shadow around a DOM element. The element MUST BE in
|
||||
* ABSOLUTE position.
|
||||
*
|
||||
* Shadow can be skinned by CSS (see e107_shadow.css). CSS
|
||||
* must be included to see shadow.
|
||||
*
|
||||
* A shadow can have two states: focused and blur. Shadow shifts are set in CSS
|
||||
* file as margin and padding of shadow_container to add visual information.
|
||||
*
|
||||
* Example: new e107Widgets.Shadow("element_id");
|
||||
*/
|
||||
e107Widgets.Shadow = Class.create(e107WidgetAbstract, {
|
||||
/*
|
||||
* Method: initialize Constructor, adds shadow elements to the DOM if
|
||||
* element is in the DOM. Element MUST BE in ABSOLUTE position.
|
||||
* Parameters: element - DOM element options - Hashmap of options -
|
||||
* theme (default: mac_shadow) - focus (default: true) - zIndex
|
||||
* (default: 100)
|
||||
*/
|
||||
initialize: function(element, options) {
|
||||
this.initMod('core-shadow', options);
|
||||
|
||||
this.element = $(element);
|
||||
this.create();
|
||||
this.iframe = e107API.Browser.IE && e107API.Browser.IE < 7 ? new e107Utils.IframeShim() : null;
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: destroy Destructor, removes elements from the DOM
|
||||
*/
|
||||
destroy: function() {
|
||||
if (this.shadow.parentNode)
|
||||
this.remove();
|
||||
},
|
||||
|
||||
// Group: Size and Position
|
||||
/*
|
||||
* Method: setPosition Sets top/left shadow position in pixels
|
||||
* Parameters: top - top position in pixel left - left position in pixel
|
||||
*/
|
||||
setPosition: function(top, left) {
|
||||
if (this.shadowSize) {
|
||||
var shadowStyle = this.shadow.style;
|
||||
top = parseInt(top) - this.shadowSize.top + this.shadowShift.top;
|
||||
left = parseInt(left) - this.shadowSize.left + this.shadowShift.left;
|
||||
shadowStyle.top = top + 'px';
|
||||
shadowStyle.left = left + 'px';
|
||||
if (this.iframe)
|
||||
this.iframe.setPosition(top, left);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: setSize Sets width/height shadow in pixels
|
||||
* Parameters: width - width in pixel height - height in pixel
|
||||
*/
|
||||
setSize: function(width, height) {
|
||||
if (this.shadowSize) {
|
||||
try {
|
||||
var w = Math.max(0, parseInt(width) + this.shadowSize.width - this.shadowShift.width) + "px";
|
||||
this.shadow.style.width = w;
|
||||
var h = Math.max(0, parseInt(height) - this.shadowShift.height) + "px";
|
||||
|
||||
// this.shadowContents[1].style.height = h;
|
||||
this.shadowContents[1].childElements().each(function(e) {
|
||||
e.style.height = h
|
||||
});
|
||||
this.shadowContents.each(function(item) {
|
||||
item.style.width = w
|
||||
});
|
||||
if (this.iframe)
|
||||
this.iframe.setSize(width + this.shadowSize.width - this.shadowShift.width, height + this.shadowSize.height - this.shadowShift.height);
|
||||
|
||||
} catch (e) {
|
||||
// IE could throw an exception if called to early
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: setBounds Sets shadow bounds in pixels
|
||||
* Parameters: bounds - an Hash {top:, left:, width:, height:}
|
||||
*/
|
||||
setBounds: function(bounds) {
|
||||
return this.setPosition(bounds.top, bounds.left).setSize(bounds.width, bounds.height);
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: setZIndex Sets shadow z-index
|
||||
* Parameters: zIndex - zIndex value
|
||||
*/
|
||||
setZIndex: function(zIndex) {
|
||||
this.shadow.style.zIndex = zIndex;
|
||||
return this;
|
||||
},
|
||||
|
||||
// Group: Render
|
||||
/*
|
||||
* Method: show Displays shadow
|
||||
*/
|
||||
show: function() {
|
||||
this.render();
|
||||
this.shadow.show();
|
||||
if (this.iframe)
|
||||
this.iframe.show();
|
||||
return this;
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: hide Hides shadow
|
||||
*/
|
||||
hide: function() {
|
||||
this.shadow.hide();
|
||||
if (this.iframe)
|
||||
this.iframe.hide();
|
||||
return this;
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: remove Removes shadow from the DOM
|
||||
*/
|
||||
remove: function() {
|
||||
this.shadow.remove();
|
||||
return this;
|
||||
},
|
||||
|
||||
// Group: Status
|
||||
/*
|
||||
* Method: focus Focus shadow.
|
||||
* Change shadow shift. Shift values are set in CSS file as margin and
|
||||
* padding of shadow_container to add visual information of shadow
|
||||
* status.
|
||||
*/
|
||||
focus: function() {
|
||||
this.options.focus = true;
|
||||
this.updateShadow();
|
||||
return this;
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: blur Blurs shadow.
|
||||
* Change shadow shift. Shift values are set in CSS file as margin and
|
||||
* padding of shadow_container to add visual information of shadow
|
||||
* status.
|
||||
*/
|
||||
blur: function() {
|
||||
this.options.focus = false;
|
||||
this.updateShadow();
|
||||
return this;
|
||||
},
|
||||
|
||||
// Private Functions
|
||||
// Adds shadow elements to DOM, computes shadow size and displays it
|
||||
render: function() {
|
||||
if (this.element.parentNode && !Object.isElement(this.shadow.parentNode)) {
|
||||
this.element.parentNode.appendChild(this.shadow);
|
||||
this.computeSize();
|
||||
this.setBounds(Object.extend(this.element.getDimensions(), this.getElementPosition()));
|
||||
this.shadow.show();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
// Creates HTML elements without inserting them into the DOM
|
||||
create: function() {
|
||||
var zIndex = this.element.getStyle('zIndex');
|
||||
zIndex = (zIndex || this.options.zIndex) - 1;
|
||||
this.element.setStyle( {
|
||||
zIndex: zIndex
|
||||
});
|
||||
|
||||
this.shadowContents = new Array(3);
|
||||
this.shadowContents[0] = new Element("div").insert(new Element("div", {
|
||||
className: "shadow_center_wrapper"
|
||||
}).insert(new Element("div", {
|
||||
className: "n_shadow"
|
||||
}))).insert(new Element("div", {
|
||||
className: "shadow_right ne_shadow"
|
||||
})).insert(new Element("div", {
|
||||
className: "shadow_left nw_shadow"
|
||||
}));
|
||||
|
||||
this.shadowContents[1] = new Element("div").insert(new Element("div", {
|
||||
className: "shadow_center_wrapper c_shadow"
|
||||
})).insert(new Element("div", {
|
||||
className: "shadow_right e_shadow"
|
||||
})).insert(new Element("div", {
|
||||
className: "shadow_left w_shadow"
|
||||
}));
|
||||
this.centerElements = this.shadowContents[1].childElements();
|
||||
|
||||
this.shadowContents[2] = new Element("div").insert(new Element("div", {
|
||||
className: "shadow_center_wrapper"
|
||||
}).insert(new Element("div", {
|
||||
className: "s_shadow"
|
||||
}))).insert(new Element("div", {
|
||||
className: "shadow_right se_shadow"
|
||||
})).insert(new Element("div", {
|
||||
className: "shadow_left sw_shadow"
|
||||
}));
|
||||
|
||||
this.shadow = new Element("div", {
|
||||
className: "shadow_container " + this.options.theme,
|
||||
style: "position:absolute; top:-10000px; left:-10000px; display:none; z-index:" + zIndex
|
||||
}).insert(this.shadowContents[0]).insert(this.shadowContents[1]).insert(this.shadowContents[2]);
|
||||
},
|
||||
|
||||
// Compute shadow size
|
||||
computeSize: function() {
|
||||
if (this.focusedShadowShift)
|
||||
return;
|
||||
this.shadow.show();
|
||||
|
||||
// Trick to get shadow shift designed in CSS as padding
|
||||
var content = this.shadowContents[1].select("div.c_shadow").first();
|
||||
this.unfocusedShadowShift = {};
|
||||
this.focusedShadowShift = {};
|
||||
|
||||
$w("top left bottom right").each(function(pos) {
|
||||
this.unfocusedShadowShift[pos] = content.getNumStyle("padding-" + pos) || 0
|
||||
}.bind(this));
|
||||
this.unfocusedShadowShift.width = this.unfocusedShadowShift.left + this.unfocusedShadowShift.right;
|
||||
this.unfocusedShadowShift.height = this.unfocusedShadowShift.top + this.unfocusedShadowShift.bottom;
|
||||
|
||||
$w("top left bottom right").each(function(pos) {
|
||||
this.focusedShadowShift[pos] = content.getNumStyle("margin-" + pos) || 0
|
||||
}.bind(this));
|
||||
this.focusedShadowShift.width = this.focusedShadowShift.left + this.focusedShadowShift.right;
|
||||
this.focusedShadowShift.height = this.focusedShadowShift.top + this.focusedShadowShift.bottom;
|
||||
|
||||
this.shadowShift = this.options.focus ? this.focusedShadowShift : this.unfocusedShadowShift;
|
||||
|
||||
// Get shadow size
|
||||
this.shadowSize = {
|
||||
top: this.shadowContents[0].childElements()[1].getNumStyle("height"),
|
||||
left: this.shadowContents[0].childElements()[1].getNumStyle("width"),
|
||||
bottom: this.shadowContents[2].childElements()[1].getNumStyle("height"),
|
||||
right: this.shadowContents[0].childElements()[2].getNumStyle("width")
|
||||
};
|
||||
|
||||
this.shadowSize.width = this.shadowSize.left + this.shadowSize.right;
|
||||
this.shadowSize.height = this.shadowSize.top + this.shadowSize.bottom;
|
||||
|
||||
// Remove padding
|
||||
content.setStyle("padding:0; margin:0");
|
||||
this.shadow.hide();
|
||||
},
|
||||
|
||||
// Update shadow size (called when it changes from focused to blur and
|
||||
// vice-versa)
|
||||
updateShadow: function() {
|
||||
this.shadowShift = this.options.focus ? this.focusedShadowShift : this.unfocusedShadowShift;
|
||||
var shadowStyle = this.shadow.style,
|
||||
pos = this.getElementPosition(),
|
||||
size = this.element.getDimensions();
|
||||
|
||||
shadowStyle.top = pos.top - this.shadowSize.top + this.shadowShift.top + 'px';
|
||||
shadowStyle.left = pos.left - this.shadowSize.left + this.shadowShift.left + 'px';
|
||||
shadowStyle.width = size.width + this.shadowSize.width - this.shadowShift.width + "px";
|
||||
|
||||
var h = parseInt(size.height - this.shadowShift.height) + "px";
|
||||
this.centerElements.each(function(e) {
|
||||
e.style.height = h
|
||||
});
|
||||
|
||||
var w = parseInt(size.width + this.shadowSize.width - this.shadowShift.width) + "px";
|
||||
this.shadowContents.each(function(item) {
|
||||
item.style.width = w
|
||||
});
|
||||
},
|
||||
|
||||
// Get element position in integer values
|
||||
getElementPosition: function() {
|
||||
return {
|
||||
top: this.element.getNumStyle("top"),
|
||||
left: this.element.getNumStyle("left")
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user