issue46, added a javascript-based slider to modify slide-interval

git-svn-id: file:///var/lib/svn/phpfspot/trunk@242 fa6a889d-dae6-447d-9e79-4ba9a3039384

15 files changed, 492 insertions, 0 deletions

diff --git a/slider/css/bluecurve/bluecurve.css b/slider/css/bluecurve/bluecurve.css
new file mode 100644
index 0000000..6867382
--- /dev/null
+++ b/slider/css/bluecurve/bluecurve.css
@@ -0,0 +1,79 @@
+/*

+	back:	rgb(230,230,230)

+	dark:	rgb(90,97,90)

+	medium	rgb(189,190,189)

+	*/

+

+.dynamic-slider-control {

+	position:			relative;

+	-moz-user-focus:	normal;

+	-moz-user-select:	none;

+	cursor:				default;

+}

+

+.horizontal {

+	width:				200px;

+	height:				27px;

+}

+

+.vertical {

+	width:				29px;

+	height:				200px;

+}

+

+.dynamic-slider-control input {

+	display:	none;

+}

+

+.dynamic-slider-control .handle {

+	position:			absolute;	

+	font-size:			1px;

+	overflow:			hidden;

+	-moz-user-select:	none;

+	cursor:				default;

+}

+

+.dynamic-slider-control.horizontal .handle {

+	width:				31px;

+	height:				14px;

+	background-image:	url("handle.horizontal.png");

+}

+

+.dynamic-slider-control.horizontal .handle div {}

+.dynamic-slider-control.horizontal .handle.hover {}

+

+.dynamic-slider-control.vertical .handle {

+	width:				15px;

+	height:				31px;

+	background-image:	url("handle.vertical.png");

+}

+

+.dynamic-slider-control.vertical .handle.hover {}

+

+.dynamic-slider-control .line {

+	position:			absolute;

+	font-size:			0.01mm;

+	overflow:			hidden;

+	border:				1px solid rgb(90,97,90);

+	background:			rgb(189,190,189);

+	

+	behavior:			url("css/boxsizing.htc"); /* ie path bug */

+	box-sizing:			content-box;

+	-moz-box-sizing:	content-box;

+}

+.dynamic-slider-control.vertical .line {

+	width:				3px;

+}

+

+.dynamic-slider-control.horizontal .line {

+	height:				3px;

+}

+

+.dynamic-slider-control .line div {

+	width:		1px;

+	height:		1px;

+	

+	border:				1px solid;

+	border-color:		rgb(230,230,230) rgb(189,190,189)

+						rgb(189,190,189) rgb(230,230,230);

+}

diff --git a/slider/css/bluecurve/handle.horizontal.png b/slider/css/bluecurve/handle.horizontal.png
new file mode 100644
index 0000000..d9dc7ff
--- /dev/null
+++ b/slider/css/bluecurve/handle.horizontal.png
diff --git a/slider/css/bluecurve/handle.vertical.png b/slider/css/bluecurve/handle.vertical.png
new file mode 100644
index 0000000..0c00f85
--- /dev/null
+++ b/slider/css/bluecurve/handle.vertical.png
diff --git a/slider/css/bluecurve/horizontal.gif b/slider/css/bluecurve/horizontal.gif
new file mode 100644
index 0000000..39d816b
--- /dev/null
+++ b/slider/css/bluecurve/horizontal.gif
diff --git a/slider/css/bluecurve/vertical.gif b/slider/css/bluecurve/vertical.gif
new file mode 100644
index 0000000..781eaac
--- /dev/null
+++ b/slider/css/bluecurve/vertical.gif
diff --git a/slider/css/boxsizing.htc b/slider/css/boxsizing.htc
new file mode 100644
index 0000000..fbeaa56
--- /dev/null
+++ b/slider/css/boxsizing.htc
@@ -0,0 +1,157 @@
+<component lightWeight="true">

+<attach event="onpropertychange" onevent="checkPropertyChange()" />

+<attach event="ondetach" onevent="restore()" />

+<script>

+//<![CDATA[

+

+var doc = element.document;

+

+function init() {

+	updateBorderBoxWidth();

+	updateBorderBoxHeight();

+}

+

+function restore() {

+	element.runtimeStyle.width = "";

+	element.runtimeStyle.height = "";

+}

+

+/* border width getters */

+function getBorderWidth(sSide) {

+	if (element.currentStyle["border" + sSide + "Style"] == "none")

+		return 0;

+	var n = parseInt(element.currentStyle["border" + sSide + "Width"]);

+	return n || 0;

+}

+

+function getBorderLeftWidth() { return getBorderWidth("Left"); }

+function getBorderRightWidth() { return getBorderWidth("Right"); }

+function getBorderTopWidth() { return getBorderWidth("Top"); }

+function getBorderBottomWidth() { return getBorderWidth("Bottom"); }

+/* end border width getters */

+

+/* padding getters */

+function getPadding(sSide) {

+	var n = parseInt(element.currentStyle["padding" + sSide]);

+	return n || 0;

+}

+

+function getPaddingLeft() { return getPadding("Left"); }

+function getPaddingRight() { return getPadding("Right"); }

+function getPaddingTop() { return getPadding("Top"); }

+function getPaddingBottom() { return getPadding("Bottom"); }

+/* end padding getters */

+

+function getBoxSizing() {

+	var s = element.style;

+	var cs = element.currentStyle

+

+	if (typeof s.boxSizing != "undefined" && s.boxSizing != "")

+		return s.boxSizing;

+	if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")

+		return s["box-sizing"];

+	if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")

+		return cs.boxSizing;

+	if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")

+		return cs["box-sizing"];

+	return getDocumentBoxSizing();

+}

+

+function getDocumentBoxSizing() {

+	if (doc.compatMode == null || doc.compatMode == "BackCompat")

+		return "border-box";

+	return "content-box"

+}

+

+/* width and height setters */

+function setBorderBoxWidth(n) {

+	element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -

+		getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";

+}

+

+function setBorderBoxHeight(n) {

+	element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -

+		getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";

+}

+

+function setContentBoxWidth(n) {

+	element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +

+		getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";

+}

+

+function setContentBoxHeight(n) {

+	element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +

+		getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";

+}

+/* end width and height setters */

+

+function updateBorderBoxWidth() {

+	element.runtimeStyle.width = "";

+	if (getDocumentBoxSizing() == getBoxSizing())

+		return;

+	var csw = element.currentStyle.width;

+	if (csw != "auto" && csw.indexOf("px") != -1) {

+		if (getBoxSizing() == "border-box")

+			setBorderBoxWidth(parseInt(csw));

+		else

+			setContentBoxWidth(parseInt(csw));

+	}

+}

+

+function updateBorderBoxHeight() {

+	element.runtimeStyle.height = "";	

+	if (getDocumentBoxSizing() == getBoxSizing())

+		return;

+	var csh = element.currentStyle.height;

+	if (csh != "auto" && csh.indexOf("px") != -1) {

+		if (getBoxSizing() == "border-box")

+			setBorderBoxHeight(parseInt(csh));

+		else

+			setContentBoxHeight(parseInt(csh));

+	}

+}

+

+function checkPropertyChange() {

+	var pn = event.propertyName;

+	var undef;

+

+	if (pn == "style.boxSizing" && element.style.boxSizing == "") {

+		element.style.removeAttribute("boxSizing");

+		element.runtimeStyle.boxSizing = undef;		

+	}

+

+

+	switch (pn) {

+		case "style.width":

+		case "style.borderLeftWidth":

+		case "style.borderLeftStyle":

+		case "style.borderRightWidth":

+		case "style.borderRightStyle":

+		case "style.paddingLeft":

+		case "style.paddingRight":

+			updateBorderBoxWidth();

+			break;

+		

+		case "style.height":

+		case "style.borderTopWidth":

+		case "style.borderTopStyle":

+		case "style.borderBottomWidth":

+		case "style.borderBottomStyle":

+		case "style.paddingTop":

+		case "style.paddingBottom":

+			updateBorderBoxHeight();

+			break;

+		

+		case "className":

+		case "style.boxSizing":

+			updateBorderBoxWidth();

+			updateBorderBoxHeight();

+			break;

+	}

+}

+

+init();

+

+//]]>

+</script>

+</component>
\ No newline at end of file
diff --git a/slider/css/luna/handle.horizontal.hover.png b/slider/css/luna/handle.horizontal.hover.png
new file mode 100644
index 0000000..d2fd059
--- /dev/null
+++ b/slider/css/luna/handle.horizontal.hover.png
diff --git a/slider/css/luna/handle.horizontal.png b/slider/css/luna/handle.horizontal.png
new file mode 100644
index 0000000..b3af6bb
--- /dev/null
+++ b/slider/css/luna/handle.horizontal.png
diff --git a/slider/css/luna/handle.vertical.hover.png b/slider/css/luna/handle.vertical.hover.png
new file mode 100644
index 0000000..379cdc2
--- /dev/null
+++ b/slider/css/luna/handle.vertical.hover.png
diff --git a/slider/css/luna/handle.vertical.png b/slider/css/luna/handle.vertical.png
new file mode 100644
index 0000000..537135e
--- /dev/null
+++ b/slider/css/luna/handle.vertical.png
diff --git a/slider/css/luna/luna.css b/slider/css/luna/luna.css
new file mode 100644
index 0000000..25597da
--- /dev/null
+++ b/slider/css/luna/luna.css
@@ -0,0 +1,75 @@
+.dynamic-slider-control {

+	position:			relative;

+	background-color:	ThreeDFace;

+	-moz-user-focus:	normal;

+	-moz-user-select:	none;

+	cursor:				default;

+}

+

+.horizontal {

+	width:				200px;

+	height:				27px;

+}

+

+.vertical {

+	width:				29px;

+	height:				200px;

+}

+

+.dynamic-slider-control input {

+	display:	none;

+}

+

+.dynamic-slider-control .handle {

+	position:			absolute;	

+	font-size:			1px;

+	overflow:			hidden;

+	-moz-user-select:	none;

+	cursor:				default;

+}

+

+.dynamic-slider-control.horizontal .handle {

+	width:				11px;

+	height:				21px;

+	background-image:	url("handle.horizontal.png");

+}

+

+.dynamic-slider-control.horizontal .handle div {}

+.dynamic-slider-control.horizontal .handle.hover {

+	background-image:	url("handle.horizontal.hover.png");

+}

+

+.dynamic-slider-control.vertical .handle {

+	width:				25px;

+	height:				13px;

+	background-image:	url("handle.vertical.png");

+}

+

+.dynamic-slider-control.vertical .handle.hover {

+	background-image:	url("handle.vertical.hover.png");

+}

+

+.dynamic-slider-control .line {

+	position:			absolute;

+	font-size:			0.01mm;

+	overflow:			hidden;

+	border:				1px solid;

+	border-color:		ThreeDShadow ThreeDHighlight

+						ThreeDHighlight ThreeDShadow;

+	-moz-border-radius:	50%;

+	

+	behavior:			url("css/boxsizing.htc"); /* ie path bug */

+	box-sizing:			content-box;

+	-moz-box-sizing:	content-box;

+}

+.dynamic-slider-control.vertical .line {

+	width:				2px;

+}

+

+.dynamic-slider-control.horizontal .line {

+	height:				2px;

+}

+

+.dynamic-slider-control .line div {

+	display:	none;

+}
\ No newline at end of file
diff --git a/slider/css/swing/handle.horizontal.png b/slider/css/swing/handle.horizontal.png
new file mode 100644
index 0000000..6c7fb90
--- /dev/null
+++ b/slider/css/swing/handle.horizontal.png
diff --git a/slider/css/swing/handle.vertical.png b/slider/css/swing/handle.vertical.png
new file mode 100644
index 0000000..ca1ac4a
--- /dev/null
+++ b/slider/css/swing/handle.vertical.png
diff --git a/slider/css/swing/swing.css b/slider/css/swing/swing.css
new file mode 100644
index 0000000..53ba9f2
--- /dev/null
+++ b/slider/css/swing/swing.css
@@ -0,0 +1,82 @@
+/*

+	dark rgb(102,102,102)

+	medium	rgb(152,153,153)

+	gray:	rgb(204,204,204)

+	bright: white;

+	*/

+

+.dynamic-slider-control {

+	position:			relative;

+	background-color:	rgb(204,204,204);

+	-moz-user-focus:	normal;

+	-moz-user-select:	none;

+	cursor:				default;

+}

+

+.horizontal {

+	width:				200px;

+	height:				27px;

+}

+

+.vertical {

+	width:				29px;

+	height:				200px;

+}

+

+.dynamic-slider-control input {

+	display:	none;

+}

+

+.dynamic-slider-control .handle {

+	position:			absolute;	

+	font-size:			1px;

+	overflow:			hidden;

+	-moz-user-select:	none;

+	cursor:				default;

+}

+

+.dynamic-slider-control.horizontal .handle {

+	width:				15px;

+	height:				16px;

+	background-image:	url("handle.horizontal.png");

+}

+

+.dynamic-slider-control.horizontal .handle div {}

+.dynamic-slider-control.horizontal .handle.hover {}

+

+.dynamic-slider-control.vertical .handle {

+	width:				16px;

+	height:				15px;

+	background-image:	url("handle.vertical.png");

+}

+

+.dynamic-slider-control.vertical .handle.hover {}

+

+.dynamic-slider-control .line {

+	position:			absolute;

+	font-size:			0.01mm;

+	overflow:			hidden;

+	border:				1px solid;

+	border-color:		rgb(102,102,102) white

+						white rgb(102,102,102);

+	

+	behavior:			url("css/boxsizing.htc"); /* ie path bug */

+	box-sizing:			content-box;

+	-moz-box-sizing:	content-box;

+}

+.dynamic-slider-control.vertical .line {

+	width:				4px;

+}

+

+.dynamic-slider-control.horizontal .line {

+	height:				4px;

+}

+

+.dynamic-slider-control .line div {

+	width:		2px;

+	height:		2px;

+	

+	border:				1px solid;

+	border-color:		rgb(152,153,153) rgb(102,102,102)

+						rgb(102,102,102) rgb(152,153,153);

+}
\ No newline at end of file
diff --git a/slider/css/winclassic.css b/slider/css/winclassic.css
new file mode 100644
index 0000000..4b005a5
--- /dev/null
+++ b/slider/css/winclassic.css
@@ -0,0 +1,99 @@
+.dynamic-slider-control {

+	position:			relative;

+	background-color:	ThreeDFace;

+	-moz-user-focus:	normal;

+	-moz-user-select:	none;

+	cursor:				default;

+}

+

+.horizontal {

+	width:				200px;

+	height:				29px;

+}

+

+.vertical {

+	width:				29px;

+	height:				200px;

+}

+

+.dynamic-slider-control input {

+	display:	none;

+}

+

+.dynamic-slider-control .handle {

+	position:			absolute;

+	-moz-user-select:	none;

+	cursor:				default;

+	background:			ThreeDFace;

+	border:				1px solid;

+	border-color:		ThreeDHighlight ThreeDDarkShadow

+						ThreeDDarkShadow ThreeDHighlight;

+}

+

+/* inner border */

+.dynamic-slider-control .handle div {

+	font-size:			1px;

+	border:				1px solid;

+	border-color:		ThreeDLightShadow ThreeDShadow

+						ThreeDShadow ThreeDLightShadow;	

+

+	behavior:			url("css/boxsizing.htc");	/* ie path bug */

+	box-sizing:			content-box;

+	-moz-box-sizing:	content-box;

+}

+

+/*	inner sets size

+.dynamic-slider-control.horizontal .handle {

+	width:				12px;

+	height:				22px;

+}

+*/

+

+.dynamic-slider-control.horizontal .handle div {

+	width:				8px;

+	height:				18px;

+}

+

+.dynamic-slider-control.horizontal .handle.hover {}

+

+/* inner sets size

+.dynamic-slider-control.vertical .handle {

+	width:				22px;

+	height:				12px;

+}

+*/

+

+.dynamic-slider-control.vertical .handle div {

+	width:				18px;

+	height:				8px;

+}

+

+.dynamic-slider-control.vertical .handle.hover {}

+

+.dynamic-slider-control .line {

+	

+	behavior:			url("css/boxsizing.htc"); /* ie path bug */

+	box-sizing:			content-box;

+	-moz-box-sizing:	content-box;

+		

+	position:			absolute;

+	font-size:			0.01mm;

+	overflow:			hidden;

+	border:				1px solid;

+	border-color:		ThreeDShadow ThreeDHighlight

+						ThreeDHighlight ThreeDShadow;

+	background:			ThreeDDarkShadow;

+}

+

+.dynamic-slider-control.vertical .line {

+	width:				1px;

+	

+}

+

+.dynamic-slider-control.horizontal .line {

+	height:				1px;

+}

+

+.dynamic-slider-control .line div {

+	display:	none;

+}
\ No newline at end of file