Created
May 6, 2015 20:01
-
-
Save figureone/43661c51d992d89e56e1 to your computer and use it in GitHub Desktop.
Extend WordPress TinyMCE plugin wplink.js to include a checkbox that adds a "required" class when checked.
This file contains hidden or 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 a/lib/wplink-required/wplink-required.js b/lib/wplink-required/wplink-required.js | |
new file mode 100644 | |
index 0000000..af440b2 | |
--- /dev/null | |
+++ b/lib/wplink-required/wplink-required.js | |
@@ -0,0 +1,115 @@ | |
+( function ( $ ) { | |
+ $( document ).ready( function () { | |
+ // Global: wpLink. | |
+ | |
+ // Add function that includes the required link checkbox in the insert link modal. | |
+ wpLink.addRequiredCheckbox = function () { | |
+ $( '#wp-link .link-target' ).append( '<br /><label><span> </span><input type="checkbox" id="link-required-checkbox" /> Required link</label>' ); | |
+ } | |
+ | |
+ // Add the checkbox to the wplink modal (on post.php and post-new.php pages). | |
+ wpLink.addRequiredCheckbox(); | |
+ | |
+ // Extend the getAttrs() function to include the required link class. | |
+ // getAttrs() returns { href: '', title: '', target: '' }, so we will | |
+ // just add class: 'required' to that if the checkbox is checked. | |
+ var core_getAttrs = wpLink.getAttrs; | |
+ wpLink.getAttrs = function () { | |
+ var attributes = core_getAttrs.apply( core_getAttrs ); | |
+ attributes.class = $( '#link-required-checkbox' ).is( ':checked' ) ? 'required' : ''; | |
+ return attributes; | |
+ } | |
+ | |
+ // Extend the htmlUpdate() function to include the 'required' class | |
+ // in the generated markup if the required link checkbox is set. | |
+ var core_htmlUpdate = wpLink.htmlUpdate; | |
+ wpLink.htmlUpdate = function () { | |
+ // Extend: recreate out-of-scope variables from wplink.js. | |
+ var inputs = { | |
+ text: $( '#wp-link-text' ), | |
+ }; | |
+ | |
+ var attrs, text, html, begin, end, cursor, selection, | |
+ textarea = wpLink.textarea; | |
+ | |
+ if ( ! textarea ) { | |
+ return; | |
+ } | |
+ | |
+ attrs = wpLink.getAttrs(); | |
+ text = inputs.text.val(); | |
+ | |
+ // If there's no href, return. | |
+ if ( ! attrs.href ) { | |
+ return; | |
+ } | |
+ | |
+ // Build HTML | |
+ html = '<a href="' + attrs.href + '"'; | |
+ | |
+ if ( attrs.target ) { | |
+ html += ' target="' + attrs.target + '"'; | |
+ } | |
+ | |
+ // Extend: Add class to generated markup. | |
+ if ( attrs.class ) { | |
+ html += ' class="' + attrs.class + '"'; | |
+ } | |
+ | |
+ html += '>'; | |
+ | |
+ // Insert HTML | |
+ if ( document.selection && wpLink.range ) { | |
+ // IE | |
+ // Note: If no text is selected, IE will not place the cursor | |
+ // inside the closing tag. | |
+ textarea.focus(); | |
+ wpLink.range.text = html + ( text || wpLink.range.text ) + '</a>'; | |
+ wpLink.range.moveToBookmark( wpLink.range.getBookmark() ); | |
+ wpLink.range.select(); | |
+ | |
+ wpLink.range = null; | |
+ } else if ( typeof textarea.selectionStart !== 'undefined' ) { | |
+ // W3C | |
+ begin = textarea.selectionStart; | |
+ end = textarea.selectionEnd; | |
+ selection = text || textarea.value.substring( begin, end ); | |
+ html = html + selection + '</a>'; | |
+ cursor = begin + html.length; | |
+ | |
+ // If no text is selected, place the cursor inside the closing tag. | |
+ if ( begin === end && ! selection ) { | |
+ cursor -= 4; | |
+ } | |
+ | |
+ textarea.value = ( | |
+ textarea.value.substring( 0, begin ) + | |
+ html + | |
+ textarea.value.substring( end, textarea.value.length ) | |
+ ); | |
+ | |
+ // Update cursor position | |
+ textarea.selectionStart = textarea.selectionEnd = cursor; | |
+ } | |
+ | |
+ wpLink.close(); | |
+ textarea.focus(); | |
+ } | |
+ | |
+ // Extend refresh() to check/uncheck required link checkbox if it's set on the selected link. | |
+ var core_refresh = wpLink.refresh; | |
+ wpLink.refresh = function () { | |
+ // Run original function. | |
+ core_refresh.apply( core_refresh ); | |
+ | |
+ // Extend: recreate out-of-scope variables from wplink.js. | |
+ var editor = tinymce.get( wpActiveEditor ), | |
+ selectedNode = editor.selection.getNode(), | |
+ linkNode = editor.dom.getParent( selectedNode, 'a[href]' ); | |
+ | |
+ // Toggle checkbox based on class in selected link. | |
+ $( '#link-required-checkbox' ).prop( 'checked', 'required' === editor.dom.getAttrib( linkNode, 'class' ) ); | |
+ } | |
+ | |
+ }); | |
+})( jQuery ); | |
diff --git a/lib/wplink-required/wplink-required.php b/lib/wplink-required/wplink-required.php | |
new file mode 100644 | |
index 0000000..f642bf1 | |
--- /dev/null | |
+++ b/lib/wplink-required/wplink-required.php | |
@@ -0,0 +1,15 @@ | |
+<?php | |
+/** | |
+ * Extends Insert/edit link button in tinymce editor by adding a "required link" class. | |
+ */ | |
+ | |
+// Add the javascript that extends TinyMCE. | |
+function wplink_required_enqueue_scripts( $admin_page ) { | |
+error_log($admin_page); | |
+ // Only load on post edit pages. | |
+ if ( 'post.php' !== $admin_page && 'post-new.php' !== $admin_page ) { | |
+ return; | |
+ } | |
+ wp_enqueue_script( 'wplink_required', get_stylesheet_directory_uri() . '/lib/wplink-required/wplink-required.js' ); | |
+} | |
+add_filter( 'admin_enqueue_scripts', 'wplink_required_enqueue_scripts' ); | |
-- |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment