Skip to content

Commit

Permalink
Merge pull request #689 from wp-shortcake/fix-duplicate-markup
Browse files Browse the repository at this point in the history 
Reset state instead of creating duplicate modals
  • Loading branch information
@goldenapples
goldenapples authored Mar 16, 2017
2 parents d0087c7 + fcddee7 commit b653929
Show file tree
Hide file tree
Showing 7 changed files with 232 additions and 110 deletions.
26 changes: 20 additions & 6 deletions js-tests/build/specs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1166,13 +1166,27 @@ var shortcodeViewConstructor = {

if ( currentShortcode ) {

var wp_media_frame = wp.media.frames.wp_media_frame = wp.media({
frame : "post",
state : 'shortcode-ui',
currentShortcode : currentShortcode,
});
var frame = wp.media.editor.get( window.wpActiveEditor );

if ( frame ) {
frame.mediaController.setActionUpdate( currentShortcode );
frame.open();
} else {
frame = wp.media.editor.open( window.wpActiveEditor, {
frame : "post",
state : 'shortcode-ui',
currentShortcode : currentShortcode,
});
}

wp_media_frame.open();
// Make sure to reset state when closed.
frame.once( 'close submit', function() {
frame.state().props.set('currentShortcode', false);
var menuItem = frame.menu.get().get('shortcode-ui');
menuItem.options.text = shortcodeUIData.strings.media_frame_title;
menuItem.render();
frame.setState( 'insert' );
} );

/* Trigger render_edit */
/*
Expand Down
158 changes: 106 additions & 52 deletions js/build/shortcode-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ module.exports = Shortcodes;
},{"./../models/shortcode.js":6}],3:[function(require,module,exports){
(function (global){
var Backbone = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null),
sui = require('./../utils/sui.js'),
Shortcodes = require('./../collections/shortcodes.js');
wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null),
sui = require('./../utils/sui.js'),
Shortcodes = require('./../collections/shortcodes.js');

var MediaController = wp.media.controller.State.extend({

Expand Down Expand Up @@ -84,6 +84,49 @@ var MediaController = wp.media.controller.State.extend({
this.props.set( 'search', null );
},

setActionSelect: function() {
this.attributes.title = shortcodeUIData.strings.media_frame_menu_insert_label;
this.props.set( 'currentShortcode', null );
this.props.set( 'action', 'select' );

// Update menuItem text.
var menuItem = this.frame.menu.get().get('shortcode-ui');
menuItem.options.text = this.attributes.title;
menuItem.render();

this.frame.setState( 'shortcode-ui' );
this.frame.render();
},

setActionUpdate: function( currentShortcode ) {

this.attributes.title = shortcodeUIData.strings.media_frame_menu_update_label;
this.attributes.title = this.attributes.title.replace( /%s/, currentShortcode.attributes.label );

this.props.set( 'currentShortcode', currentShortcode );
this.props.set( 'action', 'update' );

// If a new frame is being created, it may not exist yet.
// Defer to ensure it does.
_.defer( function() {

this.frame.setState( 'shortcode-ui' );
this.frame.content.render();

this.toggleSidebar( true );

this.frame.once( 'close', function() {
this.frame.mediaController.toggleSidebar( false );
}.bind( this ) );

}.bind( this ) );

},

toggleSidebar: function( show ) {
this.frame.$el.toggleClass( 'hide-menu', show );
},

});

sui.controllers.MediaController = MediaController;
Expand Down Expand Up @@ -280,8 +323,10 @@ $(document).ready(function(){
} );

$(document.body).on( 'click', '.shortcake-add-post-element', function( event ) {
var elem = $( event.currentTarget ),
editor = elem.data('editor'),

var $el = $( event.currentTarget ),
editor = $el.data('editor'),
frame = wp.media.editor.get( editor ),
options = {
frame: 'post',
state: 'shortcode-ui',
Expand All @@ -292,12 +337,25 @@ $(document).ready(function(){

// Remove focus from the `.shortcake-add-post-element` button.
// Prevents Opera from showing the outline of the button above the modal.
//
// See: https://core.trac.wordpress.org/ticket/22445
elem.blur();
$el.blur();

if ( frame ) {
frame.mediaController.setActionSelect();
frame.open();
} else {
frame = wp.media.editor.open( editor, options );
}

// Make sure to reset state when closed.
frame.once( 'close submit', function() {
frame.state().props.set('currentShortcode', false);
var menuItem = frame.menu.get().get('shortcode-ui');
menuItem.options.text = shortcodeUIData.strings.media_frame_title;
menuItem.render();
frame.setState( 'insert' );
} );

wp.media.editor.remove( editor );
wp.media.editor.open( editor, options );
} );

});
Expand Down Expand Up @@ -587,13 +645,27 @@ var shortcodeViewConstructor = {

if ( currentShortcode ) {

var wp_media_frame = wp.media.frames.wp_media_frame = wp.media({
frame : "post",
state : 'shortcode-ui',
currentShortcode : currentShortcode,
});
var frame = wp.media.editor.get( window.wpActiveEditor );

wp_media_frame.open();
if ( frame ) {
frame.mediaController.setActionUpdate( currentShortcode );
frame.open();
} else {
frame = wp.media.editor.open( window.wpActiveEditor, {
frame : "post",
state : 'shortcode-ui',
currentShortcode : currentShortcode,
});
}

// Make sure to reset state when closed.
frame.once( 'close submit', function() {
frame.state().props.set('currentShortcode', false);
var menuItem = frame.menu.get().get('shortcode-ui');
menuItem.options.text = shortcodeUIData.strings.media_frame_title;
menuItem.render();
frame.setState( 'insert' );
} );

/* Trigger render_edit */
/*
Expand Down Expand Up @@ -1460,41 +1532,33 @@ var mediaFrame = postMediaFrame.extend( {

var id = 'shortcode-ui';

var opts = {
id : id,
search : true,
router : false,
toolbar : id + '-toolbar',
menu : 'default',
title : shortcodeUIData.strings.media_frame_menu_insert_label,
tabs : [ 'insert' ],
priority: 66,
content : id + '-content-insert',
};

if ( 'currentShortcode' in this.options ) {
opts.title = shortcodeUIData.strings.media_frame_menu_update_label.replace( /%s/, this.options.currentShortcode.attributes.label );
}

this.mediaController = new MediaController( opts );
this.mediaController = new MediaController({
id : id,
search : true,
router : false,
toolbar : id + '-toolbar',
menu : 'default',
title : shortcodeUIData.strings.media_frame_menu_insert_label,
tabs : [ 'insert' ],
priority : 66,
content : id + '-content-insert',
});

if ( 'currentShortcode' in this.options ) {
this.mediaController.props.set( 'currentShortcode', arguments[0].currentShortcode );
this.mediaController.props.set( 'action', 'update' );
this.mediaController.setActionUpdate( this.options.currentShortcode );
}

this.states.add([ this.mediaController ]);

this.on( 'content:render:' + id + '-content-insert', _.bind( this.contentRender, this, 'shortcode-ui', 'insert' ) );
this.on( 'toolbar:create:' + id + '-toolbar', this.toolbarCreate, this );
this.on( 'toolbar:render:' + id + '-toolbar', this.toolbarRender, this );
this.on( 'menu:render:default', this.renderShortcodeUIMenu );

},

events: function() {
return _.extend( {}, postMediaFrame.prototype.events, {
'click .media-menu-item' : 'resetMediaController',
'click .media-menu-item' : 'resetMediaController',
} );
},

Expand All @@ -1514,15 +1578,15 @@ var mediaFrame = postMediaFrame.extend( {
);
},

toolbarRender: function( toolbar ) {},

toolbarCreate : function( toolbar ) {

var text = shortcodeUIData.strings.media_frame_toolbar_insert_label;
if ( 'currentShortcode' in this.options ) {

if ( this.state().props.get('currentShortcode') ) {
text = shortcodeUIData.strings.media_frame_toolbar_update_label;
}

toolbar.view = new Toolbar( {
toolbar.view = new Toolbar( {
controller : this,
items: {
insert: {
Expand All @@ -1545,17 +1609,6 @@ var mediaFrame = postMediaFrame.extend( {
priority: 65
})
});

// Hide menu if editing.
// @todo - fix this.
// This is a hack.
// I just can't work out how to do it properly...
if ( view.controller.state().props && view.controller.state().props.get( 'currentShortcode' ) ) {
window.setTimeout( function() {
view.controller.$el.addClass( 'hide-menu' );
} );
}

},

insertAction: function() {
Expand Down Expand Up @@ -1927,14 +1980,15 @@ var Shortcode_UI = Backbone.View.extend({
},

select: function(e) {
this.controller.props.set( 'action', 'insert' );

var target = $(e.currentTarget).closest( '.shortcode-list-item' );
var shortcode = sui.shortcodes.findWhere( { shortcode_tag: target.attr( 'data-shortcode' ) } );

if ( ! shortcode ) {
return;
}

this.controller.props.set( 'action', 'insert' );
this.controller.props.set( 'currentShortcode', shortcode.clone() );

this.render();
Expand Down
49 changes: 46 additions & 3 deletions js/src/controllers/media-controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var Backbone = require('backbone'),
wp = require('wp'),
sui = require('sui-utils/sui'),
Shortcodes = require('sui-collections/shortcodes');
wp = require('wp'),
sui = require('sui-utils/sui'),
Shortcodes = require('sui-collections/shortcodes');

var MediaController = wp.media.controller.State.extend({

Expand Down Expand Up @@ -47,6 +47,49 @@ var MediaController = wp.media.controller.State.extend({
this.props.set( 'search', null );
},

setActionSelect: function() {
this.attributes.title = shortcodeUIData.strings.media_frame_menu_insert_label;
this.props.set( 'currentShortcode', null );
this.props.set( 'action', 'select' );

// Update menuItem text.
var menuItem = this.frame.menu.get().get('shortcode-ui');
menuItem.options.text = this.attributes.title;
menuItem.render();

this.frame.setState( 'shortcode-ui' );
this.frame.render();
},

setActionUpdate: function( currentShortcode ) {

this.attributes.title = shortcodeUIData.strings.media_frame_menu_update_label;
this.attributes.title = this.attributes.title.replace( /%s/, currentShortcode.attributes.label );

this.props.set( 'currentShortcode', currentShortcode );
this.props.set( 'action', 'update' );

// If a new frame is being created, it may not exist yet.
// Defer to ensure it does.
_.defer( function() {

this.frame.setState( 'shortcode-ui' );
this.frame.content.render();

this.toggleSidebar( true );

this.frame.once( 'close', function() {
this.frame.mediaController.toggleSidebar( false );
}.bind( this ) );

}.bind( this ) );

},

toggleSidebar: function( show ) {
this.frame.$el.toggleClass( 'hide-menu', show );
},

});

sui.controllers.MediaController = MediaController;
Expand Down
27 changes: 21 additions & 6 deletions js/src/shortcode-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ $(document).ready(function(){
} );

$(document.body).on( 'click', '.shortcake-add-post-element', function( event ) {
var elem = $( event.currentTarget ),
editor = elem.data('editor'),

var $el = $( event.currentTarget ),
editor = $el.data('editor'),
frame = wp.media.editor.get( editor ),
options = {
frame: 'post',
state: 'shortcode-ui',
Expand All @@ -35,12 +37,25 @@ $(document).ready(function(){

// Remove focus from the `.shortcake-add-post-element` button.
// Prevents Opera from showing the outline of the button above the modal.
//
// See: https://core.trac.wordpress.org/ticket/22445
elem.blur();
$el.blur();

if ( frame ) {
frame.mediaController.setActionSelect();
frame.open();
} else {
frame = wp.media.editor.open( editor, options );
}

// Make sure to reset state when closed.
frame.once( 'close submit', function() {
frame.state().props.set('currentShortcode', false);
var menuItem = frame.menu.get().get('shortcode-ui');
menuItem.options.text = shortcodeUIData.strings.media_frame_title;
menuItem.render();
frame.setState( 'insert' );
} );

wp.media.editor.remove( editor );
wp.media.editor.open( editor, options );
} );

});
Loading

0 comments on commit b653929

Please sign in to comment.