Changeset 8642 for trunk/src/bp-xprofile/admin/js/admin.js

Timestamp:

07/17/2014 07:19:23 PM (11 years ago)

Author:

johnjamesjacoby

Message:

UI improvements to admin area XProfile field options, bringing them inline with WordPress core UI sortable elements.

File:

• trunk/src/bp-xprofile/admin/js/admin.js (modified) (3 diffs)

trunk/src/bp-xprofile/admin/js/admin.js

@@ -12 +12 @@
         theId        = document.getElementById(forWhat + '_option_number').value,
         newDiv       = document.createElement('p'),
-        newOption    = document.createElement('input'),
-        span         = document.createElement( 'span' ),
-        txt          = document.createTextNode( '\u00A0\u039E\u00A0' ),
+        grabber      = document.createElement( 'span' ),
+        newOption    = document.createElement( 'input' ),
+        label        = document.createElement( 'label' ),
         isDefault    = document.createElement( 'input' ),
-        span1        = document.createElement( 'span' ),
-        txt1         = document.createTextNode( ' Default Value ' ),
-
-        toDelete     = document.createElement( 'a' ),
-        toDeleteText = document.createTextNode( '[x]' );
+        txt1         = document.createTextNode( 'Default Value' ),
+        toDeleteText = document.createTextNode( 'Delete' ),
+        toDeleteWrap = document.createElement( 'div' );
+        toDelete     = document.createElement( 'a' );
 
     newDiv.setAttribute('id', forWhat + '_div' + theId);
-    newDiv.setAttribute('class', 'sortable');
+    newDiv.setAttribute('class', 'bp-option sortable');
+
+    grabber.setAttribute( 'class', 'bp-option-icon grabber');
 
     newOption.setAttribute( 'type', 'text' );
     newOption.setAttribute( 'name', forWhat + '_option[' + theId + ']' );
     newOption.setAttribute( 'id', forWhat + '_option' + theId );
-
-    span.appendChild( txt );
 
     if ( forWhat === 'checkbox' || forWhat === 'multiselectbox' ) {
@@ -41 +40 @@
     isDefault.setAttribute( 'value', theId );
 
-    span1.appendChild( txt1 );
-
     toDelete.setAttribute( 'href', 'javascript:hide("' + forWhat + '_div' + theId + '")' );
     toDelete.setAttribute( 'class', 'delete' );
     toDelete.appendChild( toDeleteText );
 
-    newDiv.appendChild( span );
+    toDeleteWrap.setAttribute( 'class', 'delete-button' );
+    toDeleteWrap.appendChild( toDelete );
+
+    label.appendChild( document.createTextNode( ' ' ) );
+    label.appendChild( isDefault );
+    label.appendChild( document.createTextNode( ' ' ) );
+    label.appendChild( txt1 );
+    label.appendChild( document.createTextNode( ' ' ) );
+
+    newDiv.appendChild( grabber );
+    newDiv.appendChild( document.createTextNode( ' ' ) );
     newDiv.appendChild( newOption );
-    newDiv.appendChild( document.createTextNode( ' ' ) );
-    newDiv.appendChild( isDefault );
-    newDiv.appendChild( span1 );
-    newDiv.appendChild( toDelete );
+    newDiv.appendChild( label );
+    newDiv.appendChild( toDeleteWrap );
     holder.appendChild( newDiv );
 
@@ -100 +105 @@
 
 function enableSortableFieldOptions( forWhat ) {
-    if ( jQuery( '#' + forWhat + ' p.sortable' ).length > 1 ) {
-        jQuery( '.bp-options-box' ).sortable( {
-            items: 'p.sortable',
-            tolerance: 'pointer',
-            axis: 'y',
-            handle: 'span'
-        });
-
-        jQuery( '.sortable span' ).css( 'cursor', 'move' );
-    }
+    jQuery( '.bp-options-box' ).sortable( {
+        cursor: 'move',
+        items: 'p.sortable',
+        tolerance: 'intersect',
+        axis: 'y'
+    });
+
+    jQuery( '.sortable, .sortable span' ).css( 'cursor', 'move' );
 }
 
 function destroySortableFieldOptions() {
     jQuery( '.bp-options-box' ).sortable( 'destroy' );
-    jQuery( '.sortable span' ).css( 'cursor', 'default' );
+    jQuery( '.sortable, .sortable span' ).css( 'cursor', 'default' );
 }