Browse Source

Add shortcode buttons (#108)

* Add buttons for page sections and calls to action.

* Fix coding standards.

* Fix localization.
pull/113/head 1.1.0
Ned Zimmerman 7 years ago committed by GitHub
parent
commit
ef6225a0f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 36
      assets/scripts/call-to-action.js
  2. 42
      assets/scripts/page-section.js
  3. 6
      dist/mix-manifest.json
  4. 1
      dist/scripts/call-to-action.js
  5. 2
      dist/scripts/catalog-admin.js
  6. 2
      dist/scripts/customizer.js
  7. 1
      dist/scripts/page-section.js
  8. 1
      dist/scripts/shortcodes.js
  9. 5
      functions.php
  10. 48
      inc/actions/namespace.php
  11. 84
      inc/filters/namespace.php
  12. 4
      package.json
  13. 3
      partials/contact-form.php
  14. 3
      partials/content-front-page.php
  15. 38
      webpack.mix.js

36
assets/scripts/call-to-action.js

@ -0,0 +1,36 @@
( function () {
tinymce.create( 'tinymce.plugins.aldine_call_to_action', {
init: function ( editor, url ) {
editor.addButton( 'aldine_call_to_action', {
title: aldine.call_to_action.title,
icon: 'icon dashicons-flag',
onclick: function () {
editor.windowManager.open( {
title: aldine.call_to_action.title,
body: [
{
type: 'textbox',
name: 'text',
label: aldine.call_to_action.text,
value: aldine.call_to_action.title,
},
{
type: 'textbox',
name: 'url',
label: aldine.call_to_action.url,
value: '#',
},
],
onsubmit: function ( e ) {
editor.insertContent( '[aldine_call_to_action text="' + e.data.text + '" url="' + e.data.url + '"]' );
},
} );
},
} );
},
createControl: function ( n, cm ) {
return null;
},
} );
tinymce.PluginManager.add( 'aldine_call_to_action', tinymce.plugins.aldine_call_to_action );
} )();

42
assets/scripts/page-section.js

@ -0,0 +1,42 @@
( function () {
tinymce.create( 'tinymce.plugins.aldine_page_section', {
init: function ( editor, url ) {
editor.addButton( 'aldine_page_section', {
title: aldine.page_section.title,
icon: 'icon dashicons-layout',
onclick: function () {
editor.windowManager.open( {
title: aldine.page_section.title,
body: [
{
type: 'textbox',
name: 'title',
label: aldine.page_section.title_label,
value: aldine.page_section.title,
},
{
type: 'listbox',
name: 'variant',
label: 'Variant',
values: [
{ text: aldine.page_section.standard, value: '' },
{ text: aldine.page_section.accent, value: 'accent' },
{ text: aldine.page_section.bordered, value: 'bordered' },
{ text: aldine.page_section.borderless, value: 'borderless' },
],
value: '', // Sets the default
},
],
onsubmit: function ( e ) {
editor.insertContent( '[aldine_page_section title="' + e.data.title + '" variant="' + e.data.variant + '"]<p>Insert your page section content here.</p>[/aldine_page_section]' );
},
} );
},
} );
},
createControl: function ( n, cm ) {
return null;
},
} );
tinymce.PluginManager.add( 'aldine_page_section', tinymce.plugins.aldine_page_section );
} )();

6
dist/mix-manifest.json vendored

@ -2,6 +2,8 @@
"/scripts/aldine.js": "/scripts/aldine.js?id=e222d7e1e1c71c6bdb98",
"/styles/aldine.css": "/styles/aldine.css?id=2648daa49889948f53c9",
"/styles/editor.css": "/styles/editor.css?id=e96b3d10ea63fa07d09b",
"/scripts/customizer.js": "/scripts/customizer.js?id=1b0d3cfc1d85f460af53",
"/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=d25f1240496bd3607338"
"/scripts/customizer.js": "/scripts/customizer.js?id=0a52a1e0117b2902b145",
"/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=4ee1f7f0640e28791cf2",
"/scripts/page-section.js": "/scripts/page-section.js?id=2f9e970e43107c0ba14a",
"/scripts/call-to-action.js": "/scripts/call-to-action.js?id=42d4e3bac4388623cd04"
}

1
dist/scripts/call-to-action.js vendored

@ -0,0 +1 @@
!function(t){var n={};function e(l){if(n[l])return n[l].exports;var o=n[l]={i:l,l:!1,exports:{}};return t[l].call(o.exports,o,o.exports,e),o.l=!0,o.exports}e.m=t,e.c=n,e.d=function(t,n,l){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:l})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=1)}({1:function(t,n,e){t.exports=e("eL/z")},"eL/z":function(t,n){tinymce.create("tinymce.plugins.aldine_call_to_action",{init:function(t,n){t.addButton("aldine_call_to_action",{title:aldine.call_to_action.title,icon:"icon dashicons-flag",onclick:function(){t.windowManager.open({title:aldine.call_to_action.title,body:[{type:"textbox",name:"text",label:aldine.call_to_action.text,value:aldine.call_to_action.title},{type:"textbox",name:"url",label:aldine.call_to_action.url,value:"#"}],onsubmit:function(n){t.insertContent('[aldine_call_to_action text="'+n.data.text+'" url="'+n.data.url+'"]')}})}})},createControl:function(t,n){return null}}),tinymce.PluginManager.add("aldine_call_to_action",tinymce.plugins.aldine_call_to_action)}});

2
dist/scripts/catalog-admin.js vendored

File diff suppressed because one or more lines are too long

2
dist/scripts/customizer.js vendored

File diff suppressed because one or more lines are too long

1
dist/scripts/page-section.js vendored

@ -0,0 +1 @@
!function(e){var t={};function n(a){if(t[a])return t[a].exports;var i=t[a]={i:a,l:!1,exports:{}};return e[a].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:a})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}({4:function(e,t,n){e.exports=n("BNyP")},BNyP:function(e,t){tinymce.create("tinymce.plugins.aldine_page_section",{init:function(e,t){e.addButton("aldine_page_section",{title:aldine.page_section.title,icon:"icon dashicons-layout",onclick:function(){e.windowManager.open({title:aldine.page_section.title,body:[{type:"textbox",name:"title",label:aldine.page_section.title_label,value:aldine.page_section.title},{type:"listbox",name:"variant",label:"Variant",values:[{text:aldine.page_section.standard,value:""},{text:aldine.page_section.accent,value:"accent"},{text:aldine.page_section.bordered,value:"bordered"},{text:aldine.page_section.borderless,value:"borderless"}],value:""}],onsubmit:function(t){e.insertContent('[aldine_page_section title="'+t.data.title+'" variant="'+t.data.variant+'"]<p>Insert your page section content here.</p>[/aldine_page_section]')}})}})},createControl:function(e,t){return null}}),tinymce.PluginManager.add("aldine_page_section",tinymce.plugins.aldine_page_section)}});

1
dist/scripts/shortcodes.js vendored

@ -0,0 +1 @@
!function(t){var e={};function n(a){if(e[a])return e[a].exports;var i=e[a]={i:a,l:!1,exports:{}};return t[a].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,a){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:a})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}({3:function(t,e,n){t.exports=n("GR5A")},GR5A:function(t,e){tinymce.create("tinymce.plugins.aldine_page_section",{init:function(t,e){t.addButton("aldine_page_section",{title:"Page Section",icon:"layout",onclick:function(){t.windowManager.open({title:"Page Section",body:[{type:"textbox",name:"title",label:"Title",value:"Page Section"},{type:"listbox",name:"variant",label:"Variant",values:[{text:"Standard",value:""},{text:"Accent",value:"accent"},{text:"Bordered",value:"bordered"},{text:"Borderless",value:"borderless"}],value:""}],onsubmit:function(e){t.insertContent('[aldine_page_section title="'+e.data.title+'" variant="'+e.data.variant+'"][/aldine_page_section]')}})}})},createControl:function(t,e){return null}}),tinymce.create("tinymce.plugins.aldine_call_to_action",{init:function(t,e){t.addButton("aldine_call_to_action",{title:"Call to Action",icon:"link",onclick:function(){t.windowManager.open({title:"Call to Action",body:[{type:"textbox",name:"text",label:"Text",value:"Call to Action"},{type:"textbox",name:"url",label:"URL",value:"#"}],onsubmit:function(e){t.insertContent('[aldine_call_to_action text="'+e.data.text+'" url="'+e.data.url+'"]')}})}})},createControl:function(t,e){return null}}),tinymce.PluginManager.add("aldine_call_to_action",tinymce.plugins.aldine_call_to_action)}});

5
functions.php

@ -47,8 +47,9 @@ add_action( 'after_setup_theme', '\Aldine\Actions\content_width', 0 );
add_action( 'wp_head', '\Aldine\Actions\output_custom_colors' );
add_action( 'init', '\Aldine\Actions\add_editor_styles' );
add_action( 'admin_init', '\Aldine\Actions\hide_catalog_content_editor' );
add_filter( 'mce_buttons', '\Aldine\Filters\add_style_select' );
add_filter( 'tiny_mce_before_init', '\Aldine\Filters\add_blocks' );
foreach ( [ 'post.php', 'post-new.php' ] as $hook ) {
add_action( "admin_head-$hook", '\Aldine\Actions\tinymce_l18n' );
}
add_filter( 'body_class', '\Aldine\Filters\body_classes' );
add_filter( 'excerpt_more', '\Aldine\Filters\excerpt_more' );
add_filter( 'query_vars', '\Aldine\Filters\register_query_vars' );

48
inc/actions/namespace.php

@ -86,6 +86,9 @@ function setup() {
// Add editor style.
add_editor_style( $assets->getPath( 'styles/editor.css' ) );
// Add shortcode buttons.
add_action( 'init', __NAMESPACE__ . '\register_shortcode_buttons' );
}
/**
@ -248,3 +251,48 @@ function add_color_variants( $option, $old_value, $value ) {
update_option( $option . '_dark', (string) $color_dark );
update_option( $option . '_alpha', (string) $color_alpha );
}
/**
* Register shortcode buttons.
*
* @since 1.1.0
*/
function register_shortcode_buttons() {
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
return;
}
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}
add_filter( 'mce_external_plugins', '\Aldine\filters\add_buttons' );
add_filter( 'mce_buttons', '\Aldine\filters\register_buttons' );
}
/**
* Localize shortcode button strings.
*
* @since 1.1.0
*/
function tinymce_l18n() {
?>
<script type='text/javascript'>
const aldine = {
page_section: {
'title': '<?php _e( 'Page Section', 'pressbooks-aldine' ); ?>',
'title_label': '<?php _e( 'Title', 'pressbooks-aldine' ); ?>',
'standard': '<?php _e( 'Standard', 'pressbooks-aldine' ); ?>',
'accent': '<?php _e( 'Accent', 'pressbooks-aldine' ); ?>',
'bordered': '<?php _e( 'Bordered', 'pressbooks-aldine' ); ?>',
'borderless': '<?php _e( 'Borderless', 'pressbooks-aldine' ); ?>'
},
call_to_action: {
'title': '<?php _e( 'Call to Action', 'pressbooks-aldine' ); ?>',
'text': '<?php _e( 'Text', 'pressbooks-aldine' ); ?>',
'url': '<?php _e( 'URL', 'pressbooks-aldine' ); ?>'
}
};
</script>
<?php
}

84
inc/filters/namespace.php

@ -7,6 +7,7 @@
namespace Aldine\Filters;
use PressbooksMix\Assets;
use function Aldine\Helpers\has_sections;
/**
@ -60,62 +61,6 @@ function excerpt_more() {
return ' &hellip; <a href="' . get_permalink() . '">' . __( 'Continued', 'pressbooks-aldine' ) . '</a>';
}
/**
* Add style select dropdown to TinyMCE.
*
* @param array $buttons The default button array.
* @return array The modified array.
*/
function add_style_select( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
/**
* Add custom block formats to TinyMCE.
*
* @param array $init_array The default array.
* @return array The modified array.
**/
function add_blocks( $init_array ) {
$style_formats = [
[
'title' => __( 'Page Section', 'pressbooks-aldine' ),
'block' => 'div',
'classes' => [ 'page-section' ],
'wrapper' => true,
],
[
'title' => __( 'Page Section (Accent)', 'pressbooks-aldine' ),
'block' => 'div',
'classes' => [ 'page-section', 'page-section--accent' ],
'wrapper' => true,
],
[
'title' => __( 'Page Section (Bordered)', 'pressbooks-aldine' ),
'block' => 'div',
'classes' => [ 'page-section', 'page-section--bordered' ],
'wrapper' => true,
],
[
'title' => __( 'Page Section (Borderless)', 'pressbooks-aldine' ),
'block' => 'div',
'classes' => [ 'page-section', 'page-section--borderless' ],
'wrapper' => true,
],
[
'title' => __( 'Call to Action', 'pressbooks-aldine' ),
'inline' => 'a',
'classes' => [ 'call-to-action' ],
],
];
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
/**
* Add things to the menu.
*
@ -131,3 +76,30 @@ function adjust_menu( $items, $args ) {
return $items;
}
/**
* Add TinyMCE Buttons.
*
* @since 1.1.0
*/
function add_buttons( $plugin_array ) {
$assets = new Assets( 'pressbooks-aldine', 'theme' );
$assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
$plugin_array['aldine_call_to_action'] = $assets->getPath( 'scripts/call-to-action.js' );
$plugin_array['aldine_page_section'] = $assets->getPath( 'scripts/page-section.js' );
return $plugin_array;
}
/**
* Register TinyMCE Buttons.
*
* @since 1.1.0
*/
function register_buttons( $buttons ) {
$c = count( $buttons );
$i = $c - 2;
$new_items = [ 'aldine_page_section', 'aldine_call_to_action' ];
array_splice( $buttons, $i, 0, $new_items );
return $buttons;
}

4
package.json

@ -26,7 +26,9 @@
"extends": "./node_modules/pressbooks-build-tools/config/eslint.js",
"globals": {
"$": true,
"PB_A11y": true
"aldine": true,
"PB_A11y": true,
"tinymce": true
}
},
"stylelint": {

3
partials/contact-form.php

@ -8,7 +8,8 @@
<?php
$contact_form_title = get_option( 'pb_network_contact_form_title', __( 'Contact Us', 'pressbooks-aldine' ) );
$pb_network_contact_form_title = get_option( 'pb_network_contact_form_title' );
$contact_form_title = ( ! empty( $pb_front_page_catalog_title ) ) ? $pb_front_page_catalog_title : __( 'Contact Us', 'pressbooks-aldine' );
$contact_form_response = \Aldine\Helpers\handle_contact_form_submission();
?>

3
partials/content-front-page.php

@ -15,7 +15,8 @@ use function Aldine\Helpers\get_catalog_data;
use function Aldine\Helpers\has_sections;
$front_page_catalog = get_option( 'pb_front_page_catalog' );
$latest_books_title = get_option( 'pb_front_page_catalog_title', __( 'Our Latest Titles', 'pressbooks-aldine' ) );
$pb_front_page_catalog_title = get_option( 'pb_front_page_catalog_title' );
$latest_books_title = ( ! empty( $pb_front_page_catalog_title ) ) ? $pb_front_page_catalog_title : __( 'Our Latest Titles', 'pressbooks-aldine' );
if ( get_option( 'pb_front_page_catalog' ) ) {
$page = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1;
$catalog_data = get_catalog_data( $page, 3, 'latest' );

38
webpack.mix.js

@ -1,4 +1,4 @@
let mix = require('laravel-mix');
let mix = require( 'laravel-mix' );
/*
|--------------------------------------------------------------------------
@ -16,11 +16,11 @@ const partials = 'partials';
const assets = 'assets';
const dist = 'dist';
mix.setPublicPath(dist);
mix.setResourceRoot('../');
mix.setPublicPath( dist );
mix.setResourceRoot( '../' );
// BrowserSync
mix.browserSync({
mix.browserSync( {
host: 'localhost',
proxy: 'https://pressbooks.test',
port: 3100,
@ -31,44 +31,46 @@ mix.browserSync({
`${dist}/**/*.css`,
`${dist}/**/*.js`,
],
});
} );
// Sass
mix.sass(`${assets}/styles/aldine.scss`, `${dist}/styles/aldine.css`);
mix.sass(`${assets}/styles/editor.scss`, `${dist}/styles/editor.css`);
mix.sass( `${assets}/styles/aldine.scss`, `${dist}/styles/aldine.css` );
mix.sass( `${assets}/styles/editor.scss`, `${dist}/styles/editor.css` );
// Javascript
mix.autoload({ jquery: ['$', 'window.jQuery', 'jQuery'] });
mix.autoload( { jquery: [ '$', 'window.jQuery', 'jQuery' ] } );
mix
.js(`${assets}/scripts/aldine.js`, `${dist}/scripts`)
.js(`${assets}/scripts/catalog-admin.js`, `${dist}/scripts`)
.js(`${assets}/scripts/customizer.js`, `${dist}/scripts`);
.js( `${assets}/scripts/aldine.js`, `${dist}/scripts` )
.js( `${assets}/scripts/call-to-action.js`, `${dist}/scripts` )
.js( `${assets}/scripts/catalog-admin.js`, `${dist}/scripts` )
.js( `${assets}/scripts/customizer.js`, `${dist}/scripts` )
.js( `${assets}/scripts/page-section.js`, `${dist}/scripts` );
// Assets
mix
.copy(`${assets}/fonts`, `${dist}/fonts`, false)
.copy(`${assets}/images`, `${dist}/images`, false);
.copy( `${assets}/fonts`, `${dist}/fonts`, false )
.copy( `${assets}/images`, `${dist}/images`, false );
// Options
mix.options({ processCssUrls: false });
mix.options( { processCssUrls: false } );
// Source maps when not in production.
if (!mix.inProduction()) {
if ( ! mix.inProduction() ) {
mix.sourceMaps();
}
// Hash and version files in production.
if (mix.inProduction()) {
if ( mix.inProduction() ) {
mix.version();
}
// Add Isotope support.
mix.webpackConfig({
mix.webpackConfig( {
resolve: {
alias: {
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
});
} );

Loading…
Cancel
Save