Skip to content

Commit

Permalink
Merge pull request sakaiproject#1316 from bjones86/SAK-30071
Browse files Browse the repository at this point in the history 
SAK-30071 clean-up usermembership JavaScript, remove old spinners and code in favour of new centralized approach
  • Loading branch information
@bjones86
bjones86 committed Dec 15, 2015
2 parents 0914edc + a66ee86 commit e3e480a
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 155 deletions.
12 changes: 0 additions & 12 deletions usermembership/tool/src/webapp/usermembership/css/usermembership.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ div#sitelistform\:actionContainer1 input, div#sitelistform\:actionContainer2 inp
width: 100%;
text-align: left;
text-shadow: none !important;
padding-right: 4em !important;
}

div#sitelistform\:actionContainer1 input:hover:enabled, div#sitelistform\:actionContainer2 input:hover:enabled {
Expand All @@ -75,15 +74,4 @@ div#sitelistform\:actionContainer2 div.column2, div#sitelistform\:actionContaine
margin-left: 1em;
vertical-align: top;
}

.spinner {
display: inline;
vertical-align: middle;
visibility: hidden;
}

input#sitelistform\:setToActive1Disabled.spinnerOverlay, input#sitelistform\:setToActive2Disabled.spinnerOverlay,
input#sitelistform\:setToInactive1Disabled.spinnerOverlay, input#sitelistform\:setToInactive2Disabled.spinnerOverlay {
background: transparent url("/../library/image/indicator.gif") no-repeat scroll right 5px !important;
}
/* end SAK-29637 */
111 changes: 0 additions & 111 deletions usermembership/tool/src/webapp/usermembership/js/usermembership.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,114 +54,3 @@ USR_MEMBRSHP.toggleActions = function( clickedElement )

setMainFrameHeight( USR_MEMBRSHP.frameID );
};

USR_MEMBRSHP.disableControls = function( escape )
{
// Clone and disable all drop downs (disable the clone, hide the original)
var dropDowns = USR_MEMBRSHP.nodeListToArray( document.getElementsByTagName( "select" ) );
for( i = 0; i < dropDowns.length; i++ )
{
// Hide the original drop down
var select = dropDowns[i];
select.style.display = "none";

// Create the cloned element and disable it
var newSelect = document.createElement( "select" );
newSelect.setAttribute( "id", select.getAttribute( "id" ) + "Disabled" );
newSelect.setAttribute( "name", select.getAttribute( "name" ) + "Disabled" );
newSelect.setAttribute( "disabled", "true" );
newSelect.className = select.className;
newSelect.innerHTML = select.innerHTML;

// Add the clone to the DOM where the original was
var parent = select.parentNode;
parent.insertBefore( newSelect, select );
}

// Get all the input elements, separate into lists by type
var allInputs = USR_MEMBRSHP.nodeListToArray( document.getElementsByTagName( "input" ) );
var elementsToCloneAndDisable = [];
var elementsToDisable = [];
for( i = 0; i < allInputs.length; i++ )
{
if( (allInputs[i].type === "submit" || allInputs[i].type === "button" || allInputs[i].type === "checkbox")
&& allInputs[i].id !== escape )
{
elementsToCloneAndDisable.push( allInputs[i] );
}
else if( allInputs[i].type === "text" && allInputs[i].id !== escape )
{
elementsToDisable.push( allInputs[i] );
}
}

// Disable all elements
USR_MEMBRSHP.toggleElements( elementsToDisable, true );
for( i = 0; i < elementsToCloneAndDisable.length; i++ )
{
USR_MEMBRSHP.cloneAndHideElement( "", elementsToCloneAndDisable[i] );
}
};

USR_MEMBRSHP.nodeListToArray = function( nodeList )
{
var array = [];
for( var i = nodeList.length >>> 0; i--; )
{
array[i] = nodeList[i];
}

return array;
};

USR_MEMBRSHP.cloneAndHideElement = function( divId, element )
{
// First, set the element to be invisible
element.style.display = "none";

// Now create a new disabled element with the same attributes as the existing element
var newElement = document.createElement( "input" );

newElement.setAttribute( 'type', element.type );
newElement.setAttribute( 'id', element.getAttribute( 'id' ) + 'Disabled' );
newElement.setAttribute( 'name', element.getAttribute( 'name' ) + 'Disabled' );
newElement.setAttribute( 'value', element.getAttribute( 'value' ) );
newElement.className = element.className + " noPointers";
newElement.setAttribute( 'disabled', 'true' );
if( element.type === "checkbox" )
{
newElement.checked = element.checked;
}

if( "" !== divId )
{
var div = document.getElementById( divId );
div.insertBefore( newElement, element );
}
else
{
var parent = element.parentNode;
parent.insertBefore( newElement, element );
}
};

USR_MEMBRSHP.toggleElements = function( elements, disabled )
{
for( i = 0; i < elements.length; i ++ )
{
elements[i].disabled = disabled;
}
};

USR_MEMBRSHP.showSpinner = function( spinnerID )
{
if( typeof spinnerID === "string" )
{
document.getElementById( spinnerID ).style.visibility = "visible";
}
else
{
var button = document.getElementById( spinnerID.id + "Disabled" );
button.className = "spinnerOverlay";
}
};
12 changes: 6 additions & 6 deletions usermembership/tool/src/webapp/usermembership/sitelist.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<f:view>
<sakai:view title="#{msgs.tool_title}">
<script>includeLatestJQuery('sitelist.jsp');</script>
<script type="text/javascript" src="/library/js/spinner.js"></script>
<script type="text/javascript" src="/sakai-usermembership-tool/usermembership/js/usermembership.js"></script>
<link href="/sakai-usermembership-tool/usermembership/css/usermembership.css" rel="stylesheet" type="text/css" media="all"></link>

Expand Down Expand Up @@ -50,9 +51,9 @@
</t:div>
<t:div styleClass="column2">
<h:commandButton id="setToInactive1" actionListener="#{SiteListBean.setToInactive}" value="#{msgs.set_to_inactive_button}" disabled="true"
onclick="USR_MEMBRSHP.disableControls();USR_MEMBRSHP.showSpinner( this );" />
onclick="SPNR.disableControlsAndSpin( this, null );" />
<h:commandButton id="setToActive1" actionListener="#{SiteListBean.setToActive}" value="#{msgs.set_to_active_button}" disabled="true"
onclick="USR_MEMBRSHP.disableControls();USR_MEMBRSHP.showSpinner( this );" />
onclick="SPNR.disableControlsAndSpin( this, null );" />
</t:div>
<t:div styleClass="column3">
<h:commandButton id="exportCsv1" actionListener="#{SiteListBean.exportAsCsv}" value="#{msgs.export_selected_to_csv}" disabled="true" />
Expand Down Expand Up @@ -147,9 +148,9 @@
</t:div>
<t:div styleClass="column2">
<h:commandButton id="setToInactive2" actionListener="#{SiteListBean.setToInactive}" value="#{msgs.set_to_inactive_button}" disabled="true"
onclick="USR_MEMBRSHP.disableControls();USR_MEMBRSHP.showSpinner( this );" />
onclick="SPNR.disableControlsAndSpin( this, null );" />
<h:commandButton id="setToActive2" actionListener="#{SiteListBean.setToActive}" value="#{msgs.set_to_active_button}" disabled="true"
onclick="USR_MEMBRSHP.disableControls();USR_MEMBRSHP.showSpinner( this );" />
onclick="SPNR.disableControlsAndSpin( this, null );" />
</t:div>
<t:div styleClass="column3">
<h:commandButton id="exportCsv2" actionListener="#{SiteListBean.exportAsCsv}" value="#{msgs.export_selected_to_csv}" disabled="true" />
Expand All @@ -159,8 +160,7 @@

<t:div styleClass="act">
<h:commandButton id="userlist" action="#{SiteListBean.processActionBack}" value="#{msgs.back_button}" styleClass="active"
onclick="USR_MEMBRSHP.disableControls();USR_MEMBRSHP.showSpinner( 'sitelistform\\:backSpinner' );" />
<h:graphicImage id="backSpinner" url="/../library/image/indicator.gif" styleClass="spinner" alt="Processing" />
onclick="SPNR.disableControlsAndSpin( this, null );" />
</t:div>
</h:form>
</sakai:view>
Expand Down
55 changes: 29 additions & 26 deletions usermembership/tool/src/webapp/usermembership/userlist.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

<f:view>
<sakai:view title="#{msgs.tool_title}">
<script type="text/javascript" src="/library/js/spinner.js"></script>
<%/*<sakai:flowState bean="#{UserListBean}"/>*/%>
<h:outputText value="#{UserListBean.initValues}"/>

Expand Down Expand Up @@ -62,10 +63,12 @@
onfocus="if(this.value == '#{msgs.bar_input_search_inst}') this.value = '';"/>
<h:commandButton id="searchButton" action="#{UserListBean.processActionSearch}"
onkeypress="document.forms[0].submit;" value="#{msgs.bar_search}"
styleClass="active" style="margin-left: 3px !important;"/>
styleClass="active" style="margin-left: 3px !important;"
onclick="SPNR.disableControlsAndSpin( this, null );" />
<h:commandButton id="clearSearchButton" action="#{UserListBean.processActionClearSearch}"
onkeypress="document.forms[0].submit;" value="#{msgs.bar_clear_search}"
rendered="#{UserListBean.renderClearSearch}" style="margin-left: 3px !important;"/>
rendered="#{UserListBean.renderClearSearch}" style="margin-left: 3px !important;"
onclick="SPNR.disableControlsAndSpin( this, null );" />
</t:div>
</h:panelGrid>

Expand Down Expand Up @@ -99,14 +102,14 @@
<f:param name="userId" value="#{row.userID}"/>
</h:commandLink>
</h:column>
<h:column id="internalUserId">
<f:facet name="header">
<t:commandSortHeader columnName="internalUserId" immediate="true" arrow="true">
<h:outputText value="#{msgs.internal_user_id}"/>
</t:commandSortHeader>
</f:facet>
<h:outputText value="#{row.userID}"/>
</h:column>
<h:column id="internalUserId">
<f:facet name="header">
<t:commandSortHeader columnName="internalUserId" immediate="true" arrow="true">
<h:outputText value="#{msgs.internal_user_id}"/>
</t:commandSortHeader>
</f:facet>
<h:outputText value="#{row.userID}"/>
</h:column>
<h:column id="userName">
<f:facet name="header">
<t:commandSortHeader columnName="name" immediate="true" arrow="true">
Expand Down Expand Up @@ -139,22 +142,22 @@
</f:facet>
<h:outputText value="#{row.authority}"/>
</h:column>
<h:column id="createdOn">
<f:facet name="header">
<t:commandSortHeader columnName="createdOn" immediate="true" arrow="true">
<h:outputText value="#{msgs.user_created_on}"/>
</t:commandSortHeader>
</f:facet>
<h:outputText value="#{row.createdOn}"/>
</h:column>
<h:column id="modifiedOn">
<f:facet name="header">
<t:commandSortHeader columnName="modifiedOn" immediate="true" arrow="true">
<h:outputText value="#{msgs.user_modified_on}"/>
</t:commandSortHeader>
</f:facet>
<h:outputText value="#{row.modifiedOn}"/>
</h:column>
<h:column id="createdOn">
<f:facet name="header">
<t:commandSortHeader columnName="createdOn" immediate="true" arrow="true">
<h:outputText value="#{msgs.user_created_on}"/>
</t:commandSortHeader>
</f:facet>
<h:outputText value="#{row.createdOn}"/>
</h:column>
<h:column id="modifiedOn">
<f:facet name="header">
<t:commandSortHeader columnName="modifiedOn" immediate="true" arrow="true">
<h:outputText value="#{msgs.user_modified_on}"/>
</t:commandSortHeader>
</f:facet>
<h:outputText value="#{row.modifiedOn}"/>
</h:column>
</t:dataTable>

<p class="instruction" style="margin-top: 40px;">
Expand Down

0 comments on commit e3e480a

Please sign in to comment.