ember-safe-button 2.0.0 → 3.0.0

package/.vscode/settings.json

@@ -1,19 +0,0 @@
-{
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#fbed80",
-    "activityBar.activeBorder": "#06b9a5",
-    "activityBar.background": "#fbed80",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#06b9a5",
-    "activityBarBadge.foreground": "#15202b",
-    "statusBar.background": "#f9e64f",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#f7df1e",
-    "titleBar.activeBackground": "#f9e64f",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#f9e64f99",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "peacock.color": "#f9e64f"
-}

package/CHANGELOG.md

@@ -1,108 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/2.0.0.html).
-
-## 2.0.0 (2021-02-19)
-
-### Chagned
-
-- **BREAKING**: Moved from [ember-animated](https://ember-animation.github.io/ember-animated/) to custom usage of [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). This changed mostly the internal API of the component, but things might break.
-
-### Added
-
-- New property `@animation`.
-   - It either accepts a `string` which then points to one of the [embedded animation patterns](./addon/components/safe-button/animations/index.js).
-   - Or it can accept an `object` which is then a series of Web Animation compatible object definitions for _safety_ and _trigger_ _unlocking_ and _locking_ animations.
-- Documentation page with showcase of all embedded animations.
-- Safety is _only_ clickable when the safety is locked. In all other states (including animation) the button is `disabled`.
-- `SafeButton` automatically changes `disabled` and `tabindex` attributes of respective button elements.
-- `SafeButton` automatically handles `focus()` of respective button elements.
-
-### Fixed
-
-- Docs app page title is no longer `Dummy`, but `ember-safe-button`.
-- First in the DOM we have `trigger` and then `safety` which means that z-index will be in logical way when not explicitly set.
-
-## 1.0.7 (2021-02-07)
-
-### Fixed
-
-- Fixed animations in Safari.
-
-### Changed
-
-- Removed auto-focus from trigger. This caused the Safari to misbehave. Will have to figure out more conceptual fix.
-- Replaced ember-animated with ember-animate-css
-
-## 1.0.6 (2019-10-18)
-
-### Fixed
-
-- The addon works when used in external app.
-
-## 1.0.5 (2019-10-18)
-
-### Fixed
-
-- Add ember-animated to dependencies.
-
-## 1.0.4 (2019-10-18)
-
-### Fixed
-
-- Netlify SRI / redirect issues.
-
-## 1.0.3 (2019-10-18)
-
-### Fixed
-
-- Netlify redirects.
-
-## 1.0.2 (2019-10-18)
-
-### Fixed
-
-- Better texts for readme to show what is this addon about.
-- Make sure that examples in addon docs work.
-
-### Changed
-
-- Completely remove dependency on tailwind-css even for the docs.
-- Add custom styling for the examples.
-
-## 1.0.1 (2019-10-04)
-
-### Fixed
-
-- Correct configuration to generate addon docs.
-
-## 1.0.0 (2019-10-03)
-
-### Changed
-
-- Bumped from Octane preview to ember v3.13.1.
-
-## 0.2.0 (2019-04-06)
-
-### Added
-
-- CHANGELOG (this file :)).
-- `aria-label` attributes for better accessibility.
-- Example of styling for documentation examples.
-- Ability to provide `@message` that renders inside buttons when no block is provided
-- Fallback `@message="delete"`
-
-### Changed
-
-- Documentation structure.
-- Names of examples in documentation.
-
-## 0.1.0 (2019-03-30)
-
-### Added
-
-- First implementation of `ember-safe-button` that allows basic interation where `safety` dissapears upon click, `trigger` triggers action on click and `safety` gets back after timeout.
-- Addon has nice styling through [ember-cli-addon-docs](https://ember-learn.github.io/ember-cli-addon-docs/).

package/LICENSE.md

@@ -1,9 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2019
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/addon/components/safe-button/animations/flip.js

@@ -1,114 +0,0 @@
-// TODO: https://github.com/animate-css/animate.css/blob/main/source/flippers/flipOutX.css
-// TODO: https://github.com/animate-css/animate.css/blob/main/source/flippers/flipInX.css
-export default {
-  safety: {
-    unlocking: {
-      keyframes: [
-        { transform: 'perspective(400px)', offset: 0 },
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
-          offset: 0.3 / 2,
-          opacity: 1,
-        },
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
-          offset: 1 / 2,
-          opacity: 0,
-        },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'forwards',
-        easing: 'ease-in',
-      },
-    },
-    locking: {
-      keyframes: [
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
-          offset: 0,
-          opacity: 0,
-        },
-        {
-          transform: ['perspective(400px)', 'rotate3d(1, 0, 0, -20deg)'],
-          offset: 0.4 / 2 + 0.5,
-        },
-        {
-          transform: ['perspective(400px)', 'rotate3d(1, 0, 0, 10deg)'],
-          offset: 0.6 / 2 + 0.5,
-          opacity: 1,
-        },
-        {
-          transform: ['perspective(400px)', 'rotate3d(1, 0, 0, -5deg)'],
-          offset: 0.8 / 2 + 0.5,
-          opacity: 1,
-        },
-        {
-          transform: 'perspective(400px)',
-          offset: 1 / 2 + 0.5,
-          opacity: 1,
-        },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'forwards',
-        easing: 'ease-in',
-      },
-    },
-  },
-  trigger: {
-    unlocking: {
-      keyframes: [
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
-          offset: 0 + 0.5,
-          opacity: 0,
-        },
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
-          offset: 0.4 / 2 + 0.5,
-        },
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)',
-          offset: 0.6 / 2 + 0.5,
-          opacity: 1,
-        },
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)',
-          offset: 0.8 / 2 + 0.5,
-          opacity: 1,
-        },
-        {
-          transform: 'perspective(400px)',
-          offset: 1 / 2 + 0.5,
-          opacity: 1,
-        },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'forwards',
-        easing: 'ease-in',
-      },
-    },
-    locking: {
-      keyframes: [
-        { transform: 'perspective(400px)', offset: 0 },
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
-          offset: 0.3 / 2,
-          opacity: 1,
-        },
-        {
-          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
-          offset: 1 / 2,
-          opacity: 0,
-        },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'forwards',
-        easing: 'ease-in',
-      },
-    },
-  },
-};

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

@@ -1,15 +0,0 @@
-import poing from './poing';
-import slide from './slide';
-import roll from './roll';
-import flip from './flip';
-import liftBars from './lift-bars';
-import zoom from './zoom';
-
-export default {
-  poing,
-  slide,
-  flip,
-  zoom,
-  roll,
-  'lift-bars': liftBars,
-};

package/addon/components/safe-button/animations/lift-bars.js

@@ -1,50 +0,0 @@
-export default {
-  safety: {
-    unlocking: {
-      keyframes: [
-        { transform: 'translate3d(0, 0, 0)' },
-        { transform: 'translate3d(0, -100%, 0)' },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-    locking: {
-      keyframes: [
-        { transform: 'translate3d(0, -100%, 0)' },
-        { transform: 'translate3d(0, 0, 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',
-      },
-    },
-  },
-};

package/addon/components/safe-button/animations/poing.js

@@ -1,99 +0,0 @@
-export default {
-  safety: {
-    unlocking: {
-      keyframes: [
-        { transform: 'scale(1)', opacity: 1, offset: 0 },
-        {
-          transform: 'translateX(0px) scale(0.7)',
-          opacity: 0.7,
-          offset: 0.2,
-        },
-        {
-          transform: 'translateX(-2000px) scale(0.7)',
-          opacity: 0.7,
-          offset: 1,
-        },
-      ],
-      options: {
-        duration: 2000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-    locking: {
-      keyframes: [
-        {
-          transform: 'translateX(-2000px) scale(0.7)',
-          opacity: 0.7,
-          offset: 0,
-        },
-        {
-          transform: 'translateX(0px) scale(0.7)',
-          opacity: 0.7,
-          offset: 0.8,
-        },
-        { transform: 'scale(1)', opacity: 1, offset: 1 },
-      ],
-      options: {
-        duration: 2000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-  },
-  trigger: {
-    unlocking: {
-      keyframes: [
-        {
-          opacity: 0,
-          transform: 'translate3d(3000px, 0, 0) scaleX(3)',
-          offset: 0,
-        },
-        {
-          opacity: 1,
-          transform: 'translate3d(-25px, 0, 0) scaleX(1)',
-          offset: 0.6,
-        },
-        {
-          opacity: 1,
-          transform: 'translate3d(10px, 0, 0) scaleX(0.98)',
-          offset: 0.75,
-        },
-        {
-          opacity: 1,
-          transform: 'translate3d(-5px, 0, 0) scaleX(0.995)',
-          offset: 0.9,
-        },
-        {
-          opacity: 1,
-          transform: 'translate3d(0, 0, 0)',
-          offset: 1,
-        },
-      ],
-      options: {
-        duration: 2000,
-        fill: 'both',
-        easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-      },
-    },
-    locking: {
-      keyframes: [
-        {
-          opacity: 1,
-          transform: 'translate3d(-20px, 0, 0) scaleX(0.9)',
-          offset: 0.2,
-        },
-        {
-          opacity: 0,
-          transform: 'translate3d(2000px, 0, 0) scaleX(2)',
-          offset: 1,
-        },
-      ],
-      options: {
-        duration: 2000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-  },
-};

package/addon/components/safe-button/animations/roll.js

@@ -1,50 +0,0 @@
-export default {
-  safety: {
-    unlocking: {
-      keyframes: [
-        { transform: 'translateX(0)' },
-        { transform: 'translateX(-100%) rotate(-180deg)' },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-    locking: {
-      keyframes: [
-        { transform: 'translateX(-100%) rotate(-180deg)' },
-        { transform: 'translateX(0)' },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-  },
-  trigger: {
-    unlocking: {
-      keyframes: [
-        { transform: 'translateX(100%) rotate(180deg)' },
-        { transform: 'translateX(0)' },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-    locking: {
-      keyframes: [
-        { transform: 'translateX(0)' },
-        { transform: 'translateX(100%) rotate(180deg)' },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-  },
-};

package/addon/components/safe-button/animations/slide.js

@@ -1,50 +0,0 @@
-export default {
-  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',
-      },
-    },
-  },
-};

package/addon/components/safe-button/animations/zoom.js

@@ -1,52 +0,0 @@
-export default {
-  safety: {
-    unlocking: {
-      keyframes: [
-        { offset: 0, transform: 'translate3d(0, 0, 0)' },
-        { offset: 1, transform: 'translate3d(100%, 0, 0)' },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-    locking: {
-      keyframes: [
-        { offset: 0, transform: 'translate3d(-100%, 0, 0)' },
-        { offset: 1, transform: 'translate3d(0, 0, 0)' },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-  },
-  trigger: {
-    unlocking: {
-      keyframes: [
-        { offset: 0, opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)' },
-        { offset: 0.5, opacity: 1 },
-        { offset: 1, opacity: 1 },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-    locking: {
-      keyframes: [
-        { offset: 0, opacity: 1 },
-        { offset: 0.5, opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)' },
-        { offset: 1, opacity: 0 },
-      ],
-      options: {
-        duration: 1000,
-        fill: 'both',
-        easing: 'ease',
-      },
-    },
-  },
-};

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

@@ -1,35 +0,0 @@
-<div class='ember-safe-button' ...attributes>
-  {{#if (has-block)}}
-    {{yield
-      (hash
-        trigger=(component
-          'trigger'
-          onClick=@onConfirm
-          safetyStatus=this.safetyStatus
-          displayedMessage=this.displayedMessage
-          webAnimations=this.webAnimations.trigger
-        )
-        safety=(component
-          'safety'
-          onClick=this.onUnlocking
-          safetyStatus=this.safetyStatus
-          displayedMessage=this.displayedMessage
-          webAnimations=this.webAnimations.safety
-        )
-      )
-    }}
-  {{else}}
-    <Trigger
-      @onClick={{@onConfirm}}
-      @safetyStatus={{this.safetyStatus}}
-      @displayedMessage={{this.displayedMessage}}
-      @webAnimations={{this.webAnimations.trigger}}
-    />
-    <Safety
-      @onClick={{this.onUnlocking}}
-      @safetyStatus={{this.safetyStatus}}
-      @displayedMessage={{this.displayedMessage}}
-      @webAnimations={{this.webAnimations.safety}}
-    />
-  {{/if}}
-</div>