added style designer
fixed some bugs in color picker
This commit is contained in:
JT Smith
parent
cff3ac1816
commit
ab0fa08895
6 changed files with 273 additions and 6 deletions
32
www/extras/styleDesigner/example.html
Normal file
32
www/extras/styleDesigner/example.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Style Designer</title>
|
||||
<script type="text/javascript">
|
||||
function getWebguiProperty (propName) {
|
||||
var props = new Array();
|
||||
props["extrasURL"] = "/extras/";
|
||||
props["pageURL"] = "/home";
|
||||
return props[propName];
|
||||
}
|
||||
</script>
|
||||
<script src="/extras/yui/build/yahoo/yahoo-min.js" type="text/javascript"></script>
|
||||
<script src="/extras/yui/build/event/event-min.js" type="text/javascript"></script>
|
||||
<script src="/extras/yui/build/dom/dom-min.js" type="text/javascript"></script>
|
||||
<script src="/extras/yui/build/dragdrop/dragdrop-min.js" type="text/javascript"></script>
|
||||
<script src="/extras/yui/build/animation/animation-min.js" type="text/javascript"></script>
|
||||
<link href="/extras/colorpicker/colorpicker.css" rel="stylesheet" type="text/css" />
|
||||
<script src="/extras/colorpicker/color.js" type="text/javascript"></script>
|
||||
<script src="/extras/colorpicker/key.js" type="text/javascript"></script>
|
||||
<script src="/extras/yui/build/slider/slider-min.js" type="text/javascript"></script>
|
||||
<script src="/extras/colorpicker/colorpicker.js" type="text/javascript"></script>
|
||||
<script src="/extras/styleDesigner/styleDesigner.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="/extras/styleDesigner/styleDesigner.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.write(WebguiStyleDesigner.draw('My Company','/extras/plainblack.gif'));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
82
www/extras/styleDesigner/styleDesigner.css
Normal file
82
www/extras/styleDesigner/styleDesigner.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
147
www/extras/styleDesigner/styleDesigner.js
Normal file
147
www/extras/styleDesigner/styleDesigner.js
Normal file
|
|
@ -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 '<a href="#" id="theme_'+themeNumber+'" class="themeSwatch"></a>';
|
||||
}
|
||||
|
||||
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 = '<div class="fieldLabel">'+fieldLabel + '</div><a class="colorPickerFormSwatch" href="#" id="' + fieldName + '_swatch"></a>';
|
||||
output += '<input maxlength="7" name="' + fieldName + '" type="text" size="8" value="#000000" id="' + fieldName + '" /><br />'
|
||||
return output;
|
||||
}
|
||||
return {
|
||||
draw: function (companyName, logoUrl) {
|
||||
var output = ' <div id="themeContainer"> <div style="float: left; margin: 5px;">Themes: </div> ';
|
||||
for (var i in themeColors) {
|
||||
output += drawThemeSwatch(i);
|
||||
}
|
||||
output += ' <div class="endFloat"></div> </div>';
|
||||
output += '<div id="colorOptions">';
|
||||
for (var i in colorPickerFieldOrder) {
|
||||
fieldName = colorPickerFieldOrder[i];
|
||||
output += drawColorPickerField(fieldName, colorPickerFieldNames[fieldName]);
|
||||
}
|
||||
output += '</div>';
|
||||
output += '<div id="body"> <div id="pageWidthContainer"> <div id="pageUtilityContainer"> <div id="utilityLinksContainer"><a href="#">Admin</a> :: <a href="#">Logout</a> :: <a href="#">Print!</a></div> <div id="editToggleContainer"><a href="#">Turn Admin On</a></div> <div class="clearFloat"></div> </div> <div id="pageHeaderContainer"> <div id="companyNameContainer">'+ companyName + '</div> <div id="pageHeaderLogoContainer"><a href="#"><img src="'+ logoUrl +'" id="logo" alt="logo" /></a></div> <div class="clearFloat"></div> </div> <div id="pageBodyContainer"> <div id="mainNavigationContainer"><p><a href="#">Contact Us</a><br /><a href="#">About Us</a><br /><a href="#">Products</a><br /><a href="#">Services</a><br /><a href="#">Training</a><br /><a href="#">Store</a><br /></p></div> <div id="mainBodyContentContainer"> <p> 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 <a href="#">lorem convallis sapien</a>. 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. </p> </div> <div class="clearFloat"></div> </div> <div id="pageFooterContainer"> <div id="copyrightContainer">© 2001 '+ companyName + '. All Rights Reserved.</div> <div class="clearFloat"></div> </div> </div> </div>';
|
||||
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);
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue