diff --git a/README.md b/README.md index c8ca5389..702d0d91 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,11 @@ CircleCI status -
- - + -
- - -> **Warning:** Draggable is currently in beta +> **Ready for production!** While Draggable may still be in beta, all existing features are stable and safe for consumption. Draggable will exit beta once all remaining features have been implemented. Get complete control over drag and drop behaviour with Draggable! Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience. diff --git a/examples/README.md b/examples/README.md index f290934b..7c0dc69d 100644 --- a/examples/README.md +++ b/examples/README.md @@ -30,7 +30,7 @@ This folder contains the top-level page templates. The project uses Nunjucks for There is only one layout template, `views/templates/document.html`, which is extended by all of the `.html` files in the root of `/views`. These root views do the following: 1. Import global components such as `Sidebar` and `PageHeader` -2. Define the `ViewAttrs` for the view _(Page title, description, etc)_. +2. Define the `ViewAttr` for the view _(Page title, description, etc)_. 3. Import and render the content component for that view. ### `src/styles` diff --git a/examples/package.json b/examples/package.json index 7eeae9ac..e7d0d4b9 100644 --- a/examples/package.json +++ b/examples/package.json @@ -41,26 +41,26 @@ "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-shopify": "^16.2.0", - "browser-sync": "^2.23.5", + "browser-sync": "^2.23.6", "cssnano": "^3.10.0", "cssnano-preset-advanced": "^4.0.0-rc.2", - "eslint": "^4.16.0", - "eslint-plugin-prettier": "^2.5.0", + "eslint": "^4.17.0", + "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-shopify": "^19.0.0", "gulp": "gulpjs/gulp.git#4.0", - "gulp-cli": "^2.0.0", + "gulp-cli": "^2.0.1", "gulp-data": "^1.3.1", "gulp-htmlmin": "^4.0.0", "gulp-nunjucks": "^3.1.1", "gulp-postcss": "^7.0.1", "gulp-sass": "^3.1.0", - "gulp-sourcemaps": "^2.6.3", + "gulp-sourcemaps": "^2.6.4", "nunjucks": "^3.0.1", "prettier": "^1.10.2", "prettier-stylelint": "^0.4.2", "stylelint": "^8.4.0", "stylelint-config-shopify": "^4.0.0", "webpack": "^3.10.0", - "webpack-bundle-analyzer": "^2.9.2" + "webpack-bundle-analyzer": "^2.10.0" } } diff --git a/examples/postcss.config.js b/examples/postcss.config.js index a40b33e8..2f3d6b6c 100644 --- a/examples/postcss.config.js +++ b/examples/postcss.config.js @@ -1,3 +1,4 @@ +/* eslint-disable no-undef */ module.exports = () => ({ plugins: { autoprefixer: {}, @@ -8,3 +9,4 @@ module.exports = () => ({ }, }, }); +/* eslint-enable no-undef */ diff --git a/examples/src/components/Analytics/index.js b/examples/src/components/Analytics/index.js new file mode 100644 index 00000000..2f8fc111 --- /dev/null +++ b/examples/src/components/Analytics/index.js @@ -0,0 +1,38 @@ +function gtag() { + window.dataLayer.push(arguments); // eslint-disable-line prefer-rest-params +} + +export default class Analytics { + constructor(ua) { + this.ua = ua; + } + + init() { + if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') { + console.log('🤖 Analytics disabled in local development.'); + return; + } + + this._appendScript() + .then(() => { + window.dataLayer = window.dataLayer || []; + + gtag('js', new Date()); + gtag('config', this.ua); + + return window.dataLayer; + }) + .catch((error) => console.warn(error)); + } + + _appendScript() { + return new Promise((resolve, reject) => { + const script = document.createElement('script'); + document.body.appendChild(script); + script.onload = resolve; + script.onerror = reject; + script.async = true; + script.src = `https://www.googletagmanager.com/gtag/js?id=${this.ua}`; + }); + } +} diff --git a/examples/src/components/Block/Block.scss b/examples/src/components/Block/Block.scss index 197a0111..e56b0e5b 100644 --- a/examples/src/components/Block/Block.scss +++ b/examples/src/components/Block/Block.scss @@ -3,8 +3,8 @@ /// Block //// -@import 'utilities/shared/functions'; -@import 'utilities/shared/layout'; +@import 'utils/shared/functions'; +@import 'utils/shared/layout'; .BlockWrapper { .Block { @@ -37,3 +37,5 @@ margin-top: -0.1em; } } + +@import 'variants'; diff --git a/examples/src/components/Block/variants.scss b/examples/src/components/Block/variants.scss index 9cf25a21..2c440e6b 100644 --- a/examples/src/components/Block/variants.scss +++ b/examples/src/components/Block/variants.scss @@ -3,15 +3,15 @@ /// Block variants //// -@import 'utilities/shared/layout'; +@import 'utils/shared/layout'; @import 'components/Patterns/props'; /// /// BlockLayout .BlockLayout--typeFlex, .BlockLayout--typeFloat { - margin-top: -#{get-border(thin)}; - margin-left: -#{get-border(thin)}; + margin-top: -(get-border(thin)); + margin-left: -(get-border(thin)); > .BlockWrapper { margin-top: get-border(thin); @@ -24,8 +24,8 @@ } @media screen and (min-width: get-breakpoint(tablet)) { - margin-top: -#{get-border()}; - margin-left: -#{get-border()}; + margin-top: -(get-border()); + margin-left: -(get-border()); > .BlockWrapper { margin-top: get-border(); diff --git a/examples/src/components/Brand/Brand.html b/examples/src/components/Brand/Brand.html index bee443f1..5b590cd7 100644 --- a/examples/src/components/Brand/Brand.html +++ b/examples/src/components/Brand/Brand.html @@ -1,9 +1,9 @@
- {% include './Wordmark.html' %} + {% include 'components/Brand/Wordmark.html' %}
diff --git a/examples/src/components/Brand/Brand.scss b/examples/src/components/Brand/Brand.scss index 4b04c9c7..4f128156 100644 --- a/examples/src/components/Brand/Brand.scss +++ b/examples/src/components/Brand/Brand.scss @@ -3,10 +3,8 @@ /// Brand //// -@import './keyframes'; - -$logo-width: 4.6rem; -$wordmark-width: 17.6rem; +@import 'keyframes'; +@import 'props'; .Brand { cursor: get-cursor(rock); @@ -21,7 +19,7 @@ $wordmark-width: 17.6rem; } @media screen and (min-width: get-breakpoint(desktop)) { - margin-left: -#{get-spacing(tightest)}; + margin-left: -(get-spacing(tightest)); } } @@ -61,9 +59,9 @@ $wordmark-width: 17.6rem; } // --- Interaction -.Brand:hover { +.Brand { &:hover { - @include logo-hover; + @include logo-animation; } &:active { diff --git a/examples/src/components/Brand/keyframes.scss b/examples/src/components/Brand/keyframes.scss index c820f706..978d9ebc 100644 --- a/examples/src/components/Brand/keyframes.scss +++ b/examples/src/components/Brand/keyframes.scss @@ -3,6 +3,18 @@ /// Brand keyframes //// +@import 'props'; + +@keyframes logo-outline-bounce { + 25% { + transform: translate(-$logo-bounce-offset, $logo-bounce-offset); + } + + 75% { + transform: translate($logo-bounce-offset, -$logo-bounce-offset); + } +} + @keyframes logo-rainbow-mask { 0% { fill: get-color(coal, dark); @@ -74,37 +86,3 @@ fill: get-color(brand, red); } } - -@keyframes logo-outline-bounce { - 25% { - transform: translate(-0.1rem, 0.1rem); - } - - 75% { - transform: translate(0.1rem, -0.1rem); - } -} - -/// -/// Animation mixin -@mixin logo-hover { - .Wave--colorMask { - animation: logo-rainbow-mask get-duration(slow) get-easing() infinite; - } - - .Wave--colorPurple { - animation: logo-rainbow-purple get-duration(slow) get-easing() infinite; - } - - .Wave--colorRed { - animation: logo-rainbow-red get-duration(slow) get-easing() infinite; - } - - .Wave--colorOrange { - animation: logo-rainbow-orange get-duration(slow) get-easing() infinite; - } - - .Hand { - animation: logo-outline-bounce get-duration(slow) linear infinite; - } -} diff --git a/examples/src/components/Brand/props.scss b/examples/src/components/Brand/props.scss new file mode 100644 index 00000000..cc848fac --- /dev/null +++ b/examples/src/components/Brand/props.scss @@ -0,0 +1,30 @@ +//// +/// Components +/// Brand props +//// + +$logo-width: 4.6rem; +$wordmark-width: 17.6rem; +$logo-bounce-offset: 0.1rem; + +@mixin logo-animation { + .Wave--colorMask { + animation: logo-rainbow-mask get-duration(slow) get-easing() infinite; + } + + .Wave--colorPurple { + animation: logo-rainbow-purple get-duration(slow) get-easing() infinite; + } + + .Wave--colorRed { + animation: logo-rainbow-red get-duration(slow) get-easing() infinite; + } + + .Wave--colorOrange { + animation: logo-rainbow-orange get-duration(slow) get-easing() infinite; + } + + .Hand { + animation: logo-outline-bounce get-duration(slow) linear infinite; + } +} diff --git a/examples/src/components/Document/Analytics.html b/examples/src/components/Document/Analytics.html deleted file mode 100644 index f083341f..00000000 --- a/examples/src/components/Document/Analytics.html +++ /dev/null @@ -1,13 +0,0 @@ -{% macro render(trackingId) %} - {% if trackingId %} - - - {% endif %} -{% endmacro %} diff --git a/examples/src/components/Document/Head.html b/examples/src/components/Document/Head.html index d095c3f2..d02e3f59 100644 --- a/examples/src/components/Document/Head.html +++ b/examples/src/components/Document/Head.html @@ -1,19 +1,17 @@ -{% import './SocialShare.html' as SocialShare %} -{% import './Analytics.html' as Analytics %} +{% import 'components/Document/SocialShare.html' as SocialShare %} -{% macro render(ViewAttrs) %} +{% macro render(ViewAttr) %} {% set url = 'https://shopify.github.io/draggable' %} - {% set trackingId = 'UA-107063633-1' %} {% set siteName = 'Draggable JS Examples' %} {% set titleSep = ' | ' %} - {% set parentFragment = ViewAttrs.parent + titleSep if ViewAttrs.parent %} - {% set childFragment = ViewAttrs.child + titleSep if ViewAttrs.child %} - {% set title = [parentFragment, childFragment, siteName] %} + {% set parentFragment = ViewAttr.parent + titleSep if ViewAttr.parent %} + {% set childFragment = ViewAttr.child + titleSep if ViewAttr.child %} + {% set titleText = [parentFragment, childFragment, siteName] %} {% set HeadAttr = { siteName: siteName, - title: ViewAttrs.subheading, + title: ViewAttr.subheading, description: 'Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.', siteUrl: url, socialImg: url + '/assets/img/social/draggable-social.png', @@ -25,23 +23,20 @@ - {{ title | join('') | trim }} + {{ titleText | join('') | trim }} {{ SocialShare.render(HeadAttr) }} + {% include 'components/Document/Favicon.html' %} - {% include './Favicon.html' %} - - + - - {{ Analytics.render(trackingId) }} {% endmacro %} diff --git a/examples/src/components/Hamburger/Hamburger.scss b/examples/src/components/Hamburger/Hamburger.scss index eed8f27c..eccd5f7c 100644 --- a/examples/src/components/Hamburger/Hamburger.scss +++ b/examples/src/components/Hamburger/Hamburger.scss @@ -3,9 +3,9 @@ /// Hamburger //// -@import 'utilities/shared/layout'; -@import './props'; -@import './keyframes'; +@import 'utils/shared/layout'; +@import 'keyframes'; +@import 'props'; .Hamburger { z-index: get-z-index(hamburger); diff --git a/examples/src/components/Hamburger/keyframes.scss b/examples/src/components/Hamburger/keyframes.scss index cf09d6d8..2d7612b8 100644 --- a/examples/src/components/Hamburger/keyframes.scss +++ b/examples/src/components/Hamburger/keyframes.scss @@ -3,6 +3,8 @@ /// Hamburger keyframes //// +@import 'props'; + @keyframes FadeActivator { to { opacity: 1; diff --git a/examples/src/components/Handle/DragHandle.scss b/examples/src/components/Handle/DragHandle.scss index fbd352e7..e2b5c314 100644 --- a/examples/src/components/Handle/DragHandle.scss +++ b/examples/src/components/Handle/DragHandle.scss @@ -3,7 +3,7 @@ /// DragHandle //// -@import './props'; +@import 'props'; .DragHandle { position: relative; diff --git a/examples/src/components/Handle/NopeHandle.scss b/examples/src/components/Handle/NopeHandle.scss index 2ab9e360..3f9898e6 100644 --- a/examples/src/components/Handle/NopeHandle.scss +++ b/examples/src/components/Handle/NopeHandle.scss @@ -3,7 +3,7 @@ /// NopeHandle //// -@import './props'; +@import 'props'; .NopeHandle { position: relative; diff --git a/examples/src/components/Heading/Heading.scss b/examples/src/components/Heading/Heading.scss index baf2fb13..f1e7b9f3 100644 --- a/examples/src/components/Heading/Heading.scss +++ b/examples/src/components/Heading/Heading.scss @@ -3,7 +3,7 @@ /// Heading //// -@import './props'; +@import 'props'; .Heading { @include Heading; @@ -12,3 +12,5 @@ .Subheading { @include Subheading; } + +@import 'variants'; diff --git a/examples/src/components/Heading/variants.scss b/examples/src/components/Heading/variants.scss index 1cb1a53b..094fd0aa 100644 --- a/examples/src/components/Heading/variants.scss +++ b/examples/src/components/Heading/variants.scss @@ -3,7 +3,7 @@ /// Heading variants //// -@import './props'; +@import 'props'; /// /// Heading sizes diff --git a/examples/src/components/Link/Link.scss b/examples/src/components/Link/Link.scss index 64139e83..51e89543 100644 --- a/examples/src/components/Link/Link.scss +++ b/examples/src/components/Link/Link.scss @@ -3,8 +3,10 @@ /// Link //// -@import './props'; +@import 'props'; .Link { @include Link; } + +@import 'variants'; diff --git a/examples/src/components/MobileNav/index.js b/examples/src/components/MobileNav/index.js index d77a73e6..a6b1d8d9 100644 --- a/examples/src/components/MobileNav/index.js +++ b/examples/src/components/MobileNav/index.js @@ -1,4 +1,4 @@ -import {debounce, debounceDuration} from '../../scripts/helpers/debounce'; +import debounce, {debounceDuration} from '../../scripts/utils/debounce'; // equal to `get-breakpoint()` base value const MAX_WIDTH = 960; @@ -7,18 +7,18 @@ const Attrs = { controls: 'aria-controls', expanded: 'aria-expanded', hidden: 'aria-hidden', - scroll: 'data-scroll-lock', }; export default class MobileNav { constructor(activator) { this.activator = activator; + this.target = document.getElementById(activator.getAttribute(Attrs.controls)); + } - const controlsTarget = activator.getAttribute(Attrs.controls); - this.target = document.getElementById(controlsTarget); - + init() { if (!this.target) { - throw Error('The activator must have a valid `aria-controls` value. Target not found.'); + console.error('The activator must have a valid `aria-controls` value. Target not found.'); + return; } this._setState(); @@ -33,13 +33,13 @@ export default class MobileNav { } expand(widthExceeded = false) { - const scrollLock = !widthExceeded; + const lockScrolling = !widthExceeded; const willExpand = widthExceeded ? 'undefined' : 'false'; this.expanded = true; this.activator.setAttribute(Attrs.expanded, 'true'); this.target.setAttribute(Attrs.hidden, willExpand); - document.documentElement.setAttribute(Attrs.scroll, scrollLock); + document.documentElement.dataset.scrollLock = lockScrolling; } collapse() { @@ -50,7 +50,7 @@ export default class MobileNav { this.expanded = false; this.activator.setAttribute(Attrs.expanded, 'false'); this.target.setAttribute(Attrs.hidden, 'true'); - document.documentElement.setAttribute(Attrs.scroll, 'false'); + document.documentElement.dataset.scrollLock = false; } toggle() { diff --git a/examples/src/components/Navigation/NavList.html b/examples/src/components/Navigation/NavList.html index ebf37c78..d7d35fa4 100644 --- a/examples/src/components/Navigation/NavList.html +++ b/examples/src/components/Navigation/NavList.html @@ -1,8 +1,8 @@ -{% macro render(ViewAttrs, SubNav) %} +{% macro render(ViewAttr, SubNav) %} {% for Section, Links in SubNav %} {% set listClasses = ['NavList'] %} {% set listClasses = ( - listClasses.push('NavList--isCurrent') if ViewAttrs.parent == Section, listClasses + listClasses.push('NavList--isCurrent') if ViewAttr.parent == Section, listClasses ) %}