diff --git a/www/extras/colorpicker/colorpicker.css b/www/extras/colorpicker/colorpicker.css index 1ff8b40ff..0b7654a82 100644 --- a/www/extras/colorpicker/colorpicker.css +++ b/www/extras/colorpicker/colorpicker.css @@ -1,4 +1,10 @@ - #ddPicker { position: absolute; background-color: #eeeeee; top: 200px; left: 20px; width: 360px; height: 240px; z-index: 1000; } +.colorPickerFormSwatch { + width: 18px; + height: 18px; + border: 1px solid black; + float: left; +} + #ddPicker { position: absolute; background-color: #eeeeee; top: 200px; left: 20px; width: 380px; height: 260px; z-index: 1000; } #ddPicker input { font-size: .85em } #pickerHandle { background-color: #bbbbbb; height: 10px; cursor: move; } #hueThumb { cursor:default; width:18px; height:18px; z-index: 9; position:absolute; } diff --git a/www/extras/colorpicker/colorpicker.js b/www/extras/colorpicker/colorpicker.js index 8495eaba4..a2071fe95 100644 --- a/www/extras/colorpicker/colorpicker.js +++ b/www/extras/colorpicker/colorpicker.js @@ -1,4 +1,4 @@ -webguiColorPicker = function() { +WebguiColorPicker = function() { var Slider=YAHOO.widget.Slider; var Color=YAHOO.util.Color; var Dom=YAHOO.util.Dom; @@ -67,7 +67,7 @@ webguiColorPicker = function() { setColor: function () { var color = "#"+document.getElementById("hexval").value; currentColorField.value = color; - Dom.get(currentColorField.id + "_swatch").style.backgroundColor = color; + currentColorField.onchange(); ddPicker = Dom.get("ddPicker"); ddPicker.innerHTML = ""; ddPicker.style.display = "none"; @@ -81,7 +81,7 @@ webguiColorPicker = function() { ddPicker.style.top = YAHOO.util.Dom.getY(currentColorField) + "px"; ddPicker.style.left = YAHOO.util.Dom.getX(currentColorField) + "px"; ddPicker.style.display = "block"; - ddPicker.innerHTML = '
 

R H
G S
B V

#
 
'; + ddPicker.innerHTML = '
 

R H
G S
B V

#
 
'; hue = Slider.getVertSlider("hueBg", "hueThumb", 0, pickerSize); hue.subscribe("change", hueUpdate); @@ -103,7 +103,7 @@ webguiColorPicker = function() { } }(); -YAHOO.util.Event.on(window, "load", webguiColorPicker.init); +YAHOO.util.Event.on(window, "load", WebguiColorPicker.init); function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher. { diff --git a/www/extras/colorpicker/example.html b/www/extras/colorpicker/example.html index 9da41e31b..281f39d93 100644 --- a/www/extras/colorpicker/example.html +++ b/www/extras/colorpicker/example.html @@ -25,7 +25,7 @@ return props[propName];
- diff --git a/www/extras/styleDesigner/example.html b/www/extras/styleDesigner/example.html new file mode 100644 index 000000000..7e7eecd1f --- /dev/null +++ b/www/extras/styleDesigner/example.html @@ -0,0 +1,32 @@ + + +Style Designer + + + + + + + + + + + + + + + + + + + + diff --git a/www/extras/styleDesigner/styleDesigner.css b/www/extras/styleDesigner/styleDesigner.css new file mode 100644 index 000000000..8d3079756 --- /dev/null +++ b/www/extras/styleDesigner/styleDesigner.css @@ -0,0 +1,82 @@ +.fieldLabel { + width: 180px; + float: left; +} +#initBox { + font-family: georgia, helvetica, arial, sans-serif; color: white; z-index: 10; width: 98%; + height: 98%; top: 10; left: 10; position: absolute; +} +#themeContainer { + height: 40px; + z-index: 10; +} +.themeSwatch { + z-index: 10; display: block; float: left; + height: 20px; width: 20px; + border: 5px solid black; +} +.endFloat, .clearFloat { + clear: both; +} +#editToggleContainer { + padding: 1px; +} +#utilityLinksContainer { + float: right; + padding: 1px; +} +#pageHeaderContainer { +} +#pageHeaderLogoContainer { + float: left; + padding: 5px; +} +#logo { + border: 0px; + max-width: 300px; +} +#companyNameContainer { + float: right; + padding: 5px; + font-size: 16pt; +} +#pageBodyContainer { + +} +#mainNavigationContainer { + padding: 5px; + float: left; + width: 100px; + font-size: 10pt; +} +#mainBodyContentContainer { + padding: 5px; + margin-left: 120px; + font-family: serif, times new roman; + font-size: 12pt; +} +#pageFooterContainer { + text-align: center; +} +#copyrightContainer { + font-size: 8pt; +} +#colorOptions { + width: 35%; float: left; +} +#body { + float: right; width: 65%; +} +a { +} +#pageWidthContainer { + margin-left: 15%; + margin-right: 15%; + font-family: sans-serif, helvetica, arial; + border: 3px solid black; +} +#pageUtilityContainer { + font-size: 10pt; +} + + diff --git a/www/extras/styleDesigner/styleDesigner.js b/www/extras/styleDesigner/styleDesigner.js new file mode 100644 index 000000000..912b4ffc2 --- /dev/null +++ b/www/extras/styleDesigner/styleDesigner.js @@ -0,0 +1,147 @@ +WebguiStyleDesigner = function () { + var Dom=YAHOO.util.Dom; + var themeColors = [ + { + "pageBackgroundColor" : "#503020", + "linkColor" : "#aaccff", + "visitedLinkColor" : "#aaccff", + "utilityBackgroundColor" : "#000000", + "utilityTextColor" : "#ffffff", + "headerBackgroundColor" : "#ffffff", + "headerTextColor" : "#000000", + "navigationBackgroundColor" : "#443322", + "navigationTextColor" : "#aaccff", + "contentBackgroundColor" : "#805040", + "contentTextColor" : "#ffffff", + "footerBackgroundColor" : "#ffffff", + "footerTextColor" : "#000000" + }, + { + "pageBackgroundColor" : "#000000", + "linkColor" : "#cccccc", + "visitedLinkColor" : "#dddddd", + "utilityBackgroundColor" : "#000000", + "utilityTextColor" : "#ffffff", + "headerBackgroundColor" : "#ffffff", + "headerTextColor" : "#000000", + "navigationBackgroundColor" : "#444444", + "navigationTextColor" : "#cccccc", + "contentBackgroundColor" : "#888888", + "contentTextColor" : "#ffffff", + "footerBackgroundColor" : "#ffffff", + "footerTextColor" : "#000000" + }, + ]; + + var drawThemeSwatch = function ( themeNumber ) { + return ''; + } + + var colorPickerFieldNames = { + "pageBackgroundColor" : "Page Background", + "linkColor" : "Link Color", + "visitedLinkColor" : "Visited Link Color", + "utilityBackgroundColor" : "Utility Background", + "utilityTextColor" : "Utility Text", + "headerBackgroundColor" : "Header Background", + "headerTextColor" : "Header Text", + "contentBackgroundColor" : "Content Background", + "contentTextColor" : "Content Text", + "navigationBackgroundColor" : "Navigation Background", + "navigationTextColor" : "Navigation Text", + "footerBackgroundColor" : "Footer Background", + "footerTextColor" : "Footer Text Color" + }; + + var colorPickerFieldOrder = [ + "pageBackgroundColor", + "linkColor", + "visitedLinkColor", + "utilityBackgroundColor", + "utilityTextColor", + "headerBackgroundColor", + "headerTextColor", + "contentBackgroundColor", + "contentTextColor", + "footerBackgroundColor", + "footerTextColor", + "navigationBackgroundColor", + "navigationTextColor" + ]; + + + var drawColorPickerField = function (fieldName, fieldLabel) { + var output = '
'+fieldLabel + '
'; + output += '
' + return output; + } + return { + draw: function (companyName, logoUrl) { + var output = '
Themes:
'; + for (var i in themeColors) { + output += drawThemeSwatch(i); + } + output += '
'; + output += '
'; + for (var i in colorPickerFieldOrder) { + fieldName = colorPickerFieldOrder[i]; + output += drawColorPickerField(fieldName, colorPickerFieldNames[fieldName]); + } + output += '
'; + output += '
'+ companyName + '

Morbi quis erat et metus laoreet pretium. Aenean ultrices mi in magna. Duis mattis neque sed sem dignissim mollis. Vestibulum eleifend luctus enim. Mauris laoreet lorem convallis sapien. Integer ut tellus sit amet augue tincidunt eleifend. Cras eu velit. Fusce feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec semper arcu tristique orci. Suspendisse potenti. Vivamus tempus mattis enim. Duis leo elit, interdum ac, pretium nec, porta a, nisi. Nulla pellentesque est ut nunc. Phasellus nonummy purus non nulla.

© 2001 '+ companyName + '. All Rights Reserved.
'; + return output; + }, + init: function () { + for (var i in colorPickerFieldOrder) { + fieldName = colorPickerFieldOrder[i]; + var field = Dom.get(fieldName); + var swatch = Dom.get(fieldName+"_swatch"); + swatch.style.backgroundColor = field.value; + swatch.onclick = function () { + var id = this.id.replace(/(\w+)_swatch/,"$1"); + WebguiColorPicker.display(id); + } + field.onchange = function () { + Dom.get(this.id+"_swatch").style.backgroundColor = this.value; + switch(this.id) { + case "pageBackgroundColor": Dom.get("body").style.backgroundColor = this.value; break; + case "linkColor": document.linkColor = this.value; break; + case "visitedLinkColor": document.vlinkColor = this.value; break; + case "utilityBackgroundColor": Dom.get("pageUtilityContainer").style.backgroundColor = this.value; break; + case "utilityTextColor": Dom.get("pageUtilityContainer").style.color = this.value; break; + case "headerBackgroundColor": Dom.get("pageHeaderContainer").style.backgroundColor = this.value; + Dom.get("pageHeaderLogoContainer").style.backgroundColor = this.value; break; + case "headerTextColor": Dom.get("pageHeaderContainer").style.color = this.value; break; + case "contentBackgroundColor": Dom.get("pageBodyContainer").style.backgroundColor = this.value; break; + case "contentTextColor": Dom.get("pageBodyContainer").style.color = this.value; break; + case "navigationBackgroundColor": Dom.get("mainNavigationContainer").style.backgroundColor = this.value; break; + case "navigationTextColor": Dom.get("mainNavigationContainer").style.color = this.value; break; + case "footerBackgroundColor": Dom.get("pageFooterContainer").style.backgroundColor = this.value; break; + case "footerTextColor": Dom.get("pageFooterContainer").style.color = this.value; break; + } + } + } + for (var i in themeColors) { + theme = Dom.get("theme_" + i); + themeColorSet = themeColors[i]; + theme.style.backgroundColor = themeColorSet["contentBackgroundColor"]; + theme.style.borderColor = themeColorSet["linkColor"]; + theme.onclick = function () { + var id = this.id.replace(/theme_(\d+)/,"$1"); + var themeColorSet = themeColors[id]; + for (var j in themeColorSet) { + var field = Dom.get(j); + field.value = themeColorSet[j]; + field.onchange(); + } + } + } + Dom.get("theme_0").onclick(); + } + } +}(); + + +YAHOO.util.Event.on(window, "load", WebguiStyleDesigner.init); + +