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 ...
- 33.8k
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 ...
- 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')....
- 709
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....
- 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....
- 33.8k
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....
- 2,336
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>
...
- 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 ...
- 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')....
- 33.8k
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 ...
- 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 ...
- 3,801
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:
$...
- 20.5k
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 ...
- 1,075
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,...
- 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 ...
- 441
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 ...
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);});
- 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 ...
- 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 ...
- 20.5k
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 ...
- 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 ...
- 20.5k
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 ...
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 ...
- 11k
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',
...
- 19.5k
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. ...
- 19.5k
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 ...
- 19.5k
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 ...
- 19.5k
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 ...
- 11.9k
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 ...
- 20.5k
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 ...
- 33.8k
Only top scored, non community-wiki answers of a minimum length are eligible