Created
November 18, 2013 03:22
-
-
Save tollmanz/7521929 to your computer and use it in GitHub Desktop.
Cleanup of responsive component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git src/wp-admin/css/color-schemes/_admin.scss src/wp-admin/css/color-schemes/_admin.scss | |
index f7a4bc2..0a467a4 100644 | |
--- src/wp-admin/css/color-schemes/_admin.scss | |
+++ src/wp-admin/css/color-schemes/_admin.scss | |
@@ -366,11 +366,11 @@ ul#adminmenu > li.current > a.current:after { | |
/* Responsive Component */ | |
-div#moby6-toggle a:before { | |
+div#responsive-toggle a:before { | |
color: $menu-icon; | |
} | |
-.moby6-open div#moby6-toggle a { | |
+.responsive-open div#responsive-toggle a { | |
// ToDo: make inset border | |
border-color: transparent; | |
background: $menu-highlight-background; | |
diff --git src/wp-admin/css/wp-admin.css src/wp-admin/css/wp-admin.css | |
index fadb683..b67a721 100644 | |
--- src/wp-admin/css/wp-admin.css | |
+++ src/wp-admin/css/wp-admin.css | |
@@ -11211,7 +11211,7 @@ li#wp-admin-bar-toggle-button { | |
transition: left .05s ease-in-out, opacity .3s ease-in; | |
} | |
- .auto-fold .moby6-open #adminmenu { | |
+ .auto-fold .responsive-open #adminmenu { | |
-moz-opacity: 1; | |
-webkit-opacity: 1; | |
opacity: 1; | |
@@ -11283,7 +11283,7 @@ li#wp-admin-bar-toggle-button { | |
} | |
/* Sidebar Toggle */ | |
- #moby6-toggle { | |
+ #responsive-toggle { | |
position: fixed; | |
top: 5px; | |
left: 4px; | |
@@ -11298,16 +11298,16 @@ li#wp-admin-bar-toggle-button { | |
margin-top: -2px; | |
} | |
- .moby6-open #wpadminbar #wp-admin-bar-toggle-button a { | |
+ .responsive-open #wpadminbar #wp-admin-bar-toggle-button a { | |
background: #000; | |
} | |
- .moby6-open #wpbody { | |
+ .responsive-open #wpbody { | |
right: -190px; | |
} | |
- .auto-fold .moby6-open #adminmenuback, | |
- .auto-fold .moby6-open #adminmenuwrap { | |
+ .auto-fold .responsive-open #adminmenuback, | |
+ .auto-fold .responsive-open #adminmenuwrap { | |
left: 0; | |
} | |
@@ -12372,7 +12372,7 @@ li#wp-admin-bar-toggle-button { | |
/* Smartphone */ | |
@media screen and (max-width: 480px) { | |
- #moby6-overlay { | |
+ #responsive-overlay { | |
position: fixed; | |
top: 0; | |
left: 0; | |
diff --git src/wp-admin/js/common.js src/wp-admin/js/common.js | |
index 3406ee0..fa5b995 100644 | |
--- src/wp-admin/js/common.js | |
+++ src/wp-admin/js/common.js | |
@@ -1,5 +1,5 @@ | |
-/* global setUserSetting, ajaxurl, commonL10n, alert, confirm, toggleWithKeyboard, pagenow */ | |
-var showNotice, adminMenu, columns, validateForm, screenMeta, stickyMenu; | |
+/* global setUserSetting, ajaxurl, commonL10n, alert, confirm, toggleWithKeyboard, pagenow, _ */ | |
+var showNotice, adminMenu, columns, validateForm, screenMeta, stickyMenu, responsive; | |
(function($){ | |
// Removed in 3.3. | |
// (perhaps) needed for back-compat | |
@@ -461,7 +461,7 @@ stickyMenu = { | |
enable: function () { | |
if ( ! this.active ) { | |
- this.$window.on( 'resize.stickyMenu scroll.stickyMenu', this.debounce( | |
+ this.$window.on( 'resize.stickyMenu scroll.stickyMenu', _.debounce( | |
$.proxy( this.update, this ), 200 | |
) ); | |
this.$collapseMenu.on( 'click.stickyMenu', $.proxy( this.update, this ) ); | |
@@ -492,139 +492,105 @@ stickyMenu = { | |
this.$body.removeClass( 'sticky-menu' ); | |
} | |
} | |
- }, | |
- | |
- // Borrowed from Underscore.js | |
- debounce: function( func, wait, immediate ) { | |
- var timeout, args, context, timestamp, result; | |
- return function() { | |
- var later, callNow; | |
- context = this; | |
- args = arguments; | |
- timestamp = new Date().getTime(); | |
- later = function() { | |
- var last = new Date().getTime() - timestamp; | |
- if ( last < wait ) { | |
- timeout = setTimeout( later, wait - last ); | |
- } else { | |
- timeout = null; | |
- if ( ! immediate ) { | |
- result = func.apply( context, args ); | |
- context = args = null; | |
- } | |
- } | |
- }; | |
- callNow = immediate && !timeout; | |
- if ( ! timeout ) { | |
- timeout = setTimeout( later, wait ); | |
- } | |
- if ( callNow ) { | |
- result = func.apply( context, args ); | |
- context = args = null; | |
- } | |
- | |
- return result; | |
- }; | |
} | |
}; | |
stickyMenu.init(); | |
-var moby6 = { | |
+responsive = { | |
init: function() { | |
// cached selectors | |
+ this.$window = $( window ); | |
this.$html = $( document.documentElement ); | |
this.$body = $( document.body ); | |
this.$wpwrap = $( '#wpwrap' ); | |
this.$wpbody = $( '#wpbody' ); | |
this.$adminmenu = $( '#adminmenu' ); | |
- this.$overlay = $( '#moby6-overlay' ); | |
+ this.$overlay = $( '#responsive-overlay' ); | |
this.$toolbar = $( '#wp-toolbar' ); | |
this.$toolbarPopups = this.$toolbar.find( 'a[aria-haspopup="true"]' ); | |
// Modify functionality based on custom activate/deactivate event | |
this.$html | |
- .on( 'activate.moby6', function() { moby6.activate(); } ) | |
- .on( 'deactivate.moby6', function() { moby6.deactivate(); } ); | |
+ .on( 'activate.responsive', function() { | |
+ responsive.activate(); | |
+ } ) | |
+ .on( 'deactivate.responsive', function() { | |
+ responsive.deactivate(); | |
+ } ); | |
// Toggle sidebar when toggle is clicked | |
- $( '#wp-admin-bar-toggle-button' ).on( 'click', function(evt) { | |
+ $( '#wp-admin-bar-toggle-button' ).on( 'click', function( evt ) { | |
evt.preventDefault(); | |
- moby6.$wpwrap.toggleClass( 'moby6-open' ); | |
+ responsive.$wpwrap.toggleClass( 'responsive-open' ); | |
} ); | |
// Trigger custom events based on active media query. | |
- this.matchMedia(); | |
- $( window ).on( 'resize', $.proxy( this.matchMedia, this ) ); | |
+ this.toggleElements(); | |
+ this.$window.on( 'resize', _.debounce( | |
+ $.proxy( this.toggleElements, this ), 150 | |
+ ) ); | |
}, | |
activate: function() { | |
+ stickyMenu.disable(); | |
- window.stickymenu && window.stickymenu.disable(); | |
- | |
- if ( ! moby6.$body.hasClass( 'auto-fold' ) ) | |
- moby6.$body.addClass( 'auto-fold' ); | |
+ if ( ! this.$body.hasClass( 'auto-fold' ) ) { | |
+ this.$body.addClass( 'auto-fold' ); | |
+ } | |
this.modifySidebarEvents(); | |
this.disableDraggables(); | |
this.movePostSearch(); | |
- | |
}, | |
deactivate: function() { | |
- | |
- window.stickymenu && window.stickymenu.enable(); | |
- | |
+ stickyMenu.enable(); | |
this.enableDraggables(); | |
- this.removeHamburgerButton(); | |
this.restorePostSearch(); | |
- | |
}, | |
- matchMedia: function() { | |
- clearTimeout( this.resizeTimeout ); | |
- this.resizeTimeout = setTimeout( function() { | |
- | |
- if ( ! window.matchMedia ) | |
+ toggleElements: function() { | |
+ var width = this.$window.width(); | |
+ if ( width <= 782 ) { | |
+ if ( responsive.$html.hasClass( 'touch' ) ) { | |
return; | |
- | |
- if ( window.matchMedia( '(max-width: 782px)' ).matches ) { | |
- if ( moby6.$html.hasClass( 'touch' ) ) | |
- return; | |
- moby6.$html.addClass( 'touch' ).trigger( 'activate.moby6' ); | |
- } else { | |
- if ( ! moby6.$html.hasClass( 'touch' ) ) | |
- return; | |
- moby6.$html.removeClass( 'touch' ).trigger( 'deactivate.moby6' ); | |
} | |
- if ( window.matchMedia( '(max-width: 480px)' ).matches ) { | |
- moby6.enableOverlay(); | |
- } else { | |
- moby6.disableOverlay(); | |
+ responsive.$html.addClass( 'touch' ).trigger( 'activate.responsive' ); | |
+ } else { | |
+ if ( ! responsive.$html.hasClass( 'touch' ) ) { | |
+ return; | |
} | |
- }, 150 ); | |
+ responsive.$html.removeClass( 'touch' ).trigger( 'deactivate.responsive' ); | |
+ } | |
+ | |
+ if ( width <= 480 ) { | |
+ responsive.enableOverlay(); | |
+ } else { | |
+ responsive.disableOverlay(); | |
+ } | |
}, | |
enableOverlay: function() { | |
if ( this.$overlay.length === 0 ) { | |
- this.$overlay = $( '<div id="moby6-overlay"></div>' ) | |
+ this.$overlay = $( '<div id="responsive-overlay"></div>' ) | |
.insertAfter( '#wpcontent' ) | |
.hide() | |
- .on( 'click.moby6', function() { | |
- moby6.$toolbar.find( '.menupop.hover' ).removeClass( 'hover' ); | |
+ .on( 'click.responsive', function() { | |
+ responsive.$toolbar.find( '.menupop.hover' ).removeClass( 'hover' ); | |
$( this ).hide(); | |
}); | |
} | |
- this.$toolbarPopups.on( 'click.moby6', function() { | |
- moby6.$overlay.show(); | |
+ this.$toolbarPopups.on( 'click.responsive', function() { | |
+ responsive.$overlay.show(); | |
}); | |
}, | |
disableOverlay: function() { | |
- this.$toolbarPopups.off( 'click.moby6' ); | |
+ this.$toolbarPopups.off( 'click.responsive' ); | |
this.$overlay.hide(); | |
}, | |
@@ -633,15 +599,16 @@ var moby6 = { | |
this.$adminmenu.find( 'a.wp-has-submenu' ).off( '.wp-mobile-hover' ); | |
var scrollStart = 0; | |
- this.$adminmenu.on( 'touchstart.moby6', 'li.wp-has-submenu > a', function() { | |
- scrollStart = $( window ).scrollTop(); | |
+ this.$adminmenu.on( 'touchstart.responsive', 'li.wp-has-submenu > a', function() { | |
+ scrollStart = responsive.$window.scrollTop(); | |
}); | |
- this.$adminmenu.on( 'touchend.moby6', 'li.wp-has-submenu > a', function( e ) { | |
+ this.$adminmenu.on( 'touchend.responsive', 'li.wp-has-submenu > a', function( e ) { | |
e.preventDefault(); | |
- if ( $( window ).scrollTop() !== scrollStart ) | |
- return false; | |
+ if ( responsive.$window.scrollTop() !== scrollStart ) { | |
+ return; | |
+ } | |
$( this ).find( 'li.wp-has-submenu' ).removeClass( 'selected' ); | |
$( this ).parent( 'li' ).addClass( 'selected' ); | |
@@ -662,11 +629,6 @@ var moby6 = { | |
.addClass( 'hndle' ); | |
}, | |
- removeHamburgerButton: function() { | |
- if ( this.hamburgerButtonView !== undefined ) | |
- this.hamburgerButtonView.destroy(); | |
- }, | |
- | |
movePostSearch: function() { | |
this.searchBox = this.$wpbody.find( 'p.search-box' ); | |
if ( this.searchBox.length ) { | |
@@ -681,14 +643,15 @@ var moby6 = { | |
restorePostSearch: function() { | |
if ( this.searchBox !== undefined ) { | |
this.searchBox.show(); | |
- if ( this.searchBoxClone !== undefined ) | |
+ if ( this.searchBoxClone !== undefined ) { | |
this.searchBoxClone.hide(); | |
+ } | |
} | |
} | |
}; | |
-// Fire moby6.init when document is ready | |
-$( document ).ready( $.proxy( moby6.init, moby6 ) ); | |
+// Fire responsive.init when document is ready | |
+$( document ).ready( $.proxy( responsive.init, responsive ) ); | |
// make Windows 8 devices playing along nicely | |
(function(){ | |
diff --git src/wp-includes/css/admin-bar.css src/wp-includes/css/admin-bar.css | |
index 0f1f5d8..35837de 100644 | |
--- src/wp-includes/css/admin-bar.css | |
+++ src/wp-includes/css/admin-bar.css | |
@@ -947,7 +947,7 @@ | |
/* Smartphone */ | |
@media screen and (max-width: 480px) { | |
- #moby6-overlay { | |
+ #responsive-overlay { | |
position: fixed; | |
top: 0; | |
left: 0; | |
diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php | |
index b1f0680..bfafa83 100644 | |
--- src/wp-includes/script-loader.php | |
+++ src/wp-includes/script-loader.php | |
@@ -72,7 +72,7 @@ function wp_default_scripts( &$scripts ) { | |
'time' => (string) time(), | |
) ); | |
- $scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), false, 1 ); | |
+ $scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils', 'underscore'), false, 1 ); | |
did_action( 'init' ) && $scripts->localize( 'common', 'commonL10n', array( | |
'warnDelete' => __("You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete.") | |
) ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment