Skip to content

Instantly share code, notes, and snippets.

@tollmanz
Created November 18, 2013 03:22
Show Gist options
  • Save tollmanz/7521929 to your computer and use it in GitHub Desktop.
Save tollmanz/7521929 to your computer and use it in GitHub Desktop.
Cleanup of responsive component
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