elkfox / focus Goto Github PK

View Code? Open in Web Editor NEW

15.0 7.0 6.0 459 KB

👓 A minimal popup, modal, overlay, drawer and dialogue window plugin

Home Page: https://elkfox.github.io/Focus/

JavaScript 75.05% CSS 24.95%

popups popup-dialog menu-navigation modals modal-dialogs html sass jquery jquery-plugin framework overlay notifications

focus's Introduction

Focus

A minimal popup, modal, notification, overlay, drawer and dialogue window plugin.

View the Documentation for more

Development

$ git clone [email protected]:Elkfox/Focus.git

$ npm install

Focus is compiled using gulp. The src file is located in src/focus.js and built into /dist. Gulp is setup to lint the source with the airbnb style guide. Transpile the code using babel from ES6 to ES5 for best browser support. Create git semantic versioning (semver) releases, with automatic changelog creation.

Focus uses Atom conventional commit messages to automatically create a changelog so it is important that your commit messages comply to this standard: https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-atom

Commands

npm test Lint the code using the airbnb style guide and return any errors or warnings. If any changes are pushed to the master repository without first being tested the build will not pass the Travis CI tests.

npm run build Compile the code to es5 and build a minified and an unminified version to the dist directory.

npm run release [type] To use the release command correctly you first need to setup your env correctly. See Setting up your env for more info.

Running npm release without any arguments will default to releasing it as a patch which should only be used for releasing backward compatible bug fixes.

[type]

minor - MINOR version when you add functionality in a backwards-compatible manner
major - MAJOR version when you make incompatible API changes,
prerelease - A pre-release version indicates that the version is unstable and might not satisfy the intended compatibility requirements as denoted by its associated normal version.

Refer to https://semver.org/ for more information on release arguments

Setting up your env

To create a github release you first need to duplicate the .env-sample.json and rename it .env.json. The .env.json file should never be commited as we be adding an a github private key to it. You can create a private key by following the link in the sample env. Don't forget to remove the comment from your env.

License

The code is available under an MIT License.

focus's People

Contributors

Stargazers

Watchers

Forkers

wanjarus mrslwiseman scottperrin presleyhank anubarak stoik

focus's Issues

Add 'detach' flag

Add detach flag to Focus config which appends popups to the end of the document body on load.

Should be using flexbox instead

The popups are using -50% transforms to center them. This sometimes means that they, and their contents are placed on a subpixel value which causes blurriness. There are hacks to resolve this but it varies across browsers and hardware.

Seems as though flexbox is the only pure css solution to this issue.

Url variable triggers

chain functions with return this

Linked/multiple targets

One focus to control both a mobile view and a desktop view for example.

Perhaps it's best not to use Id as the default selector

Add additional config

Options to add config for:

applying a class to the target button
visible
use slide down/up

Use babel and eslint

preventDefault on click events

Add preventDefault to click events for v2x

Also address close bug #22

Adding a second close link

Hi. Thanks for the code.

I tried adding a second close link, but it doesn't work. As a work around, I used the .popup-outer on a div with a close text inside. This closed it on desktop, but not iphone.

Any advice would be much appreciated. It's the final step before I go live with this.

Thanks!

Add data-close to prototype

Add data triggers for other visibility related stuff

dropdown menus
accordions

Update docs

Correct callback objects (targets, etc.)
Add data-target check to data-close events
Add detach flag

Add triggerClass to docs

The triggerClass option isn't included in the documentation.

Targeted close events

Add data-target check to data-close events


if ((typeof(jQuery(this).data('target')) == 'undefined') || (jQuery(this).data('target') == _this.target)) {
  _this.hide();
}

Bind this instead of turning into a var

and also use contst where possible

Change sticky terminology to detach and do not make it the default

 // Detach unless and append to the end of body
  if (this.config.detach) {
    jQuery(document).ready(function() {
      jQuery(target).detach().appendTo('body');
    });
  };

Autofocus classes

In the original Reinforced popup system, we added an autofocus helper class into the JS to attach autofocus events to inputs in forms inside popups. It would be great if we could integrate this into the new Popups.js

The code went something like this:

  $('.popup-link').on('click', function(event) {
    ... other stuff here
    setTimeout(function(){
      $(popupId + ' .Autofocus').focus();
    }, 300);
  });

Flexbox positioning

data-trigger events

The popups trigger event listens for all elements with [data-trigger] instead of [data-trigger="popup"] which can disable other unrelated functions that might want to use the data-trigger attribute (such as: data-trigger="toggle" or data=trigger="my-unrelated-trigger")

The trigger line should be updated as follows:
~~jQuery(document).on('click', '[data-trigger]', function(event) {~~
jQuery(document).on('click', '[data-trigger="popup"]', function(event) {