9

I'm coding a widget and I'd like the user to be able to pick a link like you can when editing a regular posts or page (when you click on the little link icon and you get the AJAX search functionality in the pop up). Does anyone know how I get this working? I've got a HTML button which I would like to attach and click even to, and a field for the value to go in.

In class-wp-editor.php I found a few interesting things, and wondered if I might need these files..?

wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

On calling fullscreen.link();,like the file mentioned above, I get this error:

Uncaught ReferenceError: wpActiveEditor is not defined

..and I'm stumped for now, because the JS that references that variable looks crazy to me.

Care to point me in the right direction? I'd love to get this working, it will make a killer user interface for my widgets!

enter image description here

------edit-------

Not that much code so far, apart from the script inclusions that I have previously stated;

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

..the part of the JS which is supposed to trigger the link script to open;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});
  • 3
    Please make a screenshot or an animated GIF (LiceCap is a nice and free tool) of what you want to do. Hard to imagine so far. And please make it an edit and not a comment. Thanks. – kaiser Dec 19 '13 at 21:24
  • @kaiser - Ok, done. You'll see the functionality I'm after now. PS - love LICEcap, thanks for the tip! – Dan Dec 19 '13 at 21:32
  • Well, then please show us your widget code (the part that builds the content). Did you use wp_editor()? – kaiser Dec 19 '13 at 21:50
  • @kaiser - some extra code added. Not much so far but I wasn't expecting to do much other than attach an event and include the script (maybe modify where the result gets updated), but so far I can't get the pop up to open at all. – Dan Dec 19 '13 at 23:18
  • 1
    Unfortunately, the link chooser is specifically written for the TinyMCE editor. I'm working on a version that stands alone and have it about 80% there. It's basically a rewrite of the link chooser without the TinyMCE dependencies. – hereswhatidid Dec 20 '13 at 16:15
2

I invoke the link dialogue within the metabox class I use for development. Its a tad hacky but can be done, until something more robust is developed.

You can invoke the link box by first enqueing the required js, and then interacting with the wp-link js files methods.

Make sure you have enqueued wp-link

1 / wp_enqueue_script( 'wp-link' );

2 / Set up your ui. I usually use a button to invoke the link dialogue from and a textfield to handle the links URL.

3 / Invoke link dialogue

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

4 // enqueue scripts. Add the following to your functions.php file, and adjust the file names / paths to suit.

function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

Should about do it. I use the same approach in my metabox class and it seems to work OK.

  • Thanks for the post Dale - this looks very interesting. I did get as far as making the button before, and calling the wp-link script, but didn't know how to get it going after this. I'm going to try and learn some more JS/AJAX over the next week between projects and give this a shot. Many thanks. – Dan Feb 25 '14 at 8:09
  • You just need to enqueue a .js file on the admin side of your theme. I'll edit the above to reflect that. – Dale Sattler Feb 26 '14 at 19:11
0

RE: "How would you do it? (roughly?)"

First, I would build it similarly to the link functionality in WordPress: An input text field, results, select functionality and submit (add link) button.

Ajax - this would fire when text is entered into the input, returning set of results based on the search term. Take a look at what we did with our quicksearch plugin, WP Jarvis. You just need to set up the ajax call to target ajaxurl (admin-ajax.php) and set an action hook in your php to execute the query and echo the results in json format. You would want the results to include title, post-type and permalink for each result. Read more about ajax in plugins.

Finally, selecting the result you're interested in would grab the permalink from the json object and insert into the widget field.

I know this isn't a complete answer, but I hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.