pixelandtonic / garnishjs

UI toolkit by Pixel & Tonic

Garnish

Garnish UI Toolkit

Installation

You can download the latest version of garnishjs on GitHub.

To install via npm:

npm install garnishjs

To install via bower:

bower install garnishjs

Building

To build, run gulp build.

Use -d or --dest options to customize the destination:

gulp build --dest=/path/to/dest
gulp build -d=/path/to/dest

Use -v or --version options to customize the version:

gulp build --version=1.0.0
gulp build -v=1.0.0

To watch, run gulp watch.

Testing

To test, run gulp test.

To watch and test, run gulp watch --test

UI Elements

Disclosure

This element should be used in instances where a trigger button shows or hides content.

Some possible applications include accordion menus, navigation dropdown menus, etc.

To create a disclosure element, use a button with the following properties:

• An aria-controls attribute referencing the ID of the element to be toggled
• An aria-haspopup attribute set to "true".
• An aria-expanded attribute set to either "true" or "false".
• A data-disclosure-trigger attribute is used to find and instantiate the UI element

<button aria-controls="disclosure" aria-expanded="false" aria-haspopup="true" data-disclosure-trigger>Open Menu</button>

<div id="disclosure">
	This is the content you want to reveal.
</div>

Positioning

The disclosure container is positioned absolutely with respect to the trigger element. Because of this, both the disclosure container and the trigger need to be contained inside of a relatively positioned wrapper element. This element needs to have the attribute data-wrapper.

Note that this is different from the CustomSelect element, where dropdowns are positioned relative to the document.

You can change the horizontal alignment of the disclosure by adding a data-align attribute with one of the following values: left, center, or right.

Adjusting positioning

You may need to align the disclosure menu positioning to a different element inside of the trigger.

In cases like this add a data-align-to attribute to the disclosure menu with the selector of the element you want to align it with.

License

Garnish is available under the MIT license.

garnishjs's Issues

Add ability to only close modals by button interactions.

Currently, clicking outside of a modal causes it to close and erase any unsaved work. It'd be nice if this was at least configurable.

HUD excessive binding of resize listeners

https://github.com/pixelandtonic/garnishjs/blob/develop/src/HUD.js#L406

Not sure the purpose of binding the resize listener in the updateSizeAndPosition method, as every time it's called a new event is added, causing the performance of the UI to slow to a crawl very quickly. Removing these lines seems to make everything work fine (in context of Craft's CP) as the listener is already bound in the init method.

How call/listen onAfterAction from BaseElementIndex

Hi folks!

I'm trying to call/listen onAfterAction from my class that extends Garnish.Base.extend({ ...

If that possible? I just need to call: Craft.elementIndex.updateElements(); after an custom element action is finished.

Thanks in advance.

FYI: Craft3 environment

Document Garnish

See title.

Correct HTML entity for nonbreaking space

From https://github.com/pixelandtonic/garnishjs/blob/develop/src/NiceText.js#L228:

val = val.replace(/[\n\r]$/g, '<br/>&nbps;');

…should be…

val = val.replace(/[\n\r]$/g, '<br/>&nbsp;');

Issuing a PR, now!

✌️

Mobile dragging support

error in craft CMS where event is not set

Description

see:
https://github.com/pixelandtonic/garnishjs/blob/main/src/Garnish.js#L672-L681

causes this error:

garnish.js:834 Uncaught TypeError: Right-hand side of 'instanceof' is not an object
at s.constructor.trigger (garnish.js:834:17)
at s.constructor.updateSizeAndPosition (garnish.js:4361:18)
at s.constructor.show (garnish.js:4235:22)
at s.constructor.show (BaseElementSelectorModal.js:147:1)
at s.constructor.e [as show] (garnish.js:79:31)
at s.constructor.init (garnish.js:4180:26)
at s.constructor.init (BaseElementSelectorModal.js:33:1)
at s.constructor.e [as init] (garnish.js:79:31)
at s.constructor.init (AssetSelectorModal.js:13:1)
at s.constructor.e [as init] (garnish.js:79:31)

if I add:

if (handler && handler.target && this instanceof handler.target && handler.type === type) {

then it works fine - i.e. check if the handler exist and then do the business.

Steps to reproduce

not sure how to reproduce, composer stack below

aws/aws-crt-php                      v1.0.2     AWS Common Runtime for PHP
aws/aws-sdk-php                      3.209.22   AWS SDK for PHP - Use Amazon Web Services in your PHP project
cakephp/core                         3.10.1     CakePHP Framework Core classes
cakephp/utility                      3.10.1     CakePHP Utility classes such as Inflector, String, Hash, and Security
carlcs/craft-redactorcustomstyles    3.0.4      Redactor Custom Styles plugin for Craft CMS
cebe/markdown                        1.2.1      A super fast, highly extensible markdown parser for PHP
codemonauts/craft-readonly-field     1.0.1      Craft CMS plugin to add a simple, read-only plaintext field.
composer/ca-bundle                   1.3.1      Lets you find a path to the system CA bundle, and includes a fallback to the Mozilla CA bundle.
composer/composer                    2.0.13     Composer helps you declare, manage and install dependencies of PHP projects. It ensures you have the right stack everywhere.
composer/metadata-minifier           1.0.0      Small utility library that handles metadata minification and expansion.
composer/semver                      3.2.9      Semver library that offers utilities, version constraint parsing and validation.
composer/spdx-licenses               1.5.6      SPDX licenses list and validation library.
composer/xdebug-handler              1.4.6      Restarts a process without Xdebug.
craftcms/aws-s3                      1.3.0      Amazon S3 integration for Craft CMS
craftcms/cms                         3.6.18     Craft CMS
craftcms/element-api                 2.8.4      Create a JSON API for your elements in Craft
craftcms/feed-me                     4.3.6      Import content from XML, RSS, CSV or JSON feeds into entries, categories, Craft Commerce products, and more.
craftcms/oauth2-craftid              1.0.0.1    Craft OAuth 2.0 Client Provider for The PHP League OAuth2-Client
craftcms/plugin-installer            1.5.7      Craft CMS Plugin Installer
craftcms/redactor                    2.9.1      Edit rich text content in Craft CMS using Redactor by Imperavi.
craftcms/server-check                1.2.3      Craft CMS Server Check
creocoder/yii2-nested-sets           0.9.0      The nested sets behavior for the Yii framework
davechild/textstatistics             1.0.2      PHP package to measure the readability of text according to various algorithms.
defuse/php-encryption                v2.3.1     Secure PHP Encryption Library
doctrine/lexer                       1.2.2      PHP Doctrine Lexer parser library that can be used in Top-Down, Recursive Descent Parsers.
eagle-lighting/product-codes         1.0.0      Imports Product Codes
egulias/email-validator              3.1.2      A library for validating emails against several RFCs
elvanto/litemoji                     3.0.1      A PHP library simplifying the conversion of unicode, HTML and shortcode emoji.
enshrined/svg-sanitize               0.14.1     An SVG sanitizer for PHP
ezyang/htmlpurifier                  v4.14.0    Standards compliant HTML filter written in PHP
guzzlehttp/guzzle                    7.4.1      Guzzle is a PHP HTTP client library
guzzlehttp/promises                  1.5.1      Guzzle promises library
guzzlehttp/psr7                      2.1.0      PSR-7 message implementation that also provides common utility methods
hashids/hashids                      4.1.0      Generate short, unique, non-sequential ids (like YouTube and Bitly) from numbers
jakeasmith/http_build_url            1.0.1      Provides functionality for http_build_url() to environments without pecl_http.
jean85/pretty-package-versions       2.0.5      A library to get pretty versions strings of installed dependencies
justinrainbow/json-schema            5.2.11     A library to validate a json schema.
laminas/laminas-escaper              2.6.1      Securely and safely escape HTML, HTML attributes, JavaScript, CSS, and URLs
laminas/laminas-feed                 2.12.3     provides functionality for consuming RSS and Atom feeds
laminas/laminas-stdlib               3.2.1      SPL extensions, array utilities, error handlers, and more
laminas/laminas-zendframework-bridge 1.1.1      Alias legacy ZF class names to Laminas Project equivalents.
league/csv                           9.6.2      CSV data manipulation made easy in PHP
league/flysystem                     1.1.9      Filesystem abstraction: Many filesystems, one API.
league/flysystem-aws-s3-v3           1.0.29     Flysystem adapter for the AWS S3 SDK v3.x
league/fractal                       0.18.0     Handle the output of complex data structures ready for API output.
league/mime-type-detection           1.9.0      Mime-type detection for Flysystem
league/oauth2-client                 2.6.1      OAuth 2.0 Client Library
maennchen/zipstream-php              2.1.0      ZipStream is a library for dynamically streaming dynamic zip files from PHP without writing to the disk at all on the server.
markbaker/complex                    3.0.1      PHP Class for working with complex numbers
markbaker/matrix                     3.0.0      PHP Class for working with matrices
mikehaertl/php-shellcommand          1.6.4      An object oriented interface to shell commands
mmikkel/reasons                      2.2.6      Adds conditionals to field layouts.
monolog/monolog                      2.3.5      Sends your logs to files, sockets, inboxes, databases and various web services
mtdowling/jmespath.php               2.6.1      Declaratively specify how to extract elements from a JSON document
myclabs/php-enum                     1.7.7      PHP Enum implementation
nesbot/carbon                        2.56.0     An API extension for DateTime that supports 281 different languages.
nikic/php-parser                     v4.13.2    A PHP parser written in PHP
nystudio107/craft-plugin-manifest    1.0.8      Plugin Manifest is the conduit between Craft CMS plugins and webpack, with manifest.json & webpack-dev-server HMR support
nystudio107/craft-plugin-vite        1.0.22     Plugin Vite is the conduit between Craft CMS plugins and Vite, with manifest.json & HMR support
nystudio107/craft-retour             3.1.70     Retour allows you to intelligently redirect legacy URLs, so that you don't lose SEO value when rebuilding & restructuring a website
nystudio107/craft-seomatic           3.4.24     SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 3. It is a turnkey SEO system that is comprehensive, powerful, and flexible.
opis/closure                         3.6.3      A library that can be used to serialize closures (anonymous functions) and arbitrary objects.
paragonie/random_compat              v9.99.100  PHP 5.x polyfill for random_bytes() and random_int() from PHP 7
php-science/textrank                 1.2.1      TextRank (automatic text summarization) for PHP7 and HHVM.
phpdocumentor/reflection-common      2.2.0      Common reflection classes used by phpdocumentor to reflect the code structure
phpdocumentor/reflection-docblock    5.3.0      With this component, a library can provide support for annotations via DocBlocks or otherwise retrieve information that is embedded in a DocBlock.
phpdocumentor/type-resolver          1.6.0      A PSR-5 based resolver of Class names, Types and Structural Element Names
phpoffice/phpspreadsheet             1.19.0     PHPSpreadsheet - Read, Create and Write Spreadsheet documents in PHP - Spreadsheet engine
phpoption/phpoption                  1.8.1      Option Type for PHP
pixelandtonic/imagine                1.2.4.2    Image processing for PHP 5.3
psr/container                        1.1.1      Common Container Interface (PHP FIG PSR-11)
psr/http-client                      1.0.1      Common interface for HTTP clients
psr/http-factory                     1.0.1      Common interfaces for PSR-7 HTTP message factories
psr/http-message                     1.0.1      Common interface for HTTP messages
psr/log                              1.1.4      Common interface for logging libraries
psr/simple-cache                     1.0.1      Common interfaces for simple caching
psy/psysh                            v0.10.12   An interactive shell for modern PHP.
ralouphie/getallheaders              3.0.3      A polyfill for getallheaders.
react/promise                        v2.8.0     A lightweight implementation of CommonJS Promises/A for PHP
sebastianlenz/craft-utils            2.3.4.1    A collection of utility classes for Craft CMS development
sebastianlenz/linkfield              2.0.0-rc.1 A Craft field type for selecting links
seld/cli-prompt                      1.0.4      Allows you to prompt for user input on the command line, and optionally hide the characters they type
seld/jsonlint                        1.8.3      JSON Linter
seld/phar-utils                      1.2.0      PHAR file format utilities, for when PHP phars you up
solspace/craft-freeform              3.12.13    The most reliable, intuitive and powerful form builder for Craft.
solspace/craft3-commons              1.0.25     Solspace Commons Library for Craft CMS 3 plugins
stripe/stripe-php                    v7.113.0   Stripe PHP Library
sunra/php-simple-html-dom-parser     v1.5.2     Composer adaptation of: A HTML DOM parser written in PHP5+ let you manipulate HTML in a very easy way! Require PHP 5+. Supports invalid HTML. Find tags on an ...
swiftmailer/swiftmailer              v6.3.0     Swiftmailer, free feature-rich PHP mailer
symfony/console                      v5.4.3     Eases the creation of beautiful and testable command line interfaces
symfony/deprecation-contracts        v2.5.0     A generic function and convention to trigger deprecation notices
symfony/filesystem                   v5.4.3     Provides basic utilities for the filesystem
symfony/finder                       v5.4.3     Finds files and directories via an intuitive fluent interface
symfony/polyfill-ctype               v1.24.0    Symfony polyfill for ctype functions
symfony/polyfill-iconv               v1.24.0    Symfony polyfill for the Iconv extension
symfony/polyfill-intl-grapheme       v1.24.0    Symfony polyfill for intl's grapheme_* functions
symfony/polyfill-intl-idn            v1.24.0    Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions
symfony/polyfill-intl-normalizer     v1.24.0    Symfony polyfill for intl's Normalizer class and related functions
symfony/polyfill-mbstring            v1.24.0    Symfony polyfill for the Mbstring extension
symfony/polyfill-php72               v1.24.0    Symfony polyfill backporting some PHP 7.2+ features to lower PHP versions
symfony/polyfill-php73               v1.24.0    Symfony polyfill backporting some PHP 7.3+ features to lower PHP versions
symfony/polyfill-php80               v1.24.0    Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions
symfony/process                      v5.4.3     Executes commands in sub-processes
symfony/property-access              v5.4.3     Provides functions to read and write from/to an object or array using a simple string notation
symfony/property-info                v5.4.3     Extracts information about PHP class' properties using metadata of popular sources
symfony/service-contracts            v2.5.0     Generic abstractions related to writing services
symfony/string                       v5.4.3     Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and grapheme clusters in a unified way
symfony/translation                  v5.4.3     Provides tools to internationalize your application
symfony/translation-contracts        v2.5.0     Generic abstractions related to translation
symfony/var-dumper                   v5.4.3     Provides mechanisms for walking through any arbitrary PHP variable
symfony/yaml                         v5.4.3     Loads and dumps YAML files
true/punycode                        v2.1.1     A Bootstring encoding of Unicode for Internationalized Domain Names in Applications (IDNA)
twig/twig                            v2.14.11   Twig, the flexible, fast, and secure template language for PHP
verbb/base                           1.0.4      Common utilities and building-blocks for Verbb plugins for Craft CMS.
verbb/expanded-singles               1.1.5      A simple plugin for Craft CMS that alters the Entries Index sidebar to list all Singles, rather than grouping them under a 'Singles' link.
verbb/knock-knock                    1.2.16     Password protect your public facing Craft website with a single password.
verbb/navigation                     1.4.24     A Craft CMS plugin to create navigation menus for your site.
verbb/super-table                    2.6.8      Super-charge your Craft workflow with Super Table. Use it to group fields together or build complex Matrix-in-Matrix solutions.
vlucas/phpdotenv                     v3.6.10    Loads environment variables from `.env` to `getenv()`, `$_ENV` and `$_SERVER` automagically.
voku/anti-xss                        4.1.34     anti xss-library
voku/arrayy                          7.8.14     Array manipulation library for PHP, called Arrayy!
voku/email-check                     3.1.0      email-check (syntax, dns, trash, ...) library
voku/portable-ascii                  1.5.6      Portable ASCII library - performance optimized (ascii) string functions for php.
voku/portable-utf8                   5.4.51     Portable UTF-8 library - performance optimized (unicode) string functions for php.
voku/stop-words                      2.0.1      Stop-Words via PHP
voku/stringy                         6.4.1      A string manipulation library with multibyte support
voku/urlify                          5.0.5      PHP port of URLify.js from the Django project. Transliterates non-ascii characters for use in URLs.
webmozart/assert                     1.10.0     Assertions to validate method input/output with nice error messages.
webonyx/graphql-php                  v14.4.1    A PHP port of GraphQL reference implementation
yii2tech/ar-softdelete               1.0.4      Provides support for ActiveRecord soft delete in Yii2
yiisoft/yii2                         2.0.42.1   Yii PHP Framework Version 2
yiisoft/yii2-composer                2.0.10     The composer plugin for Yii extension installer
yiisoft/yii2-debug                   2.1.18     The debugger extension for the Yii framework
yiisoft/yii2-queue                   2.3.3      Yii2 Queue Extension which supported DB, Redis, RabbitMQ, Beanstalk, SQS and Gearman
yiisoft/yii2-shell                   2.0.4      The interactive shell extension for Yii framework
yiisoft/yii2-swiftmailer             2.1.3      The SwiftMailer integration for the Yii framework