Using jQuery in add.php

Permalink 1 user found helpful
I am trying to create an advanced image block, and the first feature I wanted to implement is giving me some issues...

I want the user to choose an image and then crop and resize it with a fixed ratio.

This is one of the most requested feature from my clients. They want to be able to upload any image and make it fit in exactly the same constraints as before, but they want to choose which/if parts get cropped.

To better understand what I'm talking about, I set up a quick demo of the kind of thing I'm trying to do:

http://thedigidocs.com/cropandresize/...

Ok, so the issue... I want them to do this (the cropping/resizing) when they add the image, but no matter what I can do, I can't get the jquery.cropandresize.js to include in the add.php! Meaning it just displays the static images, you can't resize it or anything.

So I want custom jQuery plugins and code in the dialog box when you add a block. Even if I add it, it seems to just disappear. I can use other jQuery from the jQuery already included in c5, but I can't include my own plugin/code. It's only when adding a block. I can do it fine in view.php, etc.

Any thoughts/help?

Thanks!

CWSpear
 
Mnkras replied on at Permalink Best Answer Reply
Mnkras
stick it in the auto.js file, i think that should work
CWSpear replied on at Permalink Reply
CWSpear
What about plugins/libraries? Am I supposed to copy and paste the whole thing in there as well as my custom JavaScript (jQuery)?
CWSpear replied on at Permalink Reply
CWSpear
For people reading this thread... I ended up adding
ccm_addHeaderItem("js/jquery.Jcrop.js", "JAVASCRIPT");
to auto.js (with jquery.Jcrop.js being relative to auto.js).

Worked great, thanks.
andrew replied on at Permalink Reply
andrew
If you add a function named add() in your controller.php, it will be run before the add block overlay is displayed. Same with edit() (and the edit block overlay.)

If you then add the BlockController::addHeaderItem() function from within there, you can add a javascript file on add/edit. It's basically a cleaner way of doing what you just did.

public function add() {
    $html = Loader::helper('html');
    $this->addHeaderItem($html->javascript('jquery.ui.js'));
}