19
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 myModal = new Garnish.Modal($div);
8
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 separate JS library is painfully easy!
How to CDN from a Twig template...
{% includeJsFile '//full/path/to/cdn.js' %}
How to CDN from PHP...
craft()->...
7
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').data('elementSelect').on('selectElements', function(e) {
console.log(e); // Take a look
// Do stuff here when elements are selected...
});
On remove ...
5
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.DataTableSorter method. Its pretty restrictive to a table layout, and you'll need to give each tr element a data-id.
Craft.FieldType = Garnish.Base.extend({
...
4
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.Select instance.
It’s not necessarily a bad thing, but could be an indication of something in your JS that could be improved. (Craft’s own JS causes several of ...
3
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 with a new object that attaches the listener.
(function($) {
var PluginName_KeyCapture = Garnish.Base.extend({
init: function()
...
3
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').data('matrix');
// attach a handler to its block sorter's sortChange event
matrix.blockSort.on('sortChange', function() {
// event handler...
});
3
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 the link.
$('#main .elements:first').on('click', '.checkbox', function(evt) {
// "View Asset" action is visible by default
var isViewActionVisible = ...
3
Try something like this?
$("#fields-myCateogryField").data("elementSelect")
.on("selectElements", function(e){console.log(e);})
.on("removeElements", function(e){console.log(e);});
3
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 and available filters.
3
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 string, but that doesn't seem to fit your use case.
3
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:
$(document).ajaxComplete(myAjaxCompleteHandler);
function myAjaxCompleteHandler( e, status, requestData )
{
if ( requestData.url.indexOf( 'switchEntryType' ...
3
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 way to listen for these events. The Craft.EntryTypeSwitcher class is getting instantiated but not getting assigned to any variable in the DOM, so there is no way ...
3
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, with very little setup. That will give you access to native sorting and searching (filtering), along with a bunch of other things such as grouping, statuses, ...
3
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 scope).
This is a lot of work, however, for minor stylistic gain. If the problem is limited to presentation, the solution should be too. @narration_sd helped ...
3
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>
{% import "_includes/forms" as forms %}
{{ forms.lightswitchField({
class: 'docraptorize-prod-lightswitch',
...
3
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 div to make it work.
A basic implementation of the Area chart would look like this:
{% extends "_layouts/cp" %}
{% set title = "Area Chart"|t %}
{% includecss ...
2
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 elementselects in the DOM for changes. If any of the elementselects have changed, the container will trigger a custom elementselectchange event, which you can ...
2
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 can have any property an ElementCriteriaModel can have – including locale:
var currentLocale = Craft.getLocalStorage('BaseElementIndex.locale') || Craft.locale;...
2
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 Garnish modal object if one is visible. You can use this to see if a modal is visible, and even see which one.
Unfortunately there's no event I'm aware of that ...
2
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 the modal
$modal.hide(); //hides the modal
Everything is in the HTML code, you need to declare something like this :
<div id="my-modal" class="modal"> &...
2
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',
elementType: 'craft\\elements\\Asset',
selectionLabel: "Choose"|t('app'),
elements: elements, //array of selected elements
}) }}
2
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. Your fields ID will be more like
id="fields-{{the id you specified}}"
Thus you should make sure you used the correct selector like
jQuery("#fields-"+...
1
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 categories. There is an updateElements event as well..
Here is a full list
afterInit
selectSource
selectSite
updateElements
selectionChange
enableElements
...
1
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 of someone else - until then I'll use the following
onKeyDown: function(ev){
ev.preventDefault();
var btn = $(ev.target);
if(btn.data('menubtn')){
...
1
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 false:
{{ forms.editableTable({
id: 'myTableId',
name: 'myTableName',
cols: yourTableCols,
...
initJs: false,
...
}) }}
That means that ...
1
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 actually open
Like this:
$('body').on('dblclick', 'div.element.small', function() {
window.setTimeout(function(event) {
// get our modal (there may be ...
1
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 that creates the modal (which is stored in the variable modal):
var modal = new Craft.BaseElementSelectorModal('Entry', {
criteria: criteria,
onSelect: ...
answered Nov 23 '15 at 19:25
Mats Mikkel Rummelhoff
19k3 gold badges27 silver badges59 bronze badges
1
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 closeOtherModals setting to false, though:
var myModal = new Garnish.Modal($container, {
closeOtherModals: false
});
Only top voted, non community-wiki answers of a minimum length are eligible