Hot answers tagged

19 votes
Accepted

How can my plugin generate a generic modal window in the Control Panel?

Create a div with whatever contents you want in the modal, and with a class "modal". Then create a new Garnish.Modal object with it: var $div = $('<div class="modal">...</div>'); var ...
user avatar
8 votes
Accepted

JS templating in Craft CP

The only JS library that ships with Craft (besides the Craft-specific Garnish) is jQuery. Of course, jQuery is a helpful JS library, but by no means a full-fledged framework. Fortunately, adding a ...
user avatar
  • 23.6k
7 votes

Access add and remove events with the Craft Element Selector?

As of Craft 2.4.2688: It is now possible to access Craft.BaseElementSelectInput objects from their container elements, via .data('elementSelect'). On select element: $('#theElementSelectField')....
user avatar
5 votes

How can I use Garnish to sort?

Sure, I've had experience with two different types of sorting with SuperTable (check the link for associated JS). If you're modelling the fieldtype after a table, you might like to use the Craft....
user avatar
  • 3,402
4 votes
Accepted

Is this Garnish message bad? "Element was added to more than one selector"

That message comes from from Garnish.Select, when the same DOM element is associated with two separate Garnish.Select instances. The JS will log that message right before destroying the first Garnish....
user avatar
4 votes

Any documentation about the elementindex template available?

Your best bet on learning element type templating is to look at Craft template itself. Element types use the following template for controlling the layout: craft/app/templates/_layouts/elementindex....
user avatar
4 votes
Accepted

How do I show a Garnish hud in the CP

I finally figured this out. I was actually close. Here's the HTML that I use <div class="hud-wrapper hidden"> <div id="generate-pdf-form" class="form meta"> <form> ...
user avatar
  • 481
3 votes
Accepted

How can I submit a form from a Garnish HUD footer?

Since the shuffled markup is the root of the problem, one might follow examples from the Craft control panel source that serialize the form's data and submit via AJAX (and often $.proxy() to help with ...
user avatar
  • 3,921
3 votes
Accepted

Craft 3 - custom callback after Garnish onDragStop

Garnish’s Base class introduces its own concept of events, that is separate from DOM events. Here’s how you’d set up the listener: // get the Craft.MatrixInput object var matrix = $('.matrix-field')....
user avatar
3 votes

Can Garnish be extended to allow plugins to use custom keyboard shortcuts?

I'm not sure if there's an "official" way yet but I've looked through the source a little bit and I think the most Craft-like way I would do it, following plugin conventions, is to extend Garnish.Base ...
user avatar
  • 4,361
3 votes

JS templating in Craft CP

There is no built in client side/JS templating available out of the box that I know of. You can always render Twig templates via Ajax by calling a plugin controller and returning a rendered HTML ...
user avatar
3 votes

Is there an accessible callback when Craft.EntryTypeSwitcher is run?

The most reliable way I've found to listen for the entry type switching would be to add an ajaxComplete listener to the document object, testing the call's URL for the switchEntryType action handle: $...
user avatar
3 votes
Accepted

Is there an accessible callback when Craft.EntryTypeSwitcher is run?

It looks like the only easy way to hook into that event is to listen for the resize event on the window object. On line 55, it is triggering resize(). Looking at the code, I am not seeing any other ...
user avatar
3 votes
Accepted

Filtering and sorting lists in a plugin

I don't believe that there is a recommended way to do this, so I'll attempt to answer this question as best I can. By using an element type, you will be able to use the element index layout for free,...
user avatar
  • 6,341
3 votes
Accepted

Error: Invalid negative value for <rect> attribute

Craft charts are taking the width and height of the container's <div> as a basis for drawing the chart. So your JS is probably working but you need to define a width and height for the chart's ...
user avatar
3 votes
Accepted

Listen for checkbox check event for assets table and modify action trigger menu item

Here is one approach: Whenever an asset is checked on or off, it triggers a manipulation of the hidden ul.menu. You could listen for that update to be complete, then you’ll be able to access and hide ...
user avatar
3 votes

Garnish - Event when selecting a category

Try something like this? $("#fields-myCateogryField").data("elementSelect") .on("selectElements", function(e){console.log(e);}) .on("removeElements", function(e){console.log(e);});
user avatar
  • 566
3 votes

JS templating in Craft CP

There's also Swig. We've successfully been able to share JS templating with Craft templates, and it's worked pretty well. Not without it's caveats, though. Mostly coming from slight syntax differences ...
user avatar
  • 3,061
2 votes

Access add and remove events with the Craft Element Selector?

Edit For Craft installs 2.4.2688 or later, see Sam Hibberd's answer! @AaronBerkowitz is correct – unfortunately there's no way, currently. Here's a workaround, which uses setInterval to poll the ...
user avatar
2 votes

How to create modals

Foud the answer after digging a bit, in fact I missed a little detail. The base javascript code was correct : $modal = new Garnish.Modal($('#my-modal')); //create a new modal $modal.show(); //shows ...
user avatar
  • 271
2 votes
Accepted

When using "createElementSelectorModal()" how do you respect selected locale?

The BaseElementSelectorModal class takes a second parameter settings, which can include a criteria object. This criteria object is used to create an ElementCriteriaModel on the server, which means it ...
user avatar
2 votes
Accepted

How to access Craft.EditableTable instance in CraftCM

So, after fiddling with it for a while, this is what I came up with it: When using forms.editableTable make sure you don't initialize Craft.EditableTable. You can do that by setting the initJs to ...
user avatar
2 votes

Javascript events when modal window is opened or closed

This is what I ended up doing: https://github.com/nystudio107/disclosedassets/blob/master/resources/js/disclosedassets.js There is a Garnish.Modal.visibleModal that will contain the handle to the ...
user avatar
2 votes
Accepted

How can I use asset select modal in utility?

The field is just a normal ElementSelect field with the element type craft\\elements\\Asset {{ forms.elementSelectField({ label: "Asset"|t('app'), id: 'assetSelect', name: 'assetSelect', ...
user avatar
2 votes
Accepted

Plugin field-type not getting javascript variable?

Keep in mind Craft parses the html of your field, it won't be used directly, thus the ID of your field can't be "#"+startDateFieldHandleunless you ignored Crafts methods or modified it in another way. ...
user avatar
1 vote
Accepted

Garnish event when changing category group

Craft.elementIndex.on('selectSource', function(){ alert('changed the source'); }); Craft.elementIndex contains the plugin for all index pages, that means all entries as well as users and ...
user avatar
1 vote

Craft 3 js - extend the field layout designer field settings

If someone has a better approach to solve that please tell me because my method right now fells really wrong and like a hack that might be troublesome in the future. I would like to accept the answer ...
user avatar
1 vote
Accepted

Javascript events when modal window is opened or closed

It looks as if there is no clean way to do this. The solution I am using to detect a new modal is detect double click on the element wait a second until the modal has opened find the modal which is ...
user avatar
1 vote
Accepted

Setting selected elements in a BaseElementSelectorModal (or BaseElementIndex)

After much exploring in craft.js, I've concluded that this can't be done in a clean way. However, I found a workaround which seems to do the trick. First, here's (a simplified version of) the code ...
user avatar
1 vote
Accepted

Possible to override Garnish.Modal? [Plugin]

By default, Garnish.Modal will automatically close other modals when show() is called (which happens automatically when you first create it). That behavior can be overridden by setting the ...
user avatar

Only top scored, non community-wiki answers of a minimum length are eligible