Merge pull request sakaiproject#1313 from bjones86/SAK-30070

SAK-30070 clean-up Gradebook JavaScript, remove old spinners and code in favour of new centralized approach

gradebook/app/ui/src/webapp/addAssignment.jsp

@@ -7,34 +7,20 @@
 		var MAX_NEW_ITEMS = <h:outputText value="#{msgs.add_assignment_max_bulk_items}" />;
 	</script>
 	<script type="text/javascript" src="${pageContext.request.contextPath}/js/multiItemAdd.js"></script>
-<%--  Commented out due to prototype already being embedded
-		so including will break calendar widget
-  	<script type="text/javascript" src="/library/js/jquery/jquery-1.11.3.min.js"></script> --%>
+	<script src="/library/js/spinner.js" type="text/javascript"></script>
 
    <div class="portletBody">
 	<h:form id="gbForm">
 
 		<t:aliasBean alias="#{bean}" value="#{addAssignmentBean}">
 			<%@ include file="/inc/appMenu.jspf"%>
-
 			<%@ include file="/inc/breadcrumb.jspf" %>
 		</t:aliasBean>
 
 		<sakai:flowState bean="#{addAssignmentBean}" />
 
 		<p class="instruction"><h:outputText value="#{msgs.add_assignment_instruction}" /></p>
-
-<%-- Commented out per SAK-12285
-		<p>
-		<h:outputText value="#{msgs.add_assignment_selector1}" />
-			<h:selectOneMenu id="numItems" value="">
-				<f:selectItems value="#{addAssignmentBean.addItemSelectList}" />
-			</h:selectOneMenu>
-			<h:outputText value="#{msgs.add_assignment_selector2}" />
-		</p>
---%>
 		<t:aliasBean alias="#{bean}" value="#{addAssignmentBean}">
-<%--			<%@ include file="/inc/assignmentEditing.jspf"%> --%>
 			<%@ include file="/inc/globalMessages.jspf"%>
 
 			<%-- Allows bulk creation of Gradebook Items --%>
@@ -54,10 +40,12 @@
 				id="saveButton"
 				styleClass="active"
 				value="#{msgs.add_assignment_submit}"
-				action="#{addAssignmentBean.saveNewAssignment}"/>
+				action="#{addAssignmentBean.saveNewAssignment}"
+				onclick="SPNR.disableControlsAndSpin( this, null );" />
 			<h:commandButton
 				value="#{msgs.add_assignment_cancel}"
-				action="overview" immediate="true"/>
+				action="overview" immediate="true"
+				onclick="SPNR.disableControlsAndSpin( this, null );" />
 		</p>
 
  		<%-- Need to attach listeners, must be here --%>
@@ -73,19 +61,6 @@
 				}
 			);
 
-			// Add functionality to Add item drop down
-			// Commented out per SAK-12285
-//			Event.observe(
-//				"gbForm:numItems",
-//				"change",
-//				function(event){
-//					addMultipleItems(this);
-
-					// since DOM changed, resize
-//					setMainFrameHeightNow(thisId, 'grow');
-//				}
-//			);
-
 			// adds X remove icon to first pane if more than 2 are displayed
 		 	if (getNumTotalItem() >= 2) {
  				addDelX();

gradebook/app/ui/src/webapp/assignmentDetails.jsp

@@ -2,7 +2,7 @@
 <script src="dhtmlpopup/dhtmlPopup.js" type="text/javascript"></script>
 <script src="js/dynamicSizeCheck.js" type="text/javascript"></script>
 <script src="js/scoringAgent/integration.js" type="text/javascript"></script>
-
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 
 <f:view>
   <div class="portletBody">
@@ -26,20 +26,23 @@
 				actionListener="#{assignmentDetailsBean.processAssignmentIdChange}"
 				value="#{msgs.assignment_details_previous_assignment}"
 				title="#{assignmentDetailsBean.previousAssignment.name}"
-				accesskey="p">
+				accesskey="p"
+				onclick="SPNR.disableControlsAndSpin( this, null );">
 					<f:param name="assignmentId" value="#{assignmentDetailsBean.previousAssignment.id}"/>
 			</h:commandButton>
 			<h:commandButton
 				action="#{assignmentDetailsBean.processCancel}"
 				immediate="true"
 				value="#{assignmentDetailsBean.returnString}"
-				accesskey="l"/>
+				accesskey="l"
+				onclick="SPNR.disableControlsAndSpin( this, null );"/>
 			<h:commandButton
 				disabled="#{assignmentDetailsBean.last}"
 				actionListener="#{assignmentDetailsBean.processAssignmentIdChange}"
 				value="#{msgs.assignment_details_next_assignment}"
 				title="#{assignmentDetailsBean.nextAssignment.name}"
-				accesskey="n">
+				accesskey="n"
+				onclick="SPNR.disableControlsAndSpin( this, null );">
 					<f:param name="assignmentId" value="#{assignmentDetailsBean.nextAssignment.id}"/>
 			</h:commandButton>
 		</p>
@@ -139,7 +142,7 @@
 				rendered="#{!assignmentDetailsBean.emptyEnrollments}"
 				accesskey="s"
 				title="#{msgs.assignment_details_submit}"
-				onclick="disableButton('buttonDiv1', this)"/>
+				onclick="SPNR.disableControlsAndSpin( this, null );"/>
 			<h:commandButton
 				id="cancelButton1"
 				value="#{msgs.assignment_details_cancel}"
@@ -148,7 +151,7 @@
 				rendered="#{!assignmentDetailsBean.emptyEnrollments}"
 				accesskey="c"
 				immediate="true"
-				title="#{msgs.assignment_details_cancel}" onclick="disableButton('buttonDiv1', this)">
+				title="#{msgs.assignment_details_cancel}" onclick="SPNR.disableControlsAndSpin( this, null );">
 					<f:param name="breadcrumbPage" value="#{assignmentDetailsBean.breadcrumbPage}"/>
 			</h:commandButton>
 		</div>
@@ -300,7 +303,7 @@
 				disabled="#{assignmentDetailsBean.assignment.externallyMaintained || assignmentDetailsBean.allStudentsViewOnly}"
 				rendered="#{!assignmentDetailsBean.emptyEnrollments}"
 				title="#{msgs.assignment_details_submit}"
-				onclick="disableButton('buttonDiv2', this)"/>
+				onclick="SPNR.disableControlsAndSpin( this, null );"/>
 			<h:commandButton
 				id="cancelButton2"
 				value="#{msgs.assignment_details_cancel}"
@@ -309,7 +312,7 @@
 				disabled="#{assignmentDetailsBean.assignment.externallyMaintained || assignmentDetailsBean.allStudentsViewOnly}"
 				rendered="#{!assignmentDetailsBean.emptyEnrollments}"
 				title="#{msgs.assignment_details_cancel}"
-				onclick="disableButton('buttonDiv2', this)">
+				onclick="SPNR.disableControlsAndSpin( this, null );">
 					<f:param name="breadcrumbPage" value="#{assignmentDetailsBean.breadcrumbPage}"/>
 			</h:commandButton>
 		</div>

gradebook/app/ui/src/webapp/calculateCourseGrades.jsp

@@ -1,5 +1,6 @@
 <link href="dhtmlpopup/dhtmlPopup.css" rel="stylesheet" type="text/css" />
 <script src="dhtmlpopup/dhtmlPopup.js" type="text/javascript"></script>
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 <f:view>
 	<div class="portletBody">
 	  <h:form id="gbForm">
@@ -17,12 +18,11 @@
 	  		action="#{courseGradeDetailsBean.processCalculateCourseGrades}"
 	  		value="#{msgs.calculate_course_grade_continue}"
 	  		styleClass="active"
-	  		onclick="setUngradedItems_disableButtonsActivateSpinner( 'gbForm:setUngradedItemsSpinner' );" />
+	  		onclick="SPNR.disableControlsAndSpin( this, null );" />
 	  	<h:commandButton
 	  		action="courseGradeDetails"
 	  		value="#{msgs.calculate_course_grade_cancel}"
-	  		onclick="setUngradedItems_disableButtonsActivateSpinner( 'gbForm:setUngradedItemsSpinner' );" />
-	  	<h:graphicImage id="setUngradedItemsSpinner" value="/../library/image/indicator.gif" styleClass="setUngradedItemsSpinner" />
+	  		onclick="SPNR.disableControlsAndSpin( this, null );" />
 	  </p>
 
 	  </h:form>

gradebook/app/ui/src/webapp/courseGradeDetails.jsp

@@ -1,5 +1,6 @@
 <link href="dhtmlpopup/dhtmlPopup.css" rel="stylesheet" type="text/css" />
 <script src="dhtmlpopup/dhtmlPopup.js" type="text/javascript"></script>
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 <f:view>
 	<div class="portletBody">
 	  <h:form id="gbForm">
@@ -214,22 +215,23 @@
 				actionListener="#{courseGradeDetailsBean.processUpdateGrades}"
 				rendered="#{!courseGradeDetailsBean.emptyEnrollments}"
 				disabled="#{courseGradeDetailsBean.allStudentsViewOnly}"
-                                onclick="disableButton('', this)"
-				/>
+				onclick="SPNR.disableControlsAndSpin( this, null );"
+			/>
 			<h:commandButton
 				value="#{msgs.assignment_details_cancel}"
 				action="overview"
 				immediate="true"
 				rendered="#{!courseGradeDetailsBean.emptyEnrollments}"
 				disabled="#{courseGradeDetailsBean.allStudentsViewOnly}"
-                                onclick="disableButton('', this)"
-				/>
+				onclick="SPNR.disableControlsAndSpin( this, null );"
+			/>
 
 			<h:commandButton
 				value="#{msgs.course_grade_details_calculate_course_grade}"
 				action="calculateCourseGrades"
 				rendered="#{courseGradeDetailsBean.userAbleToGradeAll}"
 				style="margin-left: 5em;"
+				onclick="SPNR.disableControlsAndSpin( this, null );"
 			/>
 		</div>
     <script>includeLatestJQuery('courseGradeDetails.jsp');</script>

gradebook/app/ui/src/webapp/gradeOptions.jsp

@@ -1,3 +1,4 @@
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 <f:view>
   <div class="portletBody">
 	<h:form id="gbForm">
@@ -16,10 +17,6 @@
 <!-- Grade Display -->
 		<h4><h:outputText value="#{msgs.feedback_options_grade_display}"/></h4>
 		<h:panelGrid columns="2" columnClasses="prefixedCheckbox">
-			<%/*  Moved to gradebook setup page
-			<h:selectBooleanCheckbox id="displayAssignmentGrades" value="#{feedbackOptionsBean.localGradebook.assignmentsDisplayed}"
-				onkeypress="return submitOnEnter(event, 'gbForm:saveButton');"/>
-			<h:outputLabel for="displayAssignmentGrades" value="#{msgs.feedback_options_grade_display_assignment_grades}" />*/%>
 		</h:panelGrid>
 		<h:panelGrid columns="2" columnClasses="prefixedCheckbox">
 			<h:selectBooleanCheckbox id="displayCourseGrades" value="#{feedbackOptionsBean.localGradebook.courseGradeDisplayed}"
@@ -47,7 +44,7 @@
 					<f:selectItems value="#{feedbackOptionsBean.gradeMappingsSelectItems}" />
 				</h:selectOneMenu>
 				<f:verbatim> </f:verbatim>
-				<h:commandButton actionListener="#{feedbackOptionsBean.changeGradeType}" value="#{msgs.feedback_options_change_grade_type}" />
+				<h:commandButton actionListener="#{feedbackOptionsBean.changeGradeType}" value="#{msgs.feedback_options_change_grade_type}" onclick="SPNR.disableControlsAndSpin( this, null );" />
 			</h:panelGroup>
 		</h:panelGrid>
 
@@ -113,13 +110,15 @@
 				id="saveButton"
 				styleClass="active"
 				value="#{msgs.feedback_options_submit}"
-				action="#{feedbackOptionsBean.save}" >
+				action="#{feedbackOptionsBean.save}"
+				onclick="SPNR.disableControlsAndSpin( this, null );" >
 				<f:param name="pageName" value="gradebookSetup" />
 			</h:commandButton>
 			<h:commandButton
 				value="#{msgs.feedback_options_cancel}"
 				action="#{feedbackOptionsBean.cancel}"
-				immediate="true" >
+				immediate="true"
+				onclick="SPNR.disableControlsAndSpin( this, null );" >
 				<f:param name="pageName" value="gradebookSetup" />
 			</h:commandButton>
 		</p>

gradebook/app/ui/src/webapp/gradebookSetup.jsp

@@ -1,5 +1,6 @@
 <link href="dhtmlpopup/dhtmlPopup.css" rel="stylesheet" type="text/css" />
 <script src="dhtmlpopup/dhtmlPopup.js" type="text/javascript"></script>
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 <f:view>
 	<div class="portletBody">
 	  <h:form id="gbForm">
@@ -99,14 +100,6 @@
 				</div>
 			</div>
 			</fieldset>
-			<%--
-			<h4><h:outputText value="#{msgs.gb_setup_grader_perms_title}"/></h4>
-			<div class="indnt1 gbSection">
-				<h:commandLink action="graderRules">
-					<h:outputText value="#{msgs.gb_setup_modify_grader_perms}"/>
-				</h:commandLink>
-			</div>
-			--%>
 
 		  <t:aliasBean alias="#{bean}" value="#{gradebookSetupBean}">
 				<%@ include file="/inc/categoryEdit.jspf"%>
@@ -118,11 +111,11 @@
 					styleClass="active"
 					value="#{msgs.gb_setup_save}"
 					action="#{gradebookSetupBean.processSaveGradebookSetup}"
-					onclick="javascript:reEnableCategoryDropInputs();"/>
+					onclick="SPNR.disableControlsAndSpin( this, null ); reEnableCategoryDropInputs();"/>
 				<h:commandButton
 					value="#{msgs.gb_setup_cancel}"
 					action="#{gradebookSetupBean.processCancelGradebookSetup}" immediate="true"
-					onclick="javascript:reEnableCategoryDropInputs();"/>
+					onclick="SPNR.disableControlsAndSpin( this, null ); reEnableCategoryDropInputs();"/>
 			</div>
 
 			<%

gradebook/app/ui/src/webapp/hideShowColumns.jsp

@@ -17,6 +17,7 @@
 <f:view>
 
 <sakai:flowState bean="#{rosterBean}" />
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 <h:form id="hidShowForm">
 	<h2>
 		<h:outputText value="#{msgs.hide_show_openLink}"/>
@@ -40,8 +41,8 @@
    	</h:dataTable>
 
   	<div class="instruction" style="float:right;">	        	
-       	<h:commandButton action="#{rosterBean.saveHidden}" value="#{msgs.feedback_options_submit}"/>
-        <input type="button" value='<h:outputText value="#{msgs.feedback_options_cancel}"/>' onclick="parent.dialogutil.closeDialog('dialogDiv', 'dialogFrame');"/>
+       	<h:commandButton action="#{rosterBean.saveHidden}" value="#{msgs.feedback_options_submit}" onclick="SPNR.disableControlsAndSpin( this, null );"/>
+        <input type="button" value='<h:outputText value="#{msgs.feedback_options_cancel}"/>' onclick="SPNR.disableControlsAndSpin( this, null );parent.dialogutil.closeDialog('dialogDiv', 'dialogFrame');"/>
   	</div>
   	<f:verbatim>    
     	<input type="text" id="saved" name="saved" value="true" style="display: none;"/>

gradebook/app/ui/src/webapp/inc/filterPaging.jspf

@@ -2,11 +2,12 @@
 	Search filter and paging controls for enrollment tables.
 	Accessed via <t:aliasBean alias="#{bean}" value="#{realPageBean}">...</t:aliasBean> .
 */%>
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 <h:panelGrid styleClass="gbContainerNav" columns="2" columnClasses="gbLeftNav,gbRightNav">
 	<t:div>
-		<t:div styleClass="gbListView">
+		<t:div styleClass="gbListView spinnerBesideContainer">
 			<h:outputLabel value="#{msgs.search_sections_filter}" for="selectSectionFilter"/><h:outputText escape="false" value="&nbsp;&nbsp;" />
-			<h:selectOneMenu id="selectSectionFilter" value="#{bean.selectedSectionFilterValue}" onchange="this.form.submit()">
+			<h:selectOneMenu id="selectSectionFilter" value="#{bean.selectedSectionFilterValue}" onchange="SPNR.insertSpinnerAfter( this, null, null ); this.form.submit()">
 				<f:selectItems value="#{bean.sectionFilterSelectItems}" />
 			</h:selectOneMenu>
 		</t:div>
@@ -18,9 +19,9 @@
 				onfocus="clearIfDefaultString(this, '#{msgs.search_default_student_search_string}')"
 				onkeypress="return submitOnEnter(event, 'gbForm:searchSubmitButton');"
 			/><f:verbatim> </f:verbatim>
-			<h:commandButton actionListener="#{bean.search}" value="#{msgs.search_find}" id="searchSubmitButton" />
+			<h:commandButton actionListener="#{bean.search}" value="#{msgs.search_find}" id="searchSubmitButton" onclick="SPNR.disableControlsAndSpin( this, null );" />
 			<f:verbatim> </f:verbatim>
-			<h:commandButton actionListener="#{bean.clear}" value="#{msgs.search_clear}"/>
+			<h:commandButton actionListener="#{bean.clear}" value="#{msgs.search_clear}" onclick="SPNR.disableControlsAndSpin( this, null );" />
 		</t:div>
 	</t:div>
 

gradebook/app/ui/src/webapp/inc/filterPagingRoster.jspf

@@ -2,16 +2,17 @@
 	Search filter and paging controls for enrollment tables.
 	Accessed via <t:aliasBean alias="#{bean}" value="#{realPageBean}">...</t:aliasBean> .
 */%>
+<script src="/library/js/spinner.js" type="text/javascript"></script>
 <h:panelGrid styleClass="gbContainerNav" columns="2" columnClasses="gbLeftNav,gbRightNav">
 	<t:div>
-		<t:div styleClass="gbListView">
+		<t:div styleClass="gbListView spinnerBesideContainer" id="selectSectionContainer">
 			<h:outputLabel value="#{msgs.search_sections_filter} " for="selectSectionFilter" /><h:outputText escape="false" value="&nbsp;&nbsp;" />
-			<h:selectOneMenu id="selectSectionFilter" value="#{bean.selectedSectionFilterValue}" onchange="this.form.submit()">
+			<h:selectOneMenu id="selectSectionFilter" value="#{bean.selectedSectionFilterValue}" onchange="SPNR.insertSpinnerAfter( this, null, 'gbForm:selectSectionContainer' ); this.form.submit()">
 				<f:selectItems value="#{bean.sectionFilterSelectItems}" />
 			</h:selectOneMenu>
 
 			<h:outputText escape="false" value="&nbsp;&nbsp;" /><h:outputLabel value="#{msgs.search_categories_filter} " for ="selectCategoryFilter"><h:outputText styleClass="skip" value=" #{msgs.search_categories_filter2}" /></h:outputLabel><h:outputText escape="false" value="&nbsp;&nbsp;" />
-			<h:selectOneMenu id="selectCategoryFilter" immediate="true" value="#{bean.selectedCategoryFilterValue}" onchange="this.form.submit()"
+			<h:selectOneMenu id="selectCategoryFilter" immediate="true" value="#{bean.selectedCategoryFilterValue}" onchange="SPNR.insertSpinnerAfter( this, null, 'gbForm:selectSectionContainer' ); this.form.submit()"
 				valueChangeListener="#{bean.setSelectedCategoryFilterValue}">
 				<f:selectItems value="#{bean.categoryFilterSelectItems}" />
 			</h:selectOneMenu>
@@ -24,9 +25,9 @@
 				onfocus="clearIfDefaultString(this, '#{msgs.search_default_student_search_string}')"
 				onkeypress="return submitOnEnter(event, 'gbForm:searchSubmitButton');"
 			/><f:verbatim> </f:verbatim>
-			<h:commandButton actionListener="#{bean.search}" value="#{msgs.search_find}" id="searchSubmitButton" />
+			<h:commandButton actionListener="#{bean.search}" value="#{msgs.search_find}" id="searchSubmitButton" onclick="SPNR.disableControlsAndSpin( this, null );" />
 			<f:verbatim> </f:verbatim>
-			<h:commandButton actionListener="#{bean.clear}" value="#{msgs.search_clear}"/>
+			<h:commandButton actionListener="#{bean.clear}" value="#{msgs.search_clear}" onclick="SPNR.disableControlsAndSpin( this, null );" />
 		</t:div>
 	</t:div>