adding style template wizard
This commit is contained in:
JT Smith
parent
4d361e6614
commit
cb1059bbe4
5 changed files with 203 additions and 19 deletions
|
|
@ -17,6 +17,9 @@
|
|||
- Added Matrix asset.
|
||||
- Added In/Out Board asset.
|
||||
- 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
|
||||
|
|
|
|||
|
|
@ -327,6 +327,7 @@ sub www_edit {
|
|||
my $self = shift;
|
||||
return WebGUI::Privilege::insufficient() unless $self->canEdit;
|
||||
$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'));
|
||||
}
|
||||
|
||||
|
|
@ -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">© ^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 {
|
||||
my $self = shift;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ This package contains utility methods for WebGUI's style system.
|
|||
=head1 SYNOPSIS
|
||||
|
||||
use WebGUI::Style;
|
||||
$template = WebGUI::Style::getTemplate();
|
||||
$html = WebGUI::Style::process($content);
|
||||
|
||||
$html = generateAdditionalHeadTags();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
package WebGUI::i18n::English::Asset_Template;
|
||||
|
||||
our $I18N = {
|
||||
'style wizard' => {
|
||||
message => q|Style Wizard|,
|
||||
context => q|Label for link to engage the style wizard.|,
|
||||
lastUpdated => 0,
|
||||
},
|
||||
|
||||
'namespace' => {
|
||||
message => q|Namespace|,
|
||||
context => q|label for Template Add/Edit Form|,
|
||||
|
|
|
|||
|
|
@ -123,14 +123,14 @@ function changePickerHue(){
|
|||
else if(b == 0) bS = 0;
|
||||
|
||||
if(gS == 0)
|
||||
g = g + (bit * 2);
|
||||
g = g + 1;
|
||||
else
|
||||
g = g - (bit * 2);
|
||||
g = g - 1;
|
||||
|
||||
if(bS == 0)
|
||||
b = b + (bit * 4);
|
||||
b = b + 16;
|
||||
else
|
||||
b = b - (bit * 4);
|
||||
b = b - 16;
|
||||
}
|
||||
htmlStr+= "<tr><td bgcolor=\"#ffffff\" onclick=\"changePallet(255)\" width=5 height=5></td></tr>";
|
||||
htmlStr+= "</table>";
|
||||
|
|
@ -162,16 +162,16 @@ function placePickerToolbar(obj){
|
|||
if(toolbarShow[obj.id] == 0){
|
||||
toolbarShow[obj.id] = 1;
|
||||
|
||||
t = obj.offsetTop + parseInt(obj.style.height) + 3;
|
||||
l = obj.offsetLeft;
|
||||
t = obj.offsetTop + parseInt(obj.style.height)-5;
|
||||
l = obj.offsetLeft+30;
|
||||
while(obj.offsetParent){
|
||||
t+= obj.offsetParent.offsetTop;
|
||||
l+= obj.offsetParent.offsetLeft;
|
||||
obj = obj.offsetParent;
|
||||
}
|
||||
document.getElementById('colorPickerTools').style.top = t;
|
||||
document.getElementById('colorPickerTools').style.left = l;
|
||||
document.getElementById('colorPickerTools').style.display = 'block';
|
||||
document.getElementById('colorPickerTools').style.top = t+'px';
|
||||
document.getElementById('colorPickerTools').style.left = l+'px';
|
||||
document.getElementById('colorPickerTools').style.visibility = 'visible';
|
||||
if(picked[clickedPicker] == null){
|
||||
changePallet(255);
|
||||
}else{
|
||||
|
|
@ -179,15 +179,15 @@ function placePickerToolbar(obj){
|
|||
setPickedColorFromForm(document.getElementById(clickedPicker+'Value'));
|
||||
}
|
||||
}else if(toolbarShow[obj.id] == 1){
|
||||
document.getElementById('colorPickerTools').style.display = 'none';
|
||||
document.getElementById('colorPickerTools').style.visibility = 'hidden';
|
||||
toolbarShow[obj.id] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function killColorPicker(sw){
|
||||
function killPicker(sw){
|
||||
if(sw == 1 && clickedPicker){
|
||||
tmr = setTimeout('placePickerToolbar(document.getElementById(clickedPicker));',1000);
|
||||
tmr = setTimeout('placePickerToolbar(document.getElementById(clickedPicker));',300);
|
||||
}else if(tmr){
|
||||
clearTimeout(tmr);
|
||||
}
|
||||
|
|
@ -200,16 +200,17 @@ function initColorPicker(fieldName,fieldValue){
|
|||
if(!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> <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){
|
||||
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>';
|
||||
}
|
||||
s = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
|
||||
s+= "<td> <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;
|
||||
donePickerInits++;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue