mirror of
https://github.com/e107inc/e107.git
synced 2025-07-29 02:40:25 +02:00
295 lines
8.7 KiB
JavaScript
295 lines
8.7 KiB
JavaScript
|
|
/**
|
|
* 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")
|
|
}
|
|
}
|
|
});
|
|
|