oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding style template wizard

Browse source
This commit is contained in:
JT Smith 2005-11-26 21:54:59 +00:00
parent 4d361e6614
commit cb1059bbe4
5 changed files with 203 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/changelog/6.x.x.txt
View file

@ -17,6 +17,9 @@
- Added Matrix asset. - Added Matrix asset.
- Added In/Out Board asset. - Added In/Out Board asset.
- Page not found page returns a 404 error code now. - Page not found page returns a 404 error code now.
- Added more error trapping in caching system.
- Fixed some layout and control bugs in the color picker form element.
- Added a simple Style Wizard.
6.7.7 6.7.7

175
lib/WebGUI/Asset/Template.pm
View file

@ -327,6 +327,7 @@ sub www_edit {
my $self = shift; my $self = shift;
return WebGUI::Privilege::insufficient() unless $self->canEdit; return WebGUI::Privilege::insufficient() unless $self->canEdit;
$self->getAdminConsole->setHelp("template add/edit","Asset_Template"); $self->getAdminConsole->setHelp("template add/edit","Asset_Template");
$self->getAdminConsole->addSubmenuItem($self->getUrl('func=styleWizard'),WebGUI::International::get("style wizard","Asset_Template")) if ($self->get("namespace") eq "style");
return $self->getAdminConsole->render($self->getEditForm->print,WebGUI::International::get('edit template', 'Asset_Template')); return $self->getAdminConsole->render($self->getEditForm->print,WebGUI::International::get('edit template', 'Asset_Template'));
} }
@ -348,6 +349,180 @@ sub www_manage {
#-------------------------------------------------------------------
sub www_styleWizard {
my $self = shift;
return WebGUI::Privilege::insufficient() unless $self->canEdit;
my $output = "";
if ($session{form}{step} == 2) {
my $f = WebGUI::HTMLForm->new({action=>$self->getUrl});
$f->hidden(name=>"func", value=>"styleWizard");
$f->hidden(name=>"proceed", value=>"manageAssets") if ($session{form}{proceed});
$f->hidden(name=>"step", value=>3);
$f->hidden(name=>"layout", value=>$session{form}{layout});
$f->text(name=>"heading", value=>"My Site", label=>"Site Name");
$f->file(name=>"logo", label=>"Logo", subtext=>"<br />JPEG, GIF, or PNG thats less than 200 pixels wide and 100 pixels tall");
$f->color(name=>"pageBackgroundColor", value=>"#ccccdd", label=>"Page Background Color");
$f->color(name=>"headingBackgroundColor", value=>"#ffffff", label=>"Header Background Color");
$f->color(name=>"headingForegroundColor", value=>"#000000", label=>"Header Text Color");
$f->color(name=>"bodyBackgroundColor", value=>"#ffffff", label=>"Body Background Color");
$f->color(name=>"bodyForegroundColor", value=>"#000000", label=>"Body Text Color");
$f->color(name=>"menuBackgroundColor", value=>"#eeeeee", label=>"Menu Background Color");
$f->color(name=>"linkColor", value=>"#0000ff", label=>"Link Color");
$f->color(name=>"visitedLinkColor", value=>"#ff00ff", label=>"Visited Link Color");
$f->submit;
$output = $f->print;
} elsif ($session{form}{step} == 3) {
my $storage = WebGUI::Storage::Image->get(WebGUI::FormProcessor::file("logo"));
my $logo = $self->addChild({
className=>"WebGUI::Asset::File::Image",
title=>WebGUI::FormProcessor::text("heading")." Logo",
menuTitle=>WebGUI::FormProcessor::text("heading")." Logo",
url=>WebGUI::FormProcessor::text("heading")." Logo",
storageId=>$storage->getId,
filename=>@{$storage->getFiles}[0],
templateId=>"PBtmpl0000000000000088"
});
$logo->generateThumbnail if ($logo->get("filename"));
my $style = '<html>
<head>
<tmpl_var head.tags>
<title>^Page(title); - ^c;</title>
<style type="text/css">
.siteFunctions {
float: right;
font-size: 12px;
}
.copyright {
font-size: 12px;
}
body {
background-color: '.WebGUI::FormProcessor::color("pageBackgroundColor").';
font-family: helvetica;
font-size: 14px;
}
.heading {
background-color: '.WebGUI::FormProcessor::color("headingBackgroundColor").';
color: '.WebGUI::FormProcessor::color("headingForegroundColor").';
font-size: 25px;
margin-left: 10%;
margin-right: 10%;
vertical-align: middle;
}
.logo {
width: 200px;
float: left;
text-align: center;
}
.endFloat {
clear: both;
}
.padding {
padding: 5px;
}
.content {
background-color: '.WebGUI::FormProcessor::color("bodyBackgroundColor").';
color: '.WebGUI::FormProcessor::color("bodyForegroundColor").';
width: 55%; ';
if ($session{form}{layout} == 1) {
$style .= '
float: left;
margin-right: 10%;
';
} else {
$style .= '
width: 80%;
margin-left: 10%;
margin-right: 10%;
';
}
$style .= '
}
.menu {
background-color: '.WebGUI::FormProcessor::color("menuBackgroundColor").';
width: 25%; ';
if ($session{form}{layout} == 1) {
$style .= '
margin-left: 10%;
height: 75%;
float: left;
';
} else {
$style .= '
width: 80%;
text-align: center;
margin-left: 10%;
margin-right: 10%;
';
}
$style .= '
}
a {
color: '.WebGUI::FormProcessor::color("linkColor").';
}
a:visited {
color: '.WebGUI::FormProcessor::color("visitedLinkColor").';
}
</style>
</head>
<body>
^AdminBar;
<div class="heading">
<div class="padding">
<div class="logo">^AssetProxy('.$logo->get("url").');</div>
'.WebGUI::FormProcessor::text("heading").'
<div class="endFloat"></div>
</div>
</div>
<div class="menu">
<div class="padding">^AssetProxy('.($session{form}{layout} == 1 ? 'flexmenu' : 'toplevelmenuhorizontal').');</div>
</div>
<div class="content">
<div class="padding"><tmpl_var body.content></div>
</div>';
if ($session{form}{layout} == 1) {
$style .= '<div class="endFloat"></div>';
}
$style .= '
<div class="heading">
<div class="padding">
<div class="siteFunctions">^a(^@;); ^AdminToggle;</div>
<div class="copyright">&copy; ^D(%y); ^c;</div>
<div class="endFloat"></div>
</div>
</div>
</body>
</html>';
return $self->addRevision({
template=>$style
})->www_edit;
} else {
$output = WebGUI::Form::formHeader({action=>$self->getUrl}).WebGUI::Form::hidden({name=>"func", value=>"styleWizard"});
$output .= WebGUI::Form::hidden({name=>"proceed", value=>"manageAssets"}) if ($session{form}{proceed});
$output .= '<style type="text/css">
.chooser { float: left; width: 150px; height: 150px; }
.representation, .representation td { font-size: 12px; width: 120px; border: 1px solid black; }
.representation { height: 130px; }
</style>';
$output .= "<p>Choose a layout for this style:</p>";
$output .= WebGUI::Form::hidden({name=>"step", value=>2});
$output .= '<div class="chooser">'.WebGUI::Form::radio({name=>"layout", value=>1, checked=>1}).q|<table class="representation"><tbody>
<tr><td>Logo</td><td>Heading</td></tr>
<tr><td>Menu</td><td>Body content goes here.</td></tr>
</tbody></table></div>|;
$output .= '<div class="chooser">'.WebGUI::Form::radio({name=>"layout", value=>2}).q|<table class="representation"><tbody>
<tr><td>Logo</td><td>Heading</td></tr>
<tr><td style="text-align: center;" colspan="2">Menu</td></tr>
<tr><td colspan="2">Body content goes here.</td></tr>
</tbody></table></div>|;
$output .= WebGUI::Form::submit();
$output .= WebGUI::Form::formFooter();
}
$self->getAdminConsole->addSubmenuItem($self->getUrl('func=edit'),WebGUI::International::get("edit template","Asset_Template")) if ($self->get("url"));
return $self->getAdminConsole->render($output,WebGUI::International::get('style wizard', 'Asset_Template'));
}
#------------------------------------------------------------------- #-------------------------------------------------------------------
sub www_view { sub www_view {
my $self = shift; my $self = shift;

1
lib/WebGUI/Style.pm
View file

@ -34,7 +34,6 @@ This package contains utility methods for WebGUI's style system.
=head1 SYNOPSIS =head1 SYNOPSIS
use WebGUI::Style; use WebGUI::Style;
$template = WebGUI::Style::getTemplate();
$html = WebGUI::Style::process($content); $html = WebGUI::Style::process($content);
$html = generateAdditionalHeadTags(); $html = generateAdditionalHeadTags();

6
lib/WebGUI/i18n/English/Asset_Template.pm
View file

@ -1,6 +1,12 @@
package WebGUI::i18n::English::Asset_Template; package WebGUI::i18n::English::Asset_Template;
our $I18N = { our $I18N = {
'style wizard' => {
message => q|Style Wizard|,
context => q|Label for link to engage the style wizard.|,
lastUpdated => 0,
},
'namespace' => { 'namespace' => {
message => q|Namespace|, message => q|Namespace|,
context => q|label for Template Add/Edit Form|, context => q|label for Template Add/Edit Form|,

37
www/extras/colorPicker.js
View file

@ -123,14 +123,14 @@ function changePickerHue(){
else if(b == 0) bS = 0; else if(b == 0) bS = 0;
if(gS == 0) if(gS == 0)
g = g + (bit * 2); g = g + 1;
else else
g = g - (bit * 2); g = g - 1;
if(bS == 0) if(bS == 0)
b = b + (bit * 4); b = b + 16;
else else
b = b - (bit * 4); b = b - 16;
} }
htmlStr+= "<tr><td bgcolor=\"#ffffff\" onclick=\"changePallet(255)\" width=5 height=5></td></tr>"; htmlStr+= "<tr><td bgcolor=\"#ffffff\" onclick=\"changePallet(255)\" width=5 height=5></td></tr>";
htmlStr+= "</table>"; htmlStr+= "</table>";
@ -162,16 +162,16 @@ function placePickerToolbar(obj){
if(toolbarShow[obj.id] == 0){ if(toolbarShow[obj.id] == 0){
toolbarShow[obj.id] = 1; toolbarShow[obj.id] = 1;
t = obj.offsetTop + parseInt(obj.style.height) + 3; t = obj.offsetTop + parseInt(obj.style.height)-5;
l = obj.offsetLeft; l = obj.offsetLeft+30;
while(obj.offsetParent){ while(obj.offsetParent){
t+= obj.offsetParent.offsetTop; t+= obj.offsetParent.offsetTop;
l+= obj.offsetParent.offsetLeft; l+= obj.offsetParent.offsetLeft;
obj = obj.offsetParent; obj = obj.offsetParent;
} }
document.getElementById('colorPickerTools').style.top = t; document.getElementById('colorPickerTools').style.top = t+'px';
document.getElementById('colorPickerTools').style.left = l; document.getElementById('colorPickerTools').style.left = l+'px';
document.getElementById('colorPickerTools').style.display = 'block'; document.getElementById('colorPickerTools').style.visibility = 'visible';
if(picked[clickedPicker] == null){ if(picked[clickedPicker] == null){
changePallet(255); changePallet(255);
}else{ }else{
@ -179,15 +179,15 @@ function placePickerToolbar(obj){
setPickedColorFromForm(document.getElementById(clickedPicker+'Value')); setPickedColorFromForm(document.getElementById(clickedPicker+'Value'));
} }
}else if(toolbarShow[obj.id] == 1){ }else if(toolbarShow[obj.id] == 1){
document.getElementById('colorPickerTools').style.display = 'none'; document.getElementById('colorPickerTools').style.visibility = 'hidden';
toolbarShow[obj.id] = 0; toolbarShow[obj.id] = 0;
} }
} }
function killColorPicker(sw){ function killPicker(sw){
if(sw == 1 && clickedPicker){ if(sw == 1 && clickedPicker){
tmr = setTimeout('placePickerToolbar(document.getElementById(clickedPicker));',1000); tmr = setTimeout('placePickerToolbar(document.getElementById(clickedPicker));',300);
}else if(tmr){ }else if(tmr){
clearTimeout(tmr); clearTimeout(tmr);
} }
@ -200,16 +200,17 @@ function initColorPicker(fieldName,fieldValue){
if(!fieldValue) if(!fieldValue)
fieldValue = ""; fieldValue = "";
s = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
s+= "<td><div onmouseout=\"killColorPicker(1)\" onmouseover=\"killColorPicker(0)\" onclick=\"placePickerToolbar(this)\" style=\"width:15px;height:15px;border: 1px solid #000000;cursor:pointer;background-color:"+fieldValue+";\" id=pickedColor"+donePickerInits+"></div></td>";
s+= "<td>&nbsp;<input type=\"text\" name=\""+fieldName+"\" id=pickedColor"+donePickerInits+"Value value=\""+fieldValue+"\" size=7 style=\"font-size:10px;\" onchange=\"setPickedColorFromForm(this)\"></td>";
s+= "</table>";
document.write(s);
if(donePickerInits == 0){ if(donePickerInits == 0){
document.write("<div id=colorPickerTools onmouseout=\"killColorPicker(1)\" onmouseover=\"killColorPicker(0)\" style=\"z-Index:10000;display:none;cursor:crosshair;border:0px solid #000000;background-color:#ffffff;\"></div>"); document.write("<div id=colorPickerTools onmouseout=\"killPicker(1)\" onmouseover=\"killPicker(0)\" style=\"z-Index:10000;visibility:hidden;cursor:crosshair;position:absolute;border:1px solid #000000;background-color:#ffffff\"></div>");
document.getElementById('colorPickerTools').innerHTML = '<table border=0 cellpadding=0 cellspacing=0><tr><td valign=top>'+pickerScreen+'</td><td valign=top style="border-left:1px solid #000000;">'+hueScreen+'</td></tr><tr><td colspan=2><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=50% style="background-color:#ffffff;" onclick="pickColor(255,255,255);" height=5></td><td width=50% style="background-color:#000000;" onclick="pickColor(0,0,0);" height=5></td></tr></table></td></tr></table>'; document.getElementById('colorPickerTools').innerHTML = '<table border=0 cellpadding=0 cellspacing=0><tr><td valign=top>'+pickerScreen+'</td><td valign=top style="border-left:1px solid #000000;">'+hueScreen+'</td></tr><tr><td colspan=2><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=50% style="background-color:#ffffff;" onclick="pickColor(255,255,255);" height=5></td><td width=50% style="background-color:#000000;" onclick="pickColor(0,0,0);" height=5></td></tr></table></td></tr></table>';
} }
s = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
s+= "<td>&nbsp;<input type=\"text\" name=\""+fieldName+"\" id=pickedColor"+donePickerInits+"Value value=\""+fieldValue+"\" size=7 style=\"font-size:10px;\" onchange=\"setPickedColorFromForm(this)\"></td>";
s+= "<td><div onmouseout=\"killPicker(1)\" onmouseover=\"killPicker(0)\" onclick=\"placePickerToolbar(this)\" style=\"width:15px;height:15px;border: 1px solid #000000;cursor:pointer;background-color:"+fieldValue+";\" id=pickedColor"+donePickerInits+"></div></td>";
s+= "</table>";
document.write(s);
toolbarShow["pickedColor"+donePickerInits] = 0; toolbarShow["pickedColor"+donePickerInits] = 0;
donePickerInits++; donePickerInits++;
} }