| [vhffs-dev] [1405] Subscribe JS externalized. |
[ Thread Index |
Date Index
| More vhffs.org/vhffs-dev Archives
]
Revision: 1405
Author: beuss
Date: 2009-05-24 20:02:10 +0200 (Sun, 24 May 2009)
Log Message:
-----------
Subscribe JS externalized.
Added a nice dialog to indicates that there is an error in the subscribe form.
Modified Paths:
--------------
branches/vhffs-design/vhffs-panel/Makefile.am
branches/vhffs-design/vhffs-panel/js/anonymous.js
branches/vhffs-design/vhffs-panel/templates/content/anonymous/subscribe.tt
branches/vhffs-design/vhffs-themes/Makefile.am
branches/vhffs-design/vhffs-themes/light-grey/main.css
Added Paths:
-----------
branches/vhffs-design/vhffs-themes/light-grey/img/tabClose.png
branches/vhffs-design/vhffs-themes/light-grey/img/tabCloseHover.png
branches/vhffs-design/vhffs-themes/light-grey/img/titleBar.png
branches/vhffs-design/vhffs-themes/light-grey/img/titleBar.png.org
Modified: branches/vhffs-design/vhffs-panel/Makefile.am
===================================================================
--- branches/vhffs-design/vhffs-panel/Makefile.am 2009-05-24 12:08:01 UTC (rev 1404)
+++ branches/vhffs-design/vhffs-panel/Makefile.am 2009-05-24 18:02:10 UTC (rev 1405)
@@ -1,12 +1,29 @@
javascripts = js/prototype.js \
js/commons.js \
+ js/dijit/_DialogMixin.js \
+ js/dijit/Dialog.js \
+ js/dijit/DialogUnderlay.js \
js/dijit/dijit.js \
js/dijit/Tooltip.js \
+ js/dijit/TooltipDialog.js \
+ js/dijit/form/_FormMixin.js \
js/dijit/form/TextBox.js \
js/dijit/form/ValidationTextBox.js \
js/dijit/form/nls/validate.js \
+ js/dijit/layout/ContentPane.js \
+ js/dijit/nls/common.js \
+ js/dijit/nls/loading.js \
+ js/dojo/dnd/autoscroll.js \
+ js/dojo/dnd/common.js \
+ js/dojo/dnd/move.js \
+ js/dojo/dnd/Moveable.js \
+ js/dojo/dnd/Mover.js \
+ js/dojo/dnd/TimedMoveable.js \
+ js/dojo/fx/Toggler.js \
js/dojo/back.js \
js/dojo/dojo.js \
+ js/dojo/fx.js \
+ js/dojo/html.js \
js/dojo/i18n.js \
js/dojo/resources/blank.gif \
js/dojo/resources/iframe_history.html \
Modified: branches/vhffs-design/vhffs-panel/js/anonymous.js
===================================================================
--- branches/vhffs-design/vhffs-panel/js/anonymous.js 2009-05-24 12:08:01 UTC (rev 1404)
+++ branches/vhffs-design/vhffs-panel/js/anonymous.js 2009-05-24 18:02:10 UTC (rev 1405)
@@ -42,3 +42,121 @@
vhffs.Common.ajaxizeLinks(dojo.byId('content-panel-anonymous'));
});
+var Anonymous = {};
+
+Anonymous.Subscribe = {};
+
+Anonymous.Subscribe.onLoad = function() {
+ Anonymous.Subscribe.ajaxizeForm();
+}
+
+/**
+ * Ajaxize and widgetize the subscribe form.
+ */
+Anonymous.Subscribe.ajaxizeForm = function() {
+
+ dojo.require('dijit.form.ValidationTextBox');
+
+ var widgets = [];
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ regExp: '^[a-z0-9]{3,12}$',
+ required: true,
+ trim: true,
+ invalidMessage: 'Invalid username'
+ }, dojo.byId('subscribeUsername')));
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ regExp: '^.{2,}@.{2,}$',
+ required: true,
+ trim: true,
+ invalidMessage: 'Enter valid email'
+ }, dojo.byId('subscribeEmail')));
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ required: true,
+ trim: true,
+ invalidMessage: 'Enter a firstname'
+ }, dojo.byId('subscribeFirstname')));
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ required: true,
+ trim: true,
+ invalidMessage: 'Enter a lastname'
+ }, dojo.byId('subscribeLastname')));
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ required: true,
+ trim: true,
+ invalidMessage: 'Enter an address'
+ }, dojo.byId('subscribeAddress')));
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ required: true,
+ trim: true,
+ invalidMessage: 'Enter a zipcode'
+ }, dojo.byId('subscribeZipCode')));
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ required: true,
+ trim: true,
+ invalidMessage: 'Enter a city'
+ }, dojo.byId('subscribeCity')));
+
+ widgets.push(new dijit.form.ValidationTextBox({
+ required: true,
+ trim: true,
+ invalidMessage: 'Enter a country'
+ }, dojo.byId('subscribeCountry')));
+
+ var form = dojo.byId('subscribeForm');
+ dojo.connect(form, 'onsubmit', function(e) {
+ dojo.stopEvent(e);
+
+ var valid = true;
+ dojo.forEach(widgets, function(w) {
+ // We've to force the blurred attribute
+ // otherwise validation will fail but
+ // field won't be marked as bad
+ w._hasBeenBlurred = true;
+ if(!w.validate()) {
+ valid = false;
+ }
+ });
+
+ if(!valid) {
+ var dlg = dijit.byId('subscribeErrorDialog');
+ if(!dlg) {
+ console.info('Creating dialog');
+ dojo.require('dijit.Dialog');
+ var dlg = new dijit.Dialog({
+ id: 'subscribeErrorDialog',
+ title: 'Error',
+ content: '<p>Please fill the form correctly. Erroneous fields are indicated with an exclamation mark.</p>' +
+ '<p>Focus the field to get more information</p>' +
+ '<p class="submit"><button id="subscribeErrorDialogClose">OK</button></p>'
+ });
+
+ dojo.connect(dojo.byId('subscribeErrorDialogClose'), 'onclick', dlg, 'hide');
+ }
+
+
+ dlg.show();
+ return;
+ }
+
+ var url = dojo.attr(form, 'action');
+ var content = dojo.formToObject(form);
+ var container = dojo.byId('content-panel-anonymous');
+ dojo.back.addToHistory(new vhffs.Common.pageState(url, container, content));
+ dojo.xhrPost({
+ 'url': url,
+ 'content': content,
+ load: function(response) {
+ vhffs.Common.loadContent(container, response);
+ vhffs.Common.ajaxizeLinks(container);
+ }
+ });
+ });
+
+}
\ No newline at end of file
Modified: branches/vhffs-design/vhffs-panel/templates/content/anonymous/subscribe.tt
===================================================================
--- branches/vhffs-design/vhffs-panel/templates/content/anonymous/subscribe.tt 2009-05-24 12:08:01 UTC (rev 1404)
+++ branches/vhffs-design/vhffs-panel/templates/content/anonymous/subscribe.tt 2009-05-24 18:02:10 UTC (rev 1405)
@@ -56,105 +56,6 @@
<script type="text/javascript">
<!--
-
-var Anonymous = {};
-
-Anonymous.Subscribe = {};
-
-Anonymous.Subscribe.onLoad = function() {
- Anonymous.Subscribe.ajaxizeForm();
-}
-
-Anonymous.Subscribe.ajaxizeForm = function() {
-
- dojo.require('dijit.form.ValidationTextBox');
-
- var widgets = [];
-
- widgets.push(new dijit.form.ValidationTextBox({
- regExp: '^[a-z0-9]{3,12}$',
- required: true,
- trim: true,
- invalidMessage: 'Invalid username'
- }, dojo.byId('subscribeUsername')));
-
- widgets.push(new dijit.form.ValidationTextBox({
- regExp: '^.{2,}@.{2,}$',
- required: true,
- trim: true,
- invalidMessage: 'Enter valid email'
- }, dojo.byId('subscribeEmail')));
-
- widgets.push(new dijit.form.ValidationTextBox({
- required: true,
- trim: true,
- invalidMessage: 'Enter a firstname'
- }, dojo.byId('subscribeFirstname')));
-
- widgets.push(new dijit.form.ValidationTextBox({
- required: true,
- trim: true,
- invalidMessage: 'Enter a lastname'
- }, dojo.byId('subscribeLastname')));
-
- widgets.push(new dijit.form.ValidationTextBox({
- required: true,
- trim: true,
- invalidMessage: 'Enter an address'
- }, dojo.byId('subscribeAddress')));
-
- widgets.push(new dijit.form.ValidationTextBox({
- required: true,
- trim: true,
- invalidMessage: 'Enter a zipcode'
- }, dojo.byId('subscribeZipCode')));
-
- widgets.push(new dijit.form.ValidationTextBox({
- required: true,
- trim: true,
- invalidMessage: 'Enter a city'
- }, dojo.byId('subscribeCity')));
-
- widgets.push(new dijit.form.ValidationTextBox({
- required: true,
- trim: true,
- invalidMessage: 'Enter a country'
- }, dojo.byId('subscribeCountry')));
-
- var form = dojo.byId('subscribeForm');
- dojo.connect(form, 'onsubmit', function(e) {
- dojo.stopEvent(e);
-
- var valid = true;
- dojo.forEach(widgets, function(w) {
- // We've to force the blurred attribute
- // otherwise validation will fail but
- // field won't be marked as bad
- w._hasBeenBlurred = true;
- if(!w.validate()) {
- valid = false;
- }
- });
-
- if(!valid) return;
-
- var url = dojo.attr(form, 'action');
- var content = dojo.formToObject(form);
- var container = dojo.byId('content-panel-anonymous');
- dojo.back.addToHistory(new vhffs.Common.pageState(url, container, content));
- dojo.xhrPost({
- 'url': url,
- 'content': content,
- load: function(response) {
- vhffs.Common.loadContent(container, response);
- vhffs.Common.ajaxizeLinks(container);
- }
- });
- });
-
-}
-
Anonymous.Subscribe.onLoad();
-
//-->
</script>
\ No newline at end of file
Modified: branches/vhffs-design/vhffs-themes/Makefile.am
===================================================================
--- branches/vhffs-design/vhffs-themes/Makefile.am 2009-05-24 12:08:01 UTC (rev 1404)
+++ branches/vhffs-design/vhffs-themes/Makefile.am 2009-05-24 18:02:10 UTC (rev 1405)
@@ -83,6 +83,9 @@
light-grey/img/vhffs.png \
light-grey/img/bullet.png \
light-grey/img/warning.png \
+ light-grey/img/tabClose.png \
+ light-grey/img/tabCloseHover.png \
+ light-grey/img/titleBar.png \
light-grey/img/tooltipConnectorLeft.png \
light-grey/img/popupMenuBg.gif \
light-grey/img/background_body.png \
Added: branches/vhffs-design/vhffs-themes/light-grey/img/tabClose.png
===================================================================
(Binary files differ)
Property changes on: branches/vhffs-design/vhffs-themes/light-grey/img/tabClose.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/vhffs-design/vhffs-themes/light-grey/img/tabCloseHover.png
===================================================================
(Binary files differ)
Property changes on: branches/vhffs-design/vhffs-themes/light-grey/img/tabCloseHover.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/vhffs-design/vhffs-themes/light-grey/img/titleBar.png
===================================================================
(Binary files differ)
Property changes on: branches/vhffs-design/vhffs-themes/light-grey/img/titleBar.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/vhffs-design/vhffs-themes/light-grey/img/titleBar.png.org
===================================================================
(Binary files differ)
Property changes on: branches/vhffs-design/vhffs-themes/light-grey/img/titleBar.png.org
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: branches/vhffs-design/vhffs-themes/light-grey/main.css
===================================================================
--- branches/vhffs-design/vhffs-themes/light-grey/main.css 2009-05-24 12:08:01 UTC (rev 1404)
+++ branches/vhffs-design/vhffs-themes/light-grey/main.css 2009-05-24 18:02:10 UTC (rev 1405)
@@ -1312,13 +1312,6 @@
* in the next section
*************************************************************/
-/* Temporary */
-.dijitTooltipContainer {
- top:242px;
- left:749.5px;
-}
-
-
.dijitTooltipRight {
padding-left: 14px;
}
@@ -1353,13 +1346,51 @@
padding: 1px;
}
+ .dijitDialog {
+ background: #fff;
+ border: 1px solid #365397;
+ padding: 0px;
+ -webkit-box-shadow: 0px 5px 10px #adadad;
+}
+ .dijitDialog .dijitDialogPaneContent {
+ background: #fff;
+ border:none;
+ border: 1px solid #365397;
+ padding:10px;
+}
+ .dijitDialogTitleBar {
+
+ background: #ebebeb url("img/titleBar.png") repeat-x top left;
+ padding: 5px 6px 3px 6px;
+ cursor: move;
+ outline:0;
+}
+ .dijitDialogTitle {
+ font-weight: bold;
+ padding: 0px 4px;
+}
+ .dijitDialogCloseIcon {
+ background: url("img/tabClose.png") no-repeat right top;
+ position: absolute;
+ vertical-align: middle;
+ right: 6px;
+ top: 4px;
+ height: 15px;
+ width: 15px;
+ cursor: pointer;
+}
+ .dijitDialogCloseIcon-hover {
+ background: url("img/tabCloseHover.png") no-repeat right top;
+}
+
/*************************************************************/
- /* VHFFS blue theme style sheet, based on the work of */
- /* G.Wolfgang. Found on Open Source Web Design */
- /* (http://www.oswd.org) */
- /*************************************************************/
- /*************************/ /* SECTION 1 - MAIN BODY */
- /*************************/
+/* VHFFS blue theme style sheet, based on the work of */
+/* G.Wolfgang. Found on Open Source Web Design */
+/* (http://www.oswd.org) */
+/*************************************************************/
+/*************************/
+/* SECTION 1 - MAIN BODY */
+/*************************/
body {
font-size: 12px;
margin: 0px auto;
@@ -1376,7 +1407,7 @@
width: 770px;
margin: 0px auto;
padding: 0px;
- background: white;
+ background: white;
border: solid 1px rgb(100, 100, 100);
}
@@ -1404,8 +1435,8 @@
}
/*************************************/
- /* SECTION 2 - HEADER AND NAVIGATION */
- /*************************************/
+/* SECTION 2 - HEADER AND NAVIGATION */
+/*************************************/
#header {
width: 770px;
height: 65px;
@@ -1414,10 +1445,9 @@
background: white;
}
-/*-----------------------------------*/
+ /*-----------------------------------*/
/* 2.1 - Sitename, slogan and banner */
/*-----------------------------------*/
- /*.site-name {width: 300px; height: 50px; top: 12px; position: absolute; z-index: 4; overflow: hidden; margin: 0px; padding-left: 75px; color: rgb(69,140,204);}*/
.site-name {
width: 300px;
height: 50px;
@@ -1429,8 +1459,9 @@
color: rgb(69, 140, 204);
}
-/*--------------------------*/ /* 2.2 - Navigation - Flags */
/*--------------------------*/
+ /* 2.2 - Navigation - Flags */
+ /*--------------------------*/
.navflag {
width: 750px;
top: 14px;
@@ -1458,8 +1489,9 @@
height: 14px;
}
-/*----------------------------*/ /* 2.3 - Navigation - Level 1 */
/*----------------------------*/
+ /* 2.3 - Navigation - Level 1 */
+ /*----------------------------*/
.nav1 {
width: 750px;
top: 35px;
@@ -1491,8 +1523,9 @@
text-decoration: none;
}
-/*----------------------------*/ /* 2.4 - Navigation - Level 2 */
/*----------------------------*/
+ /* 2.4 - Navigation - Level 2 */
+ /*----------------------------*/
#top-menu {
clear: both;
margin: 0px;
@@ -1538,8 +1571,9 @@
text-decoration: none;
}
-/*----------------------------*/ /* 2.5 - Navigation - Level 3 */
/*----------------------------*/
+ /* 2.5 - Navigation - Level 3 */
+ /*----------------------------*/
div#left-menu {
overflow: hidden;
width: 160px;
@@ -1767,8 +1801,8 @@
}
/******************************************************************************/
- /* SECTION 3 - SPECIFIC CLASSES FOR LAYOUT #1 (With navigation, with sidebar )*/
- /******************************************************************************/
+/* SECTION 3 - SPECIFIC CLASSES FOR LAYOUT #1 (With navigation, with sidebar )*/
+/******************************************************************************/
#public-content {
width: 410px;
min-height: 500px;
@@ -2011,8 +2045,8 @@
}
/******************************************************/
- /* SECTION 4 - SPECIFIC CLASSES FOR LAYOUTS #2 and #3 */
- /******************************************************/
+/* SECTION 4 - SPECIFIC CLASSES FOR LAYOUTS #2 and #3 */
+/******************************************************/
.content2 {
width: 580px;
margin: 0px 0px 0px 0px;
@@ -2225,10 +2259,14 @@
padding: 0px;
}
-/*********************************/ /* SECTION 6 - COMMON PARAMETERS */
- /*********************************/ /*--------------------*/
- /* 6.1 - Content Area */ /*--------------------*/
- /* Titles and textboxes*/
+/*********************************/
+/* SECTION 6 - COMMON PARAMETERS */
+/*********************************/
+ /*--------------------*/
+ /* 6.1 - Content Area */
+ /*--------------------*/
+
+/* Titles and textboxes*/
h1 {
overflow: hidden;
margin: 0px 0px 10px 0px;
@@ -2310,7 +2348,9 @@
text-align: center
}
-/*----------------*/ /* - Forms */ /*----------------*/
+/*----------------*/
+/* - Forms */
+/*----------------*/
input,textarea,select,button,
.dijitTextBox,
.dijitComboBox,
@@ -2861,8 +2901,9 @@
border: solid 1px rgb(150, 150, 150);
}
-/*--------------------*/ /* 6.2 - Sidebar Area */
/*--------------------*/
+ /* 6.2 - Sidebar Area */
+ /*--------------------*/
.sidebar {
overflow: hidden;
float: right;
@@ -2927,8 +2968,9 @@
font-size: 110%;
}
-/*--------------------*/ /* 6.3 - Footer Area */
/*--------------------*/
+ /* 6.3 - Footer Area */
+ /*--------------------*/
#footer {
overflow: hidden;
clear: both;
@@ -2950,7 +2992,9 @@
font-size: 110%;
}
-/*-------------------*/ /* 6.4 - Hyperlinks */ /*-------------------*/
+ /*-------------------*/
+ /* 6.4 - Hyperlinks */
+ /*-------------------*/
a {
color: rgb(75, 75, 75);
text-decoration: underline;
@@ -2975,9 +3019,13 @@
text-decoration: none;
}
-/*******************************/ /* SECTION 7 - GENERIC CLASSES */
- /*******************************/ /*-----------------------------*/
- /* 7.2 - Horizontal alignments */ /*-----------------------------*/
+/*******************************/
+/* SECTION 7 - GENERIC CLASSES */
+/*******************************/
+
+ /*-----------------------------*/
+ /* 7.2 - Horizontal alignments */
+ /*-----------------------------*/
.align-left {
text-align: left;
}
@@ -2990,7 +3038,9 @@
text-align: center;
}
-/*------------------*/ /* 7.3 Text colors */ /*------------------*/
+ /*------------------*/
+ /* 7.3 Text colors */
+ /*------------------*/
.txt-white {
color: rgb(255, 255, 255);
}
@@ -3039,8 +3089,9 @@
color: rgb(51, 51, 51);
}
-/*****************************/ /* SECTION 8 - MISCELLANEOUS */
- /*****************************/
+/*****************************/
+/* SECTION 8 - MISCELLANEOUS */
+/*****************************/
.clear {
clear: both;
}
@@ -3053,7 +3104,9 @@
clear: none;
}
-/**************************/ /* Login */
+ /**************************/
+ /* Login */
+ /**************************/
.page-container-panel-anonymous div.logo {
text-align: center;
margin-bottom: 20px
@@ -3096,7 +3149,3 @@
display:inline;
margin-right:5px;
}
-
-
-
-