Add Bootstrap to Create Weblog page, also fix validation logic on Profile page.
Project: http://git-wip-us.apache.org/repos/asf/roller/repo Commit: http://git-wip-us.apache.org/repos/asf/roller/commit/2f4b2b3e Tree: http://git-wip-us.apache.org/repos/asf/roller/tree/2f4b2b3e Diff: http://git-wip-us.apache.org/repos/asf/roller/diff/2f4b2b3e Branch: refs/heads/bootstrap-ui Commit: 2f4b2b3e12ba122deb840797932e56eca8a8ff12 Parents: 8913513 Author: Dave Johnson <[email protected]> Authored: Sun Jun 26 16:05:56 2016 -0400 Committer: Dave Johnson <[email protected]> Committed: Sun Jun 26 16:05:56 2016 -0400 ---------------------------------------------------------------------- .../webapp/WEB-INF/jsps/core/CreateWeblog.jsp | 207 +++++++++++-------- .../main/webapp/WEB-INF/jsps/core/Profile.jsp | 4 +- 2 files changed, 123 insertions(+), 88 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/roller/blob/2f4b2b3e/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp index 578c302..2be53cb 100644 --- a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp @@ -19,106 +19,141 @@ <script src="<s:url value="/roller-ui/scripts/jquery-2.1.1.min.js" />"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> -<script> -function handlePreview(handle) { - previewSpan = document.getElementById("handlePreview"); - var n1 = previewSpan.childNodes[0]; - var n2 = document.createTextNode(handle.value); - if (handle.value == null) { - previewSpan.appendChild(n2); - } else { - previewSpan.replaceChild(n2, n1); - } -} -</script> -<p class="subtitle"><s:text name="createWebsite.prompt" /></p> +<p class="subtitle"><s:text name="createWebsite.prompt"/></p> -<br /> +<br/> -<s:form action="createWeblog!save"> -<s:hidden name="salt" /> +<s:form action="createWeblog!save" theme="bootstrap" cssClass="form-horizontal"> -<table class="formtable"> + <s:hidden name="salt"/> -<tr> - <td class="label"><label for="name" /><s:text name="generic.name" /></label></td> - <td class="field"><s:textfield name="bean.name" size="30" maxlength="30" /></td> - <td class="description"><s:text name="createWebsite.tip.name" /></td> -</tr> + <s:textfield label="%{getText('generic.name')}" + tooltip="%{getText('createWebsite.tip.name')}" onkeyup="formChanged()" + name="bean.name" size="30" maxlength="30"/> -<tr> - <td class="label"><label for="description" /><s:text name="generic.tagline" /></td> - <td class="field"><s:textfield name="bean.description" size="40" maxlength="255" /></td> - <td class="description"><s:text name="createWebsite.tip.description" /></td> -</tr> + <s:textfield label="%{getText('createWebsite.handle')}" + tooltip="%{getText('createWebsite.tip.handle')}" + name="bean.handle" size="30" maxlength="30" + onkeyup="handlePreview(this)"/> -<tr> - <td class="label"><label for="handle" /><s:text name="createWebsite.handle" /></label></td> - <td class="field"> - <s:textfield name="bean.handle" size="30" maxlength="30" onkeyup="handlePreview(this)" /><br /> - <span style="text-size:70%"> + <div class="form-group"> + <label class="col-sm-3"></label> + <div class="col-sm-9 controls"> <s:text name="createWebsite.weblogUrl" />: - <s:property value="absoluteSiteURL" />/<span id="handlePreview" style="color:red"><s:if test="bean.handle != null"><s:property value="bean.handle"/></s:if><s:else>handle</s:else></span> - </span> - </td> - <td class="description"><s:text name="createWebsite.tip.handle" /></td> -</tr> - -<tr> - <td class="label"><label for="emailAddress" /><s:text name="createWebsite.emailAddress" /></label></td> - <td class="field"><s:textfield name="bean.emailAddress" size="40" maxlength="50" /></td> - <td class="description"><s:text name="createWebsite.tip.email" /></td> -</tr> - -<tr> - <td class="label"><label for="locale" /><s:text name="createWebsite.locale" /></label></td> - <td class="field"> - <s:select name="bean.locale" size="1" list="localesList" listValue="displayName" /> - </td> - <td class="description"><s:text name="createWebsite.tip.locale" /></td> -</tr> - -<tr> - <td class="label"><label for="timeZone" /><s:text name="createWebsite.timeZone" /></label></td> - <td class="field"> - <s:select name="bean.timeZone" size="1" list="timeZonesList" /> - </td> - <td class="description"><s:text name="createWebsite.tip.timezone" /></td> -</tr> - -<tr> - <td class="label"><label for="theme" /><s:text name="createWebsite.theme" /></label></td> - <td class="field" ng-app="themeSelectModule" ng-controller="themeController"> - <select id="themeSelector" name="bean.theme" size="1" - ng-model="selectedTheme" ng-options="theme as theme.name for theme in themes track by theme.id"></select> - <br /> - <br /> - <p>{{ selectedTheme.description }}</p> - <br /> - <img src="<s:property value='siteURL'/>{{ selectedTheme.previewPath }}"/> - </td> - <td class="description"><s:text name="createWebsite.tip.theme" /></td> -</tr> - -</table> - -<br /> - -<s:submit value="%{getText('createWebsite.button.save')}" /> -<input type="button" value="<s:text name="generic.cancel"/>" onclick="window.location='<s:url action="menu"/>'" /> + <s:property value="absoluteSiteURL" />/<span id="handlePreview" style="color:red"> + <s:if test="bean.handle != null"> + <s:property value="bean.handle"/> + </s:if> + <s:else>handle</s:else></span> + <br> + </div> + </div> + + <s:textfield label="%{getText('createWebsite.emailAddress')}" + tooltip="%{getText('createWebsite.tip.emailAddress')}" onkeyup="formChanged()" + name="bean.emailAddress" size="40" maxlength="50"/> + + <s:select label="%{getText('createWebsite.locale')}" + tooltip="%{getText('createWebsite.tip.locale')}" + name="bean.locale" size="1" list="localesList" listValue="displayName"/> + + <s:select label="%{getText('createWebsite.timeZone')}" + tooltip="%{getText('createWebsite.tip.timeZone')}" + name="bean.timeZone" size="1" list="timeZonesList"/> + + <div class="form-group" ng-app="themeSelectModule" ng-controller="themeController"> + <label class="col-sm-3 control-label" for="createWeblog_bean_timeZone">Timezone</label> + <div class="col-sm-9 controls"> + <select id="themeSelector" name="bean.theme" size="1" + ng-model="selectedTheme" + ng-options="theme as theme.name for theme in themes track by theme.id"> + </select> + <br> + <br> + <p>{{ selectedTheme.description }}</p> + <img src="<s:property value='siteURL'/>{{ selectedTheme.previewPath }}"/> + </div> + </div> + + <s:submit cssClass="btn btn-default" + value="%{getText('createWebsite.button.save')}"/> + + <input class="btn" type="button" value="<s:text name="generic.cancel"/>" + onclick="window.location='<s:url action="menu"/>'"/> </s:form> <script> + document.forms[0].elements[0].focus(); angular.module('themeSelectModule', []) - .controller('themeController', ['$scope', function($scope) { - $.ajax({ url: "<s:property value='siteURL' />/roller-ui/authoring/themedata", async:false, - success: function(data) { $scope.themes = data; } - }); - $scope.selectedTheme = $scope.themes[0]; - }]); + .controller('themeController', ['$scope', function ($scope) { + $.ajax({ + url: "<s:property value='siteURL' />/roller-ui/authoring/themedata", async: false, + success: function (data) { + $scope.themes = data; + } + }); + $scope.selectedTheme = $scope.themes[0]; + }]); + + + var saveButton; + + $( document ).ready(function() { + saveButton = $("#createWeblog_0"); + formChanged(); + }); + + function formChanged() { + var valid = false; + + var name = $("#createWeblog_bean_name:first").val(); + var handle = $("#createWeblog_bean_handle:first").val(); + var email = $("#createWeblog_bean_emailAddress:first").val(); + + if ( name && name.trim().length > 0 + && handle && handle.trim().length > 0 + && email && email.trim().length > 0 && validateEmail(email) ) { + valid = true; + + } else { + valid = false; + } + + if ( valid ) { + saveButton.attr("disabled", false); + saveButton.removeClass("btn-danger"); + } else { + saveButton.attr("disabled", true); + saveButton.addClass("btn-danger"); + } + + } + + function validateEmail(email) { + var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + return re.test(email); + } + + function handlePreview(handle) { + previewSpan = document.getElementById("handlePreview"); + var n1 = previewSpan.childNodes[0]; + var n2 = document.createTextNode(handle.value); + if (handle.value == null) { + previewSpan.appendChild(n2); + } else { + previewSpan.replaceChild(n2, n1); + } + formChanged(); + } + + formChanged(); + +</script> + + </script> http://git-wip-us.apache.org/repos/asf/roller/blob/2f4b2b3e/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp index 7f7b110..ce7f13d 100644 --- a/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp @@ -105,8 +105,8 @@ var passwordConfirm = $("#profile_bean_passwordConfirm:first").val(); if ( screenName && screenName.trim().length > 0 - && fullName && fullName.trim().length > 0 - && email && fullName.trim().length > 0 && validateEmail(email) ) { + && fullName && fullName.trim().length > 0 + && email && email.trim().length > 0 && validateEmail(email) ) { valid = true; } else {
