ember-safe-button 2.1.1 → 3.0.0

package/addon/components/safe-button/index.js

@@ -1,184 +0,0 @@
-import Component from '@glimmer/component';
-import { timeout } from 'ember-concurrency';
-import { tracked } from '@glimmer/tracking';
-import { task } from 'ember-concurrency';
-import { action } from '@ember/object';
-import embeddedAnimations from './animations';
-import { assert } from '@ember/debug';
-
-const DEFAULT_TIMEOUT = 3000;
-const DEFAULT_ANIMATION = 'slide';
-
-export const SAFETY_STATUS = {
-  LOCKED: 1,
-  UNLOCKING: 2,
-  UNLOCKED: 3,
-  LOCKING: 4,
-};
-
-/**
-  Main component.
-
-  ```hbs
-    <SafeButton
-      class="border-black"
-      @animation={{this.animation}}
-      @message="Delete me"
-      @timeout={{2000}}
-      @onConfirm={{action safeButtonClicked}} />
-  ```
-
-  ```
-    @class SafeButtonComponent
-    @param {string} [class="ember-safe-button"] CSS class to be applied on the wrapping element.
-    @param {object} [animation="slid"] Definition of animation; It can either be string and point to one of the pre-defined animations; Or it can be an object describing Web Animation API
-    @param {number} [timeout=3000] Number of millisenconds after which the safety rolls back over the trigger.
-    @param {string} [message="delete"] Text to be printed on the buttons in case block is not provided.
-    @param {function} onConfirm - Action to trigger whenever user clicks the trigger.
-  ```
-
-  When trying to construct your own `@animation` object you can take inspiration from the simple `slide` animation. The thing to keep in mind is that these go directly as parameters to [element.animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) and that there are in fact four animations of which always two fire at the same time:
-
-  - `safety.unlocking` and `trigger.unlocking`
-  - `safety.locking` and `trigger.locking`
-
-  ```js
-    {
-      safety: {
-        unlocking: {
-          keyframes: [
-            { transform: 'translateX(0)' },
-            { transform: 'translateX(-100%)' },
-          ],
-          options: {
-            duration: 1000,
-            fill: 'both',
-            easing: 'ease',
-          },
-        },
-        locking: {
-          keyframes: [
-            { transform: 'translateX(-100%)' },
-            { transform: 'translateX(0)' },
-          ],
-          options: {
-            duration: 1000,
-            fill: 'both',
-            easing: 'ease',
-          },
-        },
-      },
-      trigger: {
-        unlocking: {
-          keyframes: [
-            { transform: 'translateX(100%)' },
-            { transform: 'translateX(0)' },
-          ],
-          options: {
-            duration: 1000,
-            fill: 'both',
-            easing: 'ease',
-          },
-        },
-        locking: {
-          keyframes: [
-            { transform: 'translateX(0)' },
-            { transform: 'translateX(100%)' },
-          ],
-          options: {
-            duration: 1000,
-            fill: 'both',
-            easing: 'ease',
-          },
-        },
-      },
-    }
-  ```
- */
-export default class SafeButtonComponent extends Component {
-  constructor() {
-    super(...arguments);
-
-    assert(
-      '@onConfirm attribute must be set',
-      typeof this.args.onConfirm === 'function'
-    );
-  }
-
-  @tracked safetyStatus = SAFETY_STATUS.LOCKED;
-
-  get activeAnimation() {
-    const animation = this.args.animation || DEFAULT_ANIMATION;
-
-    return typeof animation === 'string'
-      ? embeddedAnimations[animation]
-      : animation;
-  }
-
-  get webAnimations() {
-    const { activeAnimation, onUnlocked, onLocked } = this;
-
-    return {
-      safety: {
-        unlocking: ({ element }) => {
-          let animation = element.animate(
-            activeAnimation.safety.unlocking.keyframes,
-            activeAnimation.safety.unlocking.options
-          );
-          animation.onfinish = onUnlocked;
-        },
-        locking: ({ element }) => {
-          let animation = element.animate(
-            activeAnimation.safety.locking.keyframes,
-            activeAnimation.safety.locking.options
-          );
-          animation.onfinish = onLocked;
-        },
-      },
-      trigger: {
-        unlocking({ element }) {
-          element.animate(
-            activeAnimation.trigger.unlocking.keyframes,
-            activeAnimation.trigger.unlocking.options
-          );
-        },
-        locking({ element }) {
-          element.animate(
-            activeAnimation.trigger.locking.keyframes,
-            activeAnimation.trigger.locking.options
-          );
-        },
-      },
-    };
-  }
-
-  get timeout() {
-    return this.args.timeout || DEFAULT_TIMEOUT;
-  }
-
-  get displayedMessage() {
-    return this.args.message || 'delete';
-  }
-
-  @action
-  onUnlocking() {
-    this.safetyStatus = SAFETY_STATUS.UNLOCKING;
-  }
-
-  @action
-  onUnlocked() {
-    this.safetyStatus = SAFETY_STATUS.UNLOCKED;
-    this.triggerSafety.perform();
-  }
-
-  @action
-  onLocked() {
-    this.safetyStatus = SAFETY_STATUS.LOCKED;
-  }
-
-  @task(function* () {
-    yield timeout(this.timeout);
-    this.safetyStatus = SAFETY_STATUS.LOCKING;
-  })
-  triggerSafety;
-}

package/addon/components/safety/index.hbs

@@ -1,20 +0,0 @@
-<button
-  class={{this.BASIC_CLASS}}
-  disabled={{this.isDisabled}}
-  aria-label={{this.ariaLabel}}
-  type='button'
-  tabindex={{if this.isDisabled '-1' '0'}}
-  ...attributes
-  {{on 'click' @onClick}}
-  {{animate-me
-    safetyStatus=@safetyStatus
-    webAnimations=@webAnimations
-    focusMe=this.focusMe
-  }}
->
-  {{#if (has-block)}}
-    {{yield}}
-  {{else}}
-    {{@displayedMessage}}
-  {{/if}}
-</button>

package/addon/components/safety/index.js

@@ -1,41 +0,0 @@
-import Component from '@glimmer/component';
-import { SAFETY_STATUS } from '../safe-button';
-
-export const BASIC_CLASS = 'ember-safe-button-safety';
-export const ARIA_LABELS = {
-  [SAFETY_STATUS.LOCKED]: 'Deactivate safety',
-  [SAFETY_STATUS.UNLOCKING]: 'Deactivating safety',
-  [SAFETY_STATUS.UNLOCKED]: 'Safety not active',
-  [SAFETY_STATUS.LOCKING]: 'Activating safety',
-};
-
-/**
-  Safety is a component that covers the trigger.
-
-  ```hbs
-    <SafeButton
-      @onConfirm={{action safeButtonClicked}} as |button|
-    >
-      <button.safety class="bg-grey-light">
-        This is safety
-      </button.safety>
-    </SafeButton>
-  ```
-
-  @class SafetyComponent
- */
-export default class SafetyComponent extends Component {
-  BASIC_CLASS = BASIC_CLASS;
-
-  get isDisabled() {
-    return this.args.safetyStatus === SAFETY_STATUS.UNLOCKED;
-  }
-
-  get focusMe() {
-    return !this.isDisabled;
-  }
-
-  get ariaLabel() {
-    return ARIA_LABELS[this.args.safetyStatus];
-  }
-}

package/addon/components/trigger/index.hbs

@@ -1,20 +0,0 @@
-<button
-  class={{this.BASIC_CLASS}}
-  disabled={{this.isDisabled}}
-  aria-label='Confirm action'
-  type='button'
-  tabindex={{if this.isDisabled '-1' '0'}}
-  ...attributes
-  {{on 'click' @onClick}}
-  {{animate-me
-    safetyStatus=@safetyStatus
-    webAnimations=@webAnimations
-    focusMe=this.focusMe
-  }}
->
-  {{#if (has-block)}}
-    {{yield}}
-  {{else}}
-    {{@displayedMessage}}
-  {{/if}}
-</button>

package/addon/components/trigger/index.js

@@ -1,31 +0,0 @@
-import Component from '@glimmer/component';
-import { SAFETY_STATUS } from '../safe-button';
-
-export const BASIC_CLASS = 'ember-safe-button-trigger';
-
-/**
-  Trigger is a component that is by default covered by safety and triggers the action passed to <SafeButton> when clicked.
-
-  ```hbs
-    <SafeButton
-      @onConfirm={{action safeButtonClicked}} as |button|
-    >
-      <button.trigger class="bg-red-dark">
-        Trigger
-      </button.trigger>
-    </SafeButton>
-  ```
-
-  @class SafetyComponent
- */
-export default class TriggerComponent extends Component {
-  BASIC_CLASS = BASIC_CLASS;
-
-  get isDisabled() {
-    return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;
-  }
-
-  get focusMe() {
-    return !this.isDisabled;
-  }
-}

package/addon/modifiers/animate-me.js

@@ -1,20 +0,0 @@
-import Modifier from 'ember-modifier';
-import { SAFETY_STATUS } from '../components/safe-button';
-
-export default class AnimateMeModifier extends Modifier {
-  didReceiveArguments() {
-    if (this.args.named.focusMe) {
-      this.element.focus();
-    }
-
-    if (this.args.named.safetyStatus === SAFETY_STATUS.UNLOCKING) {
-      this.args.named.webAnimations.unlocking({
-        element: this.element,
-      });
-    } else if (this.args.named.safetyStatus === SAFETY_STATUS.LOCKING) {
-      this.args.named.webAnimations.locking({
-        element: this.element,
-      });
-    }
-  }
-}

package/app/components/safe-button.js

@@ -1 +0,0 @@
-export { default } from 'ember-safe-button/components/safe-button';

package/app/components/safety.js

@@ -1 +0,0 @@
-export { default } from 'ember-safe-button/components/safety';

package/app/components/trigger.js

@@ -1,2 +0,0 @@
-export * from 'ember-safe-button/components/trigger';
-export { default } from 'ember-safe-button/components/trigger';

package/app/modifiers/animate-me.js

@@ -1 +0,0 @@
-export { default } from 'ember-safe-button/modifiers/animate-me';

package/app/templates/components/safe-button.js

@@ -1 +0,0 @@
-export { default } from 'ember-safe-button/templates/components/safe-button';

package/app/templates/components/safety.js

@@ -1 +0,0 @@
-export { default } from 'ember-safe-button/templates/components/safety';

package/app/templates/components/trigger.js

@@ -1 +0,0 @@
-export { default } from 'ember-safe-button/templates/components/trigger';

package/config/addon-docs.js

@@ -1,13 +0,0 @@
-/* eslint-disable node/no-unpublished-require */
-/* eslint-disable unicorn/prevent-abbreviations */
-/* eslint-env node */
-'use strict';
-
-// eslint-disable-next-line node/no-unpublished-require
-// eslint-disable-next-line node/no-missing-require
-const AddonDocsConfig = require('ember-cli-addon-docs/lib/config');
-
-module.exports = class extends AddonDocsConfig {
-  // See https://ember-learn.github.io/ember-cli-addon-docs/docs/deploying
-  // for details on configuration you can override here.
-};

package/config/deploy.js

@@ -1,29 +0,0 @@
-/* eslint-env node */
-'use strict';
-
-module.exports = function (deployTarget) {
-  let ENV = {
-    build: {},
-    // include other plugin configuration that applies to all deploy targets here
-  };
-
-  if (deployTarget === 'development') {
-    ENV.build.environment = 'development';
-    // configure other plugins for development deploy target here
-  }
-
-  if (deployTarget === 'staging') {
-    ENV.build.environment = 'production';
-    // configure other plugins for staging deploy target here
-  }
-
-  if (deployTarget === 'production') {
-    ENV.build.environment = 'production';
-    // configure other plugins for production deploy target here
-  }
-
-  // Note: if you need to build some configuration asynchronously, you can return
-  // a promise that resolves with the ENV object instead of returning the
-  // ENV object synchronously.
-  return ENV;
-};

package/config/environment.js

@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = function (/* environment, appConfig */) {
-  return {};
-};