diff --git a/_sass/_patterns.scss b/_sass/_patterns.scss index 85438d2cc..ab5fd4a19 100644 --- a/_sass/_patterns.scss +++ b/_sass/_patterns.scss @@ -36,7 +36,5 @@ @import "src/pat/notification/notification"; @import "src/pat/sortable/sortable"; @import "src/pat/stacks/stacks"; -@import "src/pat/switch/switch"; @import "src/pat/syntax-highlight/syntax-highlight"; -@import "src/pat/toggle/toggle"; @import "src/pat/tooltip/tooltip"; diff --git a/src/pat/collapsible/_collapsible.scss b/src/pat/collapsible/_collapsible.scss index 59ec25b58..1bd3a84e0 100644 --- a/src/pat/collapsible/_collapsible.scss +++ b/src/pat/collapsible/_collapsible.scss @@ -1,5 +1,5 @@ -@import "settings"; -@import "components/button"; +@import "../../../_sass/settings"; +@import "../../../_sass/components/button"; .pat-collapsible { margin-bottom: 0.5em; diff --git a/src/pat/collapsible/collapsible.js b/src/pat/collapsible/collapsible.js index 26b3c9583..85d6917a8 100644 --- a/src/pat/collapsible/collapsible.js +++ b/src/pat/collapsible/collapsible.js @@ -45,6 +45,10 @@ class Pattern extends BasePattern { }; init() { + if (window.__patternslib_import_styles) { + import("./_collapsible.scss"); + } + const $el = (this.$el = $(this.el)); let $content; diff --git a/src/pat/gallery/gallery.js b/src/pat/gallery/gallery.js index 8cbf7a5de..b80f7adb9 100644 --- a/src/pat/gallery/gallery.js +++ b/src/pat/gallery/gallery.js @@ -12,7 +12,7 @@ export const parser = new Parser("gallery"); parser.addArgument("item-selector", "a"); // selector for anchor element, which is added to the gallery. parser.addArgument("loop", true); parser.addArgument("scale-method", "fit", ["fit", "fitNoUpscale", "zoom"]); -parser.addArgument("delay", 30000); +parser.addArgument("delay", 1); parser.addArgument("effect-duration", 250); let PhotoSwipe; diff --git a/src/pat/sortable/sortable.js b/src/pat/sortable/sortable.js index 2dc4c9c44..a3e24007c 100644 --- a/src/pat/sortable/sortable.js +++ b/src/pat/sortable/sortable.js @@ -6,6 +6,7 @@ import Parser from "../../core/parser"; export const parser = new Parser("sortable"); parser.addArgument("selector", "li"); +parser.addArgument("handle-selector", ".sortable-handle"); parser.addArgument("drag-class", "dragged"); // Class to apply to item that is being dragged. parser.addArgument("drop"); // Callback function for when item is dropped (null) @@ -52,21 +53,24 @@ export default Base.extend({ addHandles: function () { for (const sortable of this.$sortables) { - const handles = dom.querySelectorAllAndMe(sortable, ".sortable-handle"); + const handles = dom.querySelectorAllAndMe( + sortable, + this.options.handleSelector + ); if (handles.length === 0) { // TODO: we should change to a <button>. const handle = document.createElement("a"); handle.textContent = "⇕"; handle.classList.add("sortable-handle"); - handle.setAttribute("draggable", "true"); handle.setAttribute("href", "#"); //handle.setAttribute("title", "Drag to reorder"); // TODO: specify if that should be kept. - handle.setAttribute("aria-label", "Drag to reorder"); sortable.appendChild(handle); handles.push(handle); } for (const handle of handles) { + handle.setAttribute("draggable", "true"); + handle.setAttribute("aria-label", "Drag to reorder"); // TODO: remove when element is a button. events.add_event_listener( handle, @@ -170,7 +174,8 @@ export default Base.extend({ if (ev.dataTransfer) { // Firefox seems to need this set to any value ev.dataTransfer.setData("Text", ""); - ev.dataTransfer.effectAllowed = ["move"]; + ev.dataTransfer.dropEffect = "move"; + ev.dataTransfer.effectAllowed = "move"; if ("setDragImage" in ev.dataTransfer) { ev.dataTransfer.setDragImage($dragged[0], 0, 0); } diff --git a/src/pat/switch/_switch.scss b/src/pat/switch/_switch.scss deleted file mode 100644 index 7b4ee6af7..000000000 --- a/src/pat/switch/_switch.scss +++ /dev/null @@ -1,9 +0,0 @@ -li.mode-Red { - color: red !important; -} -li.mode-Green { - color: green; -} -li.mode-Blue { - color: blue; -} diff --git a/src/pat/toggle/_toggle.scss b/src/pat/toggle/_toggle.scss deleted file mode 100644 index 72df05555..000000000 --- a/src/pat/toggle/_toggle.scss +++ /dev/null @@ -1,19 +0,0 @@ -.green { - background-color: #23bf42; -} - -.blue { - background-color: #94bfdd; -} - -.red { - background-color: #cf6400; -} - -.blue, -.red, -.green { - display: inline-block; - padding: 5px 15px; - color: white; -} diff --git a/src/pat/toggle/index.html b/src/pat/toggle/index.html index 6c394b50e..04f43ba08 100644 --- a/src/pat/toggle/index.html +++ b/src/pat/toggle/index.html @@ -5,6 +5,8 @@ <meta charset="utf-8"> <link rel="stylesheet" href="/style/common.css" /> <script src="/bundle.min.js"></script> + </head> + <body> <style> .green { background-color: #23bf42; @@ -23,8 +25,6 @@ color: white; } </style> - </head> - <body> <div class="row"> <article class="pat-rich six columns"> <h2>Toggle a class</h2> @@ -70,7 +70,6 @@ <h2>Toggle with checkboxes and pat-checklist</h2> <input type="checkbox" name="toggler"> change </label> - </section> </body> </html>