better-ujs - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/features/trigger.js

@@ -12,20 +12,31 @@ "use strict";
 
-function handleTrigger(e) {
+function handleTrigger(event) {
   var element = this;
-  var eventName = element.getAttribute('data-on') || 'click';
+  var onEventName = element.getAttribute('data-on') || 'click';
 
-  if (e.type === eventName) {
-    (0, _event.stopEverything)(e);
-    var triggerEventName = element.getAttribute('data-trigger');
+  if (event.type === onEventName) {
+    stopDefaultEvent(event, element);
+    var eventName = element.getAttribute('data-trigger');
     var target = element.getAttribute('data-target');
     var param = element.getAttribute('data-param');
+    fireTriggerEvent(element, eventName, target, param);
+  }
+}
 
-    if (target) {
-      (0, _dom.find)(target).forEach(function (target) {
-        return (0, _event.fire)(target, triggerEventName, param);
-      });
-    } else {
-      (0, _event.fire)(element, triggerEventName, param);
-    }
+function stopDefaultEvent(event, element) {
+  var preventDefault = element.getAttribute('data-prevent-default');
+
+  if (preventDefault !== 'false') {
+    (0, _event.stopEverything)(event);
   }
+}
+
+function fireTriggerEvent(element, eventName, target, param) {
+  if (target) {
+    (0, _dom.find)(target).forEach(function (target) {
+      return (0, _event.fire)(target, eventName, param);
+    });
+  } else {
+    (0, _event.fire)(element, eventName, param);
+  }
 }

dist/index.js

@@ -7,2 +7,3 @@ "use strict";
 exports.default = start;
+exports.addCustomEvent = addCustomEvent;
 Object.defineProperty(exports, "delegate", {
@@ -41,4 +42,2 @@ enumerable: true,
 
-require("./polyfills");
-
 var _dom = require("./utils/dom");
@@ -48,4 +47,2 @@
 
-var _event = require("./utils/event");
-
 var _disable = require("./features/disable");
@@ -61,8 +58,6 @@
 
-var _dom2 = require("./features/dom");
+var _selectors = require("./utils/selectors");
 
-var _data = require("./features/data");
+var _event = require("./utils/event");
 
-var _selectors = require("./utils/selectors");
-
 var _ajax = _interopRequireWildcard(require("./utils/ajax"));
@@ -72,10 +67,6 @@
 
-var DOM_EVENTS = ['click', 'submit', 'change', 'input', 'data:change'];
+var DOM_EVENTS = ['click', 'submit', 'change', 'input'];
 var AJAX_EVENTS = ['ajax:before', 'ajax:beforeSend', 'ajax:send', 'ajax:complete', 'ajax:stopped'];
 
 function start() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      customEvents = _ref.customEvents,
-      hideClassName = _ref.hideClassName;
-
   // This event works the same as the load event, except that it fires every
@@ -121,38 +112,14 @@ // time the page is loaded.
   AJAX_EVENTS.forEach(delegateTriggerHandler);
-
-  if (customEvents) {
-    customEvents.forEach(delegateTriggerHandler);
-  }
-
-  document.addEventListener('data:set', bindEvent(_data.handleSetData));
-  document.addEventListener('dom:class:add', bindEvent(_dom2.handleAddClass));
-  document.addEventListener('dom:class:remove', bindEvent(_dom2.handleRemoveClass));
-  document.addEventListener('dom:class:toggle', bindEvent(_dom2.handleToggleClass));
-  document.addEventListener('dom:html:replace', bindEvent(_dom2.handleReplaceInnerHtml));
-  document.addEventListener('dom:html:replace:outer', bindEvent(_dom2.handleReplaceOuterHtml));
-  document.addEventListener('dom:text:replace', bindEvent(_dom2.handleReplaceText));
-  document.addEventListener('dom:element:after', bindEvent(_dom2.handleAfterElement));
-  document.addEventListener('dom:element:before', bindEvent(_dom2.handleBeforeElement));
-  document.addEventListener('dom:element:append', bindEvent(_dom2.handleAppendElement));
-  document.addEventListener('dom:element:prepend', bindEvent(_dom2.handlePrependElement));
-  document.addEventListener('dom:element:remove', bindEvent(_dom2.handleRemoveElement));
-  document.addEventListener('dom:element:empty', _dom2.handleEmptyElement);
-  hideClassName = hideClassName || 'display-none';
-  document.addEventListener('dom:element:show', redirectEvent('dom:class:remove', hideClassName));
-  document.addEventListener('dom:element:hide', redirectEvent('dom:class:add', hideClassName));
-  document.addEventListener('dom:element:toggle', redirectEvent('dom:class:toggle', hideClassName));
   document.addEventListener('DOMContentLoaded', _csrf.refreshCSRFTokens);
 }
 
-function bindEvent(handler) {
-  return function (e) {
-    handler.call(e.target, e);
-  };
-}
+function addCustomEvent(eventName, callback) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  document.addEventListener(eventName, function (event) {
+    callback.call(event.target, event);
+  });
 
-function redirectEvent(eventName, data) {
-  return function (_ref2) {
-    var element = _ref2.target;
-    (0, _event.fire)(element, eventName, data);
-  };
+  if (options.trigger) {
+    delegateTriggerHandler(eventName);
+  }
 }
@@ -159,0 +126,0 @@

dist/utils/ajax.js

@@ -10,2 +10,4 @@ "use strict";
 
+require("whatwg-fetch");
+
 var _jqueryParam = _interopRequireDefault(require("jquery-param"));
@@ -12,0 +14,0 @@

dist/utils/dom.js

@@ -57,8 +57,6 @@ "use strict";
   return meta && meta.content;
-} // a wrapper for document.querySelectorAll
-// returns an Array
+}
 
-
 function find(selector) {
   return _toConsumableArray(document.querySelectorAll(selector));
 }

dist/utils/selectors.js

@@ -43,3 +43,3 @@ "use strict";
 exports.buttonDisableSelector = buttonDisableSelector;
-var triggerSelector = 'a[data-trigger], button[data-trigger], input[data-trigger], select[data-trigger], option[data-trigger], form[data-trigger]';
+var triggerSelector = 'a[data-trigger], button[data-trigger], input[data-trigger], select[data-trigger], form[data-trigger], body[data-trigger]';
 exports.triggerSelector = triggerSelector;

package.json

 {
   "name": "better-ujs",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "dist/index.js",
@@ -9,7 +9,4 @@ "module": "src/index.js",
   "dependencies": {
-    "custom-event-polyfill": "^1.0.6",
     "debounce": "^1.2.0",
     "delegated-events": "^1.0.9",
-    "es6-promise": "^4.2.4",
-    "es6-weak-map": "^2.0.2",
     "jquery-param": "^1.0.1",
@@ -16,0 +13,0 @@ "whatwg-fetch": "^2.0.4"

README.md

@@ -1,5 +0,25 @@
-better-ujs
-==============================================================================
-
 [![Build Status](https://travis-ci.com/tchak/better-ujs.svg?branch=master)](https://travis-ci.com/tchak/better-ujs)
 [![npm version](https://badge.fury.io/js/better-ujs.svg)](https://badge.fury.io/js/better-ujs)
+
+# better-ujs
+
+This unobtrusive scripting support file is developed for the Ruby on Rails framework, but is not strictly tied to any specific backend. You can drop this into any application to:
+
+* force confirmation dialogs for various actions
+* make non-GET requests from hyperlinks
+* make forms or hyperlinks submit data asynchronously with `fetch`
+* have submit buttons become automatically disabled on form submit to prevent double-clicking
+
+These features are achieved by adding certain data attributes to your HTML markup. In Rails, they are added by the framework's template helpers.
+
+## Installation
+
+* `yarn add better-ujs`
+
+## Usage
+
+```js
+  import start from 'better-ujs';
+
+  start();
+```

src/features/trigger.js

 import { fire, stopEverything } from '../utils/event';
 import { find } from '../utils/dom';
 
-export function handleTrigger(e) {
+export function handleTrigger(event) {
   const element = this;
-  const eventName = element.getAttribute('data-on') || 'click';
-  if (e.type === eventName) {
-    stopEverything(e);
-    const triggerEventName = element.getAttribute('data-trigger');
+  const onEventName = element.getAttribute('data-on') || 'click';
+  if (event.type === onEventName) {
+    stopDefaultEvent(event, element);
+    const eventName = element.getAttribute('data-trigger');
     const target = element.getAttribute('data-target');
     const param = element.getAttribute('data-param');
-    if (target) {
-      find(target).forEach(target => fire(target, triggerEventName, param));
-    } else {
-      fire(element, triggerEventName, param);
-    }
+    fireTriggerEvent(element, eventName, target, param);
   }
 }
+
+function stopDefaultEvent(event, element) {
+  const preventDefault = element.getAttribute('data-prevent-default');
+  if (preventDefault !== 'false') {
+    stopEverything(event);
+  }
+}
+
+function fireTriggerEvent(element, eventName, target, param) {
+  if (target) {
+    find(target).forEach(target => fire(target, eventName, param));
+  } else {
+    fire(element, eventName, param);
+  }
+}

src/index.js

 import { on as delegate } from 'delegated-events';
-import './polyfills';
 import { getData, find } from './utils/dom';
 import { refreshCSRFTokens } from './utils/csrf';
-import { fire } from './utils/event';
 import {
@@ -19,19 +17,3 @@ enableElement,
 import { handleTrigger } from './features/trigger';
-import {
-  handleAddClass,
-  handleRemoveClass,
-  handleToggleClass,
-  handleReplaceInnerHtml,
-  handleReplaceOuterHtml,
-  handleAfterElement,
-  handleBeforeElement,
-  handleAppendElement,
-  handlePrependElement,
-  handleEmptyElement,
-  handleRemoveElement,
-  handleReplaceText
-} from './features/dom';
 
-import { handleSetData } from './features/data';
-
 import {
@@ -55,3 +37,3 @@ linkClickSelector,
 
-const DOM_EVENTS = ['click', 'submit', 'change', 'input', 'data:change'];
+const DOM_EVENTS = ['click', 'submit', 'change', 'input'];
 const AJAX_EVENTS = [
@@ -65,3 +47,3 @@ 'ajax:before',
 
-export default function start({ customEvents, hideClassName } = {}) {
+export default function start() {
   // This event works the same as the load event, except that it fires every
@@ -116,71 +98,14 @@ // time the page is loaded.
   AJAX_EVENTS.forEach(delegateTriggerHandler);
-  if (customEvents) {
-    customEvents.forEach(delegateTriggerHandler);
-  }
 
-  document.addEventListener('data:set', bindEvent(handleSetData));
-
-  document.addEventListener('dom:class:add', bindEvent(handleAddClass));
-  document.addEventListener('dom:class:remove', bindEvent(handleRemoveClass));
-  document.addEventListener('dom:class:toggle', bindEvent(handleToggleClass));
-
-  document.addEventListener(
-    'dom:html:replace',
-    bindEvent(handleReplaceInnerHtml)
-  );
-  document.addEventListener(
-    'dom:html:replace:outer',
-    bindEvent(handleReplaceOuterHtml)
-  );
-
-  document.addEventListener('dom:text:replace', bindEvent(handleReplaceText));
-
-  document.addEventListener('dom:element:after', bindEvent(handleAfterElement));
-  document.addEventListener(
-    'dom:element:before',
-    bindEvent(handleBeforeElement)
-  );
-  document.addEventListener(
-    'dom:element:append',
-    bindEvent(handleAppendElement)
-  );
-  document.addEventListener(
-    'dom:element:prepend',
-    bindEvent(handlePrependElement)
-  );
-
-  document.addEventListener(
-    'dom:element:remove',
-    bindEvent(handleRemoveElement)
-  );
-  document.addEventListener('dom:element:empty', handleEmptyElement);
-
-  hideClassName = hideClassName || 'display-none';
-
-  document.addEventListener(
-    'dom:element:show',
-    redirectEvent('dom:class:remove', hideClassName)
-  );
-  document.addEventListener(
-    'dom:element:hide',
-    redirectEvent('dom:class:add', hideClassName)
-  );
-  document.addEventListener(
-    'dom:element:toggle',
-    redirectEvent('dom:class:toggle', hideClassName)
-  );
-
   document.addEventListener('DOMContentLoaded', refreshCSRFTokens);
 }
 
-function bindEvent(handler) {
-  return function(e) {
-    handler.call(e.target, e);
-  };
-}
+export function addCustomEvent(eventName, callback, options = {}) {
+  document.addEventListener(eventName, event => {
+    callback.call(event.target, event);
+  });
 
-function redirectEvent(eventName, data) {
-  return function({ target: element }) {
-    fire(element, eventName, data);
-  };
+  if (options.trigger) {
+    delegateTriggerHandler(eventName);
+  }
 }
@@ -187,0 +112,0 @@

src/utils/ajax.js

@@ -0,1 +1,2 @@
+import 'whatwg-fetch';
 import param from 'jquery-param';
@@ -2,0 +3,0 @@ import { cspNonce } from './csp';

src/utils/dom.js

@@ -41,6 +41,4 @@ // Checks if the given native dom element matches the selector
 
-// a wrapper for document.querySelectorAll
-// returns an Array
 export function find(selector) {
   return [...document.querySelectorAll(selector)];
 }

src/utils/selectors.js

@@ -43,2 +43,2 @@ // Link elements bound to click
 export const triggerSelector =
-  'a[data-trigger], button[data-trigger], input[data-trigger], select[data-trigger], option[data-trigger], form[data-trigger]';
+  'a[data-trigger], button[data-trigger], input[data-trigger], select[data-trigger], form[data-trigger], body[data-trigger]';

test/ujs-test.js

@@ -9,13 +9,15 @@ /* global QUnit */
   fire,
-  CSRFProtection
+  CSRFProtection,
+  addCustomEvent
 } from '../src/index';
 
 test('ujs', function(assert) {
-  assert.ok(start, 'should have start');
+  assert.ok(start, 'should export start');
 
-  assert.ok(ajax, 'should have ajax');
-  assert.ok(getJSON, 'should have getJSON');
-  assert.ok(delegate, 'should have delegate');
-  assert.ok(fire, 'should have fire');
-  assert.ok(CSRFProtection, 'should have CSRFProtection');
+  assert.ok(ajax, 'should export ajax');
+  assert.ok(getJSON, 'should export getJSON');
+  assert.ok(delegate, 'should export delegate');
+  assert.ok(fire, 'should export fire');
+  assert.ok(CSRFProtection, 'should export CSRFProtection');
+  assert.ok(addCustomEvent, 'should export addCustomEvent');
 });
@@ -25,3 +27,4 @@
   start();
-  html('<a id=link data-trigger="dom:element:remove"></a>');
+  addCustomEvent('remove', ({ target }) => target.remove());
+  html('<a id=link data-trigger="remove"></a>');
   assert.ok(query('#link'));
@@ -28,0 +31,0 @@ fire(query('#link'), 'click');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

decreased by-42.86%

Number of lines in readme file

26

increased by333.33%

Worsened metrics

Total package byte prevSize

196368

decreased by-3.99%

Number of package files

41

decreased by-6.82%

Lines of code

1941

decreased by-9.59%

Dependency changes

• - Removedcustom-event-polyfill@^1.0.6

• - Removedes6-promise@^4.2.4

• - Removedes6-weak-map@^2.0.2

• - Removedcustom-event-polyfill@1.0.7(transitive)

• - Removedd@1.0.2(transitive)

• - Removedes5-ext@0.10.64(transitive)

• - Removedes6-iterator@2.0.3(transitive)

• - Removedes6-promise@4.2.8(transitive)

• - Removedes6-symbol@3.1.4(transitive)

• - Removedes6-weak-map@2.0.3(transitive)

• - Removedesniff@2.0.1(transitive)

• - Removedevent-emitter@0.3.5(transitive)

• - Removedext@1.7.0(transitive)

• - Removednext-tick@1.1.0(transitive)

• - Removedtype@2.7.3(transitive)