diff --git a/.github/workflows/generate-json.yml b/.github/workflows/generate-json.yml index eae447e..8ad8628 100644 --- a/.github/workflows/generate-json.yml +++ b/.github/workflows/generate-json.yml @@ -26,6 +26,15 @@ jobs: with: fetch-depth: 0 + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: '0.81.0' + extended: true + + - name: Build + run: hugo --minify --baseURL https://quiqr.github.io/quiqr-community-templates/ + - name: Extract Links id: extralinks uses: mipmip/github-action-markdown-link-extract-to-json@v1.4 @@ -40,14 +49,14 @@ jobs: - name: parse and flatten repo meta run: ./.github/workflows/getmeta.sh - - name: download md2html - run: cd /tmp && wget -c https://github.com/nocd5/md2html/releases/download/v2.0.0/md2html_linux_amd64.zip && unzip md2html_linux_amd64.zip - - - name: convert README.md with md2html - run: /tmp/md2html README.md -o index.html +# - name: download md2html +# run: cd /tmp && wget -c https://github.com/nocd5/md2html/releases/download/v2.0.0/md2html_linux_amd64.zip && unzip md2html_linux_amd64.zip +# +# - name: convert README.md with md2html +# run: /tmp/md2html README.md -o index.html - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: . + publish_dir: ./public diff --git a/.github/workflows/getmeta.sh b/.github/workflows/getmeta.sh index cc72fa9..a83ac62 100755 --- a/.github/workflows/getmeta.sh +++ b/.github/workflows/getmeta.sh @@ -43,6 +43,6 @@ do done rm -f templates_tmp.json -jq -s 'flatten' _*.json > templates.json +jq -s 'flatten' _*.json > public/static/templates.json rm -f _*.json -cat templates.json +cat public/static/templates.json diff --git a/.gitignore b/.gitignore index d003be3..e7407c5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,80 @@ -.temp.html -.temp.seed +# Hugo Theme +resources +public + +# OSX +.DS_Store + +# Jetbrains +.idea + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ +package-lock.json + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# Test Content +content/test + +# Visual Studio Code project settings +.vscode +# Local Netlify folder +.netlify diff --git a/LICENSE b/LICENSE index 3ad65fd..fd115a8 100644 --- a/LICENSE +++ b/LICENSE @@ -1,40 +1,22 @@ -CC0 1.0 Universal - -Statement of Purpose - -The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work"). - -Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others. - -For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights. - -Copyright and Related Rights. A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following: -i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work; - -ii. moral rights retained by the original author(s) and/or performer(s); - -iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work; - -iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below; - -v. rights protecting the extraction, dissemination, use and reuse of data in a Work; - -vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and - -vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof. - -Waiver. To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose. - -Public License Fallback. Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose. - -Limitations and Disclaimers. - -a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document. - -b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law. - -c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work. - -d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work. - -For more information, please see https://creativecommons.org/publicdomain/zero/1.0 +MIT License + +Copyright (c) 2019 jamstackthemes.dev - rob@stackbit.com +Copyright (c) 2021-2024 quiqr.org - post@pimsnel.com + +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. diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..00e77bd --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,6 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +draft: true +--- + diff --git a/archetypes/ssg.md b/archetypes/ssg.md new file mode 100644 index 0000000..111df5b --- /dev/null +++ b/archetypes/ssg.md @@ -0,0 +1,7 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +icon: images/icons/docusaurus.svg +official_url: https://docusaurus.io/ +vitalstats_url: https://www.staticgen.com/docusaurus +taxonomy: ssg +--- diff --git a/archetypes/theme.md b/archetypes/theme.md new file mode 100644 index 0000000..6456e1a --- /dev/null +++ b/archetypes/theme.md @@ -0,0 +1,33 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +github: https://github.com/username/repo +github_branch: master +demo: https://www.demo.com +author: Github Author +ssg: + - Gridsome +cms: + - No CMS +css: + - Bootstrap +archetype: + - Blog + - Portfolio +date: 2019-06-11 +description: This theme is a lightweight Gridsome starter kit which is perfect for a blog or a portfolio +--- + +# A simple starter kit for Gridsome + +This theme is a lightweight starter kit. It also gives you a well organised starting point to extend it for yourself. + +## Features + +* Customisable design tokens to make it your own +* Customisable global data and navigation +* Tags and tag archives +* Progressively enhanced, semantic and accessible +* _Super_ lightweight front-end +* Sass powered CSS system with utility class generator +* Service worker that caches pages so people can read your articles offline +* An RSS feed for your posts diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..c422c35 --- /dev/null +++ b/config.toml @@ -0,0 +1,55 @@ +baseURL = "/" +languageCode = "en-us" +title = "Quiqr Templates" +theme = "jamstackthemes" +paginate = 18 +summaryLength = 10 +# enableGitInfo = false + +pygmentsCodeFences = true +pygmentsCodefencesGuessSyntax = true +pygmentsUseClasses = true + +[params] + description = "Templates and starters for the Quiqr Static website CMS." + stackbit_button = true + iframe_demo = true + assets_url = "https://assets.jamstackthemes.dev" + + [theme_card] + show_archetype_icons = false + show_services_icons = false + +[taxonomies] + ssg = "ssg" + cms = "cms" + css = "css" + archetype = "archetype" + services = "services" + +[outputFormats] + [outputFormats.demo] + name = "demo" + mediaType = "text/html" + isHTML = "true" + path = "demo" + permalinkable = "true" + +[outputs] + home = ["HTML","RSS","JSON"] + section = ["HTML","RSS"] + page = ["HTML", "demo"] + +[frontmatter] + lastmod = [":git", "lastmod", ":fileModTime", ":default"] + +# Main Menu +[[menu.main]] + name = "New Themes" + url = "/" + weight = 1 + +[[menu.main]] + name = "All Themes" + url = "/theme/" + weight = 2 diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..5bea243 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,3 @@ +--- +title: 'Jamstack Themes' +--- diff --git a/content/archetype/_index.md b/content/archetype/_index.md new file mode 100644 index 0000000..42b9ea3 --- /dev/null +++ b/content/archetype/_index.md @@ -0,0 +1,4 @@ +--- +title: Archetype +weight: 4 +--- \ No newline at end of file diff --git a/content/archetype/admin/_index.md b/content/archetype/admin/_index.md new file mode 100644 index 0000000..544a47b --- /dev/null +++ b/content/archetype/admin/_index.md @@ -0,0 +1,4 @@ +--- +title: "Admin" +icon: images/icons/admin.svg +--- diff --git a/content/archetype/blog/_index.md b/content/archetype/blog/_index.md new file mode 100644 index 0000000..603f54f --- /dev/null +++ b/content/archetype/blog/_index.md @@ -0,0 +1,4 @@ +--- +title: "Blog" +icon: images/icons/blog.svg +--- \ No newline at end of file diff --git a/content/archetype/business/_index.md b/content/archetype/business/_index.md new file mode 100644 index 0000000..b00ecda --- /dev/null +++ b/content/archetype/business/_index.md @@ -0,0 +1,4 @@ +--- +title: "Business" +icon: images/icons/business.svg +--- \ No newline at end of file diff --git a/content/archetype/documentation/_index.md b/content/archetype/documentation/_index.md new file mode 100644 index 0000000..14c7d40 --- /dev/null +++ b/content/archetype/documentation/_index.md @@ -0,0 +1,4 @@ +--- +title: "Documentation" +icon: images/icons/documentation.svg +--- \ No newline at end of file diff --git a/content/archetype/ecommerce/_index.md b/content/archetype/ecommerce/_index.md new file mode 100644 index 0000000..97145b0 --- /dev/null +++ b/content/archetype/ecommerce/_index.md @@ -0,0 +1,4 @@ +--- +title: "Ecommerce" +icon: images/icons/ecommerce.svg +--- diff --git a/content/archetype/event/_index.md b/content/archetype/event/_index.md new file mode 100644 index 0000000..bf88eb7 --- /dev/null +++ b/content/archetype/event/_index.md @@ -0,0 +1,4 @@ +--- +title: "Event" +icon: images/icons/event.svg +--- diff --git a/content/archetype/personal/_index.md b/content/archetype/personal/_index.md new file mode 100644 index 0000000..1b2bdf2 --- /dev/null +++ b/content/archetype/personal/_index.md @@ -0,0 +1,4 @@ +--- +title: "Personal" +icon: images/icons/personal.svg +--- \ No newline at end of file diff --git a/content/archetype/portfolio/_index.md b/content/archetype/portfolio/_index.md new file mode 100644 index 0000000..8438bff --- /dev/null +++ b/content/archetype/portfolio/_index.md @@ -0,0 +1,4 @@ +--- +title: "Portfolio" +icon: images/icons/portfolio.svg +--- \ No newline at end of file diff --git a/content/archetype/single-page/_index.md b/content/archetype/single-page/_index.md new file mode 100644 index 0000000..e049b64 --- /dev/null +++ b/content/archetype/single-page/_index.md @@ -0,0 +1,4 @@ +--- +title: "Single Page" +icon: images/icons/single-page.svg +--- diff --git a/content/css/_index.md b/content/css/_index.md new file mode 100644 index 0000000..4838274 --- /dev/null +++ b/content/css/_index.md @@ -0,0 +1,4 @@ +--- +title: CSS +weight: 3 +--- \ No newline at end of file diff --git a/content/css/bootstrap/_index.md b/content/css/bootstrap/_index.md new file mode 100644 index 0000000..0e79ed6 --- /dev/null +++ b/content/css/bootstrap/_index.md @@ -0,0 +1,5 @@ +--- +title: "Bootstrap" +icon: images/icons/bootstrap.svg +official_url: https://getbootstrap.com/ +--- \ No newline at end of file diff --git a/content/css/bulma/_index.md b/content/css/bulma/_index.md new file mode 100644 index 0000000..65262cf --- /dev/null +++ b/content/css/bulma/_index.md @@ -0,0 +1,4 @@ +--- +title: "Bulma" +icon: images/icons/bulma.svg +--- \ No newline at end of file diff --git a/content/css/css/_index.md b/content/css/css/_index.md new file mode 100644 index 0000000..3c6e73a --- /dev/null +++ b/content/css/css/_index.md @@ -0,0 +1,4 @@ +--- +title: "CSS" +icon: images/icons/css.svg +--- \ No newline at end of file diff --git a/content/css/material-ui/_index.md b/content/css/material-ui/_index.md new file mode 100644 index 0000000..a2b7c9e --- /dev/null +++ b/content/css/material-ui/_index.md @@ -0,0 +1,6 @@ +--- +title: "Material Ui" +icon: images/icons/material-ui.svg +official_url: https://mui.com/ +taxonomy: css +--- \ No newline at end of file diff --git a/content/css/postcss/_index.md b/content/css/postcss/_index.md new file mode 100644 index 0000000..a44b686 --- /dev/null +++ b/content/css/postcss/_index.md @@ -0,0 +1,5 @@ +--- +title: "PostCSS" +icon: images/icons/postcss.svg +official_url: https://postcss.org/ +--- diff --git a/content/css/scss/_index.md b/content/css/scss/_index.md new file mode 100644 index 0000000..c1038d2 --- /dev/null +++ b/content/css/scss/_index.md @@ -0,0 +1,4 @@ +--- +title: "SCSS" +icon: images/icons/scss.svg +--- \ No newline at end of file diff --git a/content/css/styled-components/_index.md b/content/css/styled-components/_index.md new file mode 100644 index 0000000..5f10d09 --- /dev/null +++ b/content/css/styled-components/_index.md @@ -0,0 +1,5 @@ +--- +title: "Styled Components" +icon: images/icons/styled-components.png +official_url: https://styled-components.com/ +--- diff --git a/content/css/stylus/_index.md b/content/css/stylus/_index.md new file mode 100644 index 0000000..419a50d --- /dev/null +++ b/content/css/stylus/_index.md @@ -0,0 +1,5 @@ +--- +title: "Stylus" +icon: images/icons/stylus.svg +official_url: https://stylus-lang.com/ +--- diff --git a/content/css/tailwind/_index.md b/content/css/tailwind/_index.md new file mode 100644 index 0000000..ebb00a9 --- /dev/null +++ b/content/css/tailwind/_index.md @@ -0,0 +1,5 @@ +--- +title: "Tailwind" +icon: images/icons/tailwind.svg +official_url: https://tailwindcss.com/ +--- \ No newline at end of file diff --git a/content/css/vuetify/_index.md b/content/css/vuetify/_index.md new file mode 100644 index 0000000..522568c --- /dev/null +++ b/content/css/vuetify/_index.md @@ -0,0 +1,5 @@ +--- +title: "Vuetify" +icon: images/icons/vuetify.svg +official_url: https://vuetifyjs.com/ +--- \ No newline at end of file diff --git a/content/services/_index.md b/content/services/_index.md new file mode 100644 index 0000000..a62afd8 --- /dev/null +++ b/content/services/_index.md @@ -0,0 +1,4 @@ +--- +title: Services +weight: 3 +--- \ No newline at end of file diff --git a/content/services/algolia/_index.md b/content/services/algolia/_index.md new file mode 100644 index 0000000..f76c7c1 --- /dev/null +++ b/content/services/algolia/_index.md @@ -0,0 +1,5 @@ +--- +title: "Algolia" +icon: images/icons/algolia.svg +official_url: https://https://www.algolia.com/ +--- \ No newline at end of file diff --git a/content/services/formspree/_index.md b/content/services/formspree/_index.md new file mode 100644 index 0000000..b3445c6 --- /dev/null +++ b/content/services/formspree/_index.md @@ -0,0 +1,5 @@ +--- +title: "Formspree" +icon: images/icons/formspree.svg +official_url: https://formspree.io/ +--- \ No newline at end of file diff --git a/content/services/formstack/_index.md b/content/services/formstack/_index.md new file mode 100644 index 0000000..08cec3c --- /dev/null +++ b/content/services/formstack/_index.md @@ -0,0 +1,5 @@ +--- +title: "Formstack" +icon: images/icons/formstack.svg +official_url: https://formstack.com/ +--- \ No newline at end of file diff --git a/content/services/mailchimp/_index.md b/content/services/mailchimp/_index.md new file mode 100644 index 0000000..7c9466d --- /dev/null +++ b/content/services/mailchimp/_index.md @@ -0,0 +1,5 @@ +--- +title: "Mailchimp" +icon: images/icons/mailchimp.svg +official_url: https://mailchimp.com/ +--- \ No newline at end of file diff --git a/content/services/shopify/_index.md b/content/services/shopify/_index.md new file mode 100644 index 0000000..ba2334c --- /dev/null +++ b/content/services/shopify/_index.md @@ -0,0 +1,5 @@ +--- +title: "Shopify" +icon: images/icons/shopify.svg +official_url: https://shopify.com/ +--- \ No newline at end of file diff --git a/content/services/snipcart/_index.md b/content/services/snipcart/_index.md new file mode 100644 index 0000000..f533e5a --- /dev/null +++ b/content/services/snipcart/_index.md @@ -0,0 +1,5 @@ +--- +title: "Snipcart" +icon: images/icons/snipcart.svg +official_url: https://snipcart.com/ +--- \ No newline at end of file diff --git a/content/theme/hugo-theme-tailwind.md b/content/theme/hugo-theme-tailwind.md new file mode 100644 index 0000000..c802fdd --- /dev/null +++ b/content/theme/hugo-theme-tailwind.md @@ -0,0 +1,36 @@ +--- +title: Tailwind +github: https://github.com/tomowang/hugo-theme-tailwind +demo: https://hugo-theme-tailwind.tomo.dev/ +author: Xiaoliang Wang +author_link: https://tomo.dev +date: 2023-12-09 +ssg: + - Hugo +cms: + - No CMS +css: + - Tailwind +archetype: + - Blog +description: Clean card Hugo theme for blog, created by using tailwindcss +--- + +# Hugo theme tailwind + +Hugo theme build using [Tailwind CSS](https://tailwindcss.com/), mostly for bloggers. + +Check [https://hugo-theme-tailwind.tomo.dev/](https://hugo-theme-tailwind.tomo.dev/) for demo. + +## Features + + * High Lighthouse score + * Dark mode - switch between light and dark mode, or default by system prefers. + * SVG icons thanks to [tabler icons](https://tabler-icons.io/) + * Google Analystics - add your Google Analytics ID to `hugo.toml` + * Comments settings for [disqus](https://disqus.com/) and [giscus](https://giscus.app/) + * Social media link data settings + * Additional short code: bilibili, asciinema + * Responsive design + * Multilingual + * Default image process for lazy load and srcset diff --git a/data/errors.json b/data/errors.json new file mode 100644 index 0000000..7016f33 --- /dev/null +++ b/data/errors.json @@ -0,0 +1,22 @@ +[ + { + "theme_key": "obaez-dentistsmile", + "file": "dentistsmile.md", + "repoUrl": "https://github.com/obaez/dentistsmile", + "error": "Github repo not found, status: 404" + }, + { + "theme_key": "hugo-sid-hugo-blog-awesome", + "file": "hugo-blog-awesome.md", + "repoUrl": "https://github.com/hugo-sid/hugo-blog-awesome", + "demoUrl": "https://hugo-blog-awesome.netlify.app/", + "error": "demo url not found" + }, + { + "theme_key": "obaez-dentistsmile", + "file": "dentistsmile.md", + "repoUrl": "https://github.com/obaez/dentistsmile", + "demoUrl": "https://obaez.com/dentistsmile/", + "error": "error checking demo url" + } +] \ No newline at end of file diff --git a/data/stackbit.json b/data/stackbit.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/data/stackbit.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/data/themes.json b/data/themes.json new file mode 100644 index 0000000..72b4377 --- /dev/null +++ b/data/themes.json @@ -0,0 +1,25 @@ +{ + "zzzmisa-hugo-theme-doors": { + "theme_key": "zzzmisa-hugo-theme-doors", + "file": "hugo-theme-doors.md", + "name": "hugo-theme-doors", + "title": "Doors", + "github_username": "zzzmisa", + "repo": "zzzmisa/hugo-theme-doors", + "branch": "master", + "default_branch": "master", + "github_url": "https://github.com/zzzmisa/hugo-theme-doors", + "demo_url": "https://zzzmisa.com/", + "stars": 13, + "forks": 9, + "open_issues": 0, + "last_commit": "2022-02-05T06:06:44Z", + "created_at": "2019-08-05T14:40:43Z", + "description": "🚪Single page theme for links to your works", + "images": { + "hires": "https://www.jamstackthemes.dev/capture/zzzmisa-hugo-theme-doors.png", + "thumbnail": "https://www.jamstackthemes.dev/images/theme/thumbnail/zzzmisa-hugo-theme-doors.jpg", + "screenshot": "https://www.jamstackthemes.dev/images/theme/thumbnail/2x/zzzmisa-hugo-theme-doors-2x.jpg" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..3274d02 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "scripts": { + "build": "node ./scripts/build.js && hugo --minify", + "deploy": "node ./scripts/build.js --latest && hugo --minify", + "stackbit": "node ./scripts/build.js --github=false --demos=false --images=false && hugo --minify", + "images": "node ./scripts/build.js --github=false --demos=false --stackbit=false && hugo --minify", + "deploy:branch": "npm run deploy && echo 'User-agent: *\nDisallow: /' > public/robots.txt" + }, + "dependencies": { + "axios": "^0.21.1", + "axios-rate-limit": "^1.3.0", + "cli-spinners": "^2.5.0", + "date-fns": "^2.16.1", + "front-matter": "^4.0.2", + "fs-extra": "^9.1.0", + "js-yaml": "^4.0.0", + "ora": "^5.3.0", + "pageres": "^6.1.0", + "parse-github-url": "^1.0.2", + "promise.allsettled": "^1.0.4", + "sharp": "^0.30.5", + "url-slug": "^3.0.1", + "yaml-front-matter": "^4.1.1", + "yargs": "^16.2.0" + } +} diff --git a/scripts/build.js b/scripts/build.js new file mode 100644 index 0000000..e92a21f --- /dev/null +++ b/scripts/build.js @@ -0,0 +1,59 @@ +#!/usr/bin/env node +const yargs = require('yargs/yargs') +const { hideBin } = require('yargs/helpers') +const argv = yargs(hideBin(process.argv)).argv +const {generateGithubData} = require('./build/github'); +const {generateMarkdownData} = require('./build/markdown'); +const {testDemoUrls} = require('./build/demo'); +const {writeThemesFile, writeErrorFile, writeStackbitFile} = require('./build/write') +const {generateStackbitData} = require('./build/stackbit') +const {generateScreenshots, generateThumbnails} = require('./build/screenshot') +const config = require('./build/config'); +const {errorLog} = require('./build/errors'); + +const build = async (options) => { + const themesMarkdown = await generateMarkdownData(config.themesMarkdownFiles, options) + + if (options.github) { + // Updates themes.json + const themesGithub = await generateGithubData(themesMarkdown) + writeThemesFile(themesGithub) + } + if (options.stackbit) { + // Updates stackbit.json + const stackbit = generateStackbitData(themesMarkdown) + writeStackbitFile(stackbit); + } + + if (options.demos) { + // Visits each demo URL with a headless browser and if the site cannot be reached sets the markdown file to disabled=true + await testDemoUrls(themesMarkdown) + } + + if (options.images) { + await generateScreenshots(themesMarkdown, options.recaptureImage) + await generateThumbnails(themesMarkdown, options.regenerateImage) + } + + writeErrorFile(errorLog) + console.log("Build Successful") + console.log("Error Log") + process.exit(0) +} + +const options = { + github: argv.github !== "false", // generates `data/themes.json` which is used for github stars, commits meta data etc + stackbit: argv.stackbit !== "false", // generates `data/stackbit.json` which is used for the "create site" button + demos: argv.demos !== "false", // tests the themes demo url using headless browser and disables the theme if the url does not resolve + images: argv.images !== "false", // captures screenshots and generates thumbnails + + disabled: argv.disabled !== "false", // Skip processing themes that have front-matter `disabled: true` + draft: argv.draft !== "false", // Skip processing themes that have front-matter `draft: true` + latest: argv.latest || false, // Only process themes which don't already exist in `data/themes.json` + file: argv.file || false, // Only process a single file ie --file=gatsby-starter-advanced.md + all: argv.all || false, // process all themes + recaptureImage: argv.recaptureImage || false, + regenerateImage: argv.regenerateImage || false +} + +build(options); \ No newline at end of file diff --git a/scripts/build/cleanup.js b/scripts/build/cleanup.js new file mode 100644 index 0000000..886e93e --- /dev/null +++ b/scripts/build/cleanup.js @@ -0,0 +1,23 @@ +#!/usr/bin/env node +const fs = require('fs'); +const path = require('path'); +const yamlFront = require('yaml-front-matter'); +const yaml = require('js-yaml'); +const isBefore = require('date-fns/isBefore'); +const parseISO = require('date-fns/parseISO'); +const subYears = require('date-fns/subYears'); +const {getThemeKey} = require('./utils'); +const {themeMap} = require('./write'); +const {generateMarkdownData} = require('./markdown') +const config = require('./config'); +const staleBeforeDate = subYears(new Date(), 1); + +const deleteOldThemes = async (themesMarkdown, themesGithub) => { + const themesMarkdown = await generateMarkdownData(config.themesMarkdownFiles) + const themesMarkdownMap = themeMap(themesMarkdown) +} + +module.exports = { + deleteOldThemes +} + diff --git a/scripts/build/config.js b/scripts/build/config.js new file mode 100644 index 0000000..e48700c --- /dev/null +++ b/scripts/build/config.js @@ -0,0 +1,30 @@ +#!/usr/bin/env node +const fs = require('fs'); +const path = require('path'); +const subYears = require('date-fns/subYears'); + +const errorJsonFile = path.join(process.cwd(), '/data/errors.json'); +const stackbitJsonFile = path.join(process.cwd(), '/data/stackbit.json'); +const stackbitJsonData = fs.existsSync(stackbitJsonFile) ? JSON.parse(fs.readFileSync(stackbitJsonFile)) : {}; +const themesMarkdownFolder = path.join(process.cwd(), '/content/theme') +const themesMarkdownFiles = fs.readdirSync(themesMarkdownFolder).map(relFilename => path.resolve(themesMarkdownFolder, relFilename)) +const themesJsonFile = path.join(process.cwd(), '/data/themes.json'); +const themesJsonData = fs.existsSync(themesJsonFile) ? JSON.parse(fs.readFileSync(themesJsonFile)) : {}; +const hiresImagesFolder = path.join(process.cwd(), '/static/capture'); +const thumbnailImagesFolder = path.join(process.cwd(), '/static/images/theme/thumbnail') +const thumbnailImagesFolder2x = path.join(process.cwd(), '/static/images/theme/thumbnail/2x') +const staleBeforeDate = subYears(new Date(), 1); + +module.exports = { + errorJsonFile, + themesJsonFile, + themesMarkdownFolder, + themesMarkdownFiles, + themesJsonData, + stackbitJsonFile, + stackbitJsonData, + hiresImagesFolder, + thumbnailImagesFolder, + thumbnailImagesFolder2x, + staleBeforeDate +} \ No newline at end of file diff --git a/scripts/build/demo.js b/scripts/build/demo.js new file mode 100644 index 0000000..3ffb388 --- /dev/null +++ b/scripts/build/demo.js @@ -0,0 +1,67 @@ +#!/usr/bin/env node +const axios = require('axios'); +const allSettled = require('promise.allsettled'); +const {errorLog} = require('./errors') +const ora = require('ora'); +const {getThemeKey, getRepoName} = require('./utils'); +const {updateFrontmatter} = require('./markdown'); +const spinner = ora('Loading') + +const testDemo = (frontmatter) => { + const themeKey = getThemeKey(frontmatter.github) + + return axios.get(frontmatter.demo).then((res) => { + spinner.text = `${frontmatter.demo} => checking Demo URL - ${res.status}`; + if (frontmatter.disabled) { + updateFrontmatter(frontmatter.file, { + disabled: false, + disabled_reason: "" + }) + } + return true; + }).catch(err => { + let error = "error checking demo url" + if (err) { + if (err.code === "ENOTFOUND") { + error = "demo url not found" + } + if (err.code === "ECONNREFUSED") { + error = "demo url connection refused" + } + if (err.response) { + if (err.response.status === 404) { + error = "demo url not found" + } + if (err.response.data) { + if (err.response.data.message) { + error = err.response.data.message; + } + } + + } + } + updateFrontmatter(frontmatter.file, { + disabled: true, + disabled_reason: error + }) + spinner.text = `${frontmatter.demo} => checking Demo URL - ${error}`; + errorLog.push({ + theme_key: themeKey, + file: frontmatter.file, + repoUrl: frontmatter.github, + demoUrl: frontmatter.demo, + error + }) + }); +} + +const testDemoUrls = async (themesMarkdown) => { + spinner.start("Testing Demo URL's"); + await allSettled(themesMarkdown.map(theme => testDemo(theme))) + spinner.succeed("Success - Testing Demo URL's"); +} + + +module.exports = { + testDemoUrls +} \ No newline at end of file diff --git a/scripts/build/errors.js b/scripts/build/errors.js new file mode 100644 index 0000000..d807214 --- /dev/null +++ b/scripts/build/errors.js @@ -0,0 +1,6 @@ +#!/usr/bin/env node +let errorLog = [] + +module.exports = { + errorLog +} diff --git a/scripts/build/github.js b/scripts/build/github.js new file mode 100755 index 0000000..31a0811 --- /dev/null +++ b/scripts/build/github.js @@ -0,0 +1,135 @@ +#!/usr/bin/env node +const axios = require('axios'); +const allSettled = require('promise.allsettled'); +const rateLimit = require('axios-rate-limit'); +const isBefore = require('date-fns/isBefore'); +const parseISO = require('date-fns/parseISO'); +const formatDistanceToNow = require('date-fns/formatDistanceToNow') +const ora = require('ora'); +const {errorLog} = require('./errors'); +const {getThemeKey, getRepoName} = require('./utils'); +const {updateFrontmatter} = require('./markdown') +const config = require('./config'); + +if (!process.env.GITHUB_TOKEN) { + throw new Error( + 'Cannot access Github API - environment variable "GITHUB_TOKEN" is missing' + ) +} + +const token = process.env.GITHUB_TOKEN; +const axiosLimit = rateLimit(axios.create(), {maxRequests: 2, perMilliseconds: 200}) +const spinner = ora('Loading') + +const fetchRepoData = async (frontmatter) => { + + const themeKey = getThemeKey(frontmatter.github) + const repoName = getRepoName(frontmatter.github) + + try { + const res = await axiosLimit.get( + `https://api.github.com/repos/${repoName}`, + { + headers: { + Authorization: `Token ${token}`, + }, + }) + spinner.text = `${frontmatter.file} => ${res.data.html_url} - ${res.status}` + const lastCommit = await fetchBranchData(repoName, res.data.default_branch); + updateFrontmatter(frontmatter.file, { + stale: isBefore(parseISO(lastCommit), config.staleBeforeDate) + }) + if (frontmatter.disabled) { + updateFrontmatter(frontmatter.file, { + disabled: false, + disabled_reason: "" + }) + } + + return { + theme_key: themeKey, + file: frontmatter.file, + name: res.data.name, + title: frontmatter.title, + github_username: res.data.owner.login, + repo: res.data.full_name, + branch: res.data.default_branch, + default_branch: res.data.default_branch, + github_url: res.data.html_url, + demo_url: frontmatter.demo, + stars: res.data.stargazers_count, + forks: res.data.forks_count, + open_issues: res.data.open_issues_count, + last_commit: lastCommit, + created_at: res.data.created_at, + description: res.data.description, + images: { + hires: `https://www.jamstackthemes.dev/capture/${themeKey}.png`, + thumbnail: `https://www.jamstackthemes.dev/images/theme/thumbnail/${themeKey}.jpg`, + screenshot: `https://www.jamstackthemes.dev/images/theme/thumbnail/2x/${themeKey}-2x.jpg` + } + } + } catch (err) { + const status = err.response?.status; + let error = `Github repo not found, status: ${status}`; + if (status === 404) { + updateFrontmatter(frontmatter.file, { + disabled: true, + disabled_reason: error + }) + } + spinner.text = `${frontmatter.file} => ${error}` + errorLog.push({ + theme_key: themeKey, + file: frontmatter.file, + repoUrl: frontmatter.github, + error + }) + throw err + } +} + +const fetchBranchData = (repo, branch) => { + return axiosLimit.get( + `https://api.github.com/repos/${repo}/branches/${branch}`, + { + headers: { + Authorization: `Token ${token}`, + }, + }).then((res) => { + const lastCommit = res.data.commit.commit.author.date; + const lastCommitToNow = formatDistanceToNow(parseISO(lastCommit)); + spinner.text = `${repo} => last commit to branch '${branch}' ${lastCommitToNow}` + return lastCommit; + }).catch((err) => { + throw err + }); +} + +const generateGithubData = async (markdownData, themesJsonData) => { + spinner.start("Fetching Github Data"); + const initalThemes = config.themesJsonData; + const update = await allSettled(markdownData.map(frontmatter => fetchRepoData(frontmatter))) + const updatedThemesArray = update.filter(res => res.status === 'fulfilled').map(res => res.value) + const mergedThemesMap = updatedThemesArray.reduce((accumulator, theme) => { + if (theme === undefined) { + // TODO find root cause + console.log("undefined theme detected"); + return { + ...accumulator + }; + } + const themeKey = getThemeKey(theme.github_url) + return { + ...accumulator, + [themeKey]: theme + }; + }, initalThemes); + + spinner.succeed("Success - Fetching Github Data"); + return mergedThemesMap +} + +module.exports = { + generateGithubData +} \ No newline at end of file diff --git a/scripts/build/markdown.js b/scripts/build/markdown.js new file mode 100644 index 0000000..aa53276 --- /dev/null +++ b/scripts/build/markdown.js @@ -0,0 +1,133 @@ +#!/usr/bin/env node +const fs = require('fs'); +const path = require('path'); +const yamlFront = require('yaml-front-matter'); +const yaml = require('js-yaml'); +const {getThemeKey} = require('./utils'); +const config = require('./config'); + +const updateFrontmatter = (file, update = {}) => { + const absFilepath = path.resolve(config.themesMarkdownFolder, file) + const fileData = fs.existsSync(absFilepath) ? fs.readFileSync(absFilepath) : null; + + let frontmatter = yamlFront.loadFront(fileData); + let content = frontmatter.__content; + delete frontmatter.__content; + + Object.keys(update).forEach((key, index) => { + frontmatter[key] = update[key] + }); + + const fm = `---\n${yaml.dump(frontmatter)}---${content}`; + + fs.writeFileSync(absFilepath, fm); +} + +const loadThemeFrontMatter = absFilename => { + const fileData = fs.readFileSync(absFilename); + const frontmatter = yamlFront.loadFront(fileData); + + if (!frontmatter.github) { + const file = path.parse(absFilename).base; + if (file === ".DS_Store") { + fs.unlinkSync(absFilename) + throw new Error(`${absFilename} invalid file. This file was deleted, try again...`) + } + throw new Error(`${absFilename} invalid github frontmatter`) + } + + let title = frontmatter.title; + let description = frontmatter.description; + let draft = frontmatter.draft; + let disabled = frontmatter.disabled; + let github = frontmatter.github; + let demo = frontmatter.demo; + let github_branch = frontmatter.github_branch; + let file = path.parse(absFilename).base; + let absFile = absFilename + let ssg = frontmatter.ssg + let cms = frontmatter.cms + return { + title, + description, + draft, + disabled, + github, + demo, + github_branch, + file, + absFile, + ssg, + cms + } + +}; + +const generateMarkdownData = async (markdownFiles, options = {}) => { + + let filterCounts = { + draft: 0, + disabled: 0, + latest: 0, + skipped: 0 + } + + const markdownData = markdownFiles.map(absFilename => loadThemeFrontMatter(absFilename)).filter(frontmatter => { + + if (options.file) { + // if the cli command --file=hugo-swift-theme.md is used, only fetch that specific theme + if (options.file !== frontmatter.file) { + filterCounts.skipped += 1 + return false + } + return true; + } + + if (options.latest) { + // if the cli command --latest is used, only fetch new themes which don't already exist in `data/themes.json` + const themeKey = getThemeKey(frontmatter.github) + if (config.themesJsonData[themeKey]) { + filterCounts.latest += 1 + return false + } + return true + } + + if (options.disabled) { + if (frontmatter.disabled) { + filterCounts.disabled += 1 + return false; + } + } + if (options.draft) { + if (frontmatter.draft) { + filterCounts.draft += 1 + return false; + } + } + + return true; + }); + + + if (options.file) { + console.log(`Processing single theme - ${options.file}`) + } else if (options.latest) { + console.log(`Processing latest themes`) + } else { + console.log(`Processing all themes`) + console.log(`Total ${markdownFiles.length} themes`) + console.log(`Skipping ${filterCounts.disabled} disabled themes`) + console.log(`Skipping ${filterCounts.draft} draft themes`) + console.log(`Skipping ${filterCounts.latest} existing themes`) + console.log(`Processing ${markdownData.length}/${markdownFiles.length} themes...`) + } + + return markdownData; +} + +module.exports = { + generateMarkdownData, + updateFrontmatter +} + diff --git a/scripts/build/screenshot.js b/scripts/build/screenshot.js new file mode 100644 index 0000000..56bb0ce --- /dev/null +++ b/scripts/build/screenshot.js @@ -0,0 +1,99 @@ +#!/usr/bin/env node +const fs = require('fs-extra'); +const path = require('path'); +const Pageres = require('pageres'); +const sharp = require('sharp') +const {getThemeKey} = require('./utils'); +const config = require('./config'); +const ora = require('ora'); +const spinner = ora('Loading') + +const captureScreenshot = async (frontmatter, overwrite = false) => { + const themeKey = getThemeKey(frontmatter.github) + const themeImage = `${themeKey}.png` + + if (!overwrite && fs.existsSync(path.join(config.hiresImagesFolder, themeImage))) { + return false + } + + try { + const page = await new Pageres({delay: 2, filename: themeKey}) + .src(frontmatter.demo, ['1280x960'], {crop: true}) + .dest(config.hiresImagesFolder) + .run(); + spinner.text = `${frontmatter.demo} => capturing` + return page + } catch { + spinner.text = `${frontmatter.demo} => failed capturing` + return false; + } +}; + +const generateThumbnail = async (frontmatter, overwrite = false) => { + const themeKey = getThemeKey(frontmatter.github) + const hiresImage = path.join(config.hiresImagesFolder, `${themeKey}.png`) + const imageName = path.parse(hiresImage).name + const outputImage = path.join(config.thumbnailImagesFolder, `${imageName}.jpg`) + const outputImage2x = path.join(config.thumbnailImagesFolder2x, `${imageName}-2x.jpg`) + + if (!hiresImage) { + return false; + } + if (!overwrite && fs.existsSync(outputImage) && fs.existsSync(outputImage2x)) { + return false; + } + fs.ensureDirSync(config.thumbnailImagesFolder); + fs.ensureDirSync(config.thumbnailImagesFolder2x); + + try { + spinner.text = `${imageName} => processing thumbnail` + await sharp(hiresImage) + .resize({ + width: 280, + height: 210, + fit: 'cover', + position: 'top', + }) + .jpeg({ + quality: 85, + }) + .toFile(outputImage) + + spinner.text = `${imageName} => processing thumbnail@2x` + await sharp(hiresImage) + .resize({ + width: 560, + height: 420, + fit: 'cover', + position: 'top', + }) + .jpeg({ + quality: 85, + }) + .toFile(outputImage2x) + } catch { + spinner.text = `${imageName} => processing failed` + return false; + } +}; + +const generateThumbnails = async (markdownData, overwrite) => { + spinner.start("Generating Thumbnails"); + for (const theme of markdownData) { + await generateThumbnail(theme, overwrite) + } + spinner.succeed("Success - Generating Thumbnails"); +}; + +const generateScreenshots = async (markdownData, overwrite) => { + spinner.start("Capturing Screenshots"); + for (const theme of markdownData) { + await captureScreenshot(theme, overwrite) + } + spinner.succeed("Success - Capturing Screenshots"); +} + +module.exports = { + generateScreenshots, + generateThumbnails +} \ No newline at end of file diff --git a/scripts/build/stackbit.js b/scripts/build/stackbit.js new file mode 100755 index 0000000..1ac4936 --- /dev/null +++ b/scripts/build/stackbit.js @@ -0,0 +1,91 @@ +#!/usr/bin/env node +const urlSlug = require('url-slug'); +const {getThemeKey, getRepoName} = require('./utils'); +const ora = require('ora'); +const spinner = ora('Loading') +const allowedSsg = [] +const allowedCms = [] + +const generateStackbit = (frontmatter) => { + const themeKey = getThemeKey(frontmatter.github) + + spinner.text = `${frontmatter.file}` + + let stackbitData = { + theme_key: themeKey + }; + + const ssgArray = frontmatter.ssg || [] + const cmsArray = frontmatter.cms || [] + + if (ssgArray.some(ssg => allowedSsg.includes(urlSlug(ssg))) && cmsArray.some(cms => allowedCms.includes(urlSlug(cms)))) { + if (ssgArray.length > 1) { + stackbitData.createUrl = `https://app.stackbit.com/create?theme=${frontmatter.github}` + } else { + stackbitData.createUrl = `https://app.stackbit.com/create?theme=${frontmatter.github}&ssg=${urlSlug(ssgArray)}` + } + } else { + stackbitData.createUrl = null; + } + + // manual overrides + const manualDisabled = [ + 'https://github.com/runbytech/gatsby-theme-ultronele', + 'https://github.com/YoussefRaafatNasry/portfolYOU', + 'https://github.com/qwtel/hydejack', + 'https://github.com/joshgerdes/jekyll-uno', + 'https://github.com/GDGToulouse/devfest-theme-hugo', + 'https://github.com/h-enk/doks', + 'https://github.com/ahmadiqbal1/jekyll-webpack-boilerplate', + 'https://github.com/SupunKavinda/jekyll-theme-leaf.git', + 'https://github.com/techonomics69/gatsby-netlify-form-example', + 'https://github.com/lawrencecchen/headless-comments', + 'https://github.com/Joy3Luo/Joy3luo.github.io', + 'https://github.com/chrisbobbe/jekyll-theme-prologue', + 'https://github.com/adityatelange/hugo-PaperMod/', + 'https://github.com/Kentico/kontent-jekyll-blog', + 'https://github.com/longpdo/neumorphism', + 'https://github.com/puresyntax71/hugo-theme-chunky-poster', + 'https://github.com/sharadcodes/jekyll-theme-dark-reader', + 'https://github.com/wkocjan/gatsby-theme-intro', + 'https://github.com/jameshamann/jekyll-material-theme', + 'https://github.com/fncnt/vncnt-hugo', + 'https://github.com/wizlee/gatsby-portfolio', + 'https://github.com/EmaSuriano/gatsby-starter-mate', + 'https://github.com/guangmean/Niello', + 'https://github.com/fabien0102/gatsby-starter', + 'https://github.com/netlify-templates/one-click-hugo-cms' + + ]; + manualDisabled.forEach(url => { + if (url === frontmatter.github) { + if (stackbitData.createUrl) { + delete stackbitData.createUrl + } + } + }) + const manualEnabled = ['https://github.com/stackbit-themes/minimal-nextjs-theme'] + manualEnabled.forEach(url => { + if (url === frontmatter.github) { + stackbitData.createUrl = `https://app.stackbit.com/create?theme=${frontmatter.github}&ssg=${urlSlug(frontmatter.ssg)}&cms=${urlSlug(frontmatter.cms)}` + } + }) + if (stackbitData.createUrl) { + return stackbitData; + } + return false; + +}; + +const generateStackbitData = (markdownData) => { + spinner.start("Fetching Stackbit Data"); + const stackbitData = markdownData.map(theme => { + return generateStackbit(theme) + }).filter(stackbit => stackbit.createUrl); + spinner.succeed("Success - Fetching Stackbit Data"); + return stackbitData; +}; + +module.exports = { + generateStackbitData +} \ No newline at end of file diff --git a/scripts/build/utils.js b/scripts/build/utils.js new file mode 100644 index 0000000..301e492 --- /dev/null +++ b/scripts/build/utils.js @@ -0,0 +1,20 @@ +#!/usr/bin/env node +const parseGithubUrl = require('parse-github-url'); + +const getRepoName = (repoUrl) => { + return parseGithubUrl(repoUrl).repo; // stackbithq/stackbit-theme-fresh +} + +const getThemeKey = (repoUrl) => { + if (!repoUrl) { + throw Error("Unable to generate themeKey") + } + const repoName = getRepoName(repoUrl) + const themeKey = repoName.replace("/", "-").toLowerCase(); + return themeKey +} + +module.exports = { + getThemeKey, + getRepoName +} \ No newline at end of file diff --git a/scripts/build/write.js b/scripts/build/write.js new file mode 100644 index 0000000..124b409 --- /dev/null +++ b/scripts/build/write.js @@ -0,0 +1,53 @@ +#!/usr/bin/env node +const fs = require('fs'); +const config = require('./config') +const {getThemeKey} = require('./utils'); + +const writeThemesFile = (themes) => { + // Load existing themes.json and update it + let themesData = themes + // themes.forEach(theme => { + // themesData[theme.theme_key] = theme; + // }) + let sortedThemesData = {} + Object.keys(themesData).sort().forEach(key => { + sortedThemesData[key] = themesData[key]; + }); + console.log(`Writing ${config.themesJsonFile}...`); + fs.writeFileSync(config.themesJsonFile, JSON.stringify(sortedThemesData, null, 2)); +} + +const writeErrorFile = (errorLog) => { + console.log(`Writing ${config.errorJsonFile}...`); + fs.writeFileSync(config.errorJsonFile, JSON.stringify(errorLog, null, 2)); +} + +const writeStackbitFile = (stackbit) => { + let stackbitData = config.stackbitJsonData + stackbit.forEach(theme => { + stackbitData[theme.theme_key] = theme; + }) + let sortedStackbitData = {} + Object.keys(stackbitData).sort().forEach(key => { + sortedStackbitData[key] = stackbitData[key]; + }); + console.log(`Writing ${config.stackbitJsonFile}...`); + fs.writeFileSync(config.stackbitJsonFile, JSON.stringify(sortedStackbitData, null, 2)); +} + +const themeMap = (themes) => { + return themes.reduce((accumulator, theme) => { + const themeKey = getThemeKey(theme.github) + return { + ...accumulator, + [themeKey]: theme + }; + }); +} + +module.exports = { + writeThemesFile, + writeErrorFile, + writeStackbitFile, + themeMap +} diff --git a/static/images/banner/bg.svg b/static/images/banner/bg.svg new file mode 100644 index 0000000..67d2e63 --- /dev/null +++ b/static/images/banner/bg.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/banner/netlify-create.svg b/static/images/banner/netlify-create.svg new file mode 100644 index 0000000..196f932 --- /dev/null +++ b/static/images/banner/netlify-create.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/default-large.png b/static/images/default-large.png new file mode 100644 index 0000000..8b93be9 Binary files /dev/null and b/static/images/default-large.png differ diff --git a/static/images/default.png b/static/images/default.png new file mode 100644 index 0000000..9892dcb Binary files /dev/null and b/static/images/default.png differ diff --git a/static/images/favicon/02_QUIQR-icon-logo.png b/static/images/favicon/02_QUIQR-icon-logo.png new file mode 100644 index 0000000..9cf71e1 Binary files /dev/null and b/static/images/favicon/02_QUIQR-icon-logo.png differ diff --git a/static/images/favicon/favicon-32x32.png b/static/images/favicon/favicon-32x32.png new file mode 100755 index 0000000..cfa1db9 Binary files /dev/null and b/static/images/favicon/favicon-32x32.png differ diff --git a/static/images/icons/admin.svg b/static/images/icons/admin.svg new file mode 100644 index 0000000..c431d6d --- /dev/null +++ b/static/images/icons/admin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/airtable.svg b/static/images/icons/airtable.svg new file mode 100755 index 0000000..2d9fb2e --- /dev/null +++ b/static/images/icons/airtable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/algolia.svg b/static/images/icons/algolia.svg new file mode 100644 index 0000000..e7a5933 --- /dev/null +++ b/static/images/icons/algolia.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/astro.svg b/static/images/icons/astro.svg new file mode 100644 index 0000000..851e911 --- /dev/null +++ b/static/images/icons/astro.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/icons/blog.svg b/static/images/icons/blog.svg new file mode 100644 index 0000000..5618ad8 --- /dev/null +++ b/static/images/icons/blog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/bootstrap.svg b/static/images/icons/bootstrap.svg new file mode 100644 index 0000000..f64b10a --- /dev/null +++ b/static/images/icons/bootstrap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/brunch.svg b/static/images/icons/brunch.svg new file mode 100644 index 0000000..c7f931d --- /dev/null +++ b/static/images/icons/brunch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/bulma.svg b/static/images/icons/bulma.svg new file mode 100644 index 0000000..badd355 --- /dev/null +++ b/static/images/icons/bulma.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/business.svg b/static/images/icons/business.svg new file mode 100644 index 0000000..74e13dc --- /dev/null +++ b/static/images/icons/business.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/cecil.svg b/static/images/icons/cecil.svg new file mode 100644 index 0000000..3ce9daa --- /dev/null +++ b/static/images/icons/cecil.svg @@ -0,0 +1,33 @@ + \ No newline at end of file diff --git a/static/images/icons/contentful.svg b/static/images/icons/contentful.svg new file mode 100644 index 0000000..0802a23 --- /dev/null +++ b/static/images/icons/contentful.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/cosmic.svg b/static/images/icons/cosmic.svg new file mode 100644 index 0000000..00d5f9d --- /dev/null +++ b/static/images/icons/cosmic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/css.svg b/static/images/icons/css.svg new file mode 100644 index 0000000..e407677 --- /dev/null +++ b/static/images/icons/css.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/icons/datocms.svg b/static/images/icons/datocms.svg new file mode 100644 index 0000000..c9d4e1b --- /dev/null +++ b/static/images/icons/datocms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/directus.svg b/static/images/icons/directus.svg new file mode 100644 index 0000000..0a9437c --- /dev/null +++ b/static/images/icons/directus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/documentation.svg b/static/images/icons/documentation.svg new file mode 100644 index 0000000..51c833e --- /dev/null +++ b/static/images/icons/documentation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/docusaurus.svg b/static/images/icons/docusaurus.svg new file mode 100644 index 0000000..5d13ed9 --- /dev/null +++ b/static/images/icons/docusaurus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/ecommerce.svg b/static/images/icons/ecommerce.svg new file mode 100644 index 0000000..8b4edcc --- /dev/null +++ b/static/images/icons/ecommerce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/eleventy.svg b/static/images/icons/eleventy.svg new file mode 100644 index 0000000..8b3c7dc --- /dev/null +++ b/static/images/icons/eleventy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/event.svg b/static/images/icons/event.svg new file mode 100644 index 0000000..9fb4228 --- /dev/null +++ b/static/images/icons/event.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/firebase.svg b/static/images/icons/firebase.svg new file mode 100644 index 0000000..4069cf5 --- /dev/null +++ b/static/images/icons/firebase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/flotiq.svg b/static/images/icons/flotiq.svg new file mode 100644 index 0000000..aaaaf01 --- /dev/null +++ b/static/images/icons/flotiq.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/forestry.svg b/static/images/icons/forestry.svg new file mode 100644 index 0000000..c3b2790 --- /dev/null +++ b/static/images/icons/forestry.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/formspree.svg b/static/images/icons/formspree.svg new file mode 100644 index 0000000..1795c5a --- /dev/null +++ b/static/images/icons/formspree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/formstack.svg b/static/images/icons/formstack.svg new file mode 100644 index 0000000..2a970e7 --- /dev/null +++ b/static/images/icons/formstack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/gatsby-bw.svg b/static/images/icons/gatsby-bw.svg new file mode 100644 index 0000000..2dde241 --- /dev/null +++ b/static/images/icons/gatsby-bw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/gatsby.svg b/static/images/icons/gatsby.svg new file mode 100755 index 0000000..11ef284 --- /dev/null +++ b/static/images/icons/gatsby.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/ghost.svg b/static/images/icons/ghost.svg new file mode 100644 index 0000000..51717cc --- /dev/null +++ b/static/images/icons/ghost.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/github.svg b/static/images/icons/github.svg new file mode 100644 index 0000000..ab25bc2 --- /dev/null +++ b/static/images/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/graphcms.svg b/static/images/icons/graphcms.svg new file mode 100644 index 0000000..6f2e8cd --- /dev/null +++ b/static/images/icons/graphcms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/gridsome.svg b/static/images/icons/gridsome.svg new file mode 100644 index 0000000..7808590 --- /dev/null +++ b/static/images/icons/gridsome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/hexo.svg b/static/images/icons/hexo.svg new file mode 100755 index 0000000..43322e5 --- /dev/null +++ b/static/images/icons/hexo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/hugo-bw.svg b/static/images/icons/hugo-bw.svg new file mode 100644 index 0000000..9d788aa --- /dev/null +++ b/static/images/icons/hugo-bw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/hugo.svg b/static/images/icons/hugo.svg new file mode 100644 index 0000000..fb55f51 --- /dev/null +++ b/static/images/icons/hugo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/hyde.svg b/static/images/icons/hyde.svg new file mode 100644 index 0000000..67add81 --- /dev/null +++ b/static/images/icons/hyde.svg @@ -0,0 +1,24 @@ + \ No newline at end of file diff --git a/static/images/icons/jekyll.svg b/static/images/icons/jekyll.svg new file mode 100644 index 0000000..5e8d293 --- /dev/null +++ b/static/images/icons/jekyll.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/jigsaw.svg b/static/images/icons/jigsaw.svg new file mode 100644 index 0000000..6721365 --- /dev/null +++ b/static/images/icons/jigsaw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/kontent.svg b/static/images/icons/kontent.svg new file mode 100644 index 0000000..0e1f1ec --- /dev/null +++ b/static/images/icons/kontent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/mailchimp.svg b/static/images/icons/mailchimp.svg new file mode 100644 index 0000000..c1bf3f1 --- /dev/null +++ b/static/images/icons/mailchimp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/material-ui.svg b/static/images/icons/material-ui.svg new file mode 100644 index 0000000..d459d28 --- /dev/null +++ b/static/images/icons/material-ui.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/icons/metalsmith.svg b/static/images/icons/metalsmith.svg new file mode 100644 index 0000000..31d5094 --- /dev/null +++ b/static/images/icons/metalsmith.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/middleman.svg b/static/images/icons/middleman.svg new file mode 100644 index 0000000..be9676c --- /dev/null +++ b/static/images/icons/middleman.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/mkdocs.svg b/static/images/icons/mkdocs.svg new file mode 100644 index 0000000..fdaa7c6 --- /dev/null +++ b/static/images/icons/mkdocs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/netlify.svg b/static/images/icons/netlify.svg new file mode 100644 index 0000000..eb958a2 --- /dev/null +++ b/static/images/icons/netlify.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/netlifycms.svg b/static/images/icons/netlifycms.svg new file mode 100644 index 0000000..b307698 --- /dev/null +++ b/static/images/icons/netlifycms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/next.svg b/static/images/icons/next.svg new file mode 100644 index 0000000..2bf7c1e --- /dev/null +++ b/static/images/icons/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/no-cms.svg b/static/images/icons/no-cms.svg new file mode 100644 index 0000000..faf37ad --- /dev/null +++ b/static/images/icons/no-cms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/nocms.svg b/static/images/icons/nocms.svg new file mode 100644 index 0000000..faf37ad --- /dev/null +++ b/static/images/icons/nocms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/notion.svg b/static/images/icons/notion.svg new file mode 100644 index 0000000..815ecd9 --- /dev/null +++ b/static/images/icons/notion.svg @@ -0,0 +1 @@ +Notion icon \ No newline at end of file diff --git a/static/images/icons/nuxt.svg b/static/images/icons/nuxt.svg new file mode 100644 index 0000000..5db0a2c --- /dev/null +++ b/static/images/icons/nuxt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/pelican.svg b/static/images/icons/pelican.svg new file mode 100644 index 0000000..be9cbec --- /dev/null +++ b/static/images/icons/pelican.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/personal.svg b/static/images/icons/personal.svg new file mode 100644 index 0000000..2782104 --- /dev/null +++ b/static/images/icons/personal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/platframe.svg b/static/images/icons/platframe.svg new file mode 100644 index 0000000..3d744c7 --- /dev/null +++ b/static/images/icons/platframe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/portfolio.svg b/static/images/icons/portfolio.svg new file mode 100644 index 0000000..8983bb4 --- /dev/null +++ b/static/images/icons/portfolio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/postcss.svg b/static/images/icons/postcss.svg new file mode 100644 index 0000000..c416420 --- /dev/null +++ b/static/images/icons/postcss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/prismic.svg b/static/images/icons/prismic.svg new file mode 100644 index 0000000..5d14f01 --- /dev/null +++ b/static/images/icons/prismic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/sanity.svg b/static/images/icons/sanity.svg new file mode 100644 index 0000000..0836236 --- /dev/null +++ b/static/images/icons/sanity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/sapper.svg b/static/images/icons/sapper.svg new file mode 100644 index 0000000..8f32c37 --- /dev/null +++ b/static/images/icons/sapper.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/sass.svg b/static/images/icons/sass.svg new file mode 100644 index 0000000..ca32b98 --- /dev/null +++ b/static/images/icons/sass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/scss.svg b/static/images/icons/scss.svg new file mode 100644 index 0000000..ca32b98 --- /dev/null +++ b/static/images/icons/scss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/scully.svg b/static/images/icons/scully.svg new file mode 100644 index 0000000..8f71b32 --- /dev/null +++ b/static/images/icons/scully.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/shopify.svg b/static/images/icons/shopify.svg new file mode 100644 index 0000000..5072635 --- /dev/null +++ b/static/images/icons/shopify.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/single-page.svg b/static/images/icons/single-page.svg new file mode 100644 index 0000000..2ef5ae2 --- /dev/null +++ b/static/images/icons/single-page.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/snipcart.svg b/static/images/icons/snipcart.svg new file mode 100644 index 0000000..c81942b --- /dev/null +++ b/static/images/icons/snipcart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/stackbit.svg b/static/images/icons/stackbit.svg new file mode 100644 index 0000000..2a6dec8 --- /dev/null +++ b/static/images/icons/stackbit.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/static/images/icons/staticman.svg b/static/images/icons/staticman.svg new file mode 100644 index 0000000..010d28d --- /dev/null +++ b/static/images/icons/staticman.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/statiq.svg b/static/images/icons/statiq.svg new file mode 100644 index 0000000..d97f433 --- /dev/null +++ b/static/images/icons/statiq.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/storyblok.svg b/static/images/icons/storyblok.svg new file mode 100644 index 0000000..9e5c256 --- /dev/null +++ b/static/images/icons/storyblok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/styled-components.png b/static/images/icons/styled-components.png new file mode 100644 index 0000000..e20a0b2 Binary files /dev/null and b/static/images/icons/styled-components.png differ diff --git a/static/images/icons/stylus.svg b/static/images/icons/stylus.svg new file mode 100644 index 0000000..259921c --- /dev/null +++ b/static/images/icons/stylus.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + diff --git a/static/images/icons/sveltekit.svg b/static/images/icons/sveltekit.svg new file mode 100644 index 0000000..e1734cd --- /dev/null +++ b/static/images/icons/sveltekit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/icons/tailwind.svg b/static/images/icons/tailwind.svg new file mode 100644 index 0000000..2b1a4d6 --- /dev/null +++ b/static/images/icons/tailwind.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/tina.svg b/static/images/icons/tina.svg new file mode 100644 index 0000000..8b253d3 --- /dev/null +++ b/static/images/icons/tina.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/icons/unibit-pink.svg b/static/images/icons/unibit-pink.svg new file mode 100644 index 0000000..66d6789 --- /dev/null +++ b/static/images/icons/unibit-pink.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/unibit.svg b/static/images/icons/unibit.svg new file mode 100644 index 0000000..bf7d169 --- /dev/null +++ b/static/images/icons/unibit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/vuepress.svg b/static/images/icons/vuepress.svg new file mode 100644 index 0000000..43df408 --- /dev/null +++ b/static/images/icons/vuepress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/vuetify.svg b/static/images/icons/vuetify.svg new file mode 100644 index 0000000..f6fc82b --- /dev/null +++ b/static/images/icons/vuetify.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/static/images/icons/w3css.svg b/static/images/icons/w3css.svg new file mode 100644 index 0000000..93c936f --- /dev/null +++ b/static/images/icons/w3css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/wordpress.svg b/static/images/icons/wordpress.svg new file mode 100644 index 0000000..c25a8ff --- /dev/null +++ b/static/images/icons/wordpress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icons/zola.svg b/static/images/icons/zola.svg new file mode 100644 index 0000000..e1b899d --- /dev/null +++ b/static/images/icons/zola.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/jamstackthemes-screenshot.png b/static/images/jamstackthemes-screenshot.png new file mode 100644 index 0000000..502f58b Binary files /dev/null and b/static/images/jamstackthemes-screenshot.png differ diff --git a/static/images/logo-nav.svg b/static/images/logo-nav.svg new file mode 100644 index 0000000..1c7dff7 --- /dev/null +++ b/static/images/logo-nav.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/social/github.svg b/static/images/social/github.svg new file mode 100755 index 0000000..40076ce --- /dev/null +++ b/static/images/social/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/social/twitter.svg b/static/images/social/twitter.svg new file mode 100755 index 0000000..5299b1d --- /dev/null +++ b/static/images/social/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/stackbit.png b/static/images/stackbit.png new file mode 100644 index 0000000..acdf004 Binary files /dev/null and b/static/images/stackbit.png differ diff --git a/static/images/ui/angle-double-left-solid.svg b/static/images/ui/angle-double-left-solid.svg new file mode 100644 index 0000000..95887a1 --- /dev/null +++ b/static/images/ui/angle-double-left-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/angle-double-right-solid.svg b/static/images/ui/angle-double-right-solid.svg new file mode 100644 index 0000000..998f859 --- /dev/null +++ b/static/images/ui/angle-double-right-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/check-solid.svg b/static/images/ui/check-solid.svg new file mode 100644 index 0000000..f91b74e --- /dev/null +++ b/static/images/ui/check-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/chevron-down-solid.svg b/static/images/ui/chevron-down-solid.svg new file mode 100644 index 0000000..026b7c0 --- /dev/null +++ b/static/images/ui/chevron-down-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/chevron-left-solid.svg b/static/images/ui/chevron-left-solid.svg new file mode 100644 index 0000000..41061c2 --- /dev/null +++ b/static/images/ui/chevron-left-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/chevron-right-solid.svg b/static/images/ui/chevron-right-solid.svg new file mode 100644 index 0000000..6f3ecc4 --- /dev/null +++ b/static/images/ui/chevron-right-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/external-link-alt-solid.svg b/static/images/ui/external-link-alt-solid.svg new file mode 100644 index 0000000..190df50 --- /dev/null +++ b/static/images/ui/external-link-alt-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/forks.svg b/static/images/ui/forks.svg new file mode 100644 index 0000000..c0b53a4 --- /dev/null +++ b/static/images/ui/forks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/history-solid.svg b/static/images/ui/history-solid.svg new file mode 100644 index 0000000..ddcfda0 --- /dev/null +++ b/static/images/ui/history-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/issues.svg b/static/images/ui/issues.svg new file mode 100644 index 0000000..27647c3 --- /dev/null +++ b/static/images/ui/issues.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/minus-solid.svg b/static/images/ui/minus-solid.svg new file mode 100644 index 0000000..f72db5b --- /dev/null +++ b/static/images/ui/minus-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/minus-square-regular.svg b/static/images/ui/minus-square-regular.svg new file mode 100644 index 0000000..26c05a2 --- /dev/null +++ b/static/images/ui/minus-square-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/plus-solid.svg b/static/images/ui/plus-solid.svg new file mode 100644 index 0000000..bfa907d --- /dev/null +++ b/static/images/ui/plus-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/plus-square-regular.svg b/static/images/ui/plus-square-regular.svg new file mode 100644 index 0000000..b9e300d --- /dev/null +++ b/static/images/ui/plus-square-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/star-solid.svg b/static/images/ui/star-solid.svg new file mode 100644 index 0000000..ce74416 --- /dev/null +++ b/static/images/ui/star-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ui/star.svg b/static/images/ui/star.svg new file mode 100644 index 0000000..4834aa7 --- /dev/null +++ b/static/images/ui/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/themes/jamstackthemes/assets/js/filter/filter-groups.js b/themes/jamstackthemes/assets/js/filter/filter-groups.js new file mode 100644 index 0000000..0da7d85 --- /dev/null +++ b/themes/jamstackthemes/assets/js/filter/filter-groups.js @@ -0,0 +1,46 @@ +const groups = { + ssg: [ + "eleventy", + "gatsby", + "gridsome", + "hexo", + "hugo", + "jekyll", + "next", + "vuepress", + "brunch", + "docusaurus", + "jigsaw", + "metalsmith", + "middleman", + "mkdocs", + "nuxt", + "pelican", + "platframe", + "sapper", + "scully", + "statiq", + "unibit" + ], + cms: [ + "contentful", + "cosmic", + "datocms", + "forestry", + "ghost", + "kontent", + "netlifycms", + "no-cms", + "airtable", + "directus", + "firebase", + 'graphcms', + "prismic", + "sanity", + "storyblok", + "wordpress", + "notion" + ], + css: ["bootstrap", "scss", "tailwind", "bulma", "postcss", "styled-components"], + archetype: ["blog", "portfolio", "business", "single-page", "ecommerce", "documentation", "personal"], +}; diff --git a/themes/jamstackthemes/assets/js/filter/filter-hash.js b/themes/jamstackthemes/assets/js/filter/filter-hash.js new file mode 100644 index 0000000..3cf1ace --- /dev/null +++ b/themes/jamstackthemes/assets/js/filter/filter-hash.js @@ -0,0 +1,182 @@ +var targetSelector = ".grid"; +var activeHash = ""; +var activePage = -1; + +/** + * Deserializes a hash segment (if present) into in an object. + * + * @return {object|null} + */ + +function deserializeHash() { + var hash = window.location.hash.replace(/^#/g, ""); + var obj = null; + var groups = []; + + if (!hash) return obj; + + obj = {}; + groups = hash.split("&"); + + groups.forEach(function(group) { + var pair = group.split("="); + var groupName = pair[0]; + + obj[groupName] = pair[1].split(","); + }); + + return obj; +} + +/** + * Serializes a uiState object into a string. + * + * @param {object} uiState + * @return {string} + */ + +function serializeUiState(uiState) { + var output = ""; + + for (var key in uiState) { + var values = uiState[key]; + + if (!values.length) continue; + + output += key + "="; + output += values.join(","); + output += "&"; + } + + output = output.replace(/&$/g, ""); + + return output; +} + +/** + * Constructs a `uiState` object using the + * `getFilterGroupSelectors()` API method. + * + * @return {object} + */ + +function getUiState() { + // NB: You will need to rename the object keys to match the names of + // your project's filter groups – these should match those defined + // in your HTML. + + var uiState = { + ssg: mixer.getFilterGroupSelectors("ssg").map(getValueFromSelector), + cms: mixer.getFilterGroupSelectors("cms").map(getValueFromSelector), + css: mixer.getFilterGroupSelectors("css").map(getValueFromSelector), + archetype: mixer.getFilterGroupSelectors("archetype").map(getValueFromSelector) + }; + + return uiState; +} + +/** + * Updates the URL hash whenever the current filter changes. + * + * @param {mixitup.State} state + * @return {void} + */ + +function setHash(state) { + var selector = state.activeFilter.selector; + + // Construct an object representing the current state of each + // filter group + + var uiState = getUiState(); + + // Create a URL hash string by serializing the uiState object + + var newHash = "#" + serializeUiState(uiState); + + if (selector === targetSelector && window.location.href.indexOf("#") > -1) { + // Equivalent to filter "all", and a hash exists, remove the hash + + activeHash = ""; + + history.replaceState(null, document.title, window.location.pathname); + } else if (newHash !== window.location.hash && selector !== targetSelector) { + // Change the hash + + activeHash = newHash; + + history.replaceState( + null, + document.title, + window.location.pathname + newHash + ); + } +} + +/** + * Updates the mixer to a previous UI state. + * + * @param {object|null} uiState + * @param {boolean} [animate] + * @return {Promise} + */ + +function syncMixerWithPreviousUiState(uiState, animate) { + var ssg = uiState && uiState.ssg ? uiState.ssg : []; + var cms = uiState && uiState.cms ? uiState.cms : []; + var css = uiState && uiState.css ? uiState.css : []; + var archetype = uiState && uiState.archetype ? uiState.archetype : []; + + mixer.setFilterGroupSelectors("ssg", ssg.map(getSelectorFromValue)); + mixer.setFilterGroupSelectors("cms", cms.map(getSelectorFromValue)); + mixer.setFilterGroupSelectors("css", css.map(getSelectorFromValue)); + mixer.setFilterGroupSelectors("archetype", archetype.map(getSelectorFromValue)); + + // Parse the filter groups (passing `false` will perform no animation) + + return mixer.parseFilterGroups(animate ? true : false); +} + +/** + * Converts a selector (e.g. '.green') into a simple value (e.g. 'green'). + * + * @param {string} selector + * @return {string} + */ + +function getValueFromSelector(selector) { + return selector.replace(/^./, ""); +} + +/** + * A function for filtering the values of the mixitup command object + * generated by calling the `parseFilterGroups()` method. + * + * @param {object} command + * @return {object} + */ + +function handleParseFilterGroups(command) { + if (activePage > 1) { + // If an activePage greater than 1 has been parsed + // from the URL, update the command with a pagination + // instruction + + command.paginate = activePage; + } + + return command; +} + + +/** + * Converts a simple value (e.g. 'green') into a selector (e.g. '.green'). + * + * @param {string} selector + * @return {string} + */ + +function getSelectorFromValue(value) { + return "." + value; +} + diff --git a/themes/jamstackthemes/assets/js/filter/filter-toggle.js b/themes/jamstackthemes/assets/js/filter/filter-toggle.js new file mode 100644 index 0000000..743e6bb --- /dev/null +++ b/themes/jamstackthemes/assets/js/filter/filter-toggle.js @@ -0,0 +1,11 @@ +document.querySelectorAll(".toggle-icon").forEach((toggle) => { + toggle.addEventListener('click', (e) => { + toggle.parentNode.parentNode.classList.toggle('closed'); + }); +}); + +document.querySelectorAll(".toggle-more").forEach((toggle) => { + toggle.addEventListener('click', (e) => { + toggle.parentNode.classList.toggle('closed'); + }); +}); diff --git a/themes/jamstackthemes/assets/js/filter/filter.js b/themes/jamstackthemes/assets/js/filter/filter.js new file mode 100644 index 0000000..9a8f01e --- /dev/null +++ b/themes/jamstackthemes/assets/js/filter/filter.js @@ -0,0 +1,116 @@ +const pageId = document.querySelector('body').id; +// const sortOrder = pageId === "page-all-themes" ? "stars:desc" : null; +const sortOrder = null; + +const mixer = mixitup('#grids-homepage', { + multifilter: { + enable: true, + logicWithinGroup: 'or', + logicBetweenGroups: 'and' + }, + animation: { + enable: false, + }, + selectors: { + target: '.grid' + }, + load: { + sort: sortOrder + }, + // pagination: { + // limit: 50, + // maintainActivePage: false + // }, + callbacks: { + onMixStart: function(state, futureState) { + let total = futureState.totalShow; + let count = document.querySelector('.count-number'); + count.textContent = total; + window.scrollTo(0,0); + updateFilterCounts(state, futureState); + }, + onMixClick: function(state, originalEvent) { + }, + onParseFilterGroups: handleParseFilterGroups, + onMixEnd: setHash + } +}); + +function getTriggerGroup(event) { + triggerGroup = null; + if (!event) { + return triggerGroup + } else if (event.classList.contains('filter-button')) { + triggerGroup = event.parentNode.parentNode.parentNode.id.slice(13); + }; + return triggerGroup; +} + +function updateFilterCounts(state, futureState) { + + let triggerGroup = getTriggerGroup(futureState.triggerElement) + let totalMatching = futureState.targets.map(theme => theme.className.trim().split(" ")); + let matching = futureState.matching.map(theme => theme.className.trim().split(" ")); + let hasMultipleActiveGroups = checkActiveGroups(); + + // Update Filter Counts + Object.keys(groups).forEach((group) => { + if (hasMultipleActiveGroups) { + resetCount(groups[group], totalMatching); + updateCount(groups[group], matching); + } else { + if (group === triggerGroup) { + resetCount(groups[group], totalMatching); + } else if (!triggerGroup) { + + } else { + updateCount(groups[group], matching); + } + } + }) +} + +function checkActiveGroups() { + let activeGroups = Object.keys(groups).map(group => { + return mixer.getFilterGroupSelectors(group) + }) + + let activeGroupsLength = 0 + activeGroups.forEach(group => { + if (group.length) { + activeGroupsLength += 1 + } + }) + return activeGroupsLength >= 2; +} + +function updateCount(group, matches) { + group.forEach(term => { + let count = matches.filter(match => { + return match.includes(term); + }) + const termDom = document.querySelector(`#filter-count-${term}`) + if (termDom) { + termDom.innerText = count.length + } + }) +} + +function resetCount(group, matches) { + group.forEach(term => { + let count = matches.filter(match => { + return match.includes(term); + }) + const termDom = document.querySelector(`#filter-count-${term}`) + if (termDom) { + termDom.innerText = count.length + } + }) +} + +var uiState = deserializeHash(); + +if (uiState) { + // If a valid uiState object is present on page load, filter the mixer + syncMixerWithPreviousUiState(uiState); +} diff --git a/themes/jamstackthemes/assets/js/libs/mixitup-multifilter.js b/themes/jamstackthemes/assets/js/libs/mixitup-multifilter.js new file mode 100755 index 0000000..77924fc --- /dev/null +++ b/themes/jamstackthemes/assets/js/libs/mixitup-multifilter.js @@ -0,0 +1,1256 @@ +/**! + * MixItUp MultiFilter v3.3.4 + * A UI-builder for powerful multidimensional filtering + * Build 6bbb142d-9851-4ca8-b6d4-f760362d93ec + * + * Requires mixitup.js >= v^3.1.2 + * + * @copyright Copyright 2014-2018 KunkaLabs Limited. + * @author KunkaLabs Limited. + * @link https://www.kunkalabs.com/mixitup-multifilter/ + * + * @license Commercial use requires a commercial license. + * https://www.kunkalabs.com/mixitup-multifilter/licenses/ + * + * Non-commercial use permitted under same terms as license. + * http://creativecommons.org/licenses/by-nc/3.0/ + */ +(function(window) { + 'use strict'; + + var mixitupMultifilter = function(mixitup) { + var h = mixitup.h; + var diacriticsMap; + + diacriticsMap = [ + ['A', /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g], + ['AA', /[\uA732]/g], + ['AE', /[\u00C6\u01FC\u01E2]/g], + ['AO', /[\uA734]/g], + ['AU', /[\uA736]/g], + ['AV', /[\uA738\uA73A]/g], + ['AY', /[\uA73C]/g], + ['B', /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g], + ['C', /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g], + ['D', /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g], + ['DZ', /[\u01F1\u01C4]/g], + ['Dz', /[\u01F2\u01C5]/g], + ['E', /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g], + ['F', /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g], + ['G', /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g], + ['H', /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g], + ['I', /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g], + ['J', /[\u004A\u24BF\uFF2A\u0134\u0248]/g], + ['K', /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g], + ['L', /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g], + ['LJ', /[\u01C7]/g], + ['Lj', /[\u01C8]/g], + ['M', /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g], + ['N', /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g], + ['NJ', /[\u01CA]/g], + ['Nj', /[\u01CB]/g], + ['O', /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g], + ['OI', /[\u01A2]/g], + ['OO', /[\uA74E]/g], + ['OU', /[\u0222]/g], + ['P', /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g], + ['Q', /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g], + ['R', /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g], + ['S', /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g], + ['T', /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g], + ['TZ', /[\uA728]/g], + ['U', /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g], + ['V', /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g], + ['VY', /[\uA760]/g], + ['W', /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g], + ['X', /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g], + ['Y', /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g], + ['Z', /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g], + ['a', /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g], + ['aa', /[\uA733]/g], + ['ae', /[\u00E6\u01FD\u01E3]/g], + ['ao', /[\uA735]/g], + ['au', /[\uA737]/g], + ['av', /[\uA739\uA73B]/g], + ['ay', /[\uA73D]/g], + ['b', /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g], + ['c', /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g], + ['d', /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g], + ['dz', /[\u01F3\u01C6]/g], + ['e', /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g], + ['f', /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g], + ['g', /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g], + ['h', /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g], + ['hv', /[\u0195]/g], + ['i', /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g], + ['j', /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g], + ['k', /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g], + ['l', /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g], + ['lj', /[\u01C9]/g], + ['m', /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g], + ['n', /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g], + ['nj', /[\u01CC]/g], + ['o', /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g], + ['oi', /[\u01A3]/g], + ['ou', /[\u0223]/g], + ['oo', /[\uA74F]/g], + ['p', /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g], + ['q', /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g], + ['r', /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g], + ['s', /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g], + ['t', /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g], + ['tz', /[\uA729]/g], + ['u', /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g], + ['v', /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g], + ['vy', /[\uA761]/g], + ['w', /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g], + ['x', /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g], + ['y', /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g], + ['z', /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g] + ]; + + if ( + !mixitup.CORE_VERSION || + !h.compareVersions(mixitupMultifilter.REQUIRE_CORE_VERSION, mixitup.CORE_VERSION) + ) { + throw new Error( + '[MixItUp Multifilter] MixItUp Multifilter v' + + mixitupMultifilter.EXTENSION_VERSION + + ' requires at least MixItUp v' + + mixitupMultifilter.REQUIRE_CORE_VERSION + ); + } + + /** + * A group of optional callback functions to be invoked at various + * points within the lifecycle of a mixer operation. + * + * @constructor + * @memberof mixitup.Config + * @name callbacks + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigCallbacks.registerAction('afterConstruct', 'multifilter', function() { + /** + * A callback function invoked whenever MultiFilter filter groups + * are parsed. This occurs whenever the user interacts with filter + * group UI, or when the `parseFilterGroups()` API method is called, + * but before the resulting filter operation has been triggered. + * + * By default, this generates the appropriate compound selector and + * filters the mixer using a `multimix()` API call internally. This + * callback can be used to transform the multimix command object sent + * to this API call. + * + * This is particularly useful when additional behavior such as sorting + * or pagination must be taken into account when using the MultiFilter API. + * + * The callback receives the generated multimix command object, and must + * also return a valid multimix command object. + * + * @example Example: Overriding the default filtering behavior with `onParseFilterGroups` + * var mixer = mixitup(containerEl, { + * callbacks: { + * onParseFilterGroups: function(command) { + * command.paginate = 3; + * command.sort = 'default:desc'; + * + * return command; + * } + * } + * }); + * + * @name onParseFilterGroups + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onParseFilterGroups = null; + }); + + /** + * A group of properties defining the behavior of your multifilter UI. + * + * @constructor + * @memberof mixitup.Config + * @name multifilter + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigMultifilter = function() { + + /** + * A boolean dictating whether or not to enable multifilter functionality. + * + * If `true`, MixItUp will query the DOM for any elements with a + * `data-filter-group` attribute present on instantiation. + * + * @name enable + * @memberof mixitup.Config.multifilter + * @instance + * @type {boolean} + * @default false + */ + + this.enable = false; + + /** + * A string dictating the logic to use when concatenating selectors within + * individual filter groups. + * + * If set to `'or'` (default), targets will be shown if they match any + * active filter in the group. + * + * If set to `'and'`, targets will be shown only if they match + * all active filters in the group. + * + * @name logicWithinGroup + * @memberof mixitup.Config.multifilter + * @instance + * @type {string} + * @default 'or' + */ + + this.logicWithinGroup = 'or'; + + /** + * A string dictating the logic to use when concatenating each group's + * selectors into one single selector. + * + * If set to `'and'` (default), targets will be shown only if they match + * the combined active selectors of all groups. + * + * If set to `'or'`, targets will be shown if they match the active selectors + * of any individual group. + * + * @name logicBetweenGroups + * @memberof mixitup.Config.multifilter + * @instance + * @type {string} + * @default 'and' + */ + + this.logicBetweenGroups = 'and'; + + /** + * An integer dictating the minimum number of characters at which the value + * of a text input will be included as a multifilter. This prevents short or + * incomplete words with many potential matches from triggering + * filter operations. + * + * @name minSearchLength + * @memberof mixitup.Config.multifilter + * @instance + * @type {number} + * @default 3 + */ + + this.minSearchLength = 3; + + /** + * A string dictating when the parsing of filter groups should occur. + * + * If set to `'change'` (default), the mixer will be filtered whenever the + * filtering UI is interacted with. The mode provides real-time filtering with + * instant feedback. + * + * If set to `'submit'`, the mixer will only be filtered when a submit button is + * clicked (if using a `
` element as a parent). This enables the user to firstly + * make their selection, and then trigger filtering once they have + * finished making their selection. + * + * Alternatively, the `mixer.parseFilterGroups()` method can be called via the API at any + * time to trigger the parsing of filter groups and filter the mixer. + * + * @name parseOn + * @memberof mixitup.Config.multifilter + * @instance + * @type {string} + * @default 'change' + */ + + this.parseOn = 'change'; + + /** + * An integer dictating the duration in ms that must elapse between keyup + * events in order to trigger a change. + * + * Setting a comfortable delay of ~350ms prevents the mixer from being + * thrashed while typing occurs. + * + * @name keyupThrottleDuration + * @memberof mixitup.Config.multifilter + * @instance + * @type {number} + * @default 350 + */ + + this.keyupThrottleDuration = 350; + + h.seal(this); + }; + + /** + * The MixItUp configuration object is extended with properties relating to + * the MultiFilter extension. + * + * For the full list of configuration options, please refer to the MixItUp + * core documentation. + * + * @constructor + * @memberof mixitup + * @name Config + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.Config.registerAction('beforeConstruct', 'multifilter', function() { + this.multifilter = new mixitup.ConfigMultifilter(); + }); + + mixitup.MultifilterFormEventTracker = function() { + this.form = null; + this.totalBound = 0; + this.totalHandled = 0; + + h.seal(this); + }; + + mixitup.FilterGroupDom = function() { + this.el = null; + this.form = null; + + h.seal(this); + }; + + mixitup.FilterGroup = function() { + this.name = ''; + this.dom = new mixitup.FilterGroupDom(); + this.activeSelectors = []; + this.activeFilters = []; + this.activeToggles = []; + this.handler = null; + this.mixer = null; + this.logic = 'or'; + this.parseOn = 'change'; + this.keyupTimeout = -1; + + h.seal(this); + }; + + h.extend(mixitup.FilterGroup.prototype, { + + /** + * @private + * @param {HTMLELement} el + * @param {mixitup.Mixer} mixer + * @return {void} + */ + + init: function(el, mixer) { + var self = this, + logic = el.getAttribute('data-logic'); + + self.dom.el = el; + + this.name = self.dom.el.getAttribute('data-filter-group') || ''; + + self.cacheDom(); + + if (self.dom.form) { + self.enableButtons(); + } + + self.mixer = mixer; + + if ((logic && logic.toLowerCase() === 'and') || mixer.config.multifilter.logicWithinGroup === 'and') { + // override default group logic + + self.logic = 'and'; + + } + + self.bindEvents(); + }, + + /** + * @private + * @return {void} + */ + + cacheDom: function() { + var self = this; + + self.dom.form = h.closestParent(self.dom.el, 'form', true); + }, + + enableButtons: function() { + var self = this, + buttons = self.dom.form.querySelectorAll('button[type="submit"]:disabled'), + button = null, + i = -1; + + for (i = 0; button = buttons[i]; i++) { + if (button.disabled) { + button.disabled = false; + } + } + }, + + /** + * @private + * @return {void} + */ + + bindEvents: function() { + var self = this; + + self.handler = function(e) { + switch (e.type) { + case 'reset': + case 'submit': + self.handleFormEvent(e); + + break; + default: + self['handle' + h.pascalCase(e.type)](e); + } + }; + + h.on(self.dom.el, 'click', self.handler); + h.on(self.dom.el, 'change', self.handler); + h.on(self.dom.el, 'keyup', self.handler); + + if (self.dom.form) { + h.on(self.dom.form, 'reset', self.handler); + h.on(self.dom.form, 'submit', self.handler); + } + }, + + /** + * @private + * @return {void} + */ + + unbindEvents: function() { + var self = this; + + h.off(self.dom.el, 'click', self.handler); + h.off(self.dom.el, 'change', self.handler); + h.off(self.dom.el, 'keyup', self.handler); + + if (self.dom.form) { + h.off(self.dom.form, 'reset', self.handler); + h.off(self.dom.form, 'submit', self.handler); + } + + self.handler = null; + }, + + /** + * @private + * @param {MouseEvent} e + * @return {void} + */ + + handleClick: function(e) { + var self = this, + mixer = self.mixer, + returnValue = null, + controlEl = h.closestParent(e.target, '[data-filter], [data-toggle]', true), + controlSelector = '', + index = -1, + selector = ''; + + if (!controlEl) return; + + if ((controlSelector = self.mixer.config.selectors.control) && !controlEl.matches(controlSelector)) { + return; + } + + e.stopPropagation(); + + if (!mixer.lastClicked) { + mixer.lastClicked = controlEl; + } + + if (typeof mixer.config.callbacks.onMixClick === 'function') { + returnValue = mixer.config.callbacks.onMixClick.call(mixer.lastClicked, mixer.state, e, self); + + if (returnValue === false) { + // User has returned `false` from the callback, so do not handle click + + return; + } + } + + if (controlEl.matches('[data-filter]')) { + selector = controlEl.getAttribute('data-filter'); + + self.activeToggles = []; + self.activeSelectors = self.activeFilters = [selector]; + } else if (controlEl.matches('[data-toggle]')) { + selector = controlEl.getAttribute('data-toggle'); + + self.activeFilters = []; + + if ((index = self.activeToggles.indexOf(selector)) > -1) { + self.activeToggles.splice(index, 1); + } else { + self.activeToggles.push(selector); + } + + if (self.logic === 'and') { + // Compress into single node + + self.activeSelectors = [self.activeToggles]; + } else { + self.activeSelectors = self.activeToggles; + } + } + + self.updateControls(); + + if (self.mixer.config.multifilter.parseOn === 'change') { + self.mixer.parseFilterGroups(); + } + }, + + /** + * @private + * @param {Event} e + * @return {void} + */ + + handleChange: function(e) { + var self = this, + input = e.target; + + e.stopPropagation(); + + switch(input.type) { + case 'text': + case 'search': + case 'email': + case 'select-one': + case 'radio': + self.getSingleValue(input); + + break; + case 'checkbox': + case 'select-multiple': + self.getMultipleValues(input); + + break; + } + + if (self.mixer.config.multifilter.parseOn === 'change') { + self.mixer.parseFilterGroups(); + } + }, + + handleKeyup: function(e) { + var self = this, + input = e.target; + + // NB: Selects can fire keyup events (e.g. multiselect, textual search) + + if (['text', 'search', 'email'].indexOf(input.type) < 0) return; + + if (self.mixer.config.multifilter.parseOn !== 'change') { + self.mixer.getSingleValue(input); + + return; + } + + clearTimeout(self.keyupTimeout); + + self.keyupTimeout = setTimeout(function() { + self.getSingleValue(input); + self.mixer.parseFilterGroups(); + }, self.mixer.config.multifilter.keyupThrottleDuration); + }, + + /** + * @private + * @param {Event} e + * @return {void} + */ + + handleFormEvent: function(e) { + var self = this, + tracker = null, + group = null, + i = -1; + + if (e.type === 'submit') { + e.preventDefault(); + } + + if (e.type === 'reset') { + self.activeFilters = + self.activeToggles = + self.activeSelectors = []; + + self.updateControls(); + } + + if (!self.mixer.multifilterFormEventTracker) { + tracker = self.mixer.multifilterFormEventTracker = new mixitup.MultifilterFormEventTracker(); + + tracker.form = e.target; + + for (i = 0; group = self.mixer.filterGroups[i]; i++) { + if (group.dom.form !== e.target) continue; + + tracker.totalBound++; + } + } else { + tracker = self.mixer.multifilterFormEventTracker; + } + + if (e.target === tracker.form) { + tracker.totalHandled++; + + if (tracker.totalHandled === tracker.totalBound) { + self.mixer.multifilterFormEventTracker = null; + + if (e.type === 'submit' || self.mixer.config.multifilter.parseOn === 'change') { + self.mixer.parseFilterGroups(); + } + } + } + }, + + /** + * @private + * @param {HTMLELement} input + * @return {void} + */ + + getSingleValue: function(input) { + var self = this, + diacriticMap = null, + attributeName = '', + selector = '', + value = '', + i = -1; + + if (input.type.match(/text|search|email/g)) { + attributeName = input.getAttribute('data-search-attribute'); + + if (!attributeName) { + throw new Error('[MixItUp MultiFilter] A valid `data-search-attribute` must be present on text inputs'); + } + + if (input.value.length < self.mixer.config.multifilter.minSearchLength) { + self.activeSelectors = self.activeFilters = self.activeToggles = ['']; + + return; + } + + // Lowercase and trim + + value = input.value.toLowerCase().trim(); + + // Replace diacritics + + for (i = 0; (diacriticMap = diacriticsMap[i]); i++) { + value = value.replace(diacriticMap[1], diacriticMap[0]); + } + + // Strip non-word characters + + value = value.replace(/\W+/g, ' '); + + selector = '[' + attributeName + '*="' + value + '"]'; + } else { + selector = input.value; + } + + if (typeof input.value === 'string') { + self.activeSelectors = + self.activeToggles = + self.activeFilters = + selector ? [selector] : []; + } + }, + + /** + * @private + * @param {HTMLELement} input + * @return {void} + */ + + getMultipleValues: function(input) { + var self = this, + activeToggles = [], + query = '', + item = null, + items = null, + i = -1; + + switch (input.type) { + case 'checkbox': + query = 'input[type="checkbox"]'; + + break; + case 'select-multiple': + query = 'option'; + } + + items = self.dom.el.querySelectorAll(query); + + for (i = 0; item = items[i]; i++) { + if ((item.checked || item.selected) && item.value) { + activeToggles.push(item.value); + } + } + + self.activeFilters = []; + self.activeToggles = activeToggles; + + if (self.logic === 'and') { + // Compress into single node + + self.activeSelectors = [activeToggles]; + } else { + self.activeSelectors = activeToggles; + } + }, + + /** + * @private + * @param {Array.} [controlEls] + * @return {void} + */ + + updateControls: function(controlEls) { + var self = this, + controlEl = null, + controlSelector = '', + controlsSelector = '', + type = '', + i = -1; + + controlSelector = self.mixer.config.selectors.control.trim(); + + controlsSelector = [ + '[data-filter]' + controlSelector, + '[data-toggle]' + controlSelector + ].join(', '); + + controlEls = controlEls || self.dom.el.querySelectorAll(controlsSelector); + + for (i = 0; controlEl = controlEls[i]; i++) { + type = Boolean(controlEl.getAttribute('data-toggle')) ? 'toggle' : 'filter'; + + self.updateControl(controlEl, type); + } + }, + + /** + * @private + * @param {HTMLELement} controlEl + * @param {string} type + * @return {void} + */ + + updateControl: function(controlEl, type) { + var self = this, + selector = controlEl.getAttribute('data-' + type), + activeControls = self.activeToggles.concat(self.activeFilters), + activeClassName = ''; + + activeClassName = h.getClassname(self.mixer.config.classNames, type, self.mixer.config.classNames.modifierActive); + + if (activeControls.indexOf(selector) > -1) { + h.addClass(controlEl, activeClassName); + } else { + h.removeClass(controlEl, activeClassName); + } + }, + + /** + * @private + */ + + updateUi: function() { + var self = this, + controlEls = self.dom.el.querySelectorAll('[data-filter], [data-toggle]'), + inputEls = self.dom.el.querySelectorAll('input[type="radio"], input[type="checkbox"], option'), + activeControls = self.activeToggles.concat(self.activeFilters), + isActive = false, + inputEl = null, + i = -1; + + if (controlEls.length) { + self.updateControls(controlEls, true); + } + + for (i = 0; inputEl = inputEls[i]; i++) { + isActive = activeControls.indexOf(inputEl.value) > -1; + + switch (inputEl.tagName.toLowerCase()) { + case 'option': + inputEl.selected = isActive; + + break; + case 'input': + inputEl.checked = isActive; + + break; + } + } + } + }); + + mixitup.MixerDom.registerAction('afterConstruct', 'multifilter', function() { + this.filterGroups = []; + }); + + /** + * The `mixitup.Mixer` class is extended with API methods relating to + * the MultiFilter extension. + * + * For the full list of API methods, please refer to the MixItUp + * core documentation. + * + * @constructor + * @namespace + * @name Mixer + * @memberof mixitup + * @public + * @since 3.0.0 + */ + + mixitup.Mixer.registerAction('afterConstruct', 'multifilter', function() { + this.filterGroups = []; + this.filterGroupsHash = {}; + this.multifilterFormEventTracker = null; + }); + + mixitup.Mixer.registerAction('afterCacheDom', 'multifilter', function() { + var self = this, + parent = null; + + if (!self.config.multifilter.enable) return; + + switch (self.config.controls.scope) { + case 'local': + parent = self.dom.container; + + break; + case 'global': + parent = self.dom.document; + + break; + default: + throw new Error(mixitup.messages.ERROR_CONFIG_INVALID_CONTROLS_SCOPE); + } + + self.dom.filterGroups = parent.querySelectorAll('[data-filter-group]'); + }); + + mixitup.Mixer.registerAction('beforeInitControls', 'multifilter', function() { + var self = this; + + if (!self.config.multifilter.enable) return; + + self.config.controls.live = true; // force live controls if multifilter is enabled + }); + + mixitup.Mixer.registerAction('afterSanitizeConfig', 'multifilter', function() { + var self = this; + + self.config.multifilter.logicBetweenGroups = self.config.multifilter.logicBetweenGroups.toLowerCase().trim(); + self.config.multifilter.logicWithinGroup = self.config.multifilter.logicWithinGroup.toLowerCase().trim(); + }); + + mixitup.Mixer.registerAction('afterAttach', 'multifilter', function() { + var self = this; + + if (self.dom.filterGroups.length) { + self.indexFilterGroups(); + } + }); + + mixitup.Mixer.registerAction('afterUpdateControls', 'multifilter', function() { + var self = this, + group = null, + i = -1; + + for (i = 0; group = self.filterGroups[i]; i++) { + group.updateControls(); + } + }); + + mixitup.Mixer.registerAction('beforeDestroy', 'multifilter', function() { + var self = this, + group = null, + i = -1; + + for (i = 0; group = self.filterGroups[i]; i++) { + group.unbindEvents(); + } + }); + + mixitup.Mixer.extend( + /** @lends mixitup.Mixer */ + { + /** + * @private + * @return {void} + */ + + indexFilterGroups: function() { + var self = this, + filterGroup = null, + el = null, + i = -1; + + for (i = 0; el = self.dom.filterGroups[i]; i++) { + filterGroup = new mixitup.FilterGroup(); + + filterGroup.init(el, self); + + self.filterGroups.push(filterGroup); + + if (filterGroup.name) { + // If present, also index by name + + if (typeof self.filterGroupsHash[filterGroup.name] !== 'undefined') { + throw new Error('[MixItUp MultiFilter] A filter group with name "' + filterGroup.name + '" already exists'); + } + + self.filterGroupsHash[filterGroup.name] = filterGroup; + } + } + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Array<*>} args + * @return {mixitup.UserInstruction} + */ + + parseParseFilterGroupsArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandFilter(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (typeof arg === 'boolean') { + instruction.animate = arg; + } else if (typeof arg === 'function') { + instruction.callback = arg; + } + } + + h.freeze(instruction); + + return instruction; + }, + + /** + * Recursively builds up paths between all possible permutations + * of filter group nodes according to the defined logic. + * + * @private + * @return {Array.>} + */ + + getFilterGroupPaths: function() { + var self = this, + buildPath = null, + crawl = null, + nodes = null, + matrix = [], + paths = [], + trackers = [], + i = -1; + + for (i = 0; i < self.filterGroups.length; i++) { + // Filter out groups without any active filters + + if ((nodes = self.filterGroups[i].activeSelectors).length) { + matrix.push(nodes); + + // Initialise tracker for each group + + trackers.push(0); + } + } + + buildPath = function() { + var node = null, + path = [], + i = -1; + + for (i = 0; i < matrix.length; i++) { + node = matrix[i][trackers[i]]; + + if (Array.isArray(node)) { + // AND logic within group + + node = node.join(''); + } + + path.push(node); + } + + path = h.clean(path); + + paths.push(path); + }; + + crawl = function(index) { + index = index || 0; + + var nodes = matrix[index]; + + while (trackers[index] < nodes.length) { + if (index < matrix.length - 1) { + // If not last, recurse + + crawl(index + 1); + } else { + // Last, build selector + + buildPath(); + } + + trackers[index]++; + } + + trackers[index] = 0; + }; + + if (!matrix.length) return ''; + + crawl(); + + return paths; + }, + + /** + * Builds up a selector string from a provided paths array. + * + * @private + * @param {Array.>} paths + * @return {string} + */ + + buildSelectorFromPaths: function(paths) { + var self = this, + path = null, + output = [], + pathSelector = '', + nodeDelineator = '', + i = -1; + + if (!paths.length) { + return ''; + } + + if (self.config.multifilter.logicBetweenGroups === 'or') { + nodeDelineator = ', '; + } + + if (paths.length > 1) { + for (i = 0; i < paths.length; i++) { + path = paths[i]; + + pathSelector = path.join(nodeDelineator); + + if (output.indexOf(pathSelector) < 0) { + output.push(pathSelector); + } + } + + return output.join(', '); + } else { + return paths[0].join(nodeDelineator); + } + }, + + /** + * Traverses the currently active filters in all groups, building up a + * compound selector string as per the defined logic. A filter operation + * is then called on the mixer using the resulting selector. + * + * This method can be used to programmatically trigger the parsing of + * filter groups after manipulations to a group's active selector(s) by + * the `.setFilterGroupSelectors()` API method. + * + * @example + * + * .parseFilterGroups([animate] [, callback]) + * + * @example Example: Triggering parsing after programmatically changing the values of a filter group + * + * mixer.setFilterGroupSelectors('color', ['.green', '.blue']); + * + * mixer.parseFilterGroups(); + * + * @public + * @since 3.0.0 + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + parseFilterGroups: function() { + var self = this, + instruction = self.parseFilterArgs(arguments), + paths = self.getFilterGroupPaths(), + selector = self.buildSelectorFromPaths(paths), + callback = null, + command = {}; + + if (selector === '') { + selector = self.config.controls.toggleDefault; + } + + instruction.command.selector = selector; + + command.filter = instruction.command; + + if (typeof (callback = self.config.callbacks.onParseFilterGroups) === 'function') { + command = callback(command); + } + + return self.multimix(command, instruction.animate, instruction.callback); + }, + + /** + * Programmatically sets one or more active selectors for a specific filter + * group and updates the group's UI. + * + * Because MixItUp has no way of knowing how to break down a provided + * compound selector into its component groups, we can not use the + * standard `.filter()` or `toggleOn()/toggleOff()` API methods when using + * the MultiFilter extension. Instead, this method allows us to perform + * multi-dimensional filtering via the API by setting the active selectors of + * individual groups and then triggering the `.parseFilterGroups()` method. + * + * If setting multiple active selectors, do not pass a compound selector. + * Instead, pass an array with each item containing a single selector + * string as in example 2. + * + * @example + * + * .setFilterGroupSelectors(groupName, selectors) + * + * @example Example 1: Setting a single active selector for a "color" group + * + * mixer.setFilterGroupSelectors('color', '.green'); + * + * mixer.parseFilterGroups(); + * + * @example Example 2: Setting multiple active selectors for a "size" group + * + * mixer.setFilterGroupSelectors('size', ['.small', '.large']); + * + * mixer.parseFilterGroups(); + * + * @public + * @since 3.2.0 + * @param {string} groupName The name of the filter group as defined in the markup via the `data-filter-group` attribute. + * @param {(string|Array.)} selectors A single selector string, or multiple selector strings as an array. + * @return {void} + */ + + setFilterGroupSelectors: function(groupName, selectors) { + var self = this, + filterGroup = null; + + selectors = Array.isArray(selectors) ? selectors : [selectors]; + + if (typeof (filterGroup = self.filterGroupsHash[groupName]) === 'undefined') { + throw new Error('[MixItUp MultiFilter] No filter group could be found with the name "' + groupName + '"'); + } + + filterGroup.activeToggles = selectors.slice(); + + if (filterGroup.logic === 'and') { + // Compress into single node + + filterGroup.activeSelectors = [filterGroup.activeToggles]; + } else { + filterGroup.activeSelectors = filterGroup.activeToggles; + } + + filterGroup.updateUi(filterGroup.activeToggles); + }, + + /** + * Returns an array of active selectors for a specific filter group. + * + * @example + * + * .getFilterGroupSelectors(groupName) + * + * @example Example: Retrieving the active selectors for a "size" group + * + * mixer.getFilterGroupSelectors('size'); // ['.small', '.large'] + * + * @public + * @since 3.2.0 + * @param {string} groupName The name of the filter group as defined in the markup via the `data-filter-group` attribute. + * @return {void} + */ + + getFilterGroupSelectors: function(groupName) { + var self = this, + filterGroup = null; + + if (typeof (filterGroup = self.filterGroupsHash[groupName]) === 'undefined') { + throw new Error('[MixItUp MultiFilter] No filter group could be found with the name "' + groupName + '"'); + } + + return filterGroup.activeToggles.slice(); + } + }); + + mixitup.Facade.registerAction('afterConstruct', 'multifilter', function(mixer) { + this.parseFilterGroups = mixer.parseFilterGroups.bind(mixer); + this.setFilterGroupSelectors = mixer.setFilterGroupSelectors.bind(mixer); + this.getFilterGroupSelectors = mixer.getFilterGroupSelectors.bind(mixer); + }); }; + + mixitupMultifilter.TYPE = 'mixitup-extension'; + mixitupMultifilter.NAME = 'mixitup-multifilter'; + mixitupMultifilter.EXTENSION_VERSION = '3.3.4'; + mixitupMultifilter.REQUIRE_CORE_VERSION = '^3.1.2'; + + if (typeof exports === 'object' && typeof module === 'object') { + module.exports = mixitupMultifilter; + } else if (typeof define === 'function' && define.amd) { + define(function() { + return mixitupMultifilter; + }); + } else if (window.mixitup && typeof window.mixitup === 'function') { + mixitupMultifilter(window.mixitup); + } else { + throw new Error('[MixItUp MultiFilter] MixItUp core not found'); + }})(window); \ No newline at end of file diff --git a/themes/jamstackthemes/assets/js/libs/mixitup-pagination.js b/themes/jamstackthemes/assets/js/libs/mixitup-pagination.js new file mode 100755 index 0000000..55ba128 --- /dev/null +++ b/themes/jamstackthemes/assets/js/libs/mixitup-pagination.js @@ -0,0 +1,1974 @@ +/**! + * MixItUp Pagination v3.3.0 + * Client-side pagination for filtered and sorted content + * Build 875b7d31-63d1-4040-ac6f-b1c814027891 + * + * Requires mixitup.js >= v^3.1.8 + * + * @copyright Copyright 2014-2017 KunkaLabs Limited. + * @author KunkaLabs Limited. + * @link https://www.kunkalabs.com/mixitup-pagination/ + * + * @license Commercial use requires a commercial license. + * https://www.kunkalabs.com/mixitup-pagination/licenses/ + * + * Non-commercial use permitted under same terms as license. + * http://creativecommons.org/licenses/by-nc/3.0/ + */ + +(function(window) { + 'use strict'; + + var mixitupPagination = function(mixitup) { + var h = mixitup.h; + + if ( + !mixitup.CORE_VERSION || + !h.compareVersions(mixitupPagination.REQUIRE_CORE_VERSION, mixitup.CORE_VERSION) + ) { + throw new Error( + '[MixItUp Pagination] MixItUp Pagination ' + + mixitupPagination.EXTENSION_VERSION + + ' requires at least MixItUp ' + + mixitupPagination.REQUIRE_CORE_VERSION + ); + } + + /** + * A group of optional callback functions to be invoked at various + * points within the lifecycle of a mixer operation. + * + * @constructor + * @memberof mixitup.Config + * @name callbacks + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigCallbacks.registerAction('afterConstruct', 'pagination', function() { + /** + * A callback function invoked whenever a pagination operation starts. + * + * This function is equivalent to `onMixStart`, and is invoked immediately + * after it with the same arguments. Unlike `onMixStart` however, it will + * not be invoked for filter or sort operations. + * + * + * @name onPaginateStart + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onPaginateStart = null; + + /** + * A callback function invoked whenever a pagination operation ends. + * + * This function is equivalent to `onMixEnd`, and is invoked immediately + * after it with the same arguments. Unlike `onMixEnd` however, it will + * not be invoked for filter or sort operations. + * + * @name onPaginateStart + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onPaginateEnd = null; + }); + + /** + * A group of properties defining the output and structure of class names programmatically + * added to controls and containers to reflect the state of the mixer. + * + * @constructor + * @memberof mixitup.Config + * @name classNames + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigClassNames.registerAction('afterConstruct', 'pagination', function() { + + /** + * The "element" portion of the class name added to pager controls. + * + * @example Example: changing the `config.classNames.elementPager` value + * + * // Change from the default value of 'control' to 'pager' + * + * var mixer = mixitup(containerEl, { + * classNames: { + * elementPager: 'pager' + * } + * }); + * + * // Base pager output: "mixitup-pager" + * + * @name elementPager + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'control' + */ + + this.elementPager = 'control'; + + /** + * The "element" portion of the class name added to the page list element, when it is + * in its disabled state. + * + * The page list element is the containing element in which pagers are rendered. + * + * @example Example: changing the `config.classNames.elementPageList` value + * + * // Change from the default value of 'page-list' to 'pagination-links' + * + * var mixer = mixitup(containerEl, { + * classNames: { + * elementPageList: 'pagination-links' + * } + * }); + * + * // Disabled page-list output: "mixitup-pagination-links-disabled" + * + * @name elementPageList + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'page-list' + */ + + this.elementPageList = 'page-list'; + + /** + * The "element" portion of the class name added to the page stats element, when it is + * in its disabled state. + * + * The page stats element is the containing element in which information about the + * current page and total number of pages is rendered. + * + * @example Example: changing the `config.classNames.elementPageStats` value + * + * // Change from the default value of 'page-stats' to 'pagination-info' + * + * var mixer = mixitup(containerEl, { + * classNames: { + * elementPageList: 'pagination-info' + * } + * }); + * + * // Disabled page-list output: "mixitup-pagination-info-disabled" + * + * @name elementPageStats + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'page-stats' + */ + + this.elementPageStats = 'page-stats'; + + /** + * The "modifier" portion of the class name added to the first pager in the list of pager controls. + * + * @name modifierFirst + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'first' + */ + + this.modifierFirst = 'first'; + + /** + * The "modifier" portion of the class name added to the last pager in the list of pager controls. + * + * @name modifierLast + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'last' + */ + + this.modifierLast = 'last'; + + /** + * The "modifier" portion of the class name added to the previous pager in the list of pager controls. + * + * @name modifierLast + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'prev' + */ + + this.modifierPrev = 'prev'; + + /** + * The "modifier" portion of the class name added to the next pager in the list of pager controls. + * + * @name modifierNext + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'next' + */ + + this.modifierNext = 'next'; + + /** + * The "modifier" portion of the class name added to truncation markers in the list of pager controls. + * + * @name modifierTruncationMarker + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'truncation-marker' + */ + + this.modifierTruncationMarker = 'truncation-marker'; + }); + + /** + * A group of properties defining the initial state of the mixer on load (instantiation). + * + * @constructor + * @memberof mixitup.Config + * @name load + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigLoad.registerAction('afterConstruct', 'pagination', function() { + /** + * An integer defining the starting page on load, if a page limit is active. + * + * @example Example: Defining a start page other than 1 to be applied on load + * + * // The mixer will show page 3 on load, with 8 items per page. + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8 + * }, + * load: { + * page: 3 + * } + * }); + * + * @name page + * @memberof mixitup.Config.load + * @instance + * @type {number} + * @default 1 + */ + + this.page = 1; + }); + + /** + * A group of properties defining the mixer's pagination behavior. + * + * @constructor + * @memberof mixitup.Config + * @name pagination + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigPagination = function() { + + /** + * A boolean dictating whether or not MixItUp should render a list of pager controls. + * + * If you wish to control pagination functionality via the API, or your own UI, this can be set to `false`. + * + * In order for this functionality to work, you must provide MixItUp with a `pageList` + * element matching the selector defined in `selectors.pageList`. Pager controls will be + * rendered inside this element as per the templates defined for the `templates.pager` + * and related configuration options, or if set, a custom render + * function supplied to the `render.pager` configuration option. + * + * @example Example: Disabling the rendering of the built-in "page list" UI + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8, + * generatePageList: false + * } + * }); + * + * @name generatePageList + * @memberof mixitup.Config.pagination + * @instance + * @type {boolean} + * @default true + */ + + this.generatePageList = true; + + /** + * A boolean dictating whether or not MixItUp should render a stats about the + * current page (e.g. "1 to 4 of 16"). + * + * In order for this functionality to work, you must provide MixItUp with a `pageStats` + * element matching the selector defined in `selectors.pageStats`. Page stats content will + * be rendered inside this element as per the templates defined for the `templates.pageStats` + * and `templates.pageStatsSingle` configuration options, or if set, a custom render + * function supplied to the `render.pageStats` configuration option. + * + * @example Example: Disabling the rendering of the built-in "page stats" UI + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8, + * generatePageStats: false + * } + * }); + * + * @name generatePageStats + * @memberof mixitup.Config.pagination + * @instance + * @type {boolean} + * @default true + */ + + this.generatePageStats = true; + + /** + * A boolean dictating whether or not to maintain the active page when switching + * from filter to filter. + * + * By default, MixItUp will attempt to maintain the active page or its highest + * equivalent in the new collection of matching targets (e.g. page 3 would become + * page 2 if there are not enough targets in the new collection), but by setting + * this option to `false`, changing the active filter will always cause the mixer + * to revert to page one of the new collection. + * + * @example Example: Ensuring that the mixer reverts to page one when filtered + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8, + * maintainActivePage: false + * } + * }); + * + * @name maintainActivePage + * @memberof mixitup.Config.pagination + * @instance + * @type {boolean} + * @default true + */ + + this.maintainActivePage = true; + + /** + * A boolean dictating whether or not to allow "looping" of the built-in previous + * and next pagination controls. + * + * By default, when on the first page, the "previous" button will be disabled, + * and when on the last page, the "next" button will be disabled. By setting + * this option to `true`, the user may loop from the first to last page and + * vice-versa. + * + * @example Example: Allowing prev/next controls to "loop" through pages + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8, + * loop: true + * } + * }); + * + * @name loop + * @memberof mixitup.Config.pagination + * @instance + * @type {boolean} + * @default false + */ + + this.loop = false; + + /** + * A boolean dictating whether or not to prevent rendering of the built-in + * "page list" UI if the matching collection of targets has only enough content + * for one page. + * + * @example Example: Hiding the page list UI if only one page + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8, + * hidePageListIfSinglePage: true + * } + * }); + * + * @name hidePageListIfSinglePage + * @memberof mixitup.Config.pagination + * @instance + * @type {boolean} + * @default false + */ + + this.hidePageListIfSinglePage = false; + + /** + * A boolean dictating whether or not to prevent rendering of the built-in + * "page stats" UI if the matching collection of targets has only enough content + * for one page. + * + * @example Example: Hiding the page stats UI if only one page + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8, + * hidePageStatsIfSinglePage: true + * } + * }); + * + * @name hidePageStatsIfSinglePage + * @memberof mixitup.Config.pagination + * @instance + * @type {boolean} + * @default false + */ + + this.hidePageStatsIfSinglePage = false; + + /** + * A number defining the maximum number of items per page. + * + * By default, this is set to `-1` and pagination is effectively + * disabled. By setting this to any number greater than 0, pagination + * will be applied to the mixers targets, effectively activating the + * extension. + * + * @example Example: Activating the pagination extension by defining a valid limit + * + * var mixer = mixitup(containerEl, { + * pagination: { + * limit: 8 + * } + * }); + * + * @name limit + * @memberof mixitup.Config.pagination + * @instance + * @type {number} + * @default -1 + */ + + this.limit = -1; + + /** + * A number dictating the maximum number of individual pager controls to render before + * truncating the list (e.g. adding an ellipses between non-consecutive pagers). + * + * The minimum value permitted for this option is 5, which ensures + * there will always be at least a first, last, and two padding pagers, in addition + * to the pager representing the currently active page. + * + * @name maxPagers + * @memberof mixitup.Config.pagination + * @instance + * @type {number} + * @default 5 + */ + + this.maxPagers = 5; + + h.seal(this); + }; + + /** + * A group of optional render functions for creating and updating elements. + * + * @constructor + * @memberof mixitup.Config + * @name render + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigRender.registerAction('afterConstruct', 'pagination', function() { + /** + * A function returning an HTML string representing a single pager control element. + * + * By default, MixItUp will render pager controls using its own internal renderer + * and templates (see `templates.pager`), but you may override this functionality by + * providing your own render function here instead. All pager elements must have a + * data-page element indicating the action of the control. + * + * The function receives an object containing all neccessary information + * about the pager as its first parameter. + * + * @name pager + * @memberof mixitup.Config.render + * @instance + * @type {function} + * @default 'null' + */ + + this.pager = null; + + /** + * A function returning an HTML string forming the contents of the "page stats" element. + * + * By default, MixItUp will render page stats using its own internal renderer + * and templates (see `templates.pageStats`), but you may override this functionality by + * providing your own render function here instead. + * + * The function receives an object containing all neccessary information + * about the current page and total pages as its first parameter. + * + * @name pageStats + * @memberof mixitup.Config.render + * @instance + * @type {function} + * @default 'null' + */ + + this.pageStats = null; + }); + + /** + * A group of properties defining the selectors used to query elements within a mixitup container. + * + * @constructor + * @memberof mixitup.Config + * @name selectors + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigSelectors.registerAction('afterConstruct', 'pagination', function() { + /** + * A selector string used to query the page list element. + * + * Depending on the value of `controls.scope`, MixItUp will either query the + * entire document for the page list element, or just the container. + * + * @name pageList + * @memberof mixitup.Config.selectors + * @instance + * @type {string} + * @default '.mixitup-page-list' + */ + + this.pageList = '.mixitup-page-list'; + + /** + * A selector string used to query the page stats element. + * + * Depending on the value of `controls.scope`, MixItUp will either query the + * entire document for the page stats element, or just the container. + * + * @name pageStats + * @memberof mixitup.Config.selectors + * @instance + * @type {string} + * @default '.mixitup-page-stats' + */ + + this.pageStats = '.mixitup-page-stats'; + }); + + /** + * A group of template strings used to render pager controls and page stats elements. + * + * @constructor + * @memberof mixitup.Config + * @name templates + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigTemplates.registerAction('afterConstruct', 'pagination', function() { + /** + * @name pager + * @memberof mixitup.Config.templates + * @instance + * @type {string} + * @default '' + */ + + this.pager = ''; + + /** + * @name pagerPrev + * @memberof mixitup.Config.templates + * @instance + * @type {string} + * @default '' + */ + + this.pagerPrev = ''; + + /** + * @name pagerNext + * @memberof mixitup.Config.templates + * @instance + * @type {string} + * @default '' + */ + + this.pagerNext = ''; + + /** + * @name pagerTruncationMarker + * @memberof mixitup.Config.templates + * @instance + * @type {string} + * @default '…' + */ + + this.pagerTruncationMarker = '…'; + + /** + * @name pageStats + * @memberof mixitup.Config.templates + * @instance + * @type {string} + * @default '${startPageAt} to ${endPageAt} of ${totalTargets}' + */ + + this.pageStats = '${startPageAt} to ${endPageAt} of ${totalTargets}'; + + /** + * @name pageStatsSingle + * @memberof mixitup.Config.templates + * @instance + * @type {string} + * @default '${startPageAt} of ${totalTargets}' + */ + + this.pageStatsSingle = '${startPageAt} of ${totalTargets}'; + + /** + * @name pageStatsFail + * @memberof mixitup.Config.templates + * @instance + * @type {string} + * @default 'None found' + */ + + this.pageStatsFail = 'None found'; + }); + + /** + * The MixItUp configuration object is extended with the following properties + * relating to the Pagination extension. + * + * For the full list of configuration options, please refer to the MixItUp + * core documentation. + * + * @constructor + * @memberof mixitup + * @name Config + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.Config.registerAction('beforeConstruct', 'pagination', function() { + this.pagination = new mixitup.ConfigPagination(); + }); + + mixitup.ModelPager = function() { + this.pageNumber = -1; + this.classNames = ''; + this.classList = []; + this.isDisabled = false; + this.isPrev = false; + this.isNext = false; + this.isPageLink = false; + this.isTruncationMarker = false; + + h.seal(this); + }; + + mixitup.ModelPageStats = function() { + this.startPageAt = -1; + this.endPageAt = -1; + this.totalTargets = -1; + + h.seal(this); + }; + + mixitup.UiClassNames.registerAction('afterConstruct', 'pagination', function() { + this.first = ''; + this.last = ''; + this.prev = ''; + this.next = ''; + this.first = ''; + this.last = ''; + this.truncated = ''; + this.truncationMarker = ''; + }); + + mixitup.controlDefinitions.push(new mixitup.ControlDefinition('pager', '[data-page]', true, 'pageListEls')); + + /** + * @param {mixitup.MultimixCommand[]} commands + * @param {ClickEvent} e + * @return {object|null} + */ + + mixitup.Control.registerFilter('commandsHandleClick', 'pagination', function(commands, e) { + var self = this, + command = {}, + page = '', + pageNumber = -1, + mixer = null, + button = null, + i = -1; + + if (!self.selector || self.selector !== '[data-page]') { + // Static control or non-pager live control + + return commands; + } + + button = h.closestParent(e.target, self.selector, true, self.bound[0].dom.document); + + for (i = 0; mixer = self.bound[i]; i++) { + command = commands[i]; + + if (!mixer.config.pagination || mixer.config.pagination.limit < 0 || mixer.config.pagination.limit === Infinity) { + // Pagination is disabled for this instance. Do not handle. + + commands[i] = null; + + continue; + } + + if (!button || h.hasClass(button, mixer.classNamesPager.active) || h.hasClass(button, mixer.classNamesPager.disabled)) { + // No button was clicked or button is already active. Do not handle. + + commands[i] = null; + + continue; + } + + page = button.getAttribute('data-page'); + + if (page === 'prev') { + command.paginate = 'prev'; + } else if (page === 'next') { + command.paginate = 'next'; + } else if (pageNumber) { + command.paginate = parseInt(page); + } + + if (mixer.lastClicked) { + mixer.lastClicked = button; + } + } + + return commands; + }); + + mixitup.CommandMultimix.registerAction('afterConstruct', 'pagination', function() { + this.paginate = null; + }); + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandPaginate = function() { + this.page = -1; + this.limit = -1; + this.action = ''; // enum: ['prev', 'next'] + this.anchor = null; + + h.seal(this); + }; + + mixitup.Events.registerAction('afterConstruct', 'pagination', function() { + /** + * A custom event triggered whenever a pagination operation starts. + * + * @name paginateStart + * @memberof mixitup.Events + * @static + * @type {CustomEvent} + */ + + this.paginateStart = null; + + /** + * A custom event triggered whenever a pagination operation ends. + * + * @name paginateEnd + * @memberof mixitup.Events + * @static + * @type {CustomEvent} + */ + + this.paginateEnd = null; + }); + + mixitup.events = new mixitup.Events(); + + mixitup.Operation.registerAction('afterConstruct', 'pagination', function() { + this.startPagination = null; + this.newPagination = null; + this.startTotalPages = -1; + this.newTotalPages = -1; + }); + + /** + * `mixitup.State` objects expose various pieces of data detailing the state of + * a MixItUp instance. They are provided at the start and end of any operation via + * callbacks and events, with the most recent state stored between operations + * for retrieval at any time via the API. + * + * @constructor + * @namespace + * @name State + * @memberof mixitup + * @public + * @since 3.0.0 + */ + + mixitup.State.registerAction('afterConstruct', 'pagination', function() { + + /** + * The currently active pagination command as set by a control click or API call. + * + * @name activePagination + * @memberof mixitup.State + * @instance + * @type {mixitup.CommandPagination} + * @default null + */ + + this.activePagination = null; + + /** + * The total number of pages produced as a combination of the current page + * limit and active filter. + * + * @name totalPages + * @memberof mixitup.State + * @instance + * @type {number} + * @default -1 + */ + + this.totalPages = -1; + }); + + mixitup.MixerDom.registerAction('afterConstruct', 'pagination', function() { + this.pageListEls = []; + this.pageStatsEls = []; + }); + + /** + * The mixitup.Mixer class is extended with the following methods relating to + * the Pagination extension. + * + * For the full list of methods, please refer to the MixItUp core documentation. + * + * @constructor + * @namespace + * @name Mixer + * @memberof mixitup + * @public + * @since 3.0.0 + */ + + mixitup.Mixer.registerAction('afterConstruct', 'pagination', function() { + this.classNamesPager = new mixitup.UiClassNames(); + this.classNamesPageList = new mixitup.UiClassNames(); + this.classNamesPageStats = new mixitup.UiClassNames(); + }); + + /** + * @private + * @return {void} + */ + + mixitup.Mixer.registerAction('afterAttach', 'pagination', function() { + var self = this, + el = null, + i = -1; + + if (self.config.pagination.limit < 0) return; + + // Map pagination ui classNames + + // jscs:disable + self.classNamesPager.base = h.getClassname(self.config.classNames, 'pager'); + self.classNamesPager.active = h.getClassname(self.config.classNames, 'pager', self.config.classNames.modifierActive); + self.classNamesPager.disabled = h.getClassname(self.config.classNames, 'pager', self.config.classNames.modifierDisabled); + self.classNamesPager.first = h.getClassname(self.config.classNames, 'pager', self.config.classNames.modifierFirst); + self.classNamesPager.last = h.getClassname(self.config.classNames, 'pager', self.config.classNames.modifierLast); + self.classNamesPager.prev = h.getClassname(self.config.classNames, 'pager', self.config.classNames.modifierPrev); + self.classNamesPager.next = h.getClassname(self.config.classNames, 'pager', self.config.classNames.modifierNext); + self.classNamesPager.truncationMarker = h.getClassname(self.config.classNames, 'pager', self.config.classNames.modifierTruncationMarker); + + self.classNamesPageList.base = h.getClassname(self.config.classNames, 'page-list'); + self.classNamesPageList.disabled = h.getClassname(self.config.classNames, 'page-list', self.config.classNames.modifierDisabled); + + self.classNamesPageStats.base = h.getClassname(self.config.classNames, 'page-stats'); + self.classNamesPageStats.disabled = h.getClassname(self.config.classNames, 'page-stats', self.config.classNames.modifierDisabled); + // jscs:enable + + if (self.config.pagination.generatePageList && self.dom.pageListEls.length > 0) { + for (i = 0; (el = self.dom.pageListEls[i]); i++) { + self.renderPageListEl(el, self.lastOperation); + } + } + + if (self.config.pagination.generatePageStats && self.dom.pageStatsEls.length > 0) { + for (i = 0; (el = self.dom.pageStatsEls[i]); i++) { + self.renderPageStatsEl(el, self.lastOperation); + } + } + }); + + mixitup.Mixer.registerAction('afterSanitizeConfig', 'pagination', function() { + var self = this, + onMixStart = self.config.callbacks.onMixStart, + onMixEnd = self.config.callbacks.onMixEnd, + onPaginateStart = self.config.callbacks.onPaginateStart, + onPaginateEnd = self.config.callbacks.onPaginateEnd, + didPaginate = false; + + if (self.config.pagination.limit < 0) return; + + self.classNamesPager = new mixitup.UiClassNames(); + self.classNamesPageList = new mixitup.UiClassNames(); + self.classNamesPageStats = new mixitup.UiClassNames(); + + self.config.callbacks.onMixStart = function(prevState, nextState) { + if ( + prevState.activePagination.limit !== nextState.activePagination.limit || + prevState.activePagination.page !== nextState.activePagination.page + ) { + didPaginate = true; + } + + if (typeof onMixStart === 'function') onMixStart.apply(self.dom.container, arguments); + + if (!didPaginate) return; + + mixitup.events.fire('paginateStart', self.dom.container, { + state: prevState, + futureState: nextState, + instance: self + }, self.dom.document); + + if (typeof onPaginateStart === 'function') onPaginateStart.apply(self.dom.container, arguments); + }; + + self.config.callbacks.onMixEnd = function(state) { + if (typeof onMixEnd === 'function') onMixEnd.apply(self.dom.container, arguments); + + if (!didPaginate) return; + + didPaginate = false; + + mixitup.events.fire('paginateEnd', self.dom.container, { + state: state, + instance: self + }, self.dom.document); + + if (typeof onPaginateEnd === 'function') onPaginateEnd.apply(self.dom.container, arguments); + }; + }); + + /** + * @private + * @param {mixitup.Operation} operation + * @param {mixitup.State} state + * @return {mixitup.Operation} + */ + + mixitup.Mixer.registerFilter('operationGetInitialState', 'pagination', function(operation, state) { + var self = this; + + if (self.config.pagination.limit < 0) return operation; + + operation.newPagination = state.activePagination; + + return operation; + }); + + /** + * @private + * @param {mixitup.State} state + * @return {mixitup.State} + */ + + mixitup.Mixer.registerFilter('stateGetInitialState', 'pagination', function(state) { + var self = this; + + if (self.config.pagination.limit < 0) return state; + + state.activePagination = new mixitup.CommandPaginate(); + + state.activePagination.page = self.config.load.page; + state.activePagination.limit = self.config.pagination.limit; + + return state; + }); + + /** + * @private + * @return {void} + */ + + mixitup.Mixer.registerAction('afterGetFinalMixData', 'pagination', function() { + var self = this; + + if (self.config.pagination.limit < 0) return; + + if (typeof self.config.pagination.maxPagers === 'number') { + // Restrict max pagers to a minimum of 5. There must always + // be a first, last, and one on either side of the active pager. + // e.g. « 1 ... 4 5 6 ... 10 » + + self.config.pagination.maxPagers = Math.max(5, self.config.pagination.maxPagers); + } + }); + + /** + * @private + * @return {void} + */ + + mixitup.Mixer.registerAction('afterCacheDom', 'pagination', function() { + var self = this, + parent = null; + + if (self.config.pagination.limit < 0) return; + + if (!self.config.pagination.generatePageList) return; + + switch (self.config.controls.scope) { + case 'local': + parent = self.dom.container; + + break; + case 'global': + parent = self.dom.document; + + break; + default: + throw new Error(mixitup.messages.ERROR_CONFIG_INVALID_CONTROLS_SCOPE); + } + + self.dom.pageListEls = parent.querySelectorAll(self.config.selectors.pageList); + self.dom.pageStatsEls = parent.querySelectorAll(self.config.selectors.pageStats); + }); + + /** + * @private + * @param {mixitup.State} state + * @param {mixitup.Operation} operation + * @return {mixitup.State} + */ + + mixitup.Mixer.registerFilter('stateBuildState', 'pagination', function(state, operation) { + var self = this; + + if (self.config.pagination.limit < 0) return state; + + // Map pagination-specific properties into state + + state.activePagination = operation.newPagination; + state.totalPages = operation.newTotalPages; + + return state; + }); + + /** + * @private + * @param {mixitup.UserInstruction} instruction + * @return {mixitup.UserInstruction} + */ + + mixitup.Mixer.registerFilter('instructionParseMultimixArgs', 'pagination', function(instruction) { + var self = this; + + if (self.config.pagination.limit < 0) return instruction; + + if (instruction.command.paginate && !(instruction.command.paginate instanceof mixitup.CommandPaginate)) { + instruction.command.paginate = self.parsePaginateArgs([instruction.command.paginate]).command; + } + + return instruction; + }); + + /** + * @private + * @param {mixitup.Operation} operation + * @return {void} + */ + + mixitup.Mixer.registerAction('afterFilterOperation', 'pagination', function(operation) { + var self = this, + startPageAt = -1, + endPageAt = -1, + inPage = [], + notInPage = [], + target = null, + index = -1, + i = -1; + + if (self.config.pagination.limit < 0) return; + + // Calculate the new total pages as a matter of course (i.e. a change in filter) + + // New matching array has already been set at this point + + operation.newTotalPages = operation.newPagination.limit ? + Math.max(Math.ceil(operation.matching.length / operation.newPagination.limit), 1) : + 1; + + if (self.config.pagination.maintainActivePage) { + operation.newPagination.page = (operation.newPagination.page > operation.newTotalPages) ? + operation.newTotalPages : + operation.newPagination.page; + } + + // Keep config in sync with latest limit + + self.config.pagination.limit = operation.newPagination.limit; + + if (operation.newPagination.anchor) { + // Start page at an anchor element + + for (i = 0; target = operation.matching[i]; i++) { + if (target.dom.el === operation.newPagination.anchor) break; + } + + startPageAt = i; + endPageAt = i + operation.newPagination.limit - 1; + } else { + // Start page based on limit and page index + + startPageAt = operation.newPagination.limit * (operation.newPagination.page - 1); + endPageAt = (operation.newPagination.limit * operation.newPagination.page) - 1; + + if (isNaN(startPageAt)) { + startPageAt = 0; + } + } + + if (operation.newPagination.limit < 0) return; + + for (i = 0; target = operation.show[i]; i++) { + // For each target in `show`, include in page, only if within the range + + if (i >= startPageAt && i <= endPageAt) { + inPage.push(target); + } else { + // Else move to `notInPage` + + notInPage.push(target); + } + } + + // override the operation's `show` array with the newly constructed `inPage` array + + operation.show = inPage; + + // For anything not in the page, make sure it is correctly assigned: + + for (i = 0; target = operation.toHide[i]; i++) { + // For example, if a target would normally be included in `toHide`, but is + // now already hidden as not in the page, make sure it is removed from `toHide` + // so it is not included in the operation. + + if (!target.isShown) { + operation.toHide.splice(i, 1); + + target.isShown = false; + + i--; + } + } + + for (i = 0; target = notInPage[i]; i++) { + // For each target not in page, move into `hide` + + operation.hide.push(target); + + if ((index = operation.toShow.indexOf(target)) > -1) { + // Any targets due to be shown will no longer be shown + + operation.toShow.splice(index, 1); + } + + if (target.isShown) { + // If currently shown, move to `toHide` + + operation.toHide.push(target); + } + } + }); + + /** + * @private + * @param {mixitup.Operation} operation + * @param {mixitup.CommandMultimix} command + * @return {mixitup.Operation} + */ + + mixitup.Mixer.registerFilter('operationUnmappedGetOperation', 'pagination', function(operation, command) { + var self = this; + + if (self.config.pagination.limit < 0) return operation; + + operation.startState = self.state; + operation.startPagination = self.state.activePagination; + operation.startTotalPages = self.state.totalPages; + + operation.newPagination = new mixitup.CommandPaginate(); + + operation.newPagination.limit = operation.startPagination.limit; + operation.newPagination.page = operation.startPagination.page; + + if (command.paginate) { + self.parsePaginateCommand(command.paginate, operation); + } else if (command.filter || command.sort) { + h.extend(operation.newPagination, operation.startPagination); + + // Reset to 1, or maintain active: + + if (!self.config.pagination.maintainActivePage) { + operation.newPagination.page = 1; + } else { + operation.newPagination.page = self.state.activePagination.page; + } + } + + return operation; + }); + + /** + * @private + * @param {mixitup.Operation} operation + * @param {object} command + * @param {boolean} [isPreFetch=false] + * @return {mixitup.Operation} + */ + + mixitup.Mixer.registerFilter('operationMappedGetOperation', 'pagination', function(operation, command, isPreFetch) { + var self = this, + el = null, + i = -1; + + if (self.config.pagination.limit < 0) return operation; + + if (isPreFetch) { + // The operation is being pre-fetched, so don't update the pagers or stats yet. + + return operation; + } + + if (self.config.pagination.generatePageList && self.dom.pageListEls.length > 0) { + for (i = 0; (el = self.dom.pageListEls[i]); i++) { + self.renderPageListEl(el, operation); + } + } + + if (self.config.pagination.generatePageStats && self.dom.pageStatsEls.length > 0) { + for (i = 0; (el = self.dom.pageStatsEls[i]); i++) { + self.renderPageStatsEl(el, operation); + } + } + + return operation; + }); + + mixitup.Mixer.extend( + /** @lends mixitup.Mixer */ + { + /** + * @private + * @param {mixitup.CommandPaginate} command + * @param {mixitup.Operation} operation + * @return {void} + */ + + parsePaginateCommand: function(command, operation) { + var self = this; + + // e.g. mixer.paginate({page: 3, limit: 2}); + // e.g. mixer.paginate({action: 'next'}); + // e.g. mixer.paginate({anchor: anchorTarget, limit: 5}); + + if (command.page > -1) { + if (command.page === 0) throw new Error(mixitup.messages.ERROR_PAGINATE_INDEX_RANGE); + + // TODO: replace Infinity with the highest possible page index + + operation.newPagination.page = Math.max(1, Math.min(Infinity, command.page)); + } else if (command.action === 'next') { + operation.newPagination.page = self.getNextPage(); + } else if (command.action === 'prev') { + operation.newPagination.page = self.getPrevPage(); + } else if (command.anchor) { + operation.newPagination.anchor = command.anchor; + } + + if (command.limit > -1) { + operation.newPagination.limit = command.limit; + } + + if (operation.newPagination.limit !== operation.startPagination.limit) { + // A new limit has been sent via the API, calculate total pages + + operation.newTotalPages = operation.newPagination.limit ? + Math.max(Math.ceil(operation.startState.matching.length / operation.newPagination.limit), 1) : + 1; + } + + if (operation.newPagination.limit <= 0 || operation.newPagination.limit === Infinity) { + operation.newPagination.page = 1; + } + }, + + /** + * @private + * @return {number} page + */ + + getNextPage: function() { + var self = this, + page = -1; + + page = self.state.activePagination.page + 1; + + if (page > self.state.totalPages) { + page = self.config.pagination.loop ? 1 : self.state.activePagination.page; + } + + return page; + }, + + /** + * @private + * @return {Number} page + */ + + getPrevPage: function() { + var self = this, + page = -1; + + page = self.state.activePagination.page - 1; + + if (page < 1) { + page = self.config.pagination.loop ? self.state.totalPages : self.state.activePagination.page; + } + + return page; + }, + + /** + * @private + * @param {HTMLElement} pageListEl + * @param {mixitup.Operation} operation + * @return {void} + */ + + renderPageListEl: function(pageListEl, operation) { + var self = this, + activeIndex = -1, + pagerHtml = '', + buttonList = [], + model = null, + renderer = null, + allowedIndices = [], + truncatedBefore = false, + truncatedAfter = false, + disabled = null, + el = null, + html = '', + i = -1; + + if ( + operation.newPagination.limit < 0 || + operation.newPagination.limit === Infinity || + (operation.newTotalPages < 2 && self.config.pagination.hidePageListIfSinglePage) + ) { + // Empty the pager list, and add disabled class + + pageListEl.innerHTML = ''; + + h.addClass(pageListEl, self.classNamesPageList.disabled); + + return; + } + + activeIndex = operation.newPagination.page - 1; + + renderer = typeof (renderer = self.config.render.pager) === 'function' ? renderer : null; + + if (self.config.pagination.maxPagers < Infinity && operation.newTotalPages > self.config.pagination.maxPagers) { + allowedIndices = self.getAllowedIndices(operation); + } + + // Render prev button + + model = new mixitup.ModelPager(); + + model.isPrev = true; + model.classList.push(self.classNamesPager.base, self.classNamesPager.prev); + + // If first and not looping, disable the prev button + + if (operation.newPagination.page === 1 && !self.config.pagination.loop) { + model.classList.push(self.classNamesPager.disabled); + + model.isDisabled = true; + } + + model.classNames = model.classList.join(' '); + + if (renderer) { + pagerHtml = renderer(model); + } else { + pagerHtml = h.template(self.config.templates.pagerPrev)(model); + } + + buttonList.push(pagerHtml); + + // Render per-page pagers + + for (i = 0; i < operation.newTotalPages; i++) { + pagerHtml = self.renderPager(i, operation, allowedIndices); + + if (pagerHtml || (i < activeIndex && truncatedBefore) || i > activeIndex && truncatedAfter) { + if (pagerHtml) { + buttonList.push(pagerHtml); + } + + continue; + } + + // Replace gaps between pagers with a truncation maker, but only once + + model = new mixitup.ModelPager(); + + model.isTruncationMarker = true; + + model.classList.push(self.classNamesPager.base, self.classNamesPager.truncationMarker); + model.classNames = model.classList.join(' '); + + if (renderer) { + pagerHtml = renderer(model); + } else { + pagerHtml = h.template(self.config.templates.pagerTruncationMarker)(model); + } + + buttonList.push(pagerHtml); + + // Prevent multiple truncation markers + + if (i < activeIndex) { + truncatedBefore = true; + } + + if (i > activeIndex) { + truncatedAfter = true; + } + } + + // Render next button + + model = new mixitup.ModelPager(); + + model.isNext = true; + model.classList.push(self.classNamesPager.base, self.classNamesPager.next); + + // If last page and not looping, disable the next button + + if (operation.newPagination.page === operation.newTotalPages && !self.config.pagination.loop) { + model.classList.push(self.classNamesPager.disabled); + } + + model.classNames = model.classList.join(' '); + + if (renderer) { + pagerHtml = renderer(model); + } else { + pagerHtml = h.template(self.config.templates.pagerNext)(model); + } + + buttonList.push(pagerHtml); + + // Replace markup + + html = buttonList.join(' '); + + pageListEl.innerHTML = html; + + // Add disabled attribute to disabled buttons + + disabled = pageListEl.querySelectorAll('.' + self.classNamesPager.disabled); + + for (i = 0; el = disabled[i]; i++) { + if (typeof el.disabled === 'boolean') { + el.disabled = true; + } + } + + if (truncatedBefore || truncatedAfter) { + h.addClass(pageListEl, self.classNamesPageList.truncated); + } else { + h.removeClass(pageListEl, self.classNamesPageList.truncated); + } + + if (operation.newTotalPages > 1) { + h.removeClass(pageListEl, self.classNamesPageList.disabled); + } else { + h.addClass(pageListEl, self.classNamesPageList.disabled); + } + }, + + /** + * An algorithm defining which pagers should be rendered based on their index + * and the current active page, when a `pagination.maxPagers` value is applied. + * + * @private + * @param {mixitup.Operation} operation + * @return {number[]} + */ + + getAllowedIndices: function(operation) { + var self = this, + activeIndex = operation.newPagination.page - 1, + lastIndex = operation.newTotalPages - 1, + indices = [], + paddingRange = -1, + paddingBack = -1, + paddingFront = -1, + paddingRangeStart = -1, + paddingRangeEnd = -1, + paddingRangeOffset = -1, + i = -1; + + // Examples: + + // « 1 2 *3* 4 5 » maxPagers = 5 + // « 1 ... 4 *5* 6 ... 10 » maxPagers = 5 + + // « 1 ... 6 7 *8* 9 10 » maxPagers = 6 + // « 1 ... 3 4 *5* 6 ... 10 » maxPagers = 6 + + // « 1 ... 3 4 *5* 6 7 ... 10 » maxPagers = 7 + // « *1* 2 3 4 5 6 ... 10 » maxPagers = 7 + + // This algorithm ensures that at any time, the active pager + // should be surrounded by as many "padding" pagers as possible to equal the + // value of `pagination.maxPagers`, accounting for the fact the first and last + // pager should also always be rendered. + + // Push in index 0 to represent the first pager + + indices.push(0); + + // Calculate the "padding range" by subtracting 2 from `pagination.maxPagers` + + paddingRange = self.config.pagination.maxPagers - 2; + + // Distribute the padding equally behind and in front of the active pager. + // If the padding range is an even number, we allow an extra pager behind the active pager. + + paddingBack = Math.ceil((paddingRange - 1) / 2); + paddingFront = Math.floor((paddingRange - 1) / 2); + + // Calculate where the range should start and finish based on the active index + + paddingRangeStart = activeIndex - paddingBack; + paddingRangeEnd = activeIndex + paddingFront; + + // Set the offset to 0 + + paddingRangeOffset = 0; + + // If the start of the range has collided with the first pager, positively offset as needed + + if (paddingRangeStart < 1) { + paddingRangeOffset = 1 - paddingRangeStart; + } + + // If the end of the range has collided with the last pager, negatively offset as needed + + if (paddingRangeEnd > lastIndex - 1) { + paddingRangeOffset = (lastIndex - 1) - paddingRangeEnd; + } + + // Calcuate the first index of the range taking into account any offset + + i = paddingRangeStart + paddingRangeOffset; + + // Iteratate through the range, adding the respective indices: + + while (paddingRange) { + indices.push(i); + + i++; + paddingRange--; + } + + indices.push(lastIndex); + + return indices; + }, + + /** + * Renderes individual, per-page pagers. + * + * @private + * @param {number} i + * @param {mixitup.Operation} operation + * @param {number[]} [allowedIndices] + * @return {string} + */ + + renderPager: function(i, operation, allowedIndices) { + var self = this, + renderer = null, + activePage = operation.newPagination.page - 1, + model = new mixitup.ModelPager(), + output = ''; + + if ( + self.config.pagination.maxPagers < Infinity && + allowedIndices.length && + allowedIndices.indexOf(i) < 0 + ) { + // maxPagers is set, and this pager is not in the allowed range + + return ''; + } + + renderer = typeof (renderer = self.config.render.pager) === 'function' ? renderer : null; + + model.isPageLink = true; + + model.classList.push(self.classNamesPager.base); + + if (i === 0) { + model.classList.push(self.classNamesPager.first); + } + + if (i === operation.newTotalPages - 1) { + model.classList.push(self.classNamesPager.last); + } + + if (i === activePage) { + model.classList.push(self.classNamesPager.active); + } + + model.classNames = model.classList.join(' '); + model.pageNumber = i + 1; + + if (renderer) { + output = renderer(model); + } else { + output = h.template(self.config.templates.pager)(model); + } + + return output; + }, + + /** + * @private + * @param {HTMLElement} pageStatsEl + * @param {mixitup.Operation} operation + * @return {void} + */ + + renderPageStatsEl: function(pageStatsEl, operation) { + var self = this, + model = new mixitup.ModelPageStats(), + renderer = null, + output = '', + template = ''; + + if ( + operation.newPagination.limit < 0 || + operation.newPagination.limit === Infinity || + (operation.newTotalPages < 2 && self.config.pagination.hidePageStatsIfSinglePage) + ) { + // Empty the pager list, and add disabled class + + pageStatsEl.innerHTML = ''; + + h.addClass(pageStatsEl, self.classNamesPageStats.disabled); + + return; + } + + renderer = typeof (renderer = self.config.render.pageStats) === 'function' ? renderer : null; + + model.totalTargets = operation.matching.length; + + if (model.totalTargets) { + template = operation.newPagination.limit === 1 ? + self.config.templates.pageStatsSingle : + self.config.templates.pageStats; + } else { + template = self.config.templates.pageStatsFail; + } + + if (model.totalTargets && operation.newPagination.limit > 0) { + model.startPageAt = ((operation.newPagination.page - 1) * operation.newPagination.limit) + 1; + model.endPageAt = Math.min(model.startPageAt + operation.newPagination.limit - 1, model.totalTargets); + } else { + model.startPageAt = model.endPageAt = 0; + } + + if (renderer) { + output = renderer(model); + } else { + output = h.template(template)(model); + } + + pageStatsEl.innerHTML = output; + + if (model.totalTargets) { + h.removeClass(pageStatsEl, self.classNamesPageStats.disabled); + } else { + h.addClass(pageStatsEl, self.classNamesPageStats.disabled); + } + }, + + /** + * @private + * @param {Array<*>} args + * @return {mixitup.UserInstruction} instruction + */ + + parsePaginateArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandPaginate(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (arg === null) continue; + + if (typeof arg === 'object' && h.isElement(arg, self.dom.document)) { + instruction.command.anchor = arg; + } else if (arg instanceof mixitup.CommandPaginate || typeof arg === 'object') { + h.extend(instruction.command, arg); + } else if (typeof arg === 'number') { + instruction.command.page = arg; + } else if (typeof arg === 'string' && !isNaN(parseInt(arg))) { + // e.g. "4" + + instruction.command.page = parseInt(arg); + } else if (typeof arg === 'string') { + instruction.command.action = arg; + } else if (typeof arg === 'boolean') { + instruction.animate = arg; + } else if (typeof arg === 'function') { + instruction.callback = arg; + } + } + + h.freeze(instruction); + + // NB: Don't freeze command as may need to be sanitized later by other methods + + return instruction; + }, + + /** + * Changes the current page and/or the current page limit. + * + * @example + * + * .paginate(page [, animate] [, callback]) + * + * @example Example 1: Changing the active page + * + * console.log(mixer.getState().activePagination.page); // 1 + * + * mixer.paginate(2) + * .then(function(state) { + * console.log(mixer.getState().activePagination.page === 2); // true + * }); + * + * @example Example 2: Progressing to the next page + * + * console.log(mixer.getState().activePagination.page); // 1 + * + * mixer.paginate('next') + * .then(function(state) { + * console.log(mixer.getState().activePagination.page === 2); // true + * }); + * + * @example Example 3: Starting a page from an abitrary "anchor" element + * + * var anchorEl = mixer.getState().show[3]; + * + * mixer.paginate(anchorEl) + * .then(function(state) { + * console.log(mixer.getState().activePagination.anchor === anchorEl); // true + * console.log(mixer.getState().show[0] === anchorEl); // true + * }); + * + * @example Example 4: Changing the page limit + * + * var anchorEl = mixer.getState().show[3]; + * + * console.log(mixer.getState().activePagination.limit); // 8 + * + * mixer.paginate({ + * limit: 4 + * }) + * .then(function(state) { + * console.log(mixer.getState().activePagination.limit === 4); // true + * }); + * + * @example Example 5: Changing the active page and page limit + * + * mixer.paginate({ + * limit: 4, + * page: 2 + * }) + * .then(function(state) { + * console.log(mixer.getState().activePagination.page === 2); // true + * console.log(mixer.getState().activePagination.limit === 4); // true + * }); + * + * @public + * @instance + * @param {(number|string|object|HTMLElement)} page + * A page number, string (`'next'`, `'prev'`), HTML element reference, or command object. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + paginate: function() { + var self = this, + instruction = self.parsePaginateArgs(arguments); + + return self.multimix({ + paginate: instruction.command + }, instruction.animate, instruction.callback); + }, + + /** + * A shorthand for `.paginate('next')`. Moves to the next page. + * + * @example + * + * .nextPage() + * + * @example Example: Moving to the next page + * + * console.log(mixer.getState().activePagination.page); // 1 + * + * mixer.nextPage() + * .then(function(state) { + * console.log(mixer.getState().activePagination.page === 2); // true + * }); + * + * @public + * @instance + * @return {Promise.} + * A promise resolving with the current state object. + */ + + nextPage: function() { + var self = this, + instruction = self.parsePaginateArgs(arguments); + + return self.multimix({ + paginate: { + action: 'next' + } + }, instruction.animate, instruction.callback); + }, + + /** + * A shorthand for `.paginate('prev')`. Moves to the previous page. + * + * @example + * + * .prevPage() + * + * @example Example: Moving to the previous page + * + * console.log(mixer.getState().activePagination.page); // 5 + * + * mixer.prevPage() + * .then(function(state) { + * console.log(mixer.getState().activePagination.page === 4); // true + * }); + * + * @public + * @instance + * @return {Promise.} + * A promise resolving with the current state object. + */ + + prevPage: function() { + var self = this, + instruction = self.parsePaginateArgs(arguments); + + return self.multimix({ + paginate: { + action: 'prev' + } + }, instruction.animate, instruction.callback); + } + }); + + mixitup.Facade.registerAction('afterConstruct', 'pagination', function(mixer) { + this.paginate = mixer.paginate.bind(mixer); + this.nextPage = mixer.nextPage.bind(mixer); + this.prevPage = mixer.prevPage.bind(mixer); + }); }; + + mixitupPagination.TYPE = 'mixitup-extension'; + mixitupPagination.NAME = 'mixitup-pagination'; + mixitupPagination.EXTENSION_VERSION = '3.3.0'; + mixitupPagination.REQUIRE_CORE_VERSION = '^3.1.8'; + + if (typeof exports === 'object' && typeof module === 'object') { + module.exports = mixitupPagination; + } else if (typeof define === 'function' && define.amd) { + define(function() { + return mixitupPagination; + }); + } else if (window.mixitup && typeof window.mixitup === 'function') { + mixitupPagination(window.mixitup); + } else { + throw new Error('[MixItUp Pagination] MixItUp core not found'); + }})(window); \ No newline at end of file diff --git a/themes/jamstackthemes/assets/js/libs/mixitup.js b/themes/jamstackthemes/assets/js/libs/mixitup.js new file mode 100755 index 0000000..a9af1f7 --- /dev/null +++ b/themes/jamstackthemes/assets/js/libs/mixitup.js @@ -0,0 +1,10682 @@ +/**! + * MixItUp v3.3.1 + * A high-performance, dependency-free library for animated filtering, sorting and more + * Build 94e0fbf6-cd0b-4987-b3c0-14b59b67b8a0 + * + * @copyright Copyright 2014-2018 KunkaLabs Limited. + * @author KunkaLabs Limited. + * @link https://www.kunkalabs.com/mixitup/ + * + * @license Commercial use requires a commercial license. + * https://www.kunkalabs.com/mixitup/licenses/ + * + * Non-commercial use permitted under same terms as CC BY-NC 3.0 license. + * http://creativecommons.org/licenses/by-nc/3.0/ + */ + +(function(window) { + 'use strict'; + + var mixitup = null, + h = null; + + (function() { + var VENDORS = ['webkit', 'moz', 'o', 'ms'], + canary = window.document.createElement('div'), + i = -1; + + // window.requestAnimationFrame + + for (i = 0; i < VENDORS.length && !window.requestAnimationFrame; i++) { + window.requestAnimationFrame = window[VENDORS[i] + 'RequestAnimationFrame']; + } + + // Element.nextElementSibling + + if (typeof canary.nextElementSibling === 'undefined') { + Object.defineProperty(window.Element.prototype, 'nextElementSibling', { + get: function() { + var el = this.nextSibling; + + while (el) { + if (el.nodeType === 1) { + return el; + } + + el = el.nextSibling; + } + + return null; + } + }); + } + + // Element.matches + + (function(ElementPrototype) { + ElementPrototype.matches = + ElementPrototype.matches || + ElementPrototype.machesSelector || + ElementPrototype.mozMatchesSelector || + ElementPrototype.msMatchesSelector || + ElementPrototype.oMatchesSelector || + ElementPrototype.webkitMatchesSelector || + function (selector) { + return Array.prototype.indexOf.call(this.parentElement.querySelectorAll(selector), this) > -1; + }; + })(window.Element.prototype); + + // Object.keys + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys + + if (!Object.keys) { + Object.keys = (function() { + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = false, + dontEnums = [], + dontEnumsLength = -1; + + hasDontEnumBug = !({ + toString: null + }) + .propertyIsEnumerable('toString'); + + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ]; + + dontEnumsLength = dontEnums.length; + + return function(obj) { + var result = [], + prop = '', + i = -1; + + if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + + return result; + }; + }()); + } + + // Array.isArray + // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray + + if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; + } + + // Object.create + // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/create + + if (typeof Object.create !== 'function') { + Object.create = (function(undefined) { + var Temp = function() {}; + + return function (prototype, propertiesObject) { + if (prototype !== Object(prototype) && prototype !== null) { + throw TypeError('Argument must be an object, or null'); + } + + Temp.prototype = prototype || {}; + + var result = new Temp(); + + Temp.prototype = null; + + if (propertiesObject !== undefined) { + Object.defineProperties(result, propertiesObject); + } + + if (prototype === null) { + /* jshint ignore:start */ + result.__proto__ = null; + /* jshint ignore:end */ + } + + return result; + }; + })(); + } + + // String.prototyoe.trim + + if (!String.prototype.trim) { + String.prototype.trim = function() { + return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); + }; + } + + // Array.prototype.indexOf + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf + + if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement) { + var n, k, t, len; + + if (this === null) { + throw new TypeError(); + } + + t = Object(this); + + len = t.length >>> 0; + + if (len === 0) { + return -1; + } + + n = 0; + + if (arguments.length > 1) { + n = Number(arguments[1]); + + if (n !== n) { + n = 0; + } else if (n !== 0 && n !== Infinity && n !== -Infinity) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + + if (n >= len) { + return -1; + } + + for (k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); k < len; k++) { + if (k in t && t[k] === searchElement) { + return k; + } + } + + return -1; + }; + } + + // Function.prototype.bind + // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind + + if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + var aArgs, self, FNOP, fBound; + + if (typeof this !== 'function') { + throw new TypeError(); + } + + aArgs = Array.prototype.slice.call(arguments, 1); + + self = this; + + FNOP = function() {}; + + fBound = function() { + return self.apply(this instanceof FNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + if (this.prototype) { + FNOP.prototype = this.prototype; + } + + fBound.prototype = new FNOP(); + + return fBound; + }; + } + + // Element.prototype.dispatchEvent + + if (!window.Element.prototype.dispatchEvent) { + window.Element.prototype.dispatchEvent = function(event) { + try { + return this.fireEvent('on' + event.type, event); + } catch (err) {} + }; + } + })(); + + /** + * The `mixitup()` "factory" function creates and returns individual instances + * of MixItUp, known as "mixers", on which API methods can be called. + * + * When loading MixItUp via a script tag, the factory function is accessed + * via the global variable `mixitup`. When using a module loading + * system (e.g. ES2015, CommonJS, RequireJS), the factory function is + * exported into your module when you require the MixItUp library. + * + * @example + * mixitup(container [,config] [,foreignDoc]) + * + * @example Example 1: Creating a mixer instance with an element reference + * var containerEl = document.querySelector('.container'); + * + * var mixer = mixitup(containerEl); + * + * @example Example 2: Creating a mixer instance with a selector string + * var mixer = mixitup('.container'); + * + * @example Example 3: Passing a configuration object + * var mixer = mixitup(containerEl, { + * animation: { + * effects: 'fade scale(0.5)' + * } + * }); + * + * @example Example 4: Passing an iframe reference + * var mixer = mixitup(containerEl, config, foreignDocument); + * + * @global + * @namespace + * @public + * @kind function + * @since 3.0.0 + * @param {(Element|string)} container + * A DOM element or selector string representing the container(s) on which to instantiate MixItUp. + * @param {object} [config] + * An optional "configuration object" used to customize the behavior of the MixItUp instance. + * @param {object} [foreignDoc] + * An optional reference to a `document`, which can be used to control a MixItUp instance in an iframe. + * @return {mixitup.Mixer} + * A "mixer" object holding the MixItUp instance. + */ + + mixitup = function(container, config, foreignDoc) { + var el = null, + returnCollection = false, + instance = null, + facade = null, + doc = null, + output = null, + instances = [], + id = '', + elements = [], + i = -1; + + doc = foreignDoc || window.document; + + if (returnCollection = arguments[3]) { + // A non-documented 4th paramater enabling control of multiple instances + + returnCollection = typeof returnCollection === 'boolean'; + } + + if (typeof container === 'string') { + elements = doc.querySelectorAll(container); + } else if (container && typeof container === 'object' && h.isElement(container, doc)) { + elements = [container]; + } else if (container && typeof container === 'object' && container.length) { + // Although not documented, the container may also be an array-like list of + // elements such as a NodeList or jQuery collection, is returnCollection is true + + elements = container; + } else { + throw new Error(mixitup.messages.errorFactoryInvalidContainer()); + } + + if (elements.length < 1) { + throw new Error(mixitup.messages.errorFactoryContainerNotFound()); + } + + for (i = 0; el = elements[i]; i++) { + if (i > 0 && !returnCollection) break; + + if (!el.id) { + id = 'MixItUp' + h.randomHex(); + + el.id = id; + } else { + id = el.id; + } + + if (mixitup.instances[id] instanceof mixitup.Mixer) { + instance = mixitup.instances[id]; + + if (!config || (config && config.debug && config.debug.showWarnings !== false)) { + console.warn(mixitup.messages.warningFactoryPreexistingInstance()); + } + } else { + instance = new mixitup.Mixer(); + + instance.attach(el, doc, id, config); + + mixitup.instances[id] = instance; + } + + facade = new mixitup.Facade(instance); + + if (config && config.debug && config.debug.enable) { + instances.push(instance); + } else { + instances.push(facade); + } + } + + if (returnCollection) { + output = new mixitup.Collection(instances); + } else { + // Return the first instance regardless + + output = instances[0]; + } + + return output; + }; + + /** + * The `.use()` static method is used to extend the functionality of mixitup with compatible + * extensions and libraries in an environment with modular scoping e.g. ES2015, CommonJS, or RequireJS. + * + * You need only call the `.use()` function once per project, per extension, as module loaders + * will cache a single reference to MixItUp inclusive of all changes made. + * + * @example + * mixitup.use(extension) + * + * @example Example 1: Extending MixItUp with the Pagination Extension + * + * import mixitup from 'mixitup'; + * import mixitupPagination from 'mixitup-pagination'; + * + * mixitup.use(mixitupPagination); + * + * // All mixers created by the factory function in all modules will now + * // have pagination functionality + * + * var mixer = mixitup('.container'); + * + * @public + * @name use + * @memberof mixitup + * @kind function + * @static + * @since 3.0.0 + * @param {*} extension A reference to the extension or library to be used. + * @return {void} + */ + + mixitup.use = function(extension) { + mixitup.Base.prototype.callActions.call(mixitup, 'beforeUse', arguments); + + // Call the extension's factory function, passing + // the mixitup factory as a paramater + + if (typeof extension === 'function' && extension.TYPE === 'mixitup-extension') { + // Mixitup extension + + if (typeof mixitup.extensions[extension.NAME] === 'undefined') { + extension(mixitup); + + mixitup.extensions[extension.NAME] = extension; + } + } else if (extension.fn && extension.fn.jquery) { + // jQuery + + mixitup.libraries.$ = extension; + } + + mixitup.Base.prototype.callActions.call(mixitup, 'afterUse', arguments); + }; + + mixitup.instances = {}; + mixitup.extensions = {}; + mixitup.libraries = {}; + + /** + * @private + */ + + h = { + + /** + * @private + * @param {HTMLElement} el + * @param {string} cls + * @return {boolean} + */ + + hasClass: function(el, cls) { + return !!el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); + }, + + /** + * @private + * @param {HTMLElement} el + * @param {string} cls + * @return {void} + */ + + addClass: function(el, cls) { + if (!this.hasClass(el, cls)) el.className += el.className ? ' ' + cls : cls; + }, + + /** + * @private + * @param {HTMLElement} el + * @param {string} cls + * @return {void} + */ + + removeClass: function(el, cls) { + if (this.hasClass(el, cls)) { + var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); + + el.className = el.className.replace(reg, ' ').trim(); + } + }, + + /** + * Merges the properties of the source object onto the + * target object. Alters the target object. + * + * @private + * @param {object} destination + * @param {object} source + * @param {boolean} [deep=false] + * @param {boolean} [handleErrors=false] + * @return {void} + */ + + extend: function(destination, source, deep, handleErrors) { + var sourceKeys = [], + key = '', + i = -1; + + deep = deep || false; + handleErrors = handleErrors || false; + + try { + if (Array.isArray(source)) { + for (i = 0; i < source.length; i++) { + sourceKeys.push(i); + } + } else if (source) { + sourceKeys = Object.keys(source); + } + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + + if (!deep || typeof source[key] !== 'object' || this.isElement(source[key])) { + // All non-object properties, or all properties if shallow extend + + destination[key] = source[key]; + } else if (Array.isArray(source[key])) { + // Arrays + + if (!destination[key]) { + destination[key] = []; + } + + this.extend(destination[key], source[key], deep, handleErrors); + } else { + // Objects + + if (!destination[key]) { + destination[key] = {}; + } + + this.extend(destination[key], source[key], deep, handleErrors); + } + } + } catch(err) { + if (handleErrors) { + this.handleExtendError(err, destination); + } else { + throw err; + } + } + + return destination; + }, + + /** + * @private + * @param {Error} err + * @param {object} destination + * @return {void} + */ + + handleExtendError: function(err, destination) { + var re = /property "?(\w*)"?[,:] object/i, + matches = null, + erroneous = '', + message = '', + suggestion = '', + probableMatch = '', + key = '', + mostMatchingChars = -1, + i = -1; + + if (err instanceof TypeError && (matches = re.exec(err.message))) { + erroneous = matches[1]; + + for (key in destination) { + i = 0; + + while (i < erroneous.length && erroneous.charAt(i) === key.charAt(i)) { + i++; + } + + if (i > mostMatchingChars) { + mostMatchingChars = i; + probableMatch = key; + } + } + + if (mostMatchingChars > 1) { + suggestion = mixitup.messages.errorConfigInvalidPropertySuggestion({ + probableMatch: probableMatch + }); + } + + message = mixitup.messages.errorConfigInvalidProperty({ + erroneous: erroneous, + suggestion: suggestion + }); + + throw new TypeError(message); + } + + throw err; + }, + + /** + * @private + * @param {string} str + * @return {function} + */ + + template: function(str) { + var re = /\${([\w]*)}/g, + dynamics = {}, + matches = null; + + while ((matches = re.exec(str))) { + dynamics[matches[1]] = new RegExp('\\${' + matches[1] + '}', 'g'); + } + + return function(data) { + var key = '', + output = str; + + data = data || {}; + + for (key in dynamics) { + output = output.replace(dynamics[key], typeof data[key] !== 'undefined' ? data[key] : ''); + } + + return output; + }; + }, + + /** + * @private + * @param {HTMLElement} el + * @param {string} type + * @param {function} fn + * @param {boolean} useCapture + * @return {void} + */ + + on: function(el, type, fn, useCapture) { + if (!el) return; + + if (el.addEventListener) { + el.addEventListener(type, fn, useCapture); + } else if (el.attachEvent) { + el['e' + type + fn] = fn; + + el[type + fn] = function() { + el['e' + type + fn](window.event); + }; + + el.attachEvent('on' + type, el[type + fn]); + } + }, + + /** + * @private + * @param {HTMLElement} el + * @param {string} type + * @param {function} fn + * @return {void} + */ + + off: function(el, type, fn) { + if (!el) return; + + if (el.removeEventListener) { + el.removeEventListener(type, fn, false); + } else if (el.detachEvent) { + el.detachEvent('on' + type, el[type + fn]); + el[type + fn] = null; + } + }, + + /** + * @private + * @param {string} eventType + * @param {object} detail + * @param {Document} [doc] + * @return {CustomEvent} + */ + + getCustomEvent: function(eventType, detail, doc) { + var event = null; + + doc = doc || window.document; + + if (typeof window.CustomEvent === 'function') { + event = new window.CustomEvent(eventType, { + detail: detail, + bubbles: true, + cancelable: true + }); + } else if (typeof doc.createEvent === 'function') { + event = doc.createEvent('CustomEvent'); + event.initCustomEvent(eventType, true, true, detail); + } else { + event = doc.createEventObject(), + event.type = eventType; + + event.returnValue = false; + event.cancelBubble = false; + event.detail = detail; + } + + return event; + }, + + /** + * @private + * @param {Event} e + * @return {Event} + */ + + getOriginalEvent: function(e) { + if (e.touches && e.touches.length) { + return e.touches[0]; + } else if (e.changedTouches && e.changedTouches.length) { + return e.changedTouches[0]; + } else { + return e; + } + }, + + /** + * @private + * @param {HTMLElement} el + * @param {string} selector + * @return {Number} + */ + + index: function(el, selector) { + var i = 0; + + while ((el = el.previousElementSibling) !== null) { + if (!selector || el.matches(selector)) { + ++i; + } + } + + return i; + }, + + /** + * Converts a dash or snake-case string to camel case. + * + * @private + * @param {string} str + * @param {boolean} [isPascal] + * @return {string} + */ + + camelCase: function(str) { + return str.toLowerCase().replace(/([_-][a-z])/g, function($1) { + return $1.toUpperCase().replace(/[_-]/, ''); + }); + }, + + /** + * Converts a dash or snake-case string to pascal case. + * + * @private + * @param {string} str + * @param {boolean} [isPascal] + * @return {string} + */ + + pascalCase: function(str) { + return (str = this.camelCase(str)).charAt(0).toUpperCase() + str.slice(1); + }, + + /** + * Converts a camel or pascal-case string to dash case. + * + * @private + * @param {string} str + * @return {string} + */ + + dashCase: function(str) { + return str.replace(/([A-Z])/g, '-$1').replace(/^-/, '').toLowerCase(); + }, + + /** + * @private + * @param {HTMLElement} el + * @param {HTMLHtmlElement} [doc] + * @return {boolean} + */ + + isElement: function(el, doc) { + doc = doc || window.document; + + if ( + window.HTMLElement && + el instanceof window.HTMLElement + ) { + return true; + } else if ( + doc.defaultView && + doc.defaultView.HTMLElement && + el instanceof doc.defaultView.HTMLElement + ) { + return true; + } else { + return ( + el !== null && + el.nodeType === 1 && + typeof el.nodeName === 'string' + ); + } + }, + + /** + * @private + * @param {string} htmlString + * @param {HTMLHtmlElement} [doc] + * @return {DocumentFragment} + */ + + createElement: function(htmlString, doc) { + var frag = null, + temp = null; + + doc = doc || window.document; + + frag = doc.createDocumentFragment(); + temp = doc.createElement('div'); + + temp.innerHTML = htmlString.trim(); + + while (temp.firstChild) { + frag.appendChild(temp.firstChild); + } + + return frag; + }, + + /** + * @private + * @param {Node} node + * @return {void} + */ + + removeWhitespace: function(node) { + var deleting; + + while (node && node.nodeName === '#text') { + deleting = node; + + node = node.previousSibling; + + deleting.parentElement && deleting.parentElement.removeChild(deleting); + } + }, + + /** + * @private + * @param {Array<*>} a + * @param {Array<*>} b + * @return {boolean} + */ + + isEqualArray: function(a, b) { + var i = a.length; + + if (i !== b.length) return false; + + while (i--) { + if (a[i] !== b[i]) return false; + } + + return true; + }, + + /** + * @private + * @param {object} a + * @param {object} b + * @return {boolean} + */ + + deepEquals: function(a, b) { + var key; + + if (typeof a === 'object' && a && typeof b === 'object' && b) { + if (Object.keys(a).length !== Object.keys(b).length) return false; + + for (key in a) { + if (!b.hasOwnProperty(key) || !this.deepEquals(a[key], b[key])) return false; + } + } else if (a !== b) { + return false; + } + + return true; + }, + + /** + * @private + * @param {Array<*>} oldArray + * @return {Array<*>} + */ + + arrayShuffle: function(oldArray) { + var newArray = oldArray.slice(), + len = newArray.length, + i = len, + p = -1, + t = []; + + while (i--) { + p = ~~(Math.random() * len); + t = newArray[i]; + + newArray[i] = newArray[p]; + newArray[p] = t; + } + + return newArray; + }, + + /** + * @private + * @param {object} list + */ + + arrayFromList: function(list) { + var output, i; + + try { + return Array.prototype.slice.call(list); + } catch(err) { + output = []; + + for (i = 0; i < list.length; i++) { + output.push(list[i]); + } + + return output; + } + }, + + /** + * @private + * @param {function} func + * @param {Number} wait + * @param {boolean} immediate + * @return {function} + */ + + debounce: function(func, wait, immediate) { + var timeout; + + return function() { + var self = this, + args = arguments, + callNow = immediate && !timeout, + later = null; + + later = function() { + timeout = null; + + if (!immediate) { + func.apply(self, args); + } + }; + + clearTimeout(timeout); + + timeout = setTimeout(later, wait); + + if (callNow) func.apply(self, args); + }; + }, + + /** + * @private + * @param {HTMLElement} element + * @return {object} + */ + + position: function(element) { + var xPosition = 0, + yPosition = 0, + offsetParent = element; + + while (element) { + xPosition -= element.scrollLeft; + yPosition -= element.scrollTop; + + if (element === offsetParent) { + xPosition += element.offsetLeft; + yPosition += element.offsetTop; + + offsetParent = element.offsetParent; + } + + element = element.parentElement; + } + + return { + x: xPosition, + y: yPosition + }; + }, + + /** + * @private + * @param {object} node1 + * @param {object} node2 + * @return {Number} + */ + + getHypotenuse: function(node1, node2) { + var distanceX = node1.x - node2.x, + distanceY = node1.y - node2.y; + + distanceX = distanceX < 0 ? distanceX * -1 : distanceX, + distanceY = distanceY < 0 ? distanceY * -1 : distanceY; + + return Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)); + }, + + /** + * Calcuates the area of intersection between two rectangles and expresses it as + * a ratio in comparison to the area of the first rectangle. + * + * @private + * @param {Rect} box1 + * @param {Rect} box2 + * @return {number} + */ + + getIntersectionRatio: function(box1, box2) { + var controlArea = box1.width * box1.height, + intersectionX = -1, + intersectionY = -1, + intersectionArea = -1, + ratio = -1; + + intersectionX = + Math.max(0, Math.min(box1.left + box1.width, box2.left + box2.width) - Math.max(box1.left, box2.left)); + + intersectionY = + Math.max(0, Math.min(box1.top + box1.height, box2.top + box2.height) - Math.max(box1.top, box2.top)); + + intersectionArea = intersectionY * intersectionX; + + ratio = intersectionArea / controlArea; + + return ratio; + }, + + /** + * @private + * @param {object} el + * @param {string} selector + * @param {boolean} [includeSelf] + * @param {HTMLHtmlElement} [doc] + * @return {Element|null} + */ + + closestParent: function(el, selector, includeSelf, doc) { + var parent = el.parentNode; + + doc = doc || window.document; + + if (includeSelf && el.matches(selector)) { + return el; + } + + while (parent && parent != doc.body) { + if (parent.matches && parent.matches(selector)) { + return parent; + } else if (parent.parentNode) { + parent = parent.parentNode; + } else { + return null; + } + } + + return null; + }, + + /** + * @private + * @param {HTMLElement} el + * @param {string} selector + * @param {HTMLHtmlElement} [doc] + * @return {NodeList} + */ + + children: function(el, selector, doc) { + var children = [], + tempId = ''; + + doc = doc || window.doc; + + if (el) { + if (!el.id) { + tempId = 'Temp' + this.randomHexKey(); + + el.id = tempId; + } + + children = doc.querySelectorAll('#' + el.id + ' > ' + selector); + + if (tempId) { + el.removeAttribute('id'); + } + } + + return children; + }, + + /** + * Creates a clone of a provided array, with any empty strings removed. + * + * @private + * @param {Array<*>} originalArray + * @return {Array<*>} + */ + + clean: function(originalArray) { + var cleanArray = [], + i = -1; + + for (i = 0; i < originalArray.length; i++) { + if (originalArray[i] !== '') { + cleanArray.push(originalArray[i]); + } + } + + return cleanArray; + }, + + /** + * Abstracts an ES6 promise into a q-like deferred interface for storage and deferred resolution. + * + * @private + * @param {object} libraries + * @return {h.Deferred} + */ + + defer: function(libraries) { + var deferred = null, + promiseWrapper = null, + $ = null; + + promiseWrapper = new this.Deferred(); + + if (mixitup.features.has.promises) { + // ES6 native promise or polyfill + + promiseWrapper.promise = new Promise(function(resolve, reject) { + promiseWrapper.resolve = resolve; + promiseWrapper.reject = reject; + }); + } else if (($ = (window.jQuery || libraries.$)) && typeof $.Deferred === 'function') { + // jQuery + + deferred = $.Deferred(); + + promiseWrapper.promise = deferred.promise(); + promiseWrapper.resolve = deferred.resolve; + promiseWrapper.reject = deferred.reject; + } else if (window.console) { + // No implementation + + console.warn(mixitup.messages.warningNoPromiseImplementation()); + } + + return promiseWrapper; + }, + + /** + * @private + * @param {Array} tasks + * @param {object} libraries + * @return {Promise} + */ + + all: function(tasks, libraries) { + var $ = null; + + if (mixitup.features.has.promises) { + return Promise.all(tasks); + } else if (($ = (window.jQuery || libraries.$)) && typeof $.when === 'function') { + return $.when.apply($, tasks) + .done(function() { + // jQuery when returns spread arguments rather than an array or resolutions + + return arguments; + }); + } + + // No implementation + + if (window.console) { + console.warn(mixitup.messages.warningNoPromiseImplementation()); + } + + return []; + }, + + /** + * @private + * @param {HTMLElement} el + * @param {string} property + * @param {Array} vendors + * @return {string} + */ + + getPrefix: function(el, property, vendors) { + var i = -1, + prefix = ''; + + if (h.dashCase(property) in el.style) return ''; + + for (i = 0; prefix = vendors[i]; i++) { + if (prefix + property in el.style) { + return prefix.toLowerCase(); + } + } + + return 'unsupported'; + }, + + /** + * @private + * @return {string} + */ + + randomHex: function() { + return ('00000' + (Math.random() * 16777216 << 0).toString(16)).substr(-6).toUpperCase(); + }, + + /** + * @private + * @param {HTMLDocument} [doc] + * @return {object} + */ + + getDocumentState: function(doc) { + doc = typeof doc.body === 'object' ? doc : window.document; + + return { + scrollTop: window.pageYOffset, + scrollLeft: window.pageXOffset, + docHeight: doc.documentElement.scrollHeight, + docWidth: doc.documentElement.scrollWidth, + viewportHeight: doc.documentElement.clientHeight, + viewportWidth: doc.documentElement.clientWidth + }; + }, + + /** + * @private + * @param {object} obj + * @param {function} fn + * @return {function} + */ + + bind: function(obj, fn) { + return function() { + return fn.apply(obj, arguments); + }; + }, + + /** + * @private + * @param {HTMLElement} el + * @return {boolean} + */ + + isVisible: function(el) { + var styles = null; + + if (el.offsetParent) return true; + + styles = window.getComputedStyle(el); + + if ( + styles.position === 'fixed' && + styles.visibility !== 'hidden' && + styles.opacity !== '0' + ) { + // Fixed elements report no offsetParent, + // but may still be invisible + + return true; + } + + return false; + }, + + /** + * @private + * @param {object} obj + */ + + seal: function(obj) { + if (typeof Object.seal === 'function') { + Object.seal(obj); + } + }, + + /** + * @private + * @param {object} obj + */ + + freeze: function(obj) { + if (typeof Object.freeze === 'function') { + Object.freeze(obj); + } + }, + + /** + * @private + * @param {string} control + * @param {string} specimen + * @return {boolean} + */ + + compareVersions: function(control, specimen) { + var controlParts = control.split('.'), + specimenParts = specimen.split('.'), + controlPart = -1, + specimenPart = -1, + i = -1; + + for (i = 0; i < controlParts.length; i++) { + controlPart = parseInt(controlParts[i].replace(/[^\d.]/g, '')); + specimenPart = parseInt(specimenParts[i].replace(/[^\d.]/g, '') || 0); + + if (specimenPart < controlPart) { + return false; + } else if (specimenPart > controlPart) { + return true; + } + } + + return true; + }, + + /** + * @private + * @constructor + */ + + Deferred: function() { + this.promise = null; + this.resolve = null; + this.reject = null; + this.id = h.randomHex(); + }, + + /** + * @private + * @param {object} obj + * @return {boolean} + */ + + isEmptyObject: function(obj) { + var key = ''; + + if (typeof Object.keys === 'function') { + return Object.keys(obj).length === 0; + } + + for (key in obj) { + if (obj.hasOwnProperty(key)) { + return false; + } + } + + return true; + }, + + /** + * @param {mixitup.Config.ClassNames} classNames + * @param {string} elementName + * @param {string} [modifier] + * @return {string} + */ + + getClassname: function(classNames, elementName, modifier) { + var classname = ''; + + classname += classNames.block; + + if (classname.length) { + classname += classNames.delineatorElement; + } + + classname += classNames['element' + this.pascalCase(elementName)]; + + if (!modifier) return classname; + + if (classname.length) { + classname += classNames.delineatorModifier; + } + + classname += modifier; + + return classname; + }, + + /** + * Returns the value of a property on a given object via its string key. + * + * @param {object} obj + * @param {string} stringKey + * @return {*} value + */ + + getProperty: function(obj, stringKey) { + var parts = stringKey.split('.'), + returnCurrent = null, + current = '', + i = 0; + + if (!stringKey) { + return obj; + } + + returnCurrent = function(obj) { + if (!obj) { + return null; + } else { + return obj[current]; + } + }; + + while (i < parts.length) { + current = parts[i]; + + obj = returnCurrent(obj); + + i++; + } + + if (typeof obj !== 'undefined') { + return obj; + } else { + return null; + } + } + }; + + mixitup.h = h; + + /** + * The Base class adds instance methods to all other extensible MixItUp classes, + * enabling the calling of any registered hooks. + * + * @constructor + * @namespace + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.Base = function() {}; + + mixitup.Base.prototype = { + constructor: mixitup.Base, + + /** + * Calls any registered hooks for the provided action. + * + * @memberof mixitup.Base + * @private + * @instance + * @since 2.0.0 + * @param {string} actionName + * @param {Array<*>} args + * @return {void} + */ + + callActions: function(actionName, args) { + var self = this, + hooks = self.constructor.actions[actionName], + extensionName = ''; + + if (!hooks || h.isEmptyObject(hooks)) return; + + for (extensionName in hooks) { + hooks[extensionName].apply(self, args); + } + }, + + /** + * Calls any registered hooks for the provided filter. + * + * @memberof mixitup.Base + * @private + * @instance + * @since 2.0.0 + * @param {string} filterName + * @param {*} input + * @param {Array<*>} args + * @return {*} + */ + + callFilters: function(filterName, input, args) { + var self = this, + hooks = self.constructor.filters[filterName], + output = input, + extensionName = ''; + + if (!hooks || h.isEmptyObject(hooks)) return output; + + args = args || []; + + for (extensionName in hooks) { + args = h.arrayFromList(args); + + args.unshift(output); + + output = hooks[extensionName].apply(self, args); + } + + return output; + } + }; + + /** + * The BaseStatic class holds a set of static methods which are then added to all other + * extensible MixItUp classes as a means of integrating extensions via the addition of new + * methods and/or actions and hooks. + * + * @constructor + * @namespace + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.BaseStatic = function() { + this.actions = {}; + this.filters = {}; + + /** + * Performs a shallow extend on the class's prototype, adding one or more new members to + * the class in a single operation. + * + * @memberof mixitup.BaseStatic + * @public + * @static + * @since 2.1.0 + * @param {object} extension + * @return {void} + */ + + this.extend = function(extension) { + h.extend(this.prototype, extension); + }; + + /** + * Registers a function to be called on the action hook of the provided name. + * + * @memberof mixitup.BaseStatic + * @public + * @static + * @since 2.1.0 + * @param {string} hookName + * @param {string} extensionName + * @param {function} func + * @return {void} + */ + + this.registerAction = function(hookName, extensionName, func) { + (this.actions[hookName] = this.actions[hookName] || {})[extensionName] = func; + }; + + /** + * Registers a function to be called on the filter of the provided name. + * + * @memberof mixitup.BaseStatic + * @public + * @static + * @since 2.1.0 + * @param {string} hookName + * @param {string} extensionName + * @param {function} func + * @return {void} + */ + + this.registerFilter = function(hookName, extensionName, func) { + (this.filters[hookName] = this.filters[hookName] || {})[extensionName] = func; + }; + }; + + /** + * The `mixitup.Features` class performs all feature and CSS prefix detection + * neccessary for MixItUp to function correctly, as well as storing various + * string and array constants. All feature decection is on evaluation of the + * library and stored in a singleton instance for use by other internal classes. + * + * @constructor + * @namespace + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.Features = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.boxSizingPrefix = ''; + this.transformPrefix = ''; + this.transitionPrefix = ''; + + this.boxSizingPrefix = ''; + this.transformProp = ''; + this.transformRule = ''; + this.transitionProp = ''; + this.perspectiveProp = ''; + this.perspectiveOriginProp = ''; + + this.has = new mixitup.Has(); + + this.canary = null; + + this.BOX_SIZING_PROP = 'boxSizing'; + this.TRANSITION_PROP = 'transition'; + this.TRANSFORM_PROP = 'transform'; + this.PERSPECTIVE_PROP = 'perspective'; + this.PERSPECTIVE_ORIGIN_PROP = 'perspectiveOrigin'; + this.VENDORS = ['Webkit', 'moz', 'O', 'ms']; + + this.TWEENABLE = [ + 'opacity', + 'width', 'height', + 'marginRight', 'marginBottom', + 'x', 'y', + 'scale', + 'translateX', 'translateY', 'translateZ', + 'rotateX', 'rotateY', 'rotateZ' + ]; + + this.callActions('afterConstruct'); + }; + + mixitup.BaseStatic.call(mixitup.Features); + + mixitup.Features.prototype = Object.create(mixitup.Base.prototype); + + h.extend(mixitup.Features.prototype, + /** @lends mixitup.Features */ + { + constructor: mixitup.Features, + + /** + * @private + * @return {void} + */ + + init: function() { + var self = this; + + self.callActions('beforeInit', arguments); + + self.canary = document.createElement('div'); + + self.setPrefixes(); + self.runTests(); + + self.callActions('beforeInit', arguments); + }, + + /** + * @private + * @return {void} + */ + + runTests: function() { + var self = this; + + self.callActions('beforeRunTests', arguments); + + self.has.promises = typeof window.Promise === 'function'; + self.has.transitions = self.transitionPrefix !== 'unsupported'; + + self.callActions('afterRunTests', arguments); + + h.freeze(self.has); + }, + + /** + * @private + * @return {void} + */ + + setPrefixes: function() { + var self = this; + + self.callActions('beforeSetPrefixes', arguments); + + self.transitionPrefix = h.getPrefix(self.canary, 'Transition', self.VENDORS); + self.transformPrefix = h.getPrefix(self.canary, 'Transform', self.VENDORS); + self.boxSizingPrefix = h.getPrefix(self.canary, 'BoxSizing', self.VENDORS); + + self.boxSizingProp = self.boxSizingPrefix ? + self.boxSizingPrefix + h.pascalCase(self.BOX_SIZING_PROP) : self.BOX_SIZING_PROP; + + self.transitionProp = self.transitionPrefix ? + self.transitionPrefix + h.pascalCase(self.TRANSITION_PROP) : self.TRANSITION_PROP; + + self.transformProp = self.transformPrefix ? + self.transformPrefix + h.pascalCase(self.TRANSFORM_PROP) : self.TRANSFORM_PROP; + + self.transformRule = self.transformPrefix ? + '-' + self.transformPrefix + '-' + self.TRANSFORM_PROP : self.TRANSFORM_PROP; + + self.perspectiveProp = self.transformPrefix ? + self.transformPrefix + h.pascalCase(self.PERSPECTIVE_PROP) : self.PERSPECTIVE_PROP; + + self.perspectiveOriginProp = self.transformPrefix ? + self.transformPrefix + h.pascalCase(self.PERSPECTIVE_ORIGIN_PROP) : + self.PERSPECTIVE_ORIGIN_PROP; + + self.callActions('afterSetPrefixes', arguments); + } + }); + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.Has = function() { + this.transitions = false; + this.promises = false; + + h.seal(this); + }; + + // Assign a singleton instance to `mixitup.features` and initialise: + + mixitup.features = new mixitup.Features(); + + mixitup.features.init(); + + /** + * A group of properties defining the mixer's animation and effects settings. + * + * @constructor + * @memberof mixitup.Config + * @name animation + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigAnimation = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A boolean dictating whether or not animation should be enabled for the MixItUp instance. + * If `false`, all operations will occur instantly and syncronously, although callback + * functions and any returned promises will still be fulfilled. + * + * @example Example: Create a mixer with all animations disabled + * var mixer = mixitup(containerEl, { + * animation: { + * enable: false + * } + * }); + * + * @name enable + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default true + */ + + this.enable = true; + + /** + * A string of one or more space-seperated properties to which transitions will be + * applied for all filtering animations. + * + * Properties can be listed any order or combination, although they will be applied in a specific + * predefined order to produce consistent results. + * + * To learn more about available effects, experiment with our + * sandbox demo and try out the "Export config" button in the Animation options drop down. + * + * @example Example: Apply "fade" and "translateZ" effects to all animations + * // As targets are filtered in and out, they will fade between + * // opacity 1 and 0 and transform between translateZ(-100px) and + * // translateZ(0). + * + * var mixer = mixitup(containerEl, { + * animation: { + * effects: 'fade translateZ(-100px)' + * } + * }); + * + * @name effects + * @memberof mixitup.Config.animation + * @instance + * @type {string} + * @default 'fade scale' + */ + + this.effects = 'fade scale'; + + /** + * A string of one or more space-seperated effects to be applied only to filter-in + * animations, overriding `config.animation.effects` if set. + * + * @example Example: Apply downwards vertical translate to targets being filtered in + * + * var mixer = mixitup(containerEl, { + * animation: { + * effectsIn: 'fade translateY(-100%)' + * } + * }); + * + * @name effectsIn + * @memberof mixitup.Config.animation + * @instance + * @type {string} + * @default '' + */ + + this.effectsIn = ''; + + /** + * A string of one or more space-seperated effects to be applied only to filter-out + * animations, overriding `config.animation.effects` if set. + * + * @example Example: Apply upwards vertical translate to targets being filtered out + * + * var mixer = mixitup(containerEl, { + * animation: { + * effectsOut: 'fade translateY(-100%)' + * } + * }); + * + * @name effectsOut + * @memberof mixitup.Config.animation + * @instance + * @type {string} + * @default '' + */ + + this.effectsOut = ''; + + /** + * An integer dictating the duration of all MixItUp animations in milliseconds, not + * including any additional delay apllied via the `'stagger'` effect. + * + * @example Example: Apply an animation duration of 200ms to all mixitup animations + * + * var mixer = mixitup(containerEl, { + * animation: { + * duration: 200 + * } + * }); + * + * @name duration + * @memberof mixitup.Config.animation + * @instance + * @type {number} + * @default 600 + */ + + this.duration = 600; + + /** + * A valid CSS3 transition-timing function or shorthand. For a full list of accepted + * values, visit easings.net. + * + * @example Example 1: Apply "ease-in-out" easing to all animations + * + * var mixer = mixitup(containerEl, { + * animation: { + * easing: 'ease-in-out' + * } + * }); + * + * @example Example 2: Apply a custom "cubic-bezier" easing function to all animations + * var mixer = mixitup(containerEl, { + * animation: { + * easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)' + * } + * }); + * + * @name easing + * @memberof mixitup.Config.animation + * @instance + * @type {string} + * @default 'ease' + */ + + this.easing = 'ease'; + + /** + * A boolean dictating whether or not to apply perspective to the MixItUp container + * during animations. By default, perspective is always applied and creates the + * illusion of three-dimensional space for effects such as `translateZ`, `rotateX`, + * and `rotateY`. + * + * You may wish to disable this and define your own perspective settings via CSS. + * + * @example Example: Prevent perspective from being applied to any 3D transforms + * var mixer = mixitup(containerEl, { + * animation: { + * applyPerspective: false + * } + * }); + * + * @name applyPerspective + * @memberof mixitup.Config.animation + * @instance + * @type {bolean} + * @default true + */ + + this.applyPerspective = true; + + /** + * The perspective distance value to be applied to the container during animations, + * affecting any 3D-transform-based effects. + * + * @example Example: Set a perspective distance of 2000px + * var mixer = mixitup(containerEl, { + * animation: { + * effects: 'rotateY(-25deg)', + * perspectiveDistance: '2000px' + * } + * }); + * + * @name perspectiveDistance + * @memberof mixitup.Config.animation + * @instance + * @type {string} + * @default '3000px' + */ + + this.perspectiveDistance = '3000px'; + + /** + * The perspective-origin value to be applied to the container during animations, + * affecting any 3D-transform-based effects. + * + * @example Example: Set a perspective origin in the top-right of the container + * var mixer = mixitup(containerEl, { + * animation: { + * effects: 'transateZ(-200px)', + * perspectiveOrigin: '100% 0' + * } + * }); + * + * @name perspectiveOrigin + * @memberof mixitup.Config.animation + * @instance + * @type {string} + * @default '50% 50%' + */ + + this.perspectiveOrigin = '50% 50%'; + + /** + * A boolean dictating whether or not to enable the queuing of operations. + * + * If `true` (default), and a control is clicked or an API call is made while another + * operation is progress, the operation will go into the queue and will be automatically exectuted + * when the previous operaitons is finished. + * + * If `false`, any requested operations will be ignored, and the `onMixBusy` callback and `mixBusy` + * event will be fired. If `debug.showWarnings` is enabled, a console warning will also occur. + * + * @example Example: Disable queuing + * var mixer = mixitup(containerEl, { + * animation: { + * queue: false + * } + * }); + * + * @name queue + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default true + */ + + this.queue = true; + + /** + * An integer dictacting the maximum number of operations allowed in the queue at + * any time, when queuing is enabled. + * + * @example Example: Allow a maximum of 5 operations in the queue at any time + * var mixer = mixitup(containerEl, { + * animation: { + * queueLimit: 5 + * } + * }); + * + * @name queueLimit + * @memberof mixitup.Config.animation + * @instance + * @type {number} + * @default 3 + */ + + this.queueLimit = 3; + + /** + * A boolean dictating whether or not to transition the height and width of the + * container as elements are filtered in and out. If disabled, the container height + * will change abruptly. + * + * It may be desirable to disable this on mobile devices as the CSS `height` and + * `width` properties do not receive GPU-acceleration and can therefore cause stuttering. + * + * @example Example 1: Disable the transitioning of the container height and/or width + * var mixer = mixitup(containerEl, { + * animation: { + * animateResizeContainer: false + * } + * }); + * + * @example Example 2: Disable the transitioning of the container height and/or width for mobile devices only + * var mixer = mixitup(containerEl, { + * animation: { + * animateResizeContainer: myFeatureTests.isMobile ? false : true + * } + * }); + * + * @name animateResizeContainer + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default true + */ + + this.animateResizeContainer = true; + + /** + * A boolean dictating whether or not to transition the height and width of target + * elements as they change throughout the course of an animation. + * + * This is often a must for flex-box grid layouts where the size of target elements may change + * depending on final their position in relation to their siblings, or for `.changeLayout()` + * operations where the size of targets change between layouts. + * + * NB: This feature requires additional calculations and manipulation to non-hardware-accelerated + * properties which may adversely affect performance on slower devices, and is therefore + * disabled by default. + * + * @example Example: Enable the transitioning of target widths and heights + * var mixer = mixitup(containerEl, { + * animation: { + * animateResizeTargets: true + * } + * }); + * + * @name animateResizeTargets + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default false + */ + + this.animateResizeTargets = false; + + /** + * A custom function used to manipulate the order in which the stagger delay is + * incremented when using the ‘stagger’ effect. + * + * When using the 'stagger' effect, the delay applied to each target element is incremented + * based on its index. You may create a custom function to manipulate the order in which the + * delay is incremented and create engaging non-linear stagger effects. + * + * The function receives the index of the target element as a parameter, and must + * return an integer which serves as the multiplier for the stagger delay. + * + * @example Example 1: Stagger target elements by column in a 3-column grid + * var mixer = mixitup(containerEl, { + * animation: { + * effects: 'fade stagger(100ms)', + * staggerSequence: function(i) { + * return i % 3; + * } + * } + * }); + * + * @example Example 2: Using an algorithm to produce a more complex sequence + * var mixer = mixitup(containerEl, { + * animation: { + * effects: 'fade stagger(100ms)', + * staggerSequence: function(i) { + * return (2*i) - (5*((i/3) - ((1/3) * (i%3)))); + * } + * } + * }); + * + * @name staggerSequence + * @memberof mixitup.Config.animation + * @instance + * @type {function} + * @default null + */ + + this.staggerSequence = null; + + /** + * A boolean dictating whether or not to reverse the direction of `translate` + * and `rotate` transforms for elements being filtered out. + * + * It can be used to create carousel-like animations where elements enter and exit + * from opposite directions. If enabled, the effect `translateX(-100%)` for elements + * being filtered in would become `translateX(100%)` for targets being filtered out. + * + * This functionality can also be achieved by providing seperate effects + * strings for `config.animation.effectsIn` and `config.animation.effectsOut`. + * + * @example Example: Reverse the desired direction on any translate/rotate effect for targets being filtered out + * // Elements being filtered in will be translated from '100%' to '0' while + * // elements being filtered out will be translated from 0 to '-100%' + * + * var mixer = mixitup(containerEl, { + * animation: { + * effects: 'fade translateX(100%)', + * reverseOut: true, + * nudge: false // Disable nudging to create a carousel-like effect + * } + * }); + * + * @name reverseOut + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default false + */ + + this.reverseOut = false; + + /** + * A boolean dictating whether or not to "nudge" the animation path of targets + * when they are being filtered in and out simulatenously. + * + * This has been the default behavior of MixItUp since version 1, but it + * may be desirable to disable this effect when filtering directly from + * one exclusive set of targets to a different exclusive set of targets, + * to create a carousel-like effect, or a generally more subtle animation. + * + * @example Example: Disable the "nudging" of targets being filtered in and out simulatenously + * + * var mixer = mixitup(containerEl, { + * animation: { + * nudge: false + * } + * }); + * + * @name nudge + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default true + */ + + this.nudge = true; + + /** + * A boolean dictating whether or not to clamp the height of the container while MixItUp's + * geometry tests are carried out before an operation. + * + * To prevent scroll-bar flicker, clamping is turned on by default. But in the case where the + * height of the container might affect its vertical positioning in the viewport + * (e.g. a vertically-centered container), this should be turned off to ensure accurate + * test results and a smooth animation. + * + * @example Example: Disable container height-clamping + * + * var mixer = mixitup(containerEl, { + * animation: { + * clampHeight: false + * } + * }); + * + * @name clampHeight + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default true + */ + + this.clampHeight = true; + + /** + * A boolean dictating whether or not to clamp the width of the container while MixItUp's + * geometry tests are carried out before an operation. + * + * To prevent scroll-bar flicker, clamping is turned on by default. But in the case where the + * width of the container might affect its horitzontal positioning in the viewport + * (e.g. a horizontall-centered container), this should be turned off to ensure accurate + * test results and a smooth animation. + * + * @example Example: Disable container width-clamping + * + * var mixer = mixitup(containerEl, { + * animation: { + * clampWidth: false + * } + * }); + * + * @name clampWidth + * @memberof mixitup.Config.animation + * @instance + * @type {boolean} + * @default true + */ + + this.clampWidth = true; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigAnimation); + + mixitup.ConfigAnimation.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigAnimation.prototype.constructor = mixitup.ConfigAnimation; + + /** + * A group of properties relating to the behavior of the Mixer. + * + * @constructor + * @memberof mixitup.Config + * @name behavior + * @namespace + * @public + * @since 3.1.12 + */ + + mixitup.ConfigBehavior = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A boolean dictating whether to allow "live" sorting of the mixer. + * + * Because of the expensive nature of sorting, MixItUp makes use of several + * internal optimizations to skip redundant sorting operations, such as when + * the newly requested sort command is the same as the active one. The caveat + * to this optimization is that "live" edits to the value of a target's sorting + * attribute will be ignored when requesting a re-sort by the same attribute. + * + * By setting to `behavior.liveSort` to `true`, the mixer will always re-sort + * regardless of whether or not the sorting attribute and order have changed. + * + * @example Example: Enabling `liveSort` to allow for re-sorting + * + * var mixer = mixitup(containerEl, { + * behavior: { + * liveSort: true + * }, + * load: { + * sort: 'edited:desc' + * } + * }); + * + * var target = containerEl.children[3]; + * + * console.log(target.getAttribute('data-edited')); // '2015-04-24' + * + * target.setAttribute('data-edited', '2017-08-10'); // Update the target's edited date + * + * mixer.sort('edited:desc') + * .then(function(state) { + * // The target is now at the top of the list + * + * console.log(state.targets[0] === target); // true + * }); + * + * @name liveSort + * @memberof mixitup.Config.behavior + * @instance + * @type {boolean} + * @default false + */ + + this.liveSort = false; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigBehavior); + + mixitup.ConfigBehavior.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigBehavior.prototype.constructor = mixitup.ConfigBehavior; + + /** + * A group of optional callback functions to be invoked at various + * points within the lifecycle of a mixer operation. + * + * Each function is analogous to an event of the same name triggered from the + * container element, and is invoked immediately after it. + * + * All callback functions receive the current `state` object as their first + * argument, as well as other more specific arguments described below. + * + * @constructor + * @memberof mixitup.Config + * @name callbacks + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigCallbacks = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A callback function invoked immediately after any MixItUp operation is requested + * and before animations have begun. + * + * A second `futureState` argument is passed to the function which represents the final + * state of the mixer once the requested operation has completed. + * + * @example Example: Adding an `onMixStart` callback function + * var mixer = mixitup(containerEl, { + * callbacks: { + * onMixStart: function(state, futureState) { + * console.log('Starting operation...'); + * } + * } + * }); + * + * @name onMixStart + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onMixStart = null; + + /** + * A callback function invoked when a MixItUp operation is requested while another + * operation is in progress, and the animation queue is full, or queueing + * is disabled. + * + * @example Example: Adding an `onMixBusy` callback function + * var mixer = mixitup(containerEl, { + * callbacks: { + * onMixBusy: function(state) { + * console.log('Mixer busy'); + * } + * } + * }); + * + * @name onMixBusy + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onMixBusy = null; + + /** + * A callback function invoked after any MixItUp operation has completed, and the + * state has been updated. + * + * @example Example: Adding an `onMixEnd` callback function + * var mixer = mixitup(containerEl, { + * callbacks: { + * onMixEnd: function(state) { + * console.log('Operation complete'); + * } + * } + * }); + * + * @name onMixEnd + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onMixEnd = null; + + /** + * A callback function invoked whenever an operation "fails", i.e. no targets + * could be found matching the requested filter. + * + * @example Example: Adding an `onMixFail` callback function + * var mixer = mixitup(containerEl, { + * callbacks: { + * onMixFail: function(state) { + * console.log('No items could be found matching the requested filter'); + * } + * } + * }); + * + * @name onMixFail + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onMixFail = null; + + /** + * A callback function invoked whenever a MixItUp control is clicked, and before its + * respective operation is requested. + * + * The clicked element is assigned to the `this` keyword within the function. The original + * click event is passed to the function as the second argument, which can be useful if + * using `` tags as controls where the default behavior needs to be prevented. + * + * Returning `false` from the callback will prevent the control click from triggering + * an operation. + * + * @example Example 1: Adding an `onMixClick` callback function + * var mixer = mixitup(containerEl, { + * callbacks: { + * onMixClick: function(state, originalEvent) { + * console.log('The control "' + this.innerText + '" was clicked'); + * } + * } + * }); + * + * @example Example 2: Using `onMixClick` to manipulate the original click event + * var mixer = mixitup(containerEl, { + * callbacks: { + * onMixClick: function(state, originalEvent) { + * // Prevent original click event from bubbling up: + * originalEvent.stopPropagation(); + * + * // Prevent default behavior of clicked element: + * originalEvent.preventDefault(); + * } + * } + * }); + * + * @example Example 3: Using `onMixClick` to conditionally cancel operations + * var mixer = mixitup(containerEl, { + * callbacks: { + * onMixClick: function(state, originalEvent) { + * // Perform some conditional check: + * + * if (myApp.isLoading) { + * // By returning false, we can prevent the control click from triggering an operation. + * + * return false; + * } + * } + * } + * }); + * + * @name onMixClick + * @memberof mixitup.Config.callbacks + * @instance + * @type {function} + * @default null + */ + + this.onMixClick = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigCallbacks); + + mixitup.ConfigCallbacks.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigCallbacks.prototype.constructor = mixitup.ConfigCallbacks; + + /** + * A group of properties relating to clickable control elements. + * + * @constructor + * @memberof mixitup.Config + * @name controls + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigControls = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A boolean dictating whether or not controls should be enabled for the mixer instance. + * + * If `true` (default behavior), MixItUp will search the DOM for any clickable elements with + * `data-filter`, `data-sort` or `data-toggle` attributes, and bind them for click events. + * + * If `false`, no click handlers will be bound, and all functionality must therefore be performed + * via the mixer's API methods. + * + * If you do not intend to use the default controls, setting this property to `false` will + * marginally improve the startup time of your mixer instance, and will also prevent any other active + * mixer instances in the DOM which are bound to controls from controlling the instance. + * + * @example Example: Disabling controls + * var mixer = mixitup(containerEl, { + * controls: { + * enable: false + * } + * }); + * + * // With the default controls disabled, we can only control + * // the mixer via its API methods, e.g.: + * + * mixer.filter('.cat-1'); + * + * @name enable + * @memberof mixitup.Config.controls + * @instance + * @type {boolean} + * @default true + */ + + this.enable = true; + + /** + * A boolean dictating whether or not to use event delegation when binding click events + * to the default controls. + * + * If `false` (default behavior), each control button in the DOM will be found and + * individually bound when a mixer is instantiated, with their corresponding actions + * cached for performance. + * + * If `true`, a single click handler will be applied to the `window` (or container element - see + * `config.controls.scope`), and any click events triggered by elements with `data-filter`, + * `data-sort` or `data-toggle` attributes present will be handled as they propagate upwards. + * + * If you require a user interface where control buttons may be added, removed, or changed during the + * lifetime of a mixer, `controls.live` should be set to `true`. There is a marginal but unavoidable + * performance deficit when using live controls, as the value of each control button must be read + * from the DOM in real time once the click event has propagated. + * + * @example Example: Setting live controls + * var mixer = mixitup(containerEl, { + * controls: { + * live: true + * } + * }); + * + * // Control buttons can now be added, remove and changed without breaking + * // the mixer's UI + * + * @name live + * @memberof mixitup.Config.controls + * @instance + * @type {boolean} + * @default true + */ + + this.live = false; + + /** + * A string dictating the "scope" to use when binding or querying the default controls. The available + * values are `'global'` or `'local'`. + * + * When set to `'global'` (default behavior), MixItUp will query the entire document for control buttons + * to bind, or delegate click events from (see `config.controls.live`). + * + * When set to `'local'`, MixItUp will only query (or bind click events to) its own container element. + * This may be desireable if you require multiple active mixer instances within the same document, with + * controls that would otherwise intefere with each other if scoped globally. + * + * Conversely, if you wish to control multiple instances with a single UI, you would create one + * set of controls and keep the controls scope of each mixer set to `global`. + * + * @example Example: Setting 'local' scoped controls + * var mixerOne = mixitup(containerOne, { + * controls: { + * scope: 'local' + * } + * }); + * + * var mixerTwo = mixitup(containerTwo, { + * controls: { + * scope: 'local' + * } + * }); + * + * // Both mixers can now exist within the same document with + * // isolated controls placed within their container elements. + * + * @name scope + * @memberof mixitup.Config.controls + * @instance + * @type {string} + * @default 'global' + */ + + this.scope = 'global'; // enum: ['local' ,'global'] + + /** + * A string dictating the type of logic to apply when concatenating the filter selectors of + * active toggle buttons (i.e. any clickable element with a `data-toggle` attribute). + * + * If set to `'or'` (default behavior), selectors will be concatenated together as + * a comma-seperated list. For example: + * + * `'.cat-1, .cat-2'` (shows any elements matching `'.cat-1'` OR `'.cat-2'`) + * + * If set to `'and'`, selectors will be directly concatenated together. For example: + * + * `'.cat-1.cat-2'` (shows any elements which match both `'.cat-1'` AND `'.cat-2'`) + * + * @example Example: Setting "and" toggle logic + * var mixer = mixitup(containerEl, { + * controls: { + * toggleLogic: 'and' + * } + * }); + * + * @name toggleLogic + * @memberof mixitup.Config.controls + * @instance + * @type {string} + * @default 'or' + */ + + this.toggleLogic = 'or'; // enum: ['or', 'and'] + + /** + * A string dictating the filter behavior when all toggles are inactive. + * + * When set to `'all'` (default behavior), *all* targets will be shown by default + * when no toggles are active, or at the moment all active toggles are toggled off. + * + * When set to `'none'`, no targets will be shown by default when no toggles are + * active, or at the moment all active toggles are toggled off. + * + * @example Example 1: Setting the default toggle behavior to `'all'` + * var mixer = mixitup(containerEl, { + * controls: { + * toggleDefault: 'all' + * } + * }); + * + * mixer.toggleOn('.cat-2') + * .then(function() { + * // Deactivate all active toggles + * + * return mixer.toggleOff('.cat-2') + * }) + * .then(function(state) { + * console.log(state.activeFilter.selector); // 'all' + * console.log(state.totalShow); // 12 + * }); + * + * @example Example 2: Setting the default toggle behavior to `'none'` + * var mixer = mixitup(containerEl, { + * controls: { + * toggleDefault: 'none' + * } + * }); + * + * mixer.toggleOn('.cat-2') + * .then(function() { + * // Deactivate all active toggles + * + * return mixer.toggleOff('.cat-2') + * }) + * .then(function(state) { + * console.log(state.activeFilter.selector); // 'none' + * console.log(state.totalShow); // 0 + * }); + * + * @name toggleDefault + * @memberof mixitup.Config.controls + * @instance + * @type {string} + * @default 'all' + */ + + this.toggleDefault = 'all'; // enum: ['all', 'none'] + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigControls); + + mixitup.ConfigControls.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigControls.prototype.constructor = mixitup.ConfigControls; + + /** + * A group of properties defining the output and structure of class names programmatically + * added to controls and containers to reflect the state of the mixer. + * + * Most commonly, class names are added to controls by MixItUp to indicate that + * the control is active so that it can be styled accordingly - `'mixitup-control-active'` by default. + * + * Using a "BEM" like structure, each classname is broken into the three parts: + * a block namespace (`'mixitup'`), an element name (e.g. `'control'`), and an optional modifier + * name (e.g. `'active'`) reflecting the state of the element. + * + * By default, each part of the classname is concatenated together using single hyphens as + * delineators, but this can be easily customised to match the naming convention and style of + * your project. + * + * @constructor + * @memberof mixitup.Config + * @name classNames + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigClassNames = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * The "block" portion, or top-level namespace added to the start of any class names created by MixItUp. + * + * @example Example 1: changing the `config.classNames.block` value + * var mixer = mixitup(containerEl, { + * classNames: { + * block: 'portfolio' + * } + * }); + * + * // Active control output: "portfolio-control-active" + * + * @example Example 2: Removing `config.classNames.block` + * var mixer = mixitup(containerEl, { + * classNames: { + * block: '' + * } + * }); + * + * // Active control output: "control-active" + * + * @name block + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'mixitup' + */ + + this.block = 'mixitup'; + + /** + * The "element" portion of the class name added to container. + * + * @name elementContainer + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'container' + */ + + this.elementContainer = 'container'; + + /** + * The "element" portion of the class name added to filter controls. + * + * By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but + * each type's element value can be individually overwritten to match the unique classNames of your controls as needed. + * + * @example Example 1: changing the `config.classNames.elementFilter` value + * var mixer = mixitup(containerEl, { + * classNames: { + * elementFilter: 'filter' + * } + * }); + * + * // Active filter output: "mixitup-filter-active" + * + * @example Example 2: changing the `config.classNames.block` and `config.classNames.elementFilter` values + * var mixer = mixitup(containerEl, { + * classNames: { + * block: 'portfolio', + * elementFilter: 'filter' + * } + * }); + * + * // Active filter output: "portfolio-filter-active" + * + * @name elementFilter + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'control' + */ + + this.elementFilter = 'control'; + + /** + * The "element" portion of the class name added to sort controls. + * + * By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but + * each type's element value can be individually overwritten to match the unique classNames of your controls as needed. + * + * @example Example 1: changing the `config.classNames.elementSort` value + * var mixer = mixitup(containerEl, { + * classNames: { + * elementSort: 'sort' + * } + * }); + * + * // Active sort output: "mixitup-sort-active" + * + * @example Example 2: changing the `config.classNames.block` and `config.classNames.elementSort` values + * var mixer = mixitup(containerEl, { + * classNames: { + * block: 'portfolio', + * elementSort: 'sort' + * } + * }); + * + * // Active sort output: "portfolio-sort-active" + * + * @name elementSort + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'control' + */ + + this.elementSort = 'control'; + + /** + * The "element" portion of the class name added to multimix controls. + * + * By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but + * each type's element value can be individually overwritten to match the unique classNames of your controls as needed. + * + * @example Example 1: changing the `config.classNames.elementMultimix` value + * var mixer = mixitup(containerEl, { + * classNames: { + * elementMultimix: 'multimix' + * } + * }); + * + * // Active multimix output: "mixitup-multimix-active" + * + * @example Example 2: changing the `config.classNames.block` and `config.classNames.elementMultimix` values + * var mixer = mixitup(containerEl, { + * classNames: { + * block: 'portfolio', + * elementSort: 'multimix' + * } + * }); + * + * // Active multimix output: "portfolio-multimix-active" + * + * @name elementMultimix + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'control' + */ + + this.elementMultimix = 'control'; + + /** + * The "element" portion of the class name added to toggle controls. + * + * By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but + * each type's element value can be individually overwritten to match the unique classNames of your controls as needed. + * + * @example Example 1: changing the `config.classNames.elementToggle` value + * var mixer = mixitup(containerEl, { + * classNames: { + * elementToggle: 'toggle' + * } + * }); + * + * // Active toggle output: "mixitup-toggle-active" + * + * @example Example 2: changing the `config.classNames.block` and `config.classNames.elementToggle` values + * var mixer = mixitup(containerEl, { + * classNames: { + * block: 'portfolio', + * elementToggle: 'toggle' + * } + * }); + * + * // Active toggle output: "portfolio-toggle-active" + * + * @name elementToggle + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'control' + */ + + this.elementToggle = 'control'; + + /** + * The "modifier" portion of the class name added to active controls. + * @name modifierActive + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'active' + */ + + this.modifierActive = 'active'; + + /** + * The "modifier" portion of the class name added to disabled controls. + * + * @name modifierDisabled + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'disabled' + */ + + this.modifierDisabled = 'disabled'; + + /** + * The "modifier" portion of the class name added to the container when in a "failed" state. + * + * @name modifierFailed + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default 'failed' + */ + + this.modifierFailed = 'failed'; + + /** + * The delineator used between the "block" and "element" portions of any class name added by MixItUp. + * + * If the block portion is ommited by setting it to an empty string, no delineator will be added. + * + * @example Example: changing the delineator to match BEM convention + * var mixer = mixitup(containerEl, { + * classNames: { + * delineatorElement: '__' + * } + * }); + * + * // example active control output: "mixitup__control-active" + * + * @name delineatorElement + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default '-' + */ + + this.delineatorElement = '-'; + + /** + * The delineator used between the "element" and "modifier" portions of any class name added by MixItUp. + * + * If the element portion is ommited by setting it to an empty string, no delineator will be added. + * + * @example Example: changing both delineators to match BEM convention + * var mixer = mixitup(containerEl, { + * classNames: { + * delineatorElement: '__' + * delineatorModifier: '--' + * } + * }); + * + * // Active control output: "mixitup__control--active" + * + * @name delineatorModifier + * @memberof mixitup.Config.classNames + * @instance + * @type {string} + * @default '-' + */ + + this.delineatorModifier = '-'; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigClassNames); + + mixitup.ConfigClassNames.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigClassNames.prototype.constructor = mixitup.ConfigClassNames; + + /** + * A group of properties relating to MixItUp's dataset API. + * + * @constructor + * @memberof mixitup.Config + * @name data + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigData = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A string specifying the name of the key containing your data model's unique + * identifier (UID). To use the dataset API, a UID key must be specified and + * be present and unique on all objects in the dataset you provide to MixItUp. + * + * For example, if your dataset is made up of MongoDB documents, the UID + * key would be `'id'` or `'_id'`. + * + * @example Example: Setting the UID to `'id'` + * var mixer = mixitup(containerEl, { + * data: { + * uidKey: 'id' + * } + * }); + * + * @name uidKey + * @memberof mixitup.Config.data + * @instance + * @type {string} + * @default '' + */ + + this.uidKey = ''; + + /** + * A boolean dictating whether or not MixItUp should "dirty check" each object in + * your dataset for changes whenever `.dataset()` is called, and re-render any targets + * for which a change is found. + * + * Depending on the complexity of your data model, dirty checking can be expensive + * and is therefore disabled by default. + * + * NB: For changes to be detected, a new immutable instance of the edited model must be + * provided to mixitup, rather than manipulating properties on the existing instance. + * If your changes are a result of a DB write and read, you will most likely be calling + * `.dataset()` with a clean set of objects each time, so this will not be an issue. + * + * @example Example: Enabling dirty checking + * + * var myDataset = [ + * { + * id: 0, + * title: "Blog Post Title 0" + * ... + * }, + * { + * id: 1, + * title: "Blog Post Title 1" + * ... + * } + * ]; + * + * // Instantiate a mixer with a pre-loaded dataset, and a target renderer + * // function defined + * + * var mixer = mixitup(containerEl, { + * data: { + * uidKey: 'id', + * dirtyCheck: true + * }, + * load: { + * dataset: myDataset + * }, + * render: { + * target: function() { ... } + * } + * }); + * + * // For illustration, we will clone and edit the second object in the dataset. + * // NB: this would typically be done server-side in response to a DB update, + * and then re-queried via an API. + * + * myDataset[1] = Object.assign({}, myDataset[1]); + * + * myDataset[1].title = 'Blog Post Title 11'; + * + * mixer.dataset(myDataset) + * .then(function() { + * // the target with ID "1", will be re-rendered reflecting its new title + * }); + * + * @name dirtyCheck + * @memberof mixitup.Config.data + * @instance + * @type {boolean} + * @default false + */ + + this.dirtyCheck = false; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigData); + + mixitup.ConfigData.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigData.prototype.constructor = mixitup.ConfigData; + + /** + * A group of properties allowing the toggling of various debug features. + * + * @constructor + * @memberof mixitup.Config + * @name debug + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigDebug = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A boolean dictating whether or not the mixer instance returned by the + * `mixitup()` factory function should expose private properties and methods. + * + * By default, mixer instances only expose their public API, but enabling + * debug mode will give you access to various mixer internals which may aid + * in debugging, or the authoring of extensions. + * + * @example Example: Enabling debug mode + * + * var mixer = mixitup(containerEl, { + * debug: { + * enable: true + * } + * }); + * + * // Private properties and methods will now be visible on the mixer instance: + * + * console.log(mixer); + * + * @name enable + * @memberof mixitup.Config.debug + * @instance + * @type {boolean} + * @default false + */ + + this.enable = false; + + /** + * A boolean dictating whether or not warnings should be shown when various + * common gotchas occur. + * + * Warnings are intended to provide insights during development when something + * occurs that is not a fatal, but may indicate an issue with your integration, + * and are therefore turned on by default. However, you may wish to disable + * them in production. + * + * @example Example 1: Disabling warnings + * + * var mixer = mixitup(containerEl, { + * debug: { + * showWarnings: false + * } + * }); + * + * @example Example 2: Disabling warnings based on environment + * + * var showWarnings = myAppConfig.environment === 'development' ? true : false; + * + * var mixer = mixitup(containerEl, { + * debug: { + * showWarnings: showWarnings + * } + * }); + * + * @name showWarnings + * @memberof mixitup.Config.debug + * @instance + * @type {boolean} + * @default true + */ + + this.showWarnings = true; + + /** + * Used for server-side testing only. + * + * @private + * @name fauxAsync + * @memberof mixitup.Config.debug + * @instance + * @type {boolean} + * @default false + */ + + this.fauxAsync = false; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigDebug); + + mixitup.ConfigDebug.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigDebug.prototype.constructor = mixitup.ConfigDebug; + + /** + * A group of properties relating to the layout of the container. + * + * @constructor + * @memberof mixitup.Config + * @name layout + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigLayout = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A boolean dictating whether or not mixitup should query all descendants + * of the container for targets, or only immediate children. + * + * By default, mixitup will query all descendants matching the + * `selectors.target` selector when indexing targets upon instantiation. + * This allows for targets to be nested inside a sub-container which is + * useful when ring-fencing targets from locally scoped controls in your + * markup (see `controls.scope`). + * + * However, if you are building a more complex UI requiring the nesting + * of mixers within mixers, you will most likely want to limit targets to + * immediate children of the container by setting this property to `false`. + * + * @example Example: Restricting targets to immediate children + * + * var mixer = mixitup(containerEl, { + * layout: { + * allowNestedTargets: false + * } + * }); + * + * @name allowNestedTargets + * @memberof mixitup.Config.layout + * @instance + * @type {boolean} + * @default true + */ + + this.allowNestedTargets = true; + + /** + * A string specifying an optional class name to apply to the container when in + * its default state. + * + * By changing this class name or adding a class name to the container via the + * `.changeLayout()` API method, the CSS layout of the container can be changed, + * and MixItUp will attemp to gracefully animate the container and its targets + * between states. + * + * @example Example 1: Specifying a container class name + * + * var mixer = mixitup(containerEl, { + * layout: { + * containerClassName: 'grid' + * } + * }); + * + * @example Example 2: Changing the default class name with `.changeLayout()` + * + * var mixer = mixitup(containerEl, { + * layout: { + * containerClassName: 'grid' + * } + * }); + * + * mixer.changeLayout('list') + * .then(function(state) { + * console.log(state.activeContainerClass); // "list" + * }); + * + * @name containerClassName + * @memberof mixitup.Config.layout + * @instance + * @type {string} + * @default '' + */ + + this.containerClassName = ''; + + /** + * A reference to a non-target sibling element after which to insert targets + * when there are no targets in the container. + * + * @example Example: Setting a `siblingBefore` reference element + * + * var addButton = containerEl.querySelector('button'); + * + * var mixer = mixitup(containerEl, { + * layout: { + * siblingBefore: addButton + * } + * }); + * + * @name siblingBefore + * @memberof mixitup.Config.layout + * @instance + * @type {HTMLElement} + * @default null + */ + + this.siblingBefore = null; + + /** + * A reference to a non-target sibling element before which to insert targets + * when there are no targets in the container. + * + * @example Example: Setting an `siblingAfter` reference element + * + * var gap = containerEl.querySelector('.gap'); + * + * var mixer = mixitup(containerEl, { + * layout: { + * siblingAfter: gap + * } + * }); + * + * @name siblingAfter + * @memberof mixitup.Config.layout + * @instance + * @type {HTMLElement} + * @default null + */ + + this.siblingAfter = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigLayout); + + mixitup.ConfigLayout.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigLayout.prototype.constructor = mixitup.ConfigLayout; + + /** + * A group of properties defining the initial state of the mixer on load (instantiation). + * + * @constructor + * @memberof mixitup.Config + * @name load + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.ConfigLoad = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A string defining any filtering to be statically applied to the mixer on load. + * As per the `.filter()` API, this can be any valid selector string, or the + * values `'all'` or `'none'`. + * + * @example Example 1: Defining an initial filter selector to be applied on load + * + * // The mixer will show only those targets matching '.category-a' on load. + * + * var mixer = mixitup(containerEl, { + * load: { + * filter: '.category-a' + * } + * }); + * + * @example Example 2: Hiding all targets on load + * + * // The mixer will show hide all targets on load. + * + * var mixer = mixitup(containerEl, { + * load: { + * filter: 'none' + * } + * }); + * + * @name filter + * @memberof mixitup.Config.load + * @instance + * @type {string} + * @default 'all' + */ + + this.filter = 'all'; + + /** + * A string defining any sorting to be statically applied to the mixer on load. + * As per the `.sort()` API, this should be a valid "sort string" made up of + * an attribute to sort by (or `'default'`) followed by an optional sorting + * order, or the value `'random'`; + * + * @example Example: Defining sorting to be applied on load + * + * // The mixer will sort the container by the value of the `data-published-date` + * // attribute, in descending order. + * + * var mixer = mixitup(containerEl, { + * load: { + * sort: 'published-date:desc' + * } + * }); + * + * @name sort + * @memberof mixitup.Config.load + * @instance + * @type {string} + * @default 'default:asc' + */ + + this.sort = 'default:asc'; + + /** + * An array of objects representing the underlying data of any pre-rendered targets, + * when using the `.dataset()` API. + * + * NB: If targets are pre-rendered when the mixer is instantiated, this must be set. + * + * @example Example: Defining the initial underyling dataset + * + * var myDataset = [ + * { + * id: 0, + * title: "Blog Post Title 0", + * ... + * }, + * { + * id: 1, + * title: "Blog Post Title 1", + * ... + * } + * ]; + * + * var mixer = mixitup(containerEl, { + * data: { + * uidKey: 'id' + * }, + * load: { + * dataset: myDataset + * } + * }); + * + * @name dataset + * @memberof mixitup.Config.load + * @instance + * @type {Array.} + * @default null + */ + + this.dataset = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigLoad); + + mixitup.ConfigLoad.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigLoad.prototype.constructor = mixitup.ConfigLoad; + + /** + * A group of properties defining the selectors used to query elements within a mixitup container. + * + * @constructor + * @memberof mixitup.Config + * @name selectors + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigSelectors = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A selector string used to query and index target elements within the container. + * + * By default, the class selector `'.mix'` is used, but this can be changed to an + * attribute or element selector to match the style of your project. + * + * @example Example 1: Changing the target selector + * + * var mixer = mixitup(containerEl, { + * selectors: { + * target: '.portfolio-item' + * } + * }); + * + * @example Example 2: Using an attribute selector as a target selector + * + * // The mixer will search for any children with the attribute `data-ref="mix"` + * + * var mixer = mixitup(containerEl, { + * selectors: { + * target: '[data-ref="mix"]' + * } + * }); + * + * @name target + * @memberof mixitup.Config.selectors + * @instance + * @type {string} + * @default '.mix' + */ + + this.target = '.mix'; + + /** + * A optional selector string used to add further specificity to the querying of control elements, + * in addition to their mandatory data attribute (e.g. `data-filter`, `data-toggle`, `data-sort`). + * + * This can be used if other elements in your document must contain the above attributes + * (e.g. for use in third-party scripts), and would otherwise interfere with MixItUp. Adding + * an additional `control` selector of your choice allows MixItUp to restrict event handling + * to only those elements matching the defined selector. + * + * @name control + * @memberof mixitup.Config.selectors + * @instance + * @type {string} + * @default '' + * + * @example Example 1: Adding a `selectors.control` selector + * + * var mixer = mixitup(containerEl, { + * selectors: { + * control: '.mixitup-control' + * } + * }); + * + * // Will not be handled: + * // + * + * // Will be handled: + * // + */ + + this.control = ''; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigSelectors); + + mixitup.ConfigSelectors.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigSelectors.prototype.constructor = mixitup.ConfigSelectors; + + /** + * A group of optional render functions for creating and updating elements. + * + * All render functions receive a data object, and should return a valid HTML string. + * + * @constructor + * @memberof mixitup.Config + * @name render + * @namespace + * @public + * @since 3.0.0 + */ + + mixitup.ConfigRender = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A function returning an HTML string representing a target element, or a reference to a + * single DOM element. + * + * The function is invoked as part of the `.dataset()` API, whenever a new item is added + * to the dataset, or an item in the dataset changes (if `dataset.dirtyCheck` is enabled). + * + * The function receives the relevant dataset item as its first parameter. + * + * @example Example 1: Using string concatenation + * + * var mixer = mixitup(containerEl, { + * render: { + * target: function(item) { + * return ( + * '<div class="mix">' + + * '<h2>' + item.title + '</h2>' + + * '</div>' + * ); + * } + * } + * }); + * + * @example Example 2: Using an ES2015 template literal + * + * var mixer = mixitup(containerEl, { + * render: { + * target: function(item) { + * return ( + * `<div class="mix"> + * <h2>${item.title}</h2> + * </div>` + * ); + * } + * } + * }); + * + * @example Example 3: Using a Handlebars template + * + * var targetTemplate = Handlebars.compile('<div class="mix"><h2>{{title}}</h2></div>'); + * + * var mixer = mixitup(containerEl, { + * render: { + * target: targetTemplate + * } + * }); + * + * @example Example 4: Returning a DOM element + * + * var mixer = mixitup(containerEl, { + * render: { + * target: function(item) { + * // Create a single element using your framework's built-in renderer + * + * var el = ... + * + * return el; + * } + * } + * }); + * + * @name target + * @memberof mixitup.Config.render + * @instance + * @type {function} + * @default 'null' + */ + + this.target = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigRender); + + mixitup.ConfigRender.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigRender.prototype.constructor = mixitup.ConfigRender; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.ConfigTemplates = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ConfigTemplates); + + mixitup.ConfigTemplates.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ConfigTemplates.prototype.constructor = mixitup.ConfigTemplates; + + /** + * `mixitup.Config` is an interface used for customising the functionality of a + * mixer instance. It is organised into several semantically distinct sub-objects, + * each one pertaining to a particular aspect of MixItUp functionality. + * + * An object literal containing any or all of the available properies, + * known as the "configuration object", can be passed as the second parameter to + * the `mixitup` factory function when creating a mixer instance to customise its + * functionality as needed. + * + * If no configuration object is passed, the mixer instance will take on the default + * configuration values detailed below. + * + * @example Example 1: Creating and passing the configuration object + * // Create a configuration object with desired values + * + * var config = { + * animation: { + * enable: false + * }, + * selectors: { + * target: '.item' + * } + * }; + * + * // Pass the configuration object to the mixitup factory function + * + * var mixer = mixitup(containerEl, config); + * + * @example Example 2: Passing the configuration object inline + * // Typically, the configuration object is passed inline for brevity. + * + * var mixer = mixitup(containerEl, { + * controls: { + * live: true, + * toggleLogic: 'and' + * } + * }); + * + * + * @constructor + * @memberof mixitup + * @namespace + * @public + * @since 2.0.0 + */ + + mixitup.Config = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.animation = new mixitup.ConfigAnimation(); + this.behavior = new mixitup.ConfigBehavior(); + this.callbacks = new mixitup.ConfigCallbacks(); + this.controls = new mixitup.ConfigControls(); + this.classNames = new mixitup.ConfigClassNames(); + this.data = new mixitup.ConfigData(); + this.debug = new mixitup.ConfigDebug(); + this.layout = new mixitup.ConfigLayout(); + this.load = new mixitup.ConfigLoad(); + this.selectors = new mixitup.ConfigSelectors(); + this.render = new mixitup.ConfigRender(); + this.templates = new mixitup.ConfigTemplates(); + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Config); + + mixitup.Config.prototype = Object.create(mixitup.Base.prototype); + + mixitup.Config.prototype.constructor = mixitup.Config; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.MixerDom = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.document = null; + this.body = null; + this.container = null; + this.parent = null; + this.targets = []; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.MixerDom); + + mixitup.MixerDom.prototype = Object.create(mixitup.Base.prototype); + + mixitup.MixerDom.prototype.constructor = mixitup.MixerDom; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.UiClassNames = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.base = ''; + this.active = ''; + this.disabled = ''; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.UiClassNames); + + mixitup.UiClassNames.prototype = Object.create(mixitup.Base.prototype); + + mixitup.UiClassNames.prototype.constructor = mixitup.UiClassNames; + + /** + * An object into which all arbitrary arguments sent to '.dataset()' are mapped. + * + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandDataset = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.dataset = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.CommandDataset); + + mixitup.CommandDataset.prototype = Object.create(mixitup.Base.prototype); + + mixitup.CommandDataset.prototype.constructor = mixitup.CommandDataset; + + /** + * An object into which all arbitrary arguments sent to '.multimix()' are mapped. + * + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandMultimix = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.filter = null; + this.sort = null; + this.insert = null; + this.remove = null; + this.changeLayout = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.CommandMultimix); + + mixitup.CommandMultimix.prototype = Object.create(mixitup.Base.prototype); + + mixitup.CommandMultimix.prototype.constructor = mixitup.CommandMultimix; + + /** + * An object into which all arbitrary arguments sent to '.filter()' are mapped. + * + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandFilter = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.selector = ''; + this.collection = null; + this.action = 'show'; // enum: ['show', 'hide'] + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.CommandFilter); + + mixitup.CommandFilter.prototype = Object.create(mixitup.Base.prototype); + + mixitup.CommandFilter.prototype.constructor = mixitup.CommandFilter; + + /** + * An object into which all arbitrary arguments sent to '.sort()' are mapped. + * + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandSort = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.sortString = ''; + this.attribute = ''; + this.order = 'asc'; + this.collection = null; + this.next = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.CommandSort); + + mixitup.CommandSort.prototype = Object.create(mixitup.Base.prototype); + + mixitup.CommandSort.prototype.constructor = mixitup.CommandSort; + + /** + * An object into which all arbitrary arguments sent to '.insert()' are mapped. + * + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandInsert = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.index = 0; + this.collection = []; + this.position = 'before'; // enum: ['before', 'after'] + this.sibling = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.CommandInsert); + + mixitup.CommandInsert.prototype = Object.create(mixitup.Base.prototype); + + mixitup.CommandInsert.prototype.constructor = mixitup.CommandInsert; + + /** + * An object into which all arbitrary arguments sent to '.remove()' are mapped. + * + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandRemove = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.targets = []; + this.collection = []; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.CommandRemove); + + mixitup.CommandRemove.prototype = Object.create(mixitup.Base.prototype); + + mixitup.CommandRemove.prototype.constructor = mixitup.CommandRemove; + + /** + * An object into which all arbitrary arguments sent to '.changeLayout()' are mapped. + * + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.CommandChangeLayout = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.containerClassName = ''; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.CommandChangeLayout); + + mixitup.CommandChangeLayout.prototype = Object.create(mixitup.Base.prototype); + + mixitup.CommandChangeLayout.prototype.constructor = mixitup.CommandChangeLayout; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + * @param {string} type + * @param {string} selector + * @param {boolean} [live] + * @param {string} [parent] + * An optional string representing the name of the mixer.dom property containing a reference to a parent element. + */ + + mixitup.ControlDefinition = function(type, selector, live, parent) { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.type = type; + this.selector = selector; + this.live = live || false; + this.parent = parent || ''; + + this.callActions('afterConstruct'); + + h.freeze(this); + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.ControlDefinition); + + mixitup.ControlDefinition.prototype = Object.create(mixitup.Base.prototype); + + mixitup.ControlDefinition.prototype.constructor = mixitup.ControlDefinition; + + mixitup.controlDefinitions = []; + + mixitup.controlDefinitions.push(new mixitup.ControlDefinition('multimix', '[data-filter][data-sort]')); + mixitup.controlDefinitions.push(new mixitup.ControlDefinition('filter', '[data-filter]')); + mixitup.controlDefinitions.push(new mixitup.ControlDefinition('sort', '[data-sort]')); + mixitup.controlDefinitions.push(new mixitup.ControlDefinition('toggle', '[data-toggle]')); + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.Control = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.el = null; + this.selector = ''; + this.bound = []; + this.pending = -1; + this.type = ''; + this.status = 'inactive'; // enum: ['inactive', 'active', 'disabled', 'live'] + this.filter = ''; + this.sort = ''; + this.canDisable = false; + this.handler = null; + this.classNames = new mixitup.UiClassNames(); + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Control); + + mixitup.Control.prototype = Object.create(mixitup.Base.prototype); + + h.extend(mixitup.Control.prototype, + /** @lends mixitup.Control */ + { + constructor: mixitup.Control, + + /** + * @private + * @param {HTMLElement} el + * @param {string} type + * @param {string} selector + */ + + init: function(el, type, selector) { + var self = this; + + this.callActions('beforeInit', arguments); + + self.el = el; + self.type = type; + self.selector = selector; + + if (self.selector) { + self.status = 'live'; + } else { + self.canDisable = typeof self.el.disable === 'boolean'; + + switch (self.type) { + case 'filter': + self.filter = self.el.getAttribute('data-filter'); + + break; + case 'toggle': + self.filter = self.el.getAttribute('data-toggle'); + + break; + case 'sort': + self.sort = self.el.getAttribute('data-sort'); + + break; + case 'multimix': + self.filter = self.el.getAttribute('data-filter'); + self.sort = self.el.getAttribute('data-sort'); + + break; + } + } + + self.bindClick(); + + mixitup.controls.push(self); + + this.callActions('afterInit', arguments); + }, + + /** + * @private + * @param {mixitup.Mixer} mixer + * @return {boolean} + */ + + isBound: function(mixer) { + var self = this, + isBound = false; + + this.callActions('beforeIsBound', arguments); + + isBound = self.bound.indexOf(mixer) > -1; + + return self.callFilters('afterIsBound', isBound, arguments); + }, + + /** + * @private + * @param {mixitup.Mixer} mixer + * @return {void} + */ + + addBinding: function(mixer) { + var self = this; + + this.callActions('beforeAddBinding', arguments); + + if (!self.isBound()) { + self.bound.push(mixer); + } + + this.callActions('afterAddBinding', arguments); + }, + + /** + * @private + * @param {mixitup.Mixer} mixer + * @return {void} + */ + + removeBinding: function(mixer) { + var self = this, + removeIndex = -1; + + this.callActions('beforeRemoveBinding', arguments); + + if ((removeIndex = self.bound.indexOf(mixer)) > -1) { + self.bound.splice(removeIndex, 1); + } + + if (self.bound.length < 1) { + // No bindings exist, unbind event click handlers + + self.unbindClick(); + + // Remove from `mixitup.controls` list + + removeIndex = mixitup.controls.indexOf(self); + + mixitup.controls.splice(removeIndex, 1); + + if (self.status === 'active') { + self.renderStatus(self.el, 'inactive'); + } + } + + this.callActions('afterRemoveBinding', arguments); + }, + + /** + * @private + * @return {void} + */ + + bindClick: function() { + var self = this; + + this.callActions('beforeBindClick', arguments); + + self.handler = function(e) { + self.handleClick(e); + }; + + h.on(self.el, 'click', self.handler); + + this.callActions('afterBindClick', arguments); + }, + + /** + * @private + * @return {void} + */ + + unbindClick: function() { + var self = this; + + this.callActions('beforeUnbindClick', arguments); + + h.off(self.el, 'click', self.handler); + + self.handler = null; + + this.callActions('afterUnbindClick', arguments); + }, + + /** + * @private + * @param {MouseEvent} e + * @return {void} + */ + + handleClick: function(e) { + var self = this, + button = null, + mixer = null, + isActive = false, + returnValue = void(0), + command = {}, + clone = null, + commands = [], + i = -1; + + this.callActions('beforeHandleClick', arguments); + + this.pending = 0; + + mixer = self.bound[0]; + + if (!self.selector) { + button = self.el; + } else { + button = h.closestParent(e.target, mixer.config.selectors.control + self.selector, true, mixer.dom.document); + } + + if (!button) { + self.callActions('afterHandleClick', arguments); + + return; + } + + switch (self.type) { + case 'filter': + command.filter = self.filter || button.getAttribute('data-filter'); + + break; + case 'sort': + command.sort = self.sort || button.getAttribute('data-sort'); + + break; + case 'multimix': + command.filter = self.filter || button.getAttribute('data-filter'); + command.sort = self.sort || button.getAttribute('data-sort'); + + break; + case 'toggle': + command.filter = self.filter || button.getAttribute('data-toggle'); + + if (self.status === 'live') { + isActive = h.hasClass(button, self.classNames.active); + } else { + isActive = self.status === 'active'; + } + + break; + } + + for (i = 0; i < self.bound.length; i++) { + // Create a clone of the command for each bound mixer instance + + clone = new mixitup.CommandMultimix(); + + h.extend(clone, command); + + commands.push(clone); + } + + commands = self.callFilters('commandsHandleClick', commands, arguments); + + self.pending = self.bound.length; + + for (i = 0; mixer = self.bound[i]; i++) { + command = commands[i]; + + if (!command) { + // An extension may set a command null to indicate that the click should not be handled + + continue; + } + + if (!mixer.lastClicked) { + mixer.lastClicked = button; + } + + mixitup.events.fire('mixClick', mixer.dom.container, { + state: mixer.state, + instance: mixer, + originalEvent: e, + control: mixer.lastClicked + }, mixer.dom.document); + + if (typeof mixer.config.callbacks.onMixClick === 'function') { + returnValue = mixer.config.callbacks.onMixClick.call(mixer.lastClicked, mixer.state, e, mixer); + + if (returnValue === false) { + // User has returned `false` from the callback, so do not handle click + + continue; + } + } + + if (self.type === 'toggle') { + isActive ? mixer.toggleOff(command.filter) : mixer.toggleOn(command.filter); + } else { + mixer.multimix(command); + } + } + + this.callActions('afterHandleClick', arguments); + }, + + /** + * @param {object} command + * @param {Array} toggleArray + * @return {void} + */ + + update: function(command, toggleArray) { + var self = this, + actions = new mixitup.CommandMultimix(); + + self.callActions('beforeUpdate', arguments); + + self.pending--; + + self.pending = Math.max(0, self.pending); + + if (self.pending > 0) return; + + if (self.status === 'live') { + // Live control (status unknown) + + self.updateLive(command, toggleArray); + } else { + // Static control + + actions.sort = self.sort; + actions.filter = self.filter; + + self.callFilters('actionsUpdate', actions, arguments); + + self.parseStatusChange(self.el, command, actions, toggleArray); + } + + self.callActions('afterUpdate', arguments); + }, + + /** + * @param {mixitup.CommandMultimix} command + * @param {Array} toggleArray + * @return {void} + */ + + updateLive: function(command, toggleArray) { + var self = this, + controlButtons = null, + actions = null, + button = null, + i = -1; + + self.callActions('beforeUpdateLive', arguments); + + if (!self.el) return; + + controlButtons = self.el.querySelectorAll(self.selector); + + for (i = 0; button = controlButtons[i]; i++) { + actions = new mixitup.CommandMultimix(); + + switch (self.type) { + case 'filter': + actions.filter = button.getAttribute('data-filter'); + + break; + case 'sort': + actions.sort = button.getAttribute('data-sort'); + + break; + case 'multimix': + actions.filter = button.getAttribute('data-filter'); + actions.sort = button.getAttribute('data-sort'); + + break; + case 'toggle': + actions.filter = button.getAttribute('data-toggle'); + + break; + } + + actions = self.callFilters('actionsUpdateLive', actions, arguments); + + self.parseStatusChange(button, command, actions, toggleArray); + } + + self.callActions('afterUpdateLive', arguments); + }, + + /** + * @param {HTMLElement} button + * @param {mixitup.CommandMultimix} command + * @param {mixitup.CommandMultimix} actions + * @param {Array} toggleArray + * @return {void} + */ + + parseStatusChange: function(button, command, actions, toggleArray) { + var self = this, + alias = '', + toggle = '', + i = -1; + + self.callActions('beforeParseStatusChange', arguments); + + switch (self.type) { + case 'filter': + if (command.filter === actions.filter) { + self.renderStatus(button, 'active'); + } else { + self.renderStatus(button, 'inactive'); + } + + break; + case 'multimix': + if (command.sort === actions.sort && command.filter === actions.filter) { + self.renderStatus(button, 'active'); + } else { + self.renderStatus(button, 'inactive'); + } + + break; + case 'sort': + if (command.sort.match(/:asc/g)) { + alias = command.sort.replace(/:asc/g, ''); + } + + if (command.sort === actions.sort || alias === actions.sort) { + self.renderStatus(button, 'active'); + } else { + self.renderStatus(button, 'inactive'); + } + + break; + case 'toggle': + if (toggleArray.length < 1) self.renderStatus(button, 'inactive'); + + if (command.filter === actions.filter) { + self.renderStatus(button, 'active'); + } + + for (i = 0; i < toggleArray.length; i++) { + toggle = toggleArray[i]; + + if (toggle === actions.filter) { + // Button matches one active toggle + + self.renderStatus(button, 'active'); + + break; + } + + self.renderStatus(button, 'inactive'); + } + + break; + } + + self.callActions('afterParseStatusChange', arguments); + }, + + /** + * @param {HTMLElement} button + * @param {string} status + * @return {void} + */ + + renderStatus: function(button, status) { + var self = this; + + self.callActions('beforeRenderStatus', arguments); + + switch (status) { + case 'active': + h.addClass(button, self.classNames.active); + h.removeClass(button, self.classNames.disabled); + + if (self.canDisable) self.el.disabled = false; + + break; + case 'inactive': + h.removeClass(button, self.classNames.active); + h.removeClass(button, self.classNames.disabled); + + if (self.canDisable) self.el.disabled = false; + + break; + case 'disabled': + if (self.canDisable) self.el.disabled = true; + + h.addClass(button, self.classNames.disabled); + h.removeClass(button, self.classNames.active); + + break; + } + + if (self.status !== 'live') { + // Update the control's status propery if not live + + self.status = status; + } + + self.callActions('afterRenderStatus', arguments); + } + }); + + mixitup.controls = []; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.StyleData = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.x = 0; + this.y = 0; + this.top = 0; + this.right = 0; + this.bottom = 0; + this.left = 0; + this.width = 0; + this.height = 0; + this.marginRight = 0; + this.marginBottom = 0; + this.opacity = 0; + this.scale = new mixitup.TransformData(); + this.translateX = new mixitup.TransformData(); + this.translateY = new mixitup.TransformData(); + this.translateZ = new mixitup.TransformData(); + this.rotateX = new mixitup.TransformData(); + this.rotateY = new mixitup.TransformData(); + this.rotateZ = new mixitup.TransformData(); + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.StyleData); + + mixitup.StyleData.prototype = Object.create(mixitup.Base.prototype); + + mixitup.StyleData.prototype.constructor = mixitup.StyleData; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.TransformData = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.value = 0; + this.unit = ''; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.TransformData); + + mixitup.TransformData.prototype = Object.create(mixitup.Base.prototype); + + mixitup.TransformData.prototype.constructor = mixitup.TransformData; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.TransformDefaults = function() { + mixitup.StyleData.apply(this); + + this.callActions('beforeConstruct'); + + this.scale.value = 0.01; + this.scale.unit = ''; + + this.translateX.value = 20; + this.translateX.unit = 'px'; + + this.translateY.value = 20; + this.translateY.unit = 'px'; + + this.translateZ.value = 20; + this.translateZ.unit = 'px'; + + this.rotateX.value = 90; + this.rotateX.unit = 'deg'; + + this.rotateY.value = 90; + this.rotateY.unit = 'deg'; + + this.rotateX.value = 90; + this.rotateX.unit = 'deg'; + + this.rotateZ.value = 180; + this.rotateZ.unit = 'deg'; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.TransformDefaults); + + mixitup.TransformDefaults.prototype = Object.create(mixitup.StyleData.prototype); + + mixitup.TransformDefaults.prototype.constructor = mixitup.TransformDefaults; + + /** + * @private + * @static + * @since 3.0.0 + * @type {mixitup.TransformDefaults} + */ + + mixitup.transformDefaults = new mixitup.TransformDefaults(); + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.EventDetail = function() { + this.state = null; + this.futureState = null; + this.instance = null; + this.originalEvent = null; + }; + + /** + * The `mixitup.Events` class contains all custom events dispatched by MixItUp at various + * points within the lifecycle of a mixer operation. + * + * Each event is analogous to the callback function of the same name defined in + * the `callbacks` configuration object, and is triggered immediately before it. + * + * Events are always triggered from the container element on which MixItUp is instantiated + * upon. + * + * As with any event, registered event handlers receive the event object as a parameter + * which includes a `detail` property containting references to the current `state`, + * the `mixer` instance, and other event-specific properties described below. + * + * @constructor + * @namespace + * @memberof mixitup + * @public + * @since 3.0.0 + */ + + mixitup.Events = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * A custom event triggered immediately after any MixItUp operation is requested + * and before animations have begun. + * + * The `mixStart` event also exposes a `futureState` property via the + * `event.detail` object, which represents the final state of the mixer once + * the requested operation has completed. + * + * @name mixStart + * @memberof mixitup.Events + * @static + * @type {CustomEvent} + */ + + this.mixStart = null; + + /** + * A custom event triggered when a MixItUp operation is requested while another + * operation is in progress, and the animation queue is full, or queueing + * is disabled. + * + * @name mixBusy + * @memberof mixitup.Events + * @static + * @type {CustomEvent} + */ + + this.mixBusy = null; + + /** + * A custom event triggered after any MixItUp operation has completed, and the + * state has been updated. + * + * @name mixEnd + * @memberof mixitup.Events + * @static + * @type {CustomEvent} + */ + + this.mixEnd = null; + + /** + * A custom event triggered whenever a filter operation "fails", i.e. no targets + * could be found matching the requested filter. + * + * @name mixFail + * @memberof mixitup.Events + * @static + * @type {CustomEvent} + */ + + this.mixFail = null; + + /** + * A custom event triggered whenever a MixItUp control is clicked, and before its + * respective operation is requested. + * + * This event also exposes an `originalEvent` property via the `event.detail` + * object, which holds a reference to the original click event. + * + * @name mixClick + * @memberof mixitup.Events + * @static + * @type {CustomEvent} + */ + + this.mixClick = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Events); + + mixitup.Events.prototype = Object.create(mixitup.Base.prototype); + + mixitup.Events.prototype.constructor = mixitup.Events; + + /** + * @private + * @param {string} eventType + * @param {Element} el + * @param {object} detail + * @param {Document} [doc] + */ + + mixitup.Events.prototype.fire = function(eventType, el, detail, doc) { + var self = this, + event = null, + eventDetail = new mixitup.EventDetail(); + + self.callActions('beforeFire', arguments); + + if (typeof self[eventType] === 'undefined') { + throw new Error('Event type "' + eventType + '" not found.'); + } + + eventDetail.state = new mixitup.State(); + + h.extend(eventDetail.state, detail.state); + + if (detail.futureState) { + eventDetail.futureState = new mixitup.State(); + + h.extend(eventDetail.futureState, detail.futureState); + } + + eventDetail.instance = detail.instance; + + if (detail.originalEvent) { + eventDetail.originalEvent = detail.originalEvent; + } + + event = h.getCustomEvent(eventType, eventDetail, doc); + + self.callFilters('eventFire', event, arguments); + + el.dispatchEvent(event); + }; + + // Asign a singleton instance to `mixitup.events`: + + mixitup.events = new mixitup.Events(); + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.QueueItem = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.args = []; + this.instruction = null; + this.triggerElement = null; + this.deferred = null; + this.isToggling = false; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.QueueItem); + + mixitup.QueueItem.prototype = Object.create(mixitup.Base.prototype); + + mixitup.QueueItem.prototype.constructor = mixitup.QueueItem; + + /** + * The `mixitup.Mixer` class is used to hold discreet, user-configured + * instances of MixItUp on a provided container element. + * + * Mixer instances are returned whenever the `mixitup()` factory function is called, + * which expose a range of methods enabling API-based filtering, sorting, + * insertion, removal and more. + * + * @constructor + * @namespace + * @memberof mixitup + * @public + * @since 3.0.0 + */ + + mixitup.Mixer = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.config = new mixitup.Config(); + + this.id = ''; + + this.isBusy = false; + this.isToggling = false; + this.incPadding = true; + + this.controls = []; + this.targets = []; + this.origOrder = []; + this.cache = {}; + + this.toggleArray = []; + + this.targetsMoved = 0; + this.targetsImmovable = 0; + this.targetsBound = 0; + this.targetsDone = 0; + + this.staggerDuration = 0; + this.effectsIn = null; + this.effectsOut = null; + this.transformIn = []; + this.transformOut = []; + this.queue = []; + + this.state = null; + this.lastOperation = null; + this.lastClicked = null; + this.userCallback = null; + this.userDeferred = null; + + this.dom = new mixitup.MixerDom(); + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Mixer); + + mixitup.Mixer.prototype = Object.create(mixitup.Base.prototype); + + h.extend(mixitup.Mixer.prototype, + /** @lends mixitup.Mixer */ + { + constructor: mixitup.Mixer, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {HTMLElement} container + * @param {HTMLElement} document + * @param {string} id + * @param {object} [config] + */ + + attach: function(container, document, id, config) { + var self = this, + target = null, + i = -1; + + self.callActions('beforeAttach', arguments); + + self.id = id; + + if (config) { + h.extend(self.config, config, true, true); + } + + self.sanitizeConfig(); + + self.cacheDom(container, document); + + if (self.config.layout.containerClassName) { + h.addClass(self.dom.container, self.config.layout.containerClassName); + } + + if (!mixitup.features.has.transitions) { + self.config.animation.enable = false; + } + + if (typeof window.console === 'undefined') { + self.config.debug.showWarnings = false; + } + + if (self.config.data.uidKey) { + // If the dataset API is in use, force disable controls + + self.config.controls.enable = false; + } + + self.indexTargets(); + + self.state = self.getInitialState(); + + for (i = 0; target = self.lastOperation.toHide[i]; i++) { + target.hide(); + } + + if (self.config.controls.enable) { + self.initControls(); + + self.buildToggleArray(null, self.state); + + self.updateControls({ + filter: self.state.activeFilter, + sort: self.state.activeSort + }); + } + + self.parseEffects(); + + self.callActions('afterAttach', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @return {void} + */ + + sanitizeConfig: function() { + var self = this; + + self.callActions('beforeSanitizeConfig', arguments); + + // Sanitize enum/string config options + + self.config.controls.scope = self.config.controls.scope.toLowerCase().trim(); + self.config.controls.toggleLogic = self.config.controls.toggleLogic.toLowerCase().trim(); + self.config.controls.toggleDefault = self.config.controls.toggleDefault.toLowerCase().trim(); + + self.config.animation.effects = self.config.animation.effects.trim(); + + self.callActions('afterSanitizeConfig', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @return {mixitup.State} + */ + + getInitialState: function() { + var self = this, + state = new mixitup.State(), + operation = new mixitup.Operation(); + + self.callActions('beforeGetInitialState', arguments); + + // Map initial values into a mock state object in order to construct an operation + + state.activeContainerClassName = self.config.layout.containerClassName; + + if (self.config.load.dataset) { + // Dataset API + + if (!self.config.data.uidKey || typeof self.config.data.uidKey !== 'string') { + throw new TypeError(mixitup.messages.errorConfigDataUidKeyNotSet()); + } + + operation.startDataset = operation.newDataset = state.activeDataset = self.config.load.dataset.slice(); + operation.startContainerClassName = operation.newContainerClassName = state.activeContainerClassName; + operation.show = self.targets.slice(); + + state = self.callFilters('stateGetInitialState', state, arguments); + } else { + // DOM API + + state.activeFilter = self.parseFilterArgs([self.config.load.filter]).command; + state.activeSort = self.parseSortArgs([self.config.load.sort]).command; + state.totalTargets = self.targets.length; + + state = self.callFilters('stateGetInitialState', state, arguments); + + if ( + state.activeSort.collection || state.activeSort.attribute || + state.activeSort.order === 'random' || state.activeSort.order === 'desc' + ) { + // Sorting on load + + operation.newSort = state.activeSort; + + self.sortOperation(operation); + + self.printSort(false, operation); + + self.targets = operation.newOrder; + } else { + operation.startOrder = operation.newOrder = self.targets; + } + + operation.startFilter = operation.newFilter = state.activeFilter; + operation.startSort = operation.newSort = state.activeSort; + operation.startContainerClassName = operation.newContainerClassName = state.activeContainerClassName; + + if (operation.newFilter.selector === 'all') { + operation.newFilter.selector = self.config.selectors.target; + } else if (operation.newFilter.selector === 'none') { + operation.newFilter.selector = ''; + } + } + + operation = self.callFilters('operationGetInitialState', operation, [state]); + + self.lastOperation = operation; + + if (operation.newFilter) { + self.filterOperation(operation); + } + + state = self.buildState(operation); + + return state; + }, + + /** + * Caches references of DOM elements neccessary for the mixer's functionality. + * + * @private + * @instance + * @since 3.0.0 + * @param {HTMLElement} el + * @param {HTMLHtmlElement} document + * @return {void} + */ + + cacheDom: function(el, document) { + var self = this; + + self.callActions('beforeCacheDom', arguments); + + self.dom.document = document; + self.dom.body = self.dom.document.querySelector('body'); + self.dom.container = el; + self.dom.parent = el; + + self.callActions('afterCacheDom', arguments); + }, + + /** + * Indexes all child elements of the mixer matching the `selectors.target` + * selector, instantiating a mixitup.Target for each one. + * + * @private + * @instance + * @since 3.0.0 + * @return {void} + */ + + indexTargets: function() { + var self = this, + target = null, + el = null, + dataset = null, + i = -1; + + self.callActions('beforeIndexTargets', arguments); + + self.dom.targets = self.config.layout.allowNestedTargets ? + self.dom.container.querySelectorAll(self.config.selectors.target) : + h.children(self.dom.container, self.config.selectors.target, self.dom.document); + + self.dom.targets = h.arrayFromList(self.dom.targets); + + self.targets = []; + + if ((dataset = self.config.load.dataset) && dataset.length !== self.dom.targets.length) { + throw new Error(mixitup.messages.errorDatasetPrerenderedMismatch()); + } + + if (self.dom.targets.length) { + for (i = 0; el = self.dom.targets[i]; i++) { + target = new mixitup.Target(); + + target.init(el, self, dataset ? dataset[i] : void(0)); + + target.isInDom = true; + + self.targets.push(target); + } + + self.dom.parent = self.dom.targets[0].parentElement === self.dom.container ? + self.dom.container : + self.dom.targets[0].parentElement; + } + + self.origOrder = self.targets; + + self.callActions('afterIndexTargets', arguments); + }, + + initControls: function() { + var self = this, + definition = '', + controlElements = null, + el = null, + parent = null, + delagators = null, + control = null, + i = -1, + j = -1; + + self.callActions('beforeInitControls', arguments); + + switch (self.config.controls.scope) { + case 'local': + parent = self.dom.container; + + break; + case 'global': + parent = self.dom.document; + + break; + default: + throw new Error(mixitup.messages.errorConfigInvalidControlsScope()); + } + + for (i = 0; definition = mixitup.controlDefinitions[i]; i++) { + if (self.config.controls.live || definition.live) { + if (definition.parent) { + delagators = self.dom[definition.parent]; + + if (!delagators || delagators.length < 0) continue; + + if (typeof delagators.length !== 'number') { + delagators = [delagators]; + } + } else { + delagators = [parent]; + } + + for (j = 0; (el = delagators[j]); j++) { + control = self.getControl(el, definition.type, definition.selector); + + self.controls.push(control); + } + } else { + controlElements = parent.querySelectorAll(self.config.selectors.control + definition.selector); + + for (j = 0; (el = controlElements[j]); j++) { + control = self.getControl(el, definition.type, ''); + + if (!control) continue; + + self.controls.push(control); + } + } + } + + self.callActions('afterInitControls', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {HTMLElement} el + * @param {string} type + * @param {string} selector + * @return {mixitup.Control|null} + */ + + getControl: function(el, type, selector) { + var self = this, + control = null, + i = -1; + + self.callActions('beforeGetControl', arguments); + + if (!selector) { + // Static controls only + + for (i = 0; control = mixitup.controls[i]; i++) { + if (control.el === el && control.isBound(self)) { + // Control already bound to this mixer (as another type). + + // NB: This prevents duplicate controls from being registered where a selector + // might collide, eg: "[data-filter]" and "[data-filter][data-sort]" + + return self.callFilters('controlGetControl', null, arguments); + } else if (control.el === el && control.type === type && control.selector === selector) { + // Another mixer is already using this control, add this mixer as a binding + + control.addBinding(self); + + return self.callFilters('controlGetControl', control, arguments); + } + } + } + + // Create new control + + control = new mixitup.Control(); + + control.init(el, type, selector); + + control.classNames.base = h.getClassname(self.config.classNames, type); + control.classNames.active = h.getClassname(self.config.classNames, type, self.config.classNames.modifierActive); + control.classNames.disabled = h.getClassname(self.config.classNames, type, self.config.classNames.modifierDisabled); + + // Add a reference to this mixer as a binding + + control.addBinding(self); + + return self.callFilters('controlGetControl', control, arguments); + }, + + /** + * Creates a compound selector by joining the `toggleArray` value as per the + * defined toggle logic. + * + * @private + * @instance + * @since 3.0.0 + * @return {string} + */ + + getToggleSelector: function() { + var self = this, + delineator = self.config.controls.toggleLogic === 'or' ? ', ' : '', + toggleSelector = ''; + + self.callActions('beforeGetToggleSelector', arguments); + + self.toggleArray = h.clean(self.toggleArray); + + toggleSelector = self.toggleArray.join(delineator); + + if (toggleSelector === '') { + toggleSelector = self.config.controls.toggleDefault; + } + + return self.callFilters('selectorGetToggleSelector', toggleSelector, arguments); + }, + + /** + * Breaks compound selector strings in an array of discreet selectors, + * as per the active `controls.toggleLogic` configuration option. Accepts + * either a dynamic command object, or a state object. + * + * @private + * @instance + * @since 2.0.0 + * @param {object} [command] + * @param {mixitup.State} [state] + * @return {void} + */ + + buildToggleArray: function(command, state) { + var self = this, + activeFilterSelector = ''; + + self.callActions('beforeBuildToggleArray', arguments); + + if (command && command.filter) { + activeFilterSelector = command.filter.selector.replace(/\s/g, ''); + } else if (state) { + activeFilterSelector = state.activeFilter.selector.replace(/\s/g, ''); + } else { + return; + } + + if (activeFilterSelector === self.config.selectors.target || activeFilterSelector === 'all') { + activeFilterSelector = ''; + } + + if (self.config.controls.toggleLogic === 'or') { + self.toggleArray = activeFilterSelector.split(','); + } else { + self.toggleArray = self.splitCompoundSelector(activeFilterSelector); + } + + self.toggleArray = h.clean(self.toggleArray); + + self.callActions('afterBuildToggleArray', arguments); + }, + + /** + * Takes a compound selector (e.g. `.cat-1.cat-2`, `[data-cat="1"][data-cat="2"]`) + * and breaks into its individual selectors. + * + * @private + * @instance + * @since 3.0.0 + * @param {string} compoundSelector + * @return {string[]} + */ + + splitCompoundSelector: function(compoundSelector) { + // Break at a `.` or `[`, capturing the delineator + + var partials = compoundSelector.split(/([\.\[])/g), + toggleArray = [], + selector = '', + i = -1; + + if (partials[0] === '') { + partials.shift(); + } + + for (i = 0; i < partials.length; i++) { + if (i % 2 === 0) { + selector = ''; + } + + selector += partials[i]; + + if (i % 2 !== 0) { + toggleArray.push(selector); + } + } + + return toggleArray; + }, + + /** + * Updates controls to their active/inactive state based on the command or + * current state of the mixer. + * + * @private + * @instance + * @since 2.0.0 + * @param {object} command + * @return {void} + */ + + updateControls: function(command) { + var self = this, + control = null, + output = new mixitup.CommandMultimix(), + i = -1; + + self.callActions('beforeUpdateControls', arguments); + + // Sanitise to defaults + + if (command.filter) { + output.filter = command.filter.selector; + } else { + output.filter = self.state.activeFilter.selector; + } + + if (command.sort) { + output.sort = self.buildSortString(command.sort); + } else { + output.sort = self.buildSortString(self.state.activeSort); + } + + if (output.filter === self.config.selectors.target) { + output.filter = 'all'; + } + + if (output.filter === '') { + output.filter = 'none'; + } + + h.freeze(output); + + for (i = 0; control = self.controls[i]; i++) { + control.update(output, self.toggleArray); + } + + self.callActions('afterUpdateControls', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {mixitup.CommandSort} command + * @return {string} + */ + + buildSortString: function(command) { + var self = this; + var output = ''; + + output += command.sortString; + + if (command.next) { + output += ' ' + self.buildSortString(command.next); + } + + return output; + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {object} command + * @param {Operation} operation + * @return {Promise.} + */ + + insertTargets: function(command, operation) { + var self = this, + nextSibling = null, + insertionIndex = -1, + frag = null, + target = null, + el = null, + i = -1; + + self.callActions('beforeInsertTargets', arguments); + + if (typeof command.index === 'undefined') command.index = 0; + + nextSibling = self.getNextSibling(command.index, command.sibling, command.position); + frag = self.dom.document.createDocumentFragment(); + + if (nextSibling) { + insertionIndex = h.index(nextSibling, self.config.selectors.target); + } else { + insertionIndex = self.targets.length; + } + + if (command.collection) { + for (i = 0; el = command.collection[i]; i++) { + if (self.dom.targets.indexOf(el) > -1) { + throw new Error(mixitup.messages.errorInsertPreexistingElement()); + } + + // Ensure elements are hidden when they are added to the DOM, so they can + // be animated in gracefully + + el.style.display = 'none'; + + frag.appendChild(el); + frag.appendChild(self.dom.document.createTextNode(' ')); + + if (!h.isElement(el, self.dom.document) || !el.matches(self.config.selectors.target)) continue; + + target = new mixitup.Target(); + + target.init(el, self); + + target.isInDom = true; + + self.targets.splice(insertionIndex, 0, target); + + insertionIndex++; + } + + self.dom.parent.insertBefore(frag, nextSibling); + } + + // Since targets have been added, the original order must be updated + + operation.startOrder = self.origOrder = self.targets; + + self.callActions('afterInsertTargets', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Number} [index] + * @param {Element} [sibling] + * @param {string} [position] + * @return {Element} + */ + + getNextSibling: function(index, sibling, position) { + var self = this, + element = null; + + index = Math.max(index, 0); + + if (sibling && position === 'before') { + // Explicit sibling + + element = sibling; + } else if (sibling && position === 'after') { + // Explicit sibling + + element = sibling.nextElementSibling || null; + } else if (self.targets.length > 0 && typeof index !== 'undefined') { + // Index and targets exist + + element = (index < self.targets.length || !self.targets.length) ? + self.targets[index].dom.el : + self.targets[self.targets.length - 1].dom.el.nextElementSibling; + } else if (self.targets.length === 0 && self.dom.parent.children.length > 0) { + // No targets but other siblings + + if (self.config.layout.siblingAfter) { + element = self.config.layout.siblingAfter; + } else if (self.config.layout.siblingBefore) { + element = self.config.layout.siblingBefore.nextElementSibling; + } else { + self.dom.parent.children[0]; + } + } else { + element === null; + } + + return self.callFilters('elementGetNextSibling', element, arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + filterOperation: function(operation) { + var self = this, + testResult = false, + index = -1, + action = '', + target = null, + i = -1; + + self.callActions('beforeFilterOperation', arguments); + + action = operation.newFilter.action; + + for (i = 0; target = operation.newOrder[i]; i++) { + if (operation.newFilter.collection) { + // show via collection + + testResult = operation.newFilter.collection.indexOf(target.dom.el) > -1; + } else { + // show via selector + + if (operation.newFilter.selector === '') { + testResult = false; + } else { + testResult = target.dom.el.matches(operation.newFilter.selector); + } + } + + self.evaluateHideShow(testResult, target, action, operation); + } + + if (operation.toRemove.length) { + for (i = 0; target = operation.show[i]; i++) { + if (operation.toRemove.indexOf(target) > -1) { + // If any shown targets should be removed, move them into the toHide array + + operation.show.splice(i, 1); + + if ((index = operation.toShow.indexOf(target)) > -1) { + operation.toShow.splice(index, 1); + } + + operation.toHide.push(target); + operation.hide.push(target); + + i--; + } + } + } + + operation.matching = operation.show.slice(); + + if (operation.show.length === 0 && operation.newFilter.selector !== '' && self.targets.length !== 0) { + operation.hasFailed = true; + } + + self.callActions('afterFilterOperation', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {boolean} testResult + * @param {Element} target + * @param {string} action + * @param {Operation} operation + * @return {void} + */ + + evaluateHideShow: function(testResult, target, action, operation) { + var self = this, + filteredTestResult = false, + args = Array.prototype.slice.call(arguments, 1); + + filteredTestResult = self.callFilters('testResultEvaluateHideShow', testResult, args); + + self.callActions('beforeEvaluateHideShow', arguments); + + if ( + filteredTestResult === true && action === 'show' || + filteredTestResult === false && action === 'hide' + ) { + operation.show.push(target); + + !target.isShown && operation.toShow.push(target); + } else { + operation.hide.push(target); + + target.isShown && operation.toHide.push(target); + } + + self.callActions('afterEvaluateHideShow', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + sortOperation: function(operation) { + var self = this, + newOrder = [], + target = null, + el = null, + i = -1; + + self.callActions('beforeSortOperation', arguments); + + operation.startOrder = self.targets; + + if (operation.newSort.collection) { + // Sort by collection + + newOrder = []; + + for (i = 0; (el = operation.newSort.collection[i]); i++) { + if (self.dom.targets.indexOf(el) < 0) { + throw new Error(mixitup.messages.errorSortNonExistentElement()); + } + + target = new mixitup.Target(); + + target.init(el, self); + + target.isInDom = true; + + newOrder.push(target); + } + + operation.newOrder = newOrder; + } else if (operation.newSort.order === 'random') { + // Sort random + + operation.newOrder = h.arrayShuffle(operation.startOrder); + } else if (operation.newSort.attribute === '') { + // Sort by default + + operation.newOrder = self.origOrder.slice(); + + if (operation.newSort.order === 'desc') { + operation.newOrder.reverse(); + } + } else { + // Sort by attribute + + operation.newOrder = operation.startOrder.slice(); + + operation.newOrder.sort(function(a, b) { + return self.compare(a, b, operation.newSort); + }); + } + + if (h.isEqualArray(operation.newOrder, operation.startOrder)) { + operation.willSort = false; + } + + self.callActions('afterSortOperation', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {mixitup.Target} a + * @param {mixitup.Target} b + * @param {mixitup.CommandSort} command + * @return {Number} + */ + + compare: function(a, b, command) { + var self = this, + order = command.order, + attrA = self.getAttributeValue(a, command.attribute), + attrB = self.getAttributeValue(b, command.attribute); + + if (isNaN(attrA * 1) || isNaN(attrB * 1)) { + attrA = attrA.toLowerCase(); + attrB = attrB.toLowerCase(); + } else { + attrA = attrA * 1; + attrB = attrB * 1; + } + + if (attrA < attrB) { + return order === 'asc' ? -1 : 1; + } + + if (attrA > attrB) { + return order === 'asc' ? 1 : -1; + } + + if (attrA === attrB && command.next) { + return self.compare(a, b, command.next); + } + + return 0; + }, + + /** + * Reads the values of any data attributes present the provided target element + * which match the current sort command. + * + * @private + * @instance + * @since 3.0.0 + * @param {mixitup.Target} target + * @param {string} [attribute] + * @return {(String|Number)} + */ + + getAttributeValue: function(target, attribute) { + var self = this, + value = ''; + + value = target.dom.el.getAttribute('data-' + attribute); + + if (value === null) { + if (self.config.debug.showWarnings) { + // Encourage users to assign values to all targets to avoid erroneous sorting + // when types are mixed + + console.warn(mixitup.messages.warningInconsistentSortingAttributes({ + attribute: 'data-' + attribute + })); + } + } + + // If an attribute is not present, return 0 as a safety value + + return self.callFilters('valueGetAttributeValue', value || 0, arguments); + }, + + /** + * Inserts elements into the DOM in the appropriate + * order using a document fragment for minimal + * DOM thrashing + * + * @private + * @instance + * @since 2.0.0 + * @param {boolean} isResetting + * @param {Operation} operation + * @return {void} + */ + + printSort: function(isResetting, operation) { + var self = this, + startOrder = isResetting ? operation.newOrder : operation.startOrder, + newOrder = isResetting ? operation.startOrder : operation.newOrder, + nextSibling = startOrder.length ? startOrder[startOrder.length - 1].dom.el.nextElementSibling : null, + frag = window.document.createDocumentFragment(), + whitespace = null, + target = null, + el = null, + i = -1; + + self.callActions('beforePrintSort', arguments); + + // Empty the container + + for (i = 0; target = startOrder[i]; i++) { + el = target.dom.el; + + if (el.style.position === 'absolute') continue; + + h.removeWhitespace(el.previousSibling); + + el.parentElement.removeChild(el); + } + + whitespace = nextSibling ? nextSibling.previousSibling : self.dom.parent.lastChild; + + if (whitespace && whitespace.nodeName === '#text') { + h.removeWhitespace(whitespace); + } + + for (i = 0; target = newOrder[i]; i++) { + // Add targets into a document fragment + + el = target.dom.el; + + if (h.isElement(frag.lastChild)) { + frag.appendChild(window.document.createTextNode(' ')); + } + + frag.appendChild(el); + } + + // Insert the document fragment into the container + // before any other non-target elements + + if (self.dom.parent.firstChild && self.dom.parent.firstChild !== nextSibling) { + frag.insertBefore(window.document.createTextNode(' '), frag.childNodes[0]); + } + + if (nextSibling) { + frag.appendChild(window.document.createTextNode(' ')); + + self.dom.parent.insertBefore(frag, nextSibling); + } else { + self.dom.parent.appendChild(frag); + } + + self.callActions('afterPrintSort', arguments); + }, + + /** + * Parses user-defined sort strings (i.e. `default:asc`) into sort commands objects. + * + * @private + * @instance + * @since 3.0.0 + * @param {string} sortString + * @param {mixitup.CommandSort} command + * @return {mixitup.CommandSort} + */ + + parseSortString: function(sortString, command) { + var self = this, + rules = sortString.split(' '), + current = command, + rule = [], + i = -1; + + // command.sortString = sortString; + + for (i = 0; i < rules.length; i++) { + rule = rules[i].split(':'); + + current.sortString = rules[i]; + current.attribute = h.dashCase(rule[0]); + current.order = rule[1] || 'asc'; + + switch (current.attribute) { + case 'default': + // treat "default" as sorting by no attribute + + current.attribute = ''; + + break; + case 'random': + // treat "random" as an order not an attribute + + current.attribute = ''; + current.order = 'random'; + + break; + } + + if (!current.attribute || current.order === 'random') break; + + if (i < rules.length - 1) { + // Embed reference to the next command + + current.next = new mixitup.CommandSort(); + + h.freeze(current); + + current = current.next; + } + } + + return self.callFilters('commandsParseSort', command, arguments); + }, + + /** + * Parses all effects out of the user-defined `animation.effects` string into + * their respective properties and units. + * + * @private + * @instance + * @since 2.0.0 + * @return {void} + */ + + parseEffects: function() { + var self = this, + transformName = '', + effectsIn = self.config.animation.effectsIn || self.config.animation.effects, + effectsOut = self.config.animation.effectsOut || self.config.animation.effects; + + self.callActions('beforeParseEffects', arguments); + + self.effectsIn = new mixitup.StyleData(); + self.effectsOut = new mixitup.StyleData(); + self.transformIn = []; + self.transformOut = []; + + self.effectsIn.opacity = self.effectsOut.opacity = 1; + + self.parseEffect('fade', effectsIn, self.effectsIn, self.transformIn); + self.parseEffect('fade', effectsOut, self.effectsOut, self.transformOut, true); + + for (transformName in mixitup.transformDefaults) { + if (!(mixitup.transformDefaults[transformName] instanceof mixitup.TransformData)) { + continue; + } + + self.parseEffect(transformName, effectsIn, self.effectsIn, self.transformIn); + self.parseEffect(transformName, effectsOut, self.effectsOut, self.transformOut, true); + } + + self.parseEffect('stagger', effectsIn, self.effectsIn, self.transformIn); + self.parseEffect('stagger', effectsOut, self.effectsOut, self.transformOut, true); + + self.callActions('afterParseEffects', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {string} effectName + * @param {string} effectString + * @param {StyleData} effects + * @param {String[]} transform + * @param {boolean} [isOut] + */ + + parseEffect: function(effectName, effectString, effects, transform, isOut) { + var self = this, + re = /\(([^)]+)\)/, + propIndex = -1, + str = '', + match = [], + val = '', + units = ['%', 'px', 'em', 'rem', 'vh', 'vw', 'deg'], + unit = '', + i = -1; + + self.callActions('beforeParseEffect', arguments); + + if (typeof effectString !== 'string') { + throw new TypeError(mixitup.messages.errorConfigInvalidAnimationEffects()); + } + + if (effectString.indexOf(effectName) < 0) { + // The effect is not present in the effects string + + if (effectName === 'stagger') { + // Reset stagger to 0 + + self.staggerDuration = 0; + } + + return; + } + + // The effect is present + + propIndex = effectString.indexOf(effectName + '('); + + if (propIndex > -1) { + // The effect has a user defined value in parentheses + + // Extract from the first parenthesis to the end of string + + str = effectString.substring(propIndex); + + // Match any number of characters between "(" and ")" + + match = re.exec(str); + + val = match[1]; + } + + switch (effectName) { + case 'fade': + effects.opacity = val ? parseFloat(val) : 0; + + break; + case 'stagger': + self.staggerDuration = val ? parseFloat(val) : 100; + + // TODO: Currently stagger must be applied globally, but + // if seperate values are specified for in/out, this should + // be respected + + break; + default: + // All other effects are transforms following the same structure + + if (isOut && self.config.animation.reverseOut && effectName !== 'scale') { + effects[effectName].value = + (val ? parseFloat(val) : mixitup.transformDefaults[effectName].value) * -1; + } else { + effects[effectName].value = + (val ? parseFloat(val) : mixitup.transformDefaults[effectName].value); + } + + if (val) { + for (i = 0; unit = units[i]; i++) { + if (val.indexOf(unit) > -1) { + effects[effectName].unit = unit; + + break; + } + } + } else { + effects[effectName].unit = mixitup.transformDefaults[effectName].unit; + } + + transform.push( + effectName + + '(' + + effects[effectName].value + + effects[effectName].unit + + ')' + ); + } + + self.callActions('afterParseEffect', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {State} + */ + + buildState: function(operation) { + var self = this, + state = new mixitup.State(), + target = null, + i = -1; + + self.callActions('beforeBuildState', arguments); + + // Map target elements into state arrays. + // the real target objects should never be exposed + + for (i = 0; target = self.targets[i]; i++) { + if (!operation.toRemove.length || operation.toRemove.indexOf(target) < 0) { + state.targets.push(target.dom.el); + } + } + + for (i = 0; target = operation.matching[i]; i++) { + state.matching.push(target.dom.el); + } + + for (i = 0; target = operation.show[i]; i++) { + state.show.push(target.dom.el); + } + + for (i = 0; target = operation.hide[i]; i++) { + if (!operation.toRemove.length || operation.toRemove.indexOf(target) < 0) { + state.hide.push(target.dom.el); + } + } + + state.id = self.id; + state.container = self.dom.container; + state.activeFilter = operation.newFilter; + state.activeSort = operation.newSort; + state.activeDataset = operation.newDataset; + state.activeContainerClassName = operation.newContainerClassName; + state.hasFailed = operation.hasFailed; + state.totalTargets = self.targets.length; + state.totalShow = operation.show.length; + state.totalHide = operation.hide.length; + state.totalMatching = operation.matching.length; + state.triggerElement = operation.triggerElement; + + return self.callFilters('stateBuildState', state, arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {boolean} shouldAnimate + * @param {Operation} operation + * @return {void} + */ + + goMix: function(shouldAnimate, operation) { + var self = this, + deferred = null; + + self.callActions('beforeGoMix', arguments); + + // If the animation duration is set to 0ms, + // or no effects specified, + // or the container is hidden + // then abort animation + + if ( + !self.config.animation.duration || !self.config.animation.effects || !h.isVisible(self.dom.container) + ) { + shouldAnimate = false; + } + + if ( + !operation.toShow.length && + !operation.toHide.length && + !operation.willSort && + !operation.willChangeLayout + ) { + // If nothing to show or hide, and not sorting or + // changing layout + + shouldAnimate = false; + } + + if ( + !operation.startState.show.length && + !operation.show.length + ) { + // If nothing currently shown, nothing to show + + shouldAnimate = false; + } + + mixitup.events.fire('mixStart', self.dom.container, { + state: operation.startState, + futureState: operation.newState, + instance: self + }, self.dom.document); + + if (typeof self.config.callbacks.onMixStart === 'function') { + self.config.callbacks.onMixStart.call( + self.dom.container, + operation.startState, + operation.newState, + self + ); + } + + h.removeClass(self.dom.container, h.getClassname(self.config.classNames, 'container', self.config.classNames.modifierFailed)); + + if (!self.userDeferred) { + // Queue empty, no pending operations + + deferred = self.userDeferred = h.defer(mixitup.libraries); + } else { + // Use existing deferred + + deferred = self.userDeferred; + } + + self.isBusy = true; + + if (!shouldAnimate || !mixitup.features.has.transitions) { + // Abort + + if (self.config.debug.fauxAsync) { + setTimeout(function() { + self.cleanUp(operation); + }, self.config.animation.duration); + } else { + self.cleanUp(operation); + } + + return self.callFilters('promiseGoMix', deferred.promise, arguments); + } + + // If we should animate and the platform supports transitions, go for it + + if (window.pageYOffset !== operation.docState.scrollTop) { + window.scrollTo(operation.docState.scrollLeft, operation.docState.scrollTop); + } + + if (self.config.animation.applyPerspective) { + self.dom.parent.style[mixitup.features.perspectiveProp] = + self.config.animation.perspectiveDistance; + + self.dom.parent.style[mixitup.features.perspectiveOriginProp] = + self.config.animation.perspectiveOrigin; + } + + if ( + self.config.animation.animateResizeContainer && + operation.startHeight !== operation.newHeight && + operation.viewportDeltaY !== operation.startHeight - operation.newHeight + ) { + self.dom.parent.style.height = operation.startHeight + 'px'; + } + + if ( + self.config.animation.animateResizeContainer && + operation.startWidth !== operation.newWidth && + operation.viewportDeltaX !== operation.startWidth - operation.newWidth + ) { + self.dom.parent.style.width = operation.startWidth + 'px'; + } + + if (operation.startHeight === operation.newHeight) { + self.dom.parent.style.height = operation.startHeight + 'px'; + } + + if (operation.startWidth === operation.newWidth) { + self.dom.parent.style.width = operation.startWidth + 'px'; + } + + if (operation.startHeight === operation.newHeight && operation.startWidth === operation.newWidth) { + self.dom.parent.style.overflow = 'hidden'; + } + + requestAnimationFrame(function() { + self.moveTargets(operation); + }); + + return self.callFilters('promiseGoMix', deferred.promise, arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + getStartMixData: function(operation) { + var self = this, + parentStyle = window.getComputedStyle(self.dom.parent), + parentRect = self.dom.parent.getBoundingClientRect(), + target = null, + data = {}, + i = -1, + boxSizing = parentStyle[mixitup.features.boxSizingProp]; + + self.incPadding = (boxSizing === 'border-box'); + + self.callActions('beforeGetStartMixData', arguments); + + for (i = 0; target = operation.show[i]; i++) { + data = target.getPosData(); + + operation.showPosData[i] = { + startPosData: data + }; + } + + for (i = 0; target = operation.toHide[i]; i++) { + data = target.getPosData(); + + operation.toHidePosData[i] = { + startPosData: data + }; + } + + operation.startX = parentRect.left; + operation.startY = parentRect.top; + + operation.startHeight = self.incPadding ? + parentRect.height : + parentRect.height - + parseFloat(parentStyle.paddingTop) - + parseFloat(parentStyle.paddingBottom) - + parseFloat(parentStyle.borderTop) - + parseFloat(parentStyle.borderBottom); + + operation.startWidth = self.incPadding ? + parentRect.width : + parentRect.width - + parseFloat(parentStyle.paddingLeft) - + parseFloat(parentStyle.paddingRight) - + parseFloat(parentStyle.borderLeft) - + parseFloat(parentStyle.borderRight); + + self.callActions('afterGetStartMixData', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + setInter: function(operation) { + var self = this, + target = null, + i = -1; + + self.callActions('beforeSetInter', arguments); + + // Prevent scrollbar flicker on non-inertial scroll platforms by clamping height/width + + if (self.config.animation.clampHeight) { + self.dom.parent.style.height = operation.startHeight + 'px'; + self.dom.parent.style.overflow = 'hidden'; + } + + if (self.config.animation.clampWidth) { + self.dom.parent.style.width = operation.startWidth + 'px'; + self.dom.parent.style.overflow = 'hidden'; + } + + for (i = 0; target = operation.toShow[i]; i++) { + target.show(); + } + + if (operation.willChangeLayout) { + h.removeClass(self.dom.container, operation.startContainerClassName); + h.addClass(self.dom.container, operation.newContainerClassName); + } + + self.callActions('afterSetInter', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + getInterMixData: function(operation) { + var self = this, + target = null, + i = -1; + + self.callActions('beforeGetInterMixData', arguments); + + for (i = 0; target = operation.show[i]; i++) { + operation.showPosData[i].interPosData = target.getPosData(); + } + + for (i = 0; target = operation.toHide[i]; i++) { + operation.toHidePosData[i].interPosData = target.getPosData(); + } + + self.callActions('afterGetInterMixData', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + setFinal: function(operation) { + var self = this, + target = null, + i = -1; + + self.callActions('beforeSetFinal', arguments); + + operation.willSort && self.printSort(false, operation); + + for (i = 0; target = operation.toHide[i]; i++) { + target.hide(); + } + + self.callActions('afterSetFinal', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + getFinalMixData: function(operation) { + var self = this, + parentStyle = null, + parentRect = null, + target = null, + i = -1; + + self.callActions('beforeGetFinalMixData', arguments); + + for (i = 0; target = operation.show[i]; i++) { + operation.showPosData[i].finalPosData = target.getPosData(); + } + + for (i = 0; target = operation.toHide[i]; i++) { + operation.toHidePosData[i].finalPosData = target.getPosData(); + } + + // Remove clamping + + if (self.config.animation.clampHeight || self.config.animation.clampWidth) { + self.dom.parent.style.height = + self.dom.parent.style.width = + self.dom.parent.style.overflow = ''; + } + + if (!self.incPadding) { + parentStyle = window.getComputedStyle(self.dom.parent); + } + + parentRect = self.dom.parent.getBoundingClientRect(); + + operation.newX = parentRect.left; + operation.newY = parentRect.top; + + operation.newHeight = self.incPadding ? + parentRect.height : + parentRect.height - + parseFloat(parentStyle.paddingTop) - + parseFloat(parentStyle.paddingBottom) - + parseFloat(parentStyle.borderTop) - + parseFloat(parentStyle.borderBottom); + + operation.newWidth = self.incPadding ? + parentRect.width : + parentRect.width - + parseFloat(parentStyle.paddingLeft) - + parseFloat(parentStyle.paddingRight) - + parseFloat(parentStyle.borderLeft) - + parseFloat(parentStyle.borderRight); + + operation.viewportDeltaX = operation.docState.viewportWidth - this.dom.document.documentElement.clientWidth; + operation.viewportDeltaY = operation.docState.viewportHeight - this.dom.document.documentElement.clientHeight; + + if (operation.willSort) { + self.printSort(true, operation); + } + + for (i = 0; target = operation.toShow[i]; i++) { + target.hide(); + } + + for (i = 0; target = operation.toHide[i]; i++) { + target.show(); + } + + if (operation.willChangeLayout) { + h.removeClass(self.dom.container, operation.newContainerClassName); + h.addClass(self.dom.container, self.config.layout.containerClassName); + } + + self.callActions('afterGetFinalMixData', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Operation} operation + */ + + getTweenData: function(operation) { + var self = this, + target = null, + posData = null, + effectNames = Object.getOwnPropertyNames(self.effectsIn), + effectName = '', + effect = null, + widthChange = -1, + heightChange = -1, + i = -1, + j = -1; + + self.callActions('beforeGetTweenData', arguments); + + for (i = 0; target = operation.show[i]; i++) { + posData = operation.showPosData[i]; + posData.posIn = new mixitup.StyleData(); + posData.posOut = new mixitup.StyleData(); + posData.tweenData = new mixitup.StyleData(); + + // Process x and y + + if (target.isShown) { + posData.posIn.x = posData.startPosData.x - posData.interPosData.x; + posData.posIn.y = posData.startPosData.y - posData.interPosData.y; + } else { + posData.posIn.x = posData.posIn.y = 0; + } + + posData.posOut.x = posData.finalPosData.x - posData.interPosData.x; + posData.posOut.y = posData.finalPosData.y - posData.interPosData.y; + + // Process opacity + + posData.posIn.opacity = target.isShown ? 1 : self.effectsIn.opacity; + posData.posOut.opacity = 1; + posData.tweenData.opacity = posData.posOut.opacity - posData.posIn.opacity; + + // Adjust x and y if not nudging + + if (!target.isShown && !self.config.animation.nudge) { + posData.posIn.x = posData.posOut.x; + posData.posIn.y = posData.posOut.y; + } + + posData.tweenData.x = posData.posOut.x - posData.posIn.x; + posData.tweenData.y = posData.posOut.y - posData.posIn.y; + + // Process width, height, and margins + + if (self.config.animation.animateResizeTargets) { + posData.posIn.width = posData.startPosData.width; + posData.posIn.height = posData.startPosData.height; + + // "||" Prevents width/height change from including 0 width/height if hiding or showing + + widthChange = (posData.startPosData.width || posData.finalPosData.width) - posData.interPosData.width; + + posData.posIn.marginRight = posData.startPosData.marginRight - widthChange; + + heightChange = (posData.startPosData.height || posData.finalPosData.height) - posData.interPosData.height; + + posData.posIn.marginBottom = posData.startPosData.marginBottom - heightChange; + + posData.posOut.width = posData.finalPosData.width; + posData.posOut.height = posData.finalPosData.height; + + widthChange = (posData.finalPosData.width || posData.startPosData.width) - posData.interPosData.width; + + posData.posOut.marginRight = posData.finalPosData.marginRight - widthChange; + + heightChange = (posData.finalPosData.height || posData.startPosData.height) - posData.interPosData.height; + + posData.posOut.marginBottom = posData.finalPosData.marginBottom - heightChange; + + posData.tweenData.width = posData.posOut.width - posData.posIn.width; + posData.tweenData.height = posData.posOut.height - posData.posIn.height; + posData.tweenData.marginRight = posData.posOut.marginRight - posData.posIn.marginRight; + posData.tweenData.marginBottom = posData.posOut.marginBottom - posData.posIn.marginBottom; + } + + // Process transforms + + for (j = 0; effectName = effectNames[j]; j++) { + effect = self.effectsIn[effectName]; + + if (!(effect instanceof mixitup.TransformData) || !effect.value) continue; + + posData.posIn[effectName].value = effect.value; + posData.posOut[effectName].value = 0; + + posData.tweenData[effectName].value = + posData.posOut[effectName].value - posData.posIn[effectName].value; + + posData.posIn[effectName].unit = + posData.posOut[effectName].unit = + posData.tweenData[effectName].unit = + effect.unit; + } + } + + for (i = 0; target = operation.toHide[i]; i++) { + posData = operation.toHidePosData[i]; + posData.posIn = new mixitup.StyleData(); + posData.posOut = new mixitup.StyleData(); + posData.tweenData = new mixitup.StyleData(); + + // Process x and y + + posData.posIn.x = target.isShown ? posData.startPosData.x - posData.interPosData.x : 0; + posData.posIn.y = target.isShown ? posData.startPosData.y - posData.interPosData.y : 0; + posData.posOut.x = self.config.animation.nudge ? 0 : posData.posIn.x; + posData.posOut.y = self.config.animation.nudge ? 0 : posData.posIn.y; + posData.tweenData.x = posData.posOut.x - posData.posIn.x; + posData.tweenData.y = posData.posOut.y - posData.posIn.y; + + // Process width, height, and margins + + if (self.config.animation.animateResizeTargets) { + posData.posIn.width = posData.startPosData.width; + posData.posIn.height = posData.startPosData.height; + + widthChange = posData.startPosData.width - posData.interPosData.width; + + posData.posIn.marginRight = posData.startPosData.marginRight - widthChange; + + heightChange = posData.startPosData.height - posData.interPosData.height; + + posData.posIn.marginBottom = posData.startPosData.marginBottom - heightChange; + } + + // Process opacity + + posData.posIn.opacity = 1; + posData.posOut.opacity = self.effectsOut.opacity; + posData.tweenData.opacity = posData.posOut.opacity - posData.posIn.opacity; + + // Process transforms + + for (j = 0; effectName = effectNames[j]; j++) { + effect = self.effectsOut[effectName]; + + if (!(effect instanceof mixitup.TransformData) || !effect.value) continue; + + posData.posIn[effectName].value = 0; + posData.posOut[effectName].value = effect.value; + + posData.tweenData[effectName].value = + posData.posOut[effectName].value - posData.posIn[effectName].value; + + posData.posIn[effectName].unit = + posData.posOut[effectName].unit = + posData.tweenData[effectName].unit = + effect.unit; + } + } + + self.callActions('afterGetTweenData', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Operation} operation + * @return {void} + */ + + moveTargets: function(operation) { + var self = this, + target = null, + moveData = null, + posData = null, + statusChange = '', + willTransition = false, + staggerIndex = -1, + i = -1, + checkProgress = self.checkProgress.bind(self); + + self.callActions('beforeMoveTargets', arguments); + + // TODO: this is an extra loop in addition to the calcs + // done in getOperation, could some of this be done there? + + for (i = 0; target = operation.show[i]; i++) { + moveData = new mixitup.IMoveData(); + posData = operation.showPosData[i]; + + statusChange = target.isShown ? 'none' : 'show'; + + willTransition = self.willTransition( + statusChange, + operation.hasEffect, + posData.posIn, + posData.posOut + ); + + if (willTransition) { + // Prevent non-transitioning targets from incrementing the staggerIndex + + staggerIndex++; + } + + target.show(); + + moveData.posIn = posData.posIn; + moveData.posOut = posData.posOut; + moveData.statusChange = statusChange; + moveData.staggerIndex = staggerIndex; + moveData.operation = operation; + moveData.callback = willTransition ? checkProgress : null; + + target.move(moveData); + } + + for (i = 0; target = operation.toHide[i]; i++) { + posData = operation.toHidePosData[i]; + moveData = new mixitup.IMoveData(); + + statusChange = 'hide'; + + willTransition = self.willTransition(statusChange, posData.posIn, posData.posOut); + + moveData.posIn = posData.posIn; + moveData.posOut = posData.posOut; + moveData.statusChange = statusChange; + moveData.staggerIndex = i; + moveData.operation = operation; + moveData.callback = willTransition ? checkProgress : null; + + target.move(moveData); + } + + if (self.config.animation.animateResizeContainer) { + self.dom.parent.style[mixitup.features.transitionProp] = + 'height ' + self.config.animation.duration + 'ms ease, ' + + 'width ' + self.config.animation.duration + 'ms ease '; + + requestAnimationFrame(function() { + if ( + operation.startHeight !== operation.newHeight && + operation.viewportDeltaY !== operation.startHeight - operation.newHeight + ) { + self.dom.parent.style.height = operation.newHeight + 'px'; + } + + if ( + operation.startWidth !== operation.newWidth && + operation.viewportDeltaX !== operation.startWidth - operation.newWidth + ) { + self.dom.parent.style.width = operation.newWidth + 'px'; + } + }); + } + + if (operation.willChangeLayout) { + h.removeClass(self.dom.container, self.config.layout.ContainerClassName); + h.addClass(self.dom.container, operation.newContainerClassName); + } + + self.callActions('afterMoveTargets', arguments); + }, + + /** + * @private + * @instance + * @return {boolean} + */ + + hasEffect: function() { + var self = this, + EFFECTABLES = [ + 'scale', + 'translateX', 'translateY', 'translateZ', + 'rotateX', 'rotateY', 'rotateZ' + ], + effectName = '', + effect = null, + result = false, + value = -1, + i = -1; + + if (self.effectsIn.opacity !== 1) { + return self.callFilters('resultHasEffect', true, arguments); + } + + for (i = 0; effectName = EFFECTABLES[i]; i++) { + effect = self.effectsIn[effectName]; + value = (typeof effect && effect.value !== 'undefined') ? + effect.value : effect; + + if (value !== 0) { + result = true; + + break; + } + } + + return self.callFilters('resultHasEffect', result, arguments); + }, + + /** + * Determines if a target element will transition in + * some fasion and therefore requires binding of + * transitionEnd + * + * @private + * @instance + * @since 3.0.0 + * @param {string} statusChange + * @param {boolean} hasEffect + * @param {StyleData} posIn + * @param {StyleData} posOut + * @return {boolean} + */ + + willTransition: function(statusChange, hasEffect, posIn, posOut) { + var self = this, + result = false; + + if (!h.isVisible(self.dom.container)) { + // If the container is not visible, the transitionEnd + // event will not occur and MixItUp will hang + + result = false; + } else if ( + (statusChange !== 'none' && hasEffect) || + posIn.x !== posOut.x || + posIn.y !== posOut.y + ) { + // If opacity and/or translate will change + + result = true; + } else if (self.config.animation.animateResizeTargets) { + // Check if width, height or margins will change + + result = ( + posIn.width !== posOut.width || + posIn.height !== posOut.height || + posIn.marginRight !== posOut.marginRight || + posIn.marginTop !== posOut.marginTop + ); + } else { + result = false; + } + + return self.callFilters('resultWillTransition', result, arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + checkProgress: function(operation) { + var self = this; + + self.targetsDone++; + + if (self.targetsBound === self.targetsDone) { + self.cleanUp(operation); + } + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Operation} operation + * @return {void} + */ + + cleanUp: function(operation) { + var self = this, + target = null, + whitespaceBefore = null, + whitespaceAfter = null, + nextInQueue = null, + i = -1; + + self.callActions('beforeCleanUp', arguments); + + self.targetsMoved = + self.targetsImmovable = + self.targetsBound = + self.targetsDone = 0; + + for (i = 0; target = operation.show[i]; i++) { + target.cleanUp(); + + target.show(); + } + + for (i = 0; target = operation.toHide[i]; i++) { + target.cleanUp(); + + target.hide(); + } + + if (operation.willSort) { + self.printSort(false, operation); + } + + // Remove any styles applied to the parent container + + self.dom.parent.style[mixitup.features.transitionProp] = + self.dom.parent.style.height = + self.dom.parent.style.width = + self.dom.parent.style.overflow = + self.dom.parent.style[mixitup.features.perspectiveProp] = + self.dom.parent.style[mixitup.features.perspectiveOriginProp] = ''; + + if (operation.willChangeLayout) { + h.removeClass(self.dom.container, operation.startContainerClassName); + h.addClass(self.dom.container, operation.newContainerClassName); + } + + if (operation.toRemove.length) { + for (i = 0; target = self.targets[i]; i++) { + if (operation.toRemove.indexOf(target) > -1) { + if ( + (whitespaceBefore = target.dom.el.previousSibling) && whitespaceBefore.nodeName === '#text' && + (whitespaceAfter = target.dom.el.nextSibling) && whitespaceAfter.nodeName === '#text' + ) { + h.removeWhitespace(whitespaceBefore); + } + + if (!operation.willSort) { + // NB: Sorting will remove targets as a bi-product of `printSort()` + + self.dom.parent.removeChild(target.dom.el); + } + + self.targets.splice(i, 1); + + target.isInDom = false; + + i--; + } + } + + // Since targets have been removed, the original order must be updated + + self.origOrder = self.targets; + } + + if (operation.willSort) { + self.targets = operation.newOrder; + } + + self.state = operation.newState; + self.lastOperation = operation; + + self.dom.targets = self.state.targets; + + // mixEnd + + mixitup.events.fire('mixEnd', self.dom.container, { + state: self.state, + instance: self + }, self.dom.document); + + if (typeof self.config.callbacks.onMixEnd === 'function') { + self.config.callbacks.onMixEnd.call(self.dom.container, self.state, self); + } + + if (operation.hasFailed) { + // mixFail + + mixitup.events.fire('mixFail', self.dom.container, { + state: self.state, + instance: self + }, self.dom.document); + + if (typeof self.config.callbacks.onMixFail === 'function') { + self.config.callbacks.onMixFail.call(self.dom.container, self.state, self); + } + + h.addClass(self.dom.container, h.getClassname(self.config.classNames, 'container', self.config.classNames.modifierFailed)); + } + + // User-defined callback function + + if (typeof self.userCallback === 'function') { + self.userCallback.call(self.dom.container, self.state, self); + } + + if (typeof self.userDeferred.resolve === 'function') { + self.userDeferred.resolve(self.state); + } + + self.userCallback = null; + self.userDeferred = null; + self.lastClicked = null; + self.isToggling = false; + self.isBusy = false; + + if (self.queue.length) { + self.callActions('beforeReadQueueCleanUp', arguments); + + nextInQueue = self.queue.shift(); + + // Update non-public API properties stored in queue + + self.userDeferred = nextInQueue.deferred; + self.isToggling = nextInQueue.isToggling; + self.lastClicked = nextInQueue.triggerElement; + + if (nextInQueue.instruction.command instanceof mixitup.CommandMultimix) { + self.multimix.apply(self, nextInQueue.args); + } else { + self.dataset.apply(self, nextInQueue.args); + } + } + + self.callActions('afterCleanUp', arguments); + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Array<*>} args + * @return {mixitup.UserInstruction} + */ + + parseMultimixArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandMultimix(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (arg === null) continue; + + if (typeof arg === 'object') { + h.extend(instruction.command, arg); + } else if (typeof arg === 'boolean') { + instruction.animate = arg; + } else if (typeof arg === 'function') { + instruction.callback = arg; + } + } + + // Coerce arbitrary command arguments into typed command objects + + if (instruction.command.insert && !(instruction.command.insert instanceof mixitup.CommandInsert)) { + instruction.command.insert = self.parseInsertArgs([instruction.command.insert]).command; + } + + if (instruction.command.remove && !(instruction.command.remove instanceof mixitup.CommandRemove)) { + instruction.command.remove = self.parseRemoveArgs([instruction.command.remove]).command; + } + + if (instruction.command.filter && !(instruction.command.filter instanceof mixitup.CommandFilter)) { + instruction.command.filter = self.parseFilterArgs([instruction.command.filter]).command; + } + + if (instruction.command.sort && !(instruction.command.sort instanceof mixitup.CommandSort)) { + instruction.command.sort = self.parseSortArgs([instruction.command.sort]).command; + } + + if (instruction.command.changeLayout && !(instruction.command.changeLayout instanceof mixitup.CommandChangeLayout)) { + instruction.command.changeLayout = self.parseChangeLayoutArgs([instruction.command.changeLayout]).command; + } + + instruction = self.callFilters('instructionParseMultimixArgs', instruction, arguments); + + h.freeze(instruction); + + return instruction; + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Array<*>} args + * @return {mixitup.UserInstruction} + */ + + parseFilterArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandFilter(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (typeof arg === 'string') { + // Selector + + instruction.command.selector = arg; + } else if (arg === null) { + instruction.command.collection = []; + } else if (typeof arg === 'object' && h.isElement(arg, self.dom.document)) { + // Single element + + instruction.command.collection = [arg]; + } else if (typeof arg === 'object' && typeof arg.length !== 'undefined') { + // Multiple elements in array, NodeList or jQuery collection + + instruction.command.collection = h.arrayFromList(arg); + } else if (typeof arg === 'object') { + // Filter command + + h.extend(instruction.command, arg); + } else if (typeof arg === 'boolean') { + instruction.animate = arg; + } else if (typeof arg === 'function') { + instruction.callback = arg; + } + } + + if (instruction.command.selector && instruction.command.collection) { + throw new Error(mixitup.messages.errorFilterInvalidArguments()); + } + + instruction = self.callFilters('instructionParseFilterArgs', instruction, arguments); + + h.freeze(instruction); + + return instruction; + }, + + parseSortArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + sortString = '', + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandSort(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (arg === null) continue; + + switch (typeof arg) { + case 'string': + // Sort string + + sortString = arg; + + break; + case 'object': + // Array of element references + + if (arg.length) { + instruction.command.collection = h.arrayFromList(arg); + } + + break; + case 'boolean': + instruction.animate = arg; + + break; + case 'function': + instruction.callback = arg; + + break; + } + } + + if (sortString) { + instruction.command = self.parseSortString(sortString, instruction.command); + } + + instruction = self.callFilters('instructionParseSortArgs', instruction, arguments); + + h.freeze(instruction); + + return instruction; + }, + + /** + * @private + * @instance + * @since 2.0.0 + * @param {Array<*>} args + * @return {mixitup.UserInstruction} + */ + + parseInsertArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandInsert(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (arg === null) continue; + + if (typeof arg === 'number') { + // Insert index + + instruction.command.index = arg; + } else if (typeof arg === 'string' && ['before', 'after'].indexOf(arg) > -1) { + // 'before'/'after' + + instruction.command.position = arg; + } else if (typeof arg === 'string') { + // Markup + + instruction.command.collection = + h.arrayFromList(h.createElement(arg).childNodes); + } else if (typeof arg === 'object' && h.isElement(arg, self.dom.document)) { + // Single element + + !instruction.command.collection.length ? + (instruction.command.collection = [arg]) : + (instruction.command.sibling = arg); + } else if (typeof arg === 'object' && arg.length) { + // Multiple elements in array or jQuery collection + + !instruction.command.collection.length ? + (instruction.command.collection = arg) : + instruction.command.sibling = arg[0]; + } else if (typeof arg === 'object' && arg.childNodes && arg.childNodes.length) { + // Document fragment + + !instruction.command.collection.length ? + instruction.command.collection = h.arrayFromList(arg.childNodes) : + instruction.command.sibling = arg.childNodes[0]; + } else if (typeof arg === 'object') { + // Insert command + + h.extend(instruction.command, arg); + } else if (typeof arg === 'boolean') { + instruction.animate = arg; + } else if (typeof arg === 'function') { + instruction.callback = arg; + } + } + + if (instruction.command.index && instruction.command.sibling) { + throw new Error(mixitup.messages.errorInsertInvalidArguments()); + } + + if (!instruction.command.collection.length && self.config.debug.showWarnings) { + console.warn(mixitup.messages.warningInsertNoElements()); + } + + instruction = self.callFilters('instructionParseInsertArgs', instruction, arguments); + + h.freeze(instruction); + + return instruction; + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Array<*>} args + * @return {mixitup.UserInstruction} + */ + + parseRemoveArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + target = null, + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandRemove(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (arg === null) continue; + + switch (typeof arg) { + case 'number': + if (self.targets[arg]) { + instruction.command.targets[0] = self.targets[arg]; + } + + break; + case 'string': + instruction.command.collection = h.arrayFromList(self.dom.parent.querySelectorAll(arg)); + + break; + case 'object': + if (arg && arg.length) { + instruction.command.collection = arg; + } else if (h.isElement(arg, self.dom.document)) { + instruction.command.collection = [arg]; + } else { + // Remove command + + h.extend(instruction.command, arg); + } + + break; + case 'boolean': + instruction.animate = arg; + + break; + case 'function': + instruction.callback = arg; + + break; + } + } + + if (instruction.command.collection.length) { + for (i = 0; target = self.targets[i]; i++) { + if (instruction.command.collection.indexOf(target.dom.el) > -1) { + instruction.command.targets.push(target); + } + } + } + + if (!instruction.command.targets.length && self.config.debug.showWarnings) { + console.warn(mixitup.messages.warningRemoveNoElements()); + } + + h.freeze(instruction); + + return instruction; + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Array<*>} args + * @return {mixitup.UserInstruction} + */ + + parseDatasetArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandDataset(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (arg === null) continue; + + switch (typeof arg) { + case 'object': + if (Array.isArray(arg) || typeof arg.length === 'number') { + instruction.command.dataset = arg; + } else { + // Change layout command + + h.extend(instruction.command, arg); + } + + break; + case 'boolean': + instruction.animate = arg; + + break; + case 'function': + instruction.callback = arg; + + break; + } + } + + h.freeze(instruction); + + return instruction; + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Array<*>} args + * @return {mixitup.UserInstruction} + */ + + parseChangeLayoutArgs: function(args) { + var self = this, + instruction = new mixitup.UserInstruction(), + arg = null, + i = -1; + + instruction.animate = self.config.animation.enable; + instruction.command = new mixitup.CommandChangeLayout(); + + for (i = 0; i < args.length; i++) { + arg = args[i]; + + if (arg === null) continue; + + switch (typeof arg) { + case 'string': + instruction.command.containerClassName = arg; + + break; + case 'object': + // Change layout command + + h.extend(instruction.command, arg); + + break; + case 'boolean': + instruction.animate = arg; + + break; + case 'function': + instruction.callback = arg; + + break; + } + } + + h.freeze(instruction); + + return instruction; + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {mixitup.QueueItem} queueItem + * @return {Promise.} + */ + + queueMix: function(queueItem) { + var self = this, + deferred = null, + toggleSelector = ''; + + self.callActions('beforeQueueMix', arguments); + + deferred = h.defer(mixitup.libraries); + + if (self.config.animation.queue && self.queue.length < self.config.animation.queueLimit) { + queueItem.deferred = deferred; + + self.queue.push(queueItem); + + // Keep controls in sync with user interactions. Mixer will catch up as it drains the queue. + + if (self.config.controls.enable) { + if (self.isToggling) { + self.buildToggleArray(queueItem.instruction.command); + + toggleSelector = self.getToggleSelector(); + + self.updateControls({ + filter: { + selector: toggleSelector + } + }); + } else { + self.updateControls(queueItem.instruction.command); + } + } + } else { + if (self.config.debug.showWarnings) { + console.warn(mixitup.messages.warningMultimixInstanceQueueFull()); + } + + deferred.resolve(self.state); + + mixitup.events.fire('mixBusy', self.dom.container, { + state: self.state, + instance: self + }, self.dom.document); + + if (typeof self.config.callbacks.onMixBusy === 'function') { + self.config.callbacks.onMixBusy.call(self.dom.container, self.state, self); + } + } + + return self.callFilters('promiseQueueMix', deferred.promise, arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Array.} newDataset + * @return {Operation} + */ + + getDataOperation: function(newDataset) { + var self = this, + operation = new mixitup.Operation(), + startDataset = []; + + operation = self.callFilters('operationUnmappedGetDataOperation', operation, arguments); + + if (self.dom.targets.length && !(startDataset = (self.state.activeDataset || [])).length) { + throw new Error(mixitup.messages.errorDatasetNotSet()); + } + + operation.id = h.randomHex(); + operation.startState = self.state; + operation.startDataset = startDataset; + operation.newDataset = newDataset.slice(); + + self.diffDatasets(operation); + + operation.startOrder = self.targets; + operation.newOrder = operation.show; + + if (self.config.animation.enable) { + self.getStartMixData(operation); + self.setInter(operation); + + operation.docState = h.getDocumentState(self.dom.document); + + self.getInterMixData(operation); + self.setFinal(operation); + self.getFinalMixData(operation); + + self.parseEffects(); + + operation.hasEffect = self.hasEffect(); + + self.getTweenData(operation); + } + + self.targets = operation.show.slice(); + + operation.newState = self.buildState(operation); + + // NB: Targets to be removed must be included in `self.targets` for removal during clean up, + // but are added after state is built so that state is accurate + + Array.prototype.push.apply(self.targets, operation.toRemove); + + operation = self.callFilters('operationMappedGetDataOperation', operation, arguments); + + return operation; + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {mixitup.Operation} operation + * @return {void} + */ + + diffDatasets: function(operation) { + var self = this, + persistantStartIds = [], + persistantNewIds = [], + insertedTargets = [], + data = null, + target = null, + el = null, + frag = null, + nextEl = null, + uids = {}, + id = '', + i = -1; + + self.callActions('beforeDiffDatasets', arguments); + + for (i = 0; data = operation.newDataset[i]; i++) { + if (typeof (id = data[self.config.data.uidKey]) === 'undefined' || id.toString().length < 1) { + throw new TypeError(mixitup.messages.errorDatasetInvalidUidKey({ + uidKey: self.config.data.uidKey + })); + } + + if (!uids[id]) { + uids[id] = true; + } else { + throw new Error(mixitup.messages.errorDatasetDuplicateUid({ + uid: id + })); + } + + if ((target = self.cache[id]) instanceof mixitup.Target) { + // Already in cache + + if (self.config.data.dirtyCheck && !h.deepEquals(data, target.data)) { + // change detected + + el = target.render(data); + + target.data = data; + + if (el !== target.dom.el) { + // Update target element reference + + if (target.isInDom) { + target.unbindEvents(); + + self.dom.parent.replaceChild(el, target.dom.el); + } + + if (!target.isShown) { + el.style.display = 'none'; + } + + target.dom.el = el; + + if (target.isInDom) { + target.bindEvents(); + } + } + } + + el = target.dom.el; + } else { + // New target + + target = new mixitup.Target(); + + target.init(null, self, data); + + target.hide(); + } + + if (!target.isInDom) { + // Adding to DOM + + if (!frag) { + // Open frag + + frag = self.dom.document.createDocumentFragment(); + } + + if (frag.lastElementChild) { + frag.appendChild(self.dom.document.createTextNode(' ')); + } + + frag.appendChild(target.dom.el); + + target.isInDom = true; + + target.unbindEvents(); + target.bindEvents(); + target.hide(); + + operation.toShow.push(target); + + insertedTargets.push(target); + } else { + // Already in DOM + + nextEl = target.dom.el.nextElementSibling; + + persistantNewIds.push(id); + + if (frag) { + // Close and insert previously opened frag + + if (frag.lastElementChild) { + frag.appendChild(self.dom.document.createTextNode(' ')); + } + + self.insertDatasetFrag(frag, target.dom.el, insertedTargets); + + frag = null; + } + } + + operation.show.push(target); + } + + if (frag) { + // Unclosed frag remaining + + nextEl = nextEl || self.config.layout.siblingAfter; + + if (nextEl) { + frag.appendChild(self.dom.document.createTextNode(' ')); + } + + self.insertDatasetFrag(frag, nextEl, insertedTargets); + } + + for (i = 0; data = operation.startDataset[i]; i++) { + id = data[self.config.data.uidKey]; + + target = self.cache[id]; + + if (operation.show.indexOf(target) < 0) { + // Previously shown but now absent + + operation.hide.push(target); + operation.toHide.push(target); + operation.toRemove.push(target); + } else { + persistantStartIds.push(id); + } + } + + if (!h.isEqualArray(persistantStartIds, persistantNewIds)) { + operation.willSort = true; + } + + self.callActions('afterDiffDatasets', arguments); + }, + + /** + * @private + * @instance + * @since 3.1.5 + * @param {DocumentFragment} frag + * @param {(HTMLElement|null)} nextEl + * @param {Array.} targets + * @return {void} + */ + + insertDatasetFrag: function(frag, nextEl, targets) { + var self = this; + var insertAt = nextEl ? h.arrayFromList(self.dom.parent.children).indexOf(nextEl) : self.targets.length; + + self.dom.parent.insertBefore(frag, nextEl); + + while (targets.length) { + self.targets.splice(insertAt, 0, targets.shift()); + + insertAt++; + } + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {mixitup.CommandSort} sortCommandA + * @param {mixitup.CommandSort} sortCommandB + * @return {boolean} + */ + + willSort: function(sortCommandA, sortCommandB) { + var self = this, + result = false; + + if ( + self.config.behavior.liveSort || + sortCommandA.order === 'random' || + sortCommandA.attribute !== sortCommandB.attribute || + sortCommandA.order !== sortCommandB.order || + sortCommandA.collection !== sortCommandB.collection || + (sortCommandA.next === null && sortCommandB.next) || + (sortCommandA.next && sortCommandB.next === null) + ) { + result = true; + } else if (sortCommandA.next && sortCommandB.next) { + result = self.willSort(sortCommandA.next, sortCommandB.next); + } else { + result = false; + } + + return self.callFilters('resultWillSort', result, arguments); + }, + + /** + * A shorthand method for `.filter('all')`. Shows all targets in the container. + * + * @example + * + * .show() + * + * @example Example: Showing all targets + * + * mixer.show() + * .then(function(state) { + * console.log(state.totalShow === state.totalTargets); // true + * }); + * + * @public + * @instance + * @since 3.0.0 + * @return {Promise.} + */ + + show: function() { + var self = this; + + return self.filter('all'); + }, + + /** + * A shorthand method for `.filter('none')`. Hides all targets in the container. + * + * @example + * + * .hide() + * + * @example Example: Hiding all targets + * + * mixer.hide() + * .then(function(state) { + * console.log(state.totalShow === 0); // true + * console.log(state.totalHide === state.totalTargets); // true + * }); + * + * @public + * @instance + * @since 3.0.0 + * @return {Promise.} + */ + + hide: function() { + var self = this; + + return self.filter('none'); + }, + + /** + * Returns a boolean indicating whether or not a MixItUp operation is + * currently in progress. + * + * @example + * + * .isMixing() + * + * @example Example: Checking the status of a mixer + * + * mixer.sort('random', function() { + * console.log(mixer.isMixing()) // false + * }); + * + * console.log(mixer.isMixing()) // true + * + * @public + * @instance + * @since 2.0.0 + * @return {boolean} + */ + + isMixing: function() { + var self = this; + + return self.isBusy; + }, + + /** + * Filters all targets in the container by a provided selector string, or the values `'all'` + * or `'none'`. Only targets matching the selector will be shown. + * + * @example + * + * .filter(selector [, animate] [, callback]) + * + * @example Example 1: Filtering targets by a class selector + * + * mixer.filter('.category-a') + * .then(function(state) { + * console.log(state.totalShow === containerEl.querySelectorAll('.category-a').length); // true + * }); + * + * @example Example 2: Filtering targets by an attribute selector + * + * mixer.filter('[data-category~="a"]') + * .then(function(state) { + * console.log(state.totalShow === containerEl.querySelectorAll('[data-category~="a"]').length); // true + * }); + * + * @example Example 3: Filtering targets by a compound selector + * + * // Show only those targets with the classes 'category-a' AND 'category-b' + * + * mixer.filter('.category-a.category-c') + * .then(function(state) { + * console.log(state.totalShow === containerEl.querySelectorAll('.category-a.category-c').length); // true + * }); + * + * @example Example 4: Filtering via an element collection + * + * var collection = Array.from(container.querySelectorAll('.mix')); + * + * console.log(collection.length); // 34 + * + * // Filter the collection manually using Array.prototype.filter + * + * var filtered = collection.filter(function(target) { + * return parseInt(target.getAttribute('data-price')) > 10; + * }); + * + * console.log(filtered.length); // 22 + * + * // Pass the filtered collection to MixItUp + * + * mixer.filter(filtered) + * .then(function(state) { + * console.log(state.activeFilter.collection.length === 22); // true + * }); + * + * @public + * @instance + * @since 2.0.0 + * @param {(string|HTMLElement|Array.)} selector + * Any valid CSS selector (i.e. `'.category-a'`), or the values `'all'` or `'none'`. The filter method also accepts a reference to single target element or a collection of target elements to show. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + filter: function() { + var self = this, + instruction = self.parseFilterArgs(arguments); + + return self.multimix({ + filter: instruction.command + }, instruction.animate, instruction.callback); + }, + + /** + * Adds an additional selector to the currently active filter selector, concatenating + * as per the logic defined in `controls.toggleLogic`. + * + * @example + * + * .toggleOn(selector [, animate] [, callback]) + * + * @example Example: Toggling on a filter selector + * + * console.log(mixer.getState().activeFilter.selector); // '.category-a' + * + * mixer.toggleOn('.category-b') + * .then(function(state) { + * console.log(state.activeFilter.selector); // '.category-a, .category-b' + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {string} selector + * Any valid CSS selector (i.e. `'.category-a'`) + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + toggleOn: function() { + var self = this, + instruction = self.parseFilterArgs(arguments), + selector = instruction.command.selector, + toggleSelector = ''; + + self.isToggling = true; + + if (self.toggleArray.indexOf(selector) < 0) { + self.toggleArray.push(selector); + } + + toggleSelector = self.getToggleSelector(); + + return self.multimix({ + filter: toggleSelector + }, instruction.animate, instruction.callback); + }, + + /** + * Removes a selector from the active filter selector. + * + * @example + * + * .toggleOff(selector [, animate] [, callback]) + * + * @example Example: Toggling off a filter selector + * + * console.log(mixer.getState().activeFilter.selector); // '.category-a, .category-b' + * + * mixer.toggleOff('.category-b') + * .then(function(state) { + * console.log(state.activeFilter.selector); // '.category-a' + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {string} selector + * Any valid CSS selector (i.e. `'.category-a'`) + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + toggleOff: function() { + var self = this, + instruction = self.parseFilterArgs(arguments), + selector = instruction.command.selector, + selectorIndex = self.toggleArray.indexOf(selector), + toggleSelector = ''; + + self.isToggling = true; + + if (selectorIndex > -1) { + self.toggleArray.splice(selectorIndex, 1); + } + + toggleSelector = self.getToggleSelector(); + + return self.multimix({ + filter: toggleSelector + }, instruction.animate, instruction.callback); + }, + + /** + * Sorts all targets in the container according to a provided sort string. + * + * @example + * + * .sort(sortString [, animate] [, callback]) + * + * @example Example 1: Sorting by the default DOM order + * + * // Reverse the default order of the targets + * + * mixer.sort('default:desc') + * .then(function(state) { + * console.log(state.activeSort.attribute === 'default'); // true + * console.log(state.activeSort.order === 'desc'); // true + * }); + * + * @example Example 2: Sorting by a custom data-attribute + * + * // Sort the targets by the value of a `data-published-date` attribute + * + * mixer.sort('published-date:asc') + * .then(function(state) { + * console.log(state.activeSort.attribute === 'published-date'); // true + * console.log(state.activeSort.order === 'asc'); // true + * }); + * + * @example Example 3: Sorting by multiple attributes + * + * // Sort the targets by the value of a `data-published-date` attribute, then by `data-title` + * + * mixer.sort('published-date:desc data-title:asc') + * .then(function(state) { + * console.log(state.activeSort.attribute === 'published-date'); // true + * console.log(state.activeSort.order === 'desc'); // true + * + * console.log(state.activeSort.next.attribute === 'title'); // true + * console.log(state.activeSort.next.order === 'asc'); // true + * }); + * + * @example Example 4: Sorting by random + * + * mixer.sort('random') + * .then(function(state) { + * console.log(state.activeSort.order === 'random') // true + * }); + * + * @example Example 5: Sorting via an element collection + * + * var collection = Array.from(container.querySelectorAll('.mix')); + * + * // Swap the position of two elements in the collection: + * + * var temp = collection[1]; + * + * collection[1] = collection[0]; + * collection[0] = temp; + * + * // Pass the sorted collection to MixItUp + * + * mixer.sort(collection) + * .then(function(state) { + * console.log(state.targets[0] === collection[0]); // true + * }); + * + * @public + * @instance + * @since 2.0.0 + * @param {(string|Array.)} sortString + * A valid sort string (e.g. `'default'`, `'published-date:asc'`, or `'random'`). The sort method also accepts an array of all target elements in a user-defined order. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + sort: function() { + var self = this, + instruction = self.parseSortArgs(arguments); + + return self.multimix({ + sort: instruction.command + }, instruction.animate, instruction.callback); + }, + + /** + * Changes the layout of the container by adding, removing or updating a + * layout-specific class name. If `animation.animateResizetargets` is + * enabled, MixItUp will attempt to gracefully animate the width, height, + * and position of targets between layout states. + * + * @example + * + * .changeLayout(containerClassName [, animate] [, callback]) + * + * @example Example 1: Adding a new class name to the container + * + * mixer.changeLayout('container-list') + * .then(function(state) { + * console.log(state.activeContainerClass === 'container-list'); // true + * }); + * + * @example Example 2: Removing a previously added class name from the container + * + * mixer.changeLayout('') + * .then(function(state) { + * console.log(state.activeContainerClass === ''); // true + * }); + * + * @public + * @instance + * @since 2.0.0 + * @param {string} containerClassName + * A layout-specific class name to add to the container. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + changeLayout: function() { + var self = this, + instruction = self.parseChangeLayoutArgs(arguments); + + return self.multimix({ + changeLayout: instruction.command + }, instruction.animate, instruction.callback); + }, + + /** + * Updates the contents and order of the container to reflect the provided dataset, + * if the dataset API is in use. + * + * The dataset API is designed for use in API-driven JavaScript applications, and + * can be used instead of DOM-based methods such as `.filter()`, `.sort()`, + * `.insert()`, etc. When used, insertion, removal, sorting and pagination can be + * achieved purely via changes to your data model, without the uglyness of having + * to interact with or query the DOM directly. + * + * @example + * + * .dataset(dataset [, animate] [, callback]) + * + * @example Example 1: Rendering a dataset + * + * var myDataset = [ + * {id: 1, ...}, + * {id: 2, ...}, + * {id: 3, ...} + * ]; + * + * mixer.dataset(myDataset) + * .then(function(state) { + * console.log(state.totalShow === 3); // true + * }); + * + * @example Example 2: Sorting a dataset + * + * // Create a new dataset in reverse order + * + * var newDataset = myDataset.slice().reverse(); + * + * mixer.dataset(newDataset) + * .then(function(state) { + * console.log(state.activeDataset[0] === myDataset[2]); // true + * }); + * + * @example Example 3: Removing an item from the dataset + * + * console.log(myDataset.length); // 3 + * + * // Create a new dataset with the last item removed. + * + * var newDataset = myDataset.slice().pop(); + * + * mixer.dataset(newDataset) + * .then(function(state) { + * console.log(state.totalShow === 2); // true + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {Array.} dataset + * An array of objects, each one representing the underlying data model of a target to be rendered. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + dataset: function() { + var self = this, + instruction = self.parseDatasetArgs(arguments), + operation = null, + queueItem = null, + animate = false; + + self.callActions('beforeDataset', arguments); + + if (!self.isBusy) { + if (instruction.callback) self.userCallback = instruction.callback; + + animate = (instruction.animate ^ self.config.animation.enable) ? instruction.animate : self.config.animation.enable; + + operation = self.getDataOperation(instruction.command.dataset); + + return self.goMix(animate, operation); + } else { + queueItem = new mixitup.QueueItem(); + + queueItem.args = arguments; + queueItem.instruction = instruction; + + return self.queueMix(queueItem); + } + }, + + /** + * Performs simultaneous `filter`, `sort`, `insert`, `remove` and `changeLayout` + * operations as requested. + * + * @example + * + * .multimix(multimixCommand [, animate] [, callback]) + * + * @example Example 1: Performing simultaneous filtering and sorting + * + * mixer.multimix({ + * filter: '.category-b', + * sort: 'published-date:desc' + * }) + * .then(function(state) { + * console.log(state.activeFilter.selector === '.category-b'); // true + * console.log(state.activeSort.attribute === 'published-date'); // true + * }); + * + * @example Example 2: Performing simultaneous sorting, insertion, and removal + * + * console.log(mixer.getState().totalShow); // 6 + * + * // NB: When inserting via `multimix()`, an object should be provided as the value + * // for the `insert` portion of the command, allowing for a collection of elements + * // and an insertion index to be specified. + * + * mixer.multimix({ + * sort: 'published-date:desc', // Sort the container, including any new elements + * insert: { + * collection: [newElementReferenceA, newElementReferenceB], // Add 2 new elements at index 5 + * index: 5 + * }, + * remove: existingElementReference // Remove 1 existing element + * }) + * .then(function(state) { + * console.log(state.activeSort.attribute === 'published-date'); // true + * console.log(state.totalShow === 7); // true + * }); + * + * @public + * @instance + * @since 2.0.0 + * @param {object} multimixCommand + * An object containing one or more things to do + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + multimix: function() { + var self = this, + operation = null, + animate = false, + queueItem = null, + instruction = self.parseMultimixArgs(arguments); + + self.callActions('beforeMultimix', arguments); + + if (!self.isBusy) { + operation = self.getOperation(instruction.command); + + if (self.config.controls.enable) { + // Update controls for API calls + + if (instruction.command.filter && !self.isToggling) { + // As we are not toggling, reset the toggle array + // so new filter overrides existing toggles + + self.toggleArray.length = 0; + self.buildToggleArray(operation.command); + } + + if (self.queue.length < 1) { + self.updateControls(operation.command); + } + } + + if (instruction.callback) self.userCallback = instruction.callback; + + // Always allow the instruction to override the instance setting + + animate = (instruction.animate ^ self.config.animation.enable) ? + instruction.animate : + self.config.animation.enable; + + self.callFilters('operationMultimix', operation, arguments); + + return self.goMix(animate, operation); + } else { + queueItem = new mixitup.QueueItem(); + + queueItem.args = arguments; + queueItem.instruction = instruction; + queueItem.triggerElement = self.lastClicked; + queueItem.isToggling = self.isToggling; + + return self.queueMix(queueItem); + } + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {object} multimixCommand + * @param {boolean} [isPreFetch] + * An optional boolean indicating that the operation is being pre-fetched for execution at a later time. + * @return {Operation|null} + */ + + getOperation: function(multimixCommand) { + var self = this, + sortCommand = multimixCommand.sort, + filterCommand = multimixCommand.filter, + changeLayoutCommand = multimixCommand.changeLayout, + removeCommand = multimixCommand.remove, + insertCommand = multimixCommand.insert, + operation = new mixitup.Operation(); + + operation = self.callFilters('operationUnmappedGetOperation', operation, arguments); + + operation.id = h.randomHex(); + operation.command = multimixCommand; + operation.startState = self.state; + operation.triggerElement = self.lastClicked; + + if (self.isBusy) { + if (self.config.debug.showWarnings) { + console.warn(mixitup.messages.warningGetOperationInstanceBusy()); + } + + return null; + } + + if (insertCommand) { + self.insertTargets(insertCommand, operation); + } + + if (removeCommand) { + operation.toRemove = removeCommand.targets; + } + + operation.startSort = operation.newSort = operation.startState.activeSort; + operation.startOrder = operation.newOrder = self.targets; + + if (sortCommand) { + operation.startSort = operation.startState.activeSort; + operation.newSort = sortCommand; + + operation.willSort = self.willSort(sortCommand, operation.startState.activeSort); + + if (operation.willSort) { + self.sortOperation(operation); + } + } + + operation.startFilter = operation.startState.activeFilter; + + if (filterCommand) { + operation.newFilter = filterCommand; + } else { + operation.newFilter = h.extend(new mixitup.CommandFilter(), operation.startFilter); + } + + if (operation.newFilter.selector === 'all') { + operation.newFilter.selector = self.config.selectors.target; + } else if (operation.newFilter.selector === 'none') { + operation.newFilter.selector = ''; + } + + self.filterOperation(operation); + + operation.startContainerClassName = operation.startState.activeContainerClassName; + + if (changeLayoutCommand) { + operation.newContainerClassName = changeLayoutCommand.containerClassName; + + if (operation.newContainerClassName !== operation.startContainerClassName) { + operation.willChangeLayout = true; + } + } else { + operation.newContainerClassName = operation.startContainerClassName; + } + + if (self.config.animation.enable) { + // Populate the operation's position data + + self.getStartMixData(operation); + self.setInter(operation); + + operation.docState = h.getDocumentState(self.dom.document); + + self.getInterMixData(operation); + self.setFinal(operation); + self.getFinalMixData(operation); + + self.parseEffects(); + + operation.hasEffect = self.hasEffect(); + + self.getTweenData(operation); + } + + if (operation.willSort) { + self.targets = operation.newOrder; + } + + operation.newState = self.buildState(operation); + + return self.callFilters('operationMappedGetOperation', operation, arguments); + }, + + /** + * Renders a previously created operation at a specific point in its path, as + * determined by a multiplier between 0 and 1. + * + * @example + * .tween(operation, multiplier) + * + * @private + * @instance + * @since 3.0.0 + * @param {mixitup.Operation} operation + * An operation object created via the `getOperation` method + * + * @param {Float} multiplier + * Any number between 0 and 1 representing the percentage complete of the operation + * @return {void} + */ + + tween: function(operation, multiplier) { + var target = null, + posData = null, + toHideIndex = -1, + i = -1; + + multiplier = Math.min(multiplier, 1); + multiplier = Math.max(multiplier, 0); + + for (i = 0; target = operation.show[i]; i++) { + posData = operation.showPosData[i]; + + target.applyTween(posData, multiplier); + } + + for (i = 0; target = operation.hide[i]; i++) { + if (target.isShown) { + target.hide(); + } + + if ((toHideIndex = operation.toHide.indexOf(target)) > -1) { + posData = operation.toHidePosData[toHideIndex]; + + if (!target.isShown) { + target.show(); + } + + target.applyTween(posData, multiplier); + } + } + }, + + /** + * Inserts one or more new target elements into the container at a specified + * index. + * + * To be indexed as targets, new elements must match the `selectors.target` + * selector (`'.mix'` by default). + * + * @example + * + * .insert(newElements [, index] [, animate], [, callback]) + * + * @example Example 1: Inserting a single element via reference + * + * console.log(mixer.getState().totalShow); // 0 + * + * // Create a new element + * + * var newElement = document.createElement('div'); + * newElement.classList.add('mix'); + * + * mixer.insert(newElement) + * .then(function(state) { + * console.log(state.totalShow === 1); // true + * }); + * + * @example Example 2: Inserting a single element via HTML string + * + * console.log(mixer.getState().totalShow); // 1 + * + * // Create a new element via reference + * + * var newElementHtml = '<div class="mix"></div>'; + * + * // Create and insert the new element at index 1 + * + * mixer.insert(newElementHtml, 1) + * .then(function(state) { + * console.log(state.totalShow === 2); // true + * console.log(state.show[1].outerHTML === newElementHtml); // true + * }); + * + * @example Example 3: Inserting multiple elements via reference + * + * console.log(mixer.getState().totalShow); // 2 + * + * // Create an array of new elements to insert. + * + * var newElement1 = document.createElement('div'); + * var newElement2 = document.createElement('div'); + * + * newElement1.classList.add('mix'); + * newElement2.classList.add('mix'); + * + * var newElementsCollection = [newElement1, newElement2]; + * + * // Insert the new elements starting at index 1 + * + * mixer.insert(newElementsCollection, 1) + * .then(function(state) { + * console.log(state.totalShow === 4); // true + * console.log(state.show[1] === newElement1); // true + * console.log(state.show[2] === newElement2); // true + * }); + * + * @example Example 4: Inserting a jQuery collection object containing one or more elements + * + * console.log(mixer.getState().totalShow); // 4 + * + * var $newElement = $('<div class="mix"></div>'); + * + * // Insert the new elements starting at index 3 + * + * mixer.insert($newElement, 3) + * .then(function(state) { + * console.log(state.totalShow === 5); // true + * console.log(state.show[3] === $newElement[0]); // true + * }); + * + * @public + * @instance + * @since 2.0.0 + * @param {(HTMLElement|Array.|string)} newElements + * A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. + * @param {number} index=0 + * The index at which to insert the new element(s). `0` by default. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + insert: function() { + var self = this, + args = self.parseInsertArgs(arguments); + + return self.multimix({ + insert: args.command + }, args.animate, args.callback); + }, + + /** + * Inserts one or more new elements before a provided reference element. + * + * @example + * + * .insertBefore(newElements, referenceElement [, animate] [, callback]) + * + * @example Example: Inserting a new element before a reference element + * + * // An existing reference element is chosen at index 2 + * + * var referenceElement = mixer.getState().show[2]; + * + * // Create a new element + * + * var newElement = document.createElement('div'); + * newElement.classList.add('mix'); + * + * mixer.insertBefore(newElement, referenceElement) + * .then(function(state) { + * // The new element is inserted into the container at index 2, before the reference element + * + * console.log(state.show[2] === newElement); // true + * + * // The reference element is now at index 3 + * + * console.log(state.show[3] === referenceElement); // true + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {(HTMLElement|Array.|string)} newElements + * A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. + * @param {HTMLElement} referenceElement + * A reference to an existing element in the container to insert new elements before. + *@param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + insertBefore: function() { + var self = this, + args = self.parseInsertArgs(arguments); + + return self.insert(args.command.collection, 'before', args.command.sibling, args.animate, args.callback); + }, + + /** + * Inserts one or more new elements after a provided reference element. + * + * @example + * + * .insertAfter(newElements, referenceElement [, animate] [, callback]) + * + * @example Example: Inserting a new element after a reference element + * + * // An existing reference element is chosen at index 2 + * + * var referenceElement = mixer.getState().show[2]; + * + * // Create a new element + * + * var newElement = document.createElement('div'); + * newElement.classList.add('mix'); + * + * mixer.insertAfter(newElement, referenceElement) + * .then(function(state) { + * // The new element is inserted into the container at index 3, after the reference element + * + * console.log(state.show[3] === newElement); // true + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {(HTMLElement|Array.|string)} newElements + * A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. + * @param {HTMLElement} referenceElement + * A reference to an existing element in the container to insert new elements after. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + insertAfter: function() { + var self = this, + args = self.parseInsertArgs(arguments); + + return self.insert(args.command.collection, 'after', args.command.sibling, args.animate, args.callback); + }, + + /** + * Inserts one or more new elements into the container before all existing targets. + * + * @example + * + * .prepend(newElements [,animate] [,callback]) + * + * @example Example: Prepending a new element + * + * // Create a new element + * + * var newElement = document.createElement('div'); + * newElement.classList.add('mix'); + * + * // Insert the element into the container + * + * mixer.prepend(newElement) + * .then(function(state) { + * console.log(state.show[0] === newElement); // true + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {(HTMLElement|Array.|string)} newElements + * A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + prepend: function() { + var self = this, + args = self.parseInsertArgs(arguments); + + return self.insert(0, args.command.collection, args.animate, args.callback); + }, + + /** + * Inserts one or more new elements into the container after all existing targets. + * + * @example + * + * .append(newElements [,animate] [,callback]) + * + * @example Example: Appending a new element + * + * // Create a new element + * + * var newElement = document.createElement('div'); + * newElement.classList.add('mix'); + * + * // Insert the element into the container + * + * mixer.append(newElement) + * .then(function(state) { + * console.log(state.show[state.show.length - 1] === newElement); // true + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {(HTMLElement|Array.|string)} newElements + * A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + append: function() { + var self = this, + args = self.parseInsertArgs(arguments); + + return self.insert(self.state.totalTargets, args.command.collection, args.animate, args.callback); + }, + + /** + * Removes one or more existing target elements from the container. + * + * @example + * + * .remove(elements [, animate] [, callback]) + * + * @example Example 1: Removing an element by reference + * + * var elementToRemove = containerEl.firstElementChild; + * + * mixer.remove(elementToRemove) + * .then(function(state) { + * console.log(state.targets.indexOf(elementToRemove) === -1); // true + * }); + * + * @example Example 2: Removing a collection of elements by reference + * + * var elementsToRemove = containerEl.querySelectorAll('.category-a'); + * + * console.log(elementsToRemove.length) // 3 + * + * mixer.remove(elementsToRemove) + * .then(function() { + * console.log(containerEl.querySelectorAll('.category-a').length); // 0 + * }); + * + * @example Example 3: Removing one or more elements by selector + * + * mixer.remove('.category-a') + * .then(function() { + * console.log(containerEl.querySelectorAll('.category-a').length); // 0 + * }); + * + * @example Example 4: Removing an element by index + * + * console.log(mixer.getState.totalShow); // 4 + * + * // Remove the element at index 3 + * + * mixer.remove(3) + * .then(function(state) { + * console.log(state.totalShow); // 3 + * console.log(state.show[3]); // undefined + * }); + * + * + * @public + * @instance + * @since 3.0.0 + * @param {(HTMLElement|Array.|string|number)} elements + * A reference to a single element to remove, an array-like collection of elements, a selector string, or the index of an element to remove. + * @param {boolean} [animate=true] + * An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default. + * @param {function} [callback=null] + * An optional callback function to be invoked after the operation has completed. + * @return {Promise.} + * A promise resolving with the current state object. + */ + + remove: function() { + var self = this, + args = self.parseRemoveArgs(arguments); + + return self.multimix({ + remove: args.command + }, args.animate, args.callback); + }, + + /** + * Retrieves the the value of any property or sub-object within the current + * mixitup configuration, or the whole configuration object. + * + * @example + * + * .getConfig([stringKey]) + * + * @example Example 1: retrieve the entire configuration object + * + * var config = mixer.getConfig(); // Config { ... } + * + * @example Example 2: retrieve a named sub-object of configuration object + * + * var animation = mixer.getConfig('animation'); // ConfigAnimation { ... } + * + * @example Example 3: retrieve a value of configuration object via a dot-notation string key + * + * var effects = mixer.getConfig('animation.effects'); // 'fade scale' + * + * @public + * @instance + * @since 2.0.0 + * @param {string} [stringKey] A "dot-notation" string key + * @return {*} + */ + + getConfig: function(stringKey) { + var self = this, + value = null; + + if (!stringKey) { + value = self.config; + } else { + value = h.getProperty(self.config, stringKey); + } + + return self.callFilters('valueGetConfig', value, arguments); + }, + + /** + * Updates the configuration of the mixer, after it has been instantiated. + * + * See the Configuration Object documentation for a full list of avilable + * configuration options. + * + * @example + * + * .configure(config) + * + * @example Example 1: Updating animation options + * + * mixer.configure({ + * animation: { + * effects: 'fade translateX(-100%)', + * duration: 300 + * } + * }); + * + * @example Example 2: Removing a callback after it has been set + * + * var mixer; + * + * function handleMixEndOnce() { + * // Do something .. + * + * // Then nullify the callback + * + * mixer.configure({ + * callbacks: { + * onMixEnd: null + * } + * }); + * }; + * + * // Instantiate a mixer with a callback defined + * + * mixer = mixitup(containerEl, { + * callbacks: { + * onMixEnd: handleMixEndOnce + * } + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {object} config + * An object containing one of more configuration options. + * @return {void} + */ + + configure: function(config) { + var self = this; + + self.callActions('beforeConfigure', arguments); + + h.extend(self.config, config, true, true); + + self.callActions('afterConfigure', arguments); + }, + + /** + * Returns an object containing information about the current state of the + * mixer. See the State Object documentation for more information. + * + * NB: State objects are immutable and should therefore be regenerated + * after any operation. + * + * @example + * + * .getState(); + * + * @example Example: Retrieving a state object + * + * var state = mixer.getState(); + * + * console.log(state.totalShow + 'targets are currently shown'); + * + * @public + * @instance + * @since 2.0.0 + * @return {mixitup.State} An object reflecting the current state of the mixer. + */ + + getState: function() { + var self = this, + state = null; + + state = new mixitup.State(); + + h.extend(state, self.state); + + h.freeze(state); + + return self.callFilters('stateGetState', state, arguments); + }, + + /** + * Forces the re-indexing all targets within the container. + * + * This should only be used if some other piece of code in your application + * has manipulated the contents of your container, which should be avoided. + * + * If you need to add or remove target elements from the container, use + * the built-in `.insert()` or `.remove()` methods, and MixItUp will keep + * itself up to date. + * + * @example + * + * .forceRefresh() + * + * @example Example: Force refreshing the mixer after external DOM manipulation + * + * console.log(mixer.getState().totalShow); // 3 + * + * // An element is removed from the container via some external DOM manipulation code: + * + * containerEl.removeChild(containerEl.firstElementChild); + * + * // The mixer does not know that the number of targets has changed: + * + * console.log(mixer.getState().totalShow); // 3 + * + * mixer.forceRefresh(); + * + * // After forceRefresh, the mixer is in sync again: + * + * console.log(mixer.getState().totalShow); // 2 + * + * @public + * @instance + * @since 2.1.2 + * @return {void} + */ + + forceRefresh: function() { + var self = this; + + self.indexTargets(); + }, + + /** + * Forces the re-rendering of all targets when using the Dataset API. + * + * By default, targets are only re-rendered when `data.dirtyCheck` is + * enabled, and an item's data has changed when `dataset()` is called. + * + * The `forceRender()` method allows for the re-rendering of all targets + * in response to some arbitrary event, such as the changing of the target + * render function. + * + * Targets are rendered against their existing data. + * + * @example + * + * .forceRender() + * + * @example Example: Force render targets after changing the target render function + * + * console.log(container.innerHTML); // ... <span class="mix">Foo</span> ... + * + * mixer.configure({ + * render: { + * target: (item) => `<a href="/${item.slug}/" class="mix">${item.title}</a>` + * } + * }); + * + * mixer.forceRender(); + * + * console.log(container.innerHTML); // ... <a href="/foo/" class="mix">Foo</a> ... + * + * @public + * @instance + * @since 3.2.1 + * @return {void} + */ + + forceRender: function() { + var self = this, + target = null, + el = null, + id = ''; + + for (id in self.cache) { + target = self.cache[id]; + + el = target.render(target.data); + + if (el !== target.dom.el) { + // Update target element reference + + if (target.isInDom) { + target.unbindEvents(); + + self.dom.parent.replaceChild(el, target.dom.el); + } + + if (!target.isShown) { + el.style.display = 'none'; + } + + target.dom.el = el; + + if (target.isInDom) { + target.bindEvents(); + } + } + } + + self.state = self.buildState(self.lastOperation); + }, + + /** + * Removes mixitup functionality from the container, unbinds all control + * event handlers, and deletes the mixer instance from MixItUp's internal + * cache. + * + * This should be performed whenever a mixer's container is removed from + * the DOM, such as during a page change in a single page application, + * or React's `componentWillUnmount()`. + * + * @example + * + * .destroy([cleanUp]) + * + * @example Example: Destroying the mixer before removing its container element + * + * mixer.destroy(); + * + * containerEl.parentElement.removeChild(containerEl); + * + * @public + * @instance + * @since 2.0.0 + * @param {boolean} [cleanUp=false] + * An optional boolean dictating whether or not to clean up any inline `display: none;` styling applied to hidden targets. + * @return {void} + */ + + destroy: function(cleanUp) { + var self = this, + control = null, + target = null, + i = 0; + + self.callActions('beforeDestroy', arguments); + + for (i = 0; control = self.controls[i]; i++) { + control.removeBinding(self); + } + + for (i = 0; target = self.targets[i]; i++) { + if (cleanUp) { + target.show(); + } + + target.unbindEvents(); + } + + if (self.dom.container.id.match(/^MixItUp/)) { + self.dom.container.removeAttribute('id'); + } + + delete mixitup.instances[self.id]; + + self.callActions('afterDestroy', arguments); + } + }); + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.IMoveData = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.posIn = null; + this.posOut = null; + this.operation = null; + this.callback = null; + this.statusChange = ''; + this.duration = -1; + this.staggerIndex = -1; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.IMoveData); + + mixitup.IMoveData.prototype = Object.create(mixitup.Base.prototype); + + mixitup.IMoveData.prototype.constructor = mixitup.IMoveData; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.TargetDom = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.el = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.TargetDom); + + mixitup.TargetDom.prototype = Object.create(mixitup.Base.prototype); + + mixitup.TargetDom.prototype.constructor = mixitup.TargetDom; + + /** + * @constructor + * @namespace + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.Target = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.id = ''; + this.sortString = ''; + this.mixer = null; + this.callback = null; + this.isShown = false; + this.isBound = false; + this.isExcluded = false; + this.isInDom = false; + this.handler = null; + this.operation = null; + this.data = null; + this.dom = new mixitup.TargetDom(); + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Target); + + mixitup.Target.prototype = Object.create(mixitup.Base.prototype); + + h.extend(mixitup.Target.prototype, { + constructor: mixitup.Target, + + /** + * Initialises a newly instantiated Target. + * + * @private + * @instance + * @since 3.0.0 + * @param {(Element|null)} el + * @param {object} mixer + * @param {object} [data] + * @return {void} + */ + + init: function(el, mixer, data) { + var self = this, + id = ''; + + self.callActions('beforeInit', arguments); + + self.mixer = mixer; + + if (!el) { + // If no element is provided, render it + + el = self.render(data); + } + + self.cacheDom(el); + + self.bindEvents(); + + if (self.dom.el.style.display !== 'none') { + self.isShown = true; + } + + if (data && mixer.config.data.uidKey) { + if (typeof (id = data[mixer.config.data.uidKey]) === 'undefined' || id.toString().length < 1) { + throw new TypeError(mixitup.messages.errorDatasetInvalidUidKey({ + uidKey: mixer.config.data.uidKey + })); + } + + self.id = id; + self.data = data; + + mixer.cache[id] = self; + } + + self.callActions('afterInit', arguments); + }, + + /** + * Renders the target element using a user-defined renderer function. + * + * @private + * @instance + * @since 3.1.4 + * @param {object} data + * @return {void} + */ + + render: function(data) { + var self = this, + render = null, + el = null, + temp = null, + output = ''; + + self.callActions('beforeRender', arguments); + + render = self.callFilters('renderRender', self.mixer.config.render.target, arguments); + + if (typeof render !== 'function') { + throw new TypeError(mixitup.messages.errorDatasetRendererNotSet()); + } + + output = render(data); + + if (output && typeof output === 'object' && h.isElement(output)) { + el = output; + } else if (typeof output === 'string') { + temp = document.createElement('div'); + temp.innerHTML = output; + + el = temp.firstElementChild; + } + + return self.callFilters('elRender', el, arguments); + }, + + /** + * Caches references of DOM elements neccessary for the target's functionality. + * + * @private + * @instance + * @since 3.0.0 + * @param {Element} el + * @return {void} + */ + + cacheDom: function(el) { + var self = this; + + self.callActions('beforeCacheDom', arguments); + + self.dom.el = el; + + self.callActions('afterCacheDom', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {string} attributeName + * @return {void} + */ + + getSortString: function(attributeName) { + var self = this, + value = self.dom.el.getAttribute('data-' + attributeName) || ''; + + self.callActions('beforeGetSortString', arguments); + + value = isNaN(value * 1) ? + value.toLowerCase() : + value * 1; + + self.sortString = value; + + self.callActions('afterGetSortString', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @return {void} + */ + + show: function() { + var self = this; + + self.callActions('beforeShow', arguments); + + if (!self.isShown) { + self.dom.el.style.display = ''; + + self.isShown = true; + } + + self.callActions('afterShow', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @return {void} + */ + + hide: function() { + var self = this; + + self.callActions('beforeHide', arguments); + + if (self.isShown) { + self.dom.el.style.display = 'none'; + + self.isShown = false; + } + + self.callActions('afterHide', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {mixitup.IMoveData} moveData + * @return {void} + */ + + move: function(moveData) { + var self = this; + + self.callActions('beforeMove', arguments); + + if (!self.isExcluded) { + self.mixer.targetsMoved++; + } + + self.applyStylesIn(moveData); + + requestAnimationFrame(function() { + self.applyStylesOut(moveData); + }); + + self.callActions('afterMove', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {object} posData + * @param {number} multiplier + * @return {void} + */ + + applyTween: function(posData, multiplier) { + var self = this, + propertyName = '', + tweenData = null, + posIn = posData.posIn, + currentTransformValues = [], + currentValues = new mixitup.StyleData(), + i = -1; + + self.callActions('beforeApplyTween', arguments); + + currentValues.x = posIn.x; + currentValues.y = posIn.y; + + if (multiplier === 0) { + self.hide(); + } else if (!self.isShown) { + self.show(); + } + + for (i = 0; propertyName = mixitup.features.TWEENABLE[i]; i++) { + tweenData = posData.tweenData[propertyName]; + + if (propertyName === 'x') { + if (!tweenData) continue; + + currentValues.x = posIn.x + (tweenData * multiplier); + } else if (propertyName === 'y') { + if (!tweenData) continue; + + currentValues.y = posIn.y + (tweenData * multiplier); + } else if (tweenData instanceof mixitup.TransformData) { + if (!tweenData.value) continue; + + currentValues[propertyName].value = + posIn[propertyName].value + (tweenData.value * multiplier); + + currentValues[propertyName].unit = tweenData.unit; + + currentTransformValues.push( + propertyName + '(' + currentValues[propertyName].value + tweenData.unit + ')' + ); + } else { + if (!tweenData) continue; + + currentValues[propertyName] = posIn[propertyName] + (tweenData * multiplier); + + self.dom.el.style[propertyName] = currentValues[propertyName]; + } + } + + if (currentValues.x || currentValues.y) { + currentTransformValues.unshift('translate(' + currentValues.x + 'px, ' + currentValues.y + 'px)'); + } + + if (currentTransformValues.length) { + self.dom.el.style[mixitup.features.transformProp] = currentTransformValues.join(' '); + } + + self.callActions('afterApplyTween', arguments); + }, + + /** + * Applies the initial styling to a target element before any transition + * is applied. + * + * @private + * @instance + * @param {mixitup.IMoveData} moveData + * @return {void} + */ + + applyStylesIn: function(moveData) { + var self = this, + posIn = moveData.posIn, + isFading = self.mixer.effectsIn.opacity !== 1, + transformValues = []; + + self.callActions('beforeApplyStylesIn', arguments); + + transformValues.push('translate(' + posIn.x + 'px, ' + posIn.y + 'px)'); + + if (self.mixer.config.animation.animateResizeTargets) { + if (moveData.statusChange !== 'show') { + // Don't apply posIn width or height or showing, as will be 0 + + self.dom.el.style.width = posIn.width + 'px'; + self.dom.el.style.height = posIn.height + 'px'; + } + + self.dom.el.style.marginRight = posIn.marginRight + 'px'; + self.dom.el.style.marginBottom = posIn.marginBottom + 'px'; + } + + isFading && (self.dom.el.style.opacity = posIn.opacity); + + if (moveData.statusChange === 'show') { + transformValues = transformValues.concat(self.mixer.transformIn); + } + + self.dom.el.style[mixitup.features.transformProp] = transformValues.join(' '); + + self.callActions('afterApplyStylesIn', arguments); + }, + + /** + * Applies a transition followed by the final styles for the element to + * transition towards. + * + * @private + * @instance + * @param {mixitup.IMoveData} moveData + * @return {void} + */ + + applyStylesOut: function(moveData) { + var self = this, + transitionRules = [], + transformValues = [], + isResizing = self.mixer.config.animation.animateResizeTargets, + isFading = typeof self.mixer.effectsIn.opacity !== 'undefined'; + + self.callActions('beforeApplyStylesOut', arguments); + + // Build the transition rules + + transitionRules.push(self.writeTransitionRule( + mixitup.features.transformRule, + moveData.staggerIndex + )); + + if (moveData.statusChange !== 'none') { + transitionRules.push(self.writeTransitionRule( + 'opacity', + moveData.staggerIndex, + moveData.duration + )); + } + + if (isResizing) { + transitionRules.push(self.writeTransitionRule( + 'width', + moveData.staggerIndex, + moveData.duration + )); + + transitionRules.push(self.writeTransitionRule( + 'height', + moveData.staggerIndex, + moveData.duration + )); + + transitionRules.push(self.writeTransitionRule( + 'margin', + moveData.staggerIndex, + moveData.duration + )); + } + + // If no callback was provided, the element will + // not transition in any way so tag it as "immovable" + + if (!moveData.callback) { + self.mixer.targetsImmovable++; + + if (self.mixer.targetsMoved === self.mixer.targetsImmovable) { + // If the total targets moved is equal to the + // number of immovable targets, the operation + // should be considered finished + + self.mixer.cleanUp(moveData.operation); + } + + return; + } + + // If the target will transition in some fasion, + // assign a callback function + + self.operation = moveData.operation; + self.callback = moveData.callback; + + // As long as the target is not excluded, increment + // the total number of targets bound + + !self.isExcluded && self.mixer.targetsBound++; + + // Tag the target as bound to differentiate from transitionEnd + // events that may come from stylesheet driven effects + + self.isBound = true; + + // Apply the transition + + self.applyTransition(transitionRules); + + // Apply width, height and margin negation + + if (isResizing && moveData.posOut.width > 0 && moveData.posOut.height > 0) { + self.dom.el.style.width = moveData.posOut.width + 'px'; + self.dom.el.style.height = moveData.posOut.height + 'px'; + self.dom.el.style.marginRight = moveData.posOut.marginRight + 'px'; + self.dom.el.style.marginBottom = moveData.posOut.marginBottom + 'px'; + } + + if (!self.mixer.config.animation.nudge && moveData.statusChange === 'hide') { + // If we're not nudging, the translation should be + // applied before any other transforms to prevent + // lateral movement + + transformValues.push('translate(' + moveData.posOut.x + 'px, ' + moveData.posOut.y + 'px)'); + } + + // Apply fade + + switch (moveData.statusChange) { + case 'hide': + isFading && (self.dom.el.style.opacity = self.mixer.effectsOut.opacity); + + transformValues = transformValues.concat(self.mixer.transformOut); + + break; + case 'show': + isFading && (self.dom.el.style.opacity = 1); + } + + if ( + self.mixer.config.animation.nudge || + (!self.mixer.config.animation.nudge && moveData.statusChange !== 'hide') + ) { + // Opposite of above - apply translate after + // other transform + + transformValues.push('translate(' + moveData.posOut.x + 'px, ' + moveData.posOut.y + 'px)'); + } + + // Apply transforms + + self.dom.el.style[mixitup.features.transformProp] = transformValues.join(' '); + + self.callActions('afterApplyStylesOut', arguments); + }, + + /** + * Combines the name of a CSS property with the appropriate duration and delay + * values to created a valid transition rule. + * + * @private + * @instance + * @since 3.0.0 + * @param {string} property + * @param {number} staggerIndex + * @param {number} duration + * @return {string} + */ + + writeTransitionRule: function(property, staggerIndex, duration) { + var self = this, + delay = self.getDelay(staggerIndex), + rule = ''; + + rule = property + ' ' + + (duration > 0 ? duration : self.mixer.config.animation.duration) + 'ms ' + + delay + 'ms ' + + (property === 'opacity' ? 'linear' : self.mixer.config.animation.easing); + + return self.callFilters('ruleWriteTransitionRule', rule, arguments); + }, + + /** + * Calculates the transition delay for each target element based on its index, if + * staggering is applied. If defined, A custom `animation.staggerSeqeuence` + * function can be used to manipulate the order of indices to produce custom + * stagger effects (e.g. for use in a grid with irregular row lengths). + * + * @private + * @instance + * @since 2.0.0 + * @param {number} index + * @return {number} + */ + + getDelay: function(index) { + var self = this, + delay = -1; + + if (typeof self.mixer.config.animation.staggerSequence === 'function') { + index = self.mixer.config.animation.staggerSequence.call(self, index, self.state); + } + + delay = !!self.mixer.staggerDuration ? index * self.mixer.staggerDuration : 0; + + return self.callFilters('delayGetDelay', delay, arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {string[]} rules + * @return {void} + */ + + applyTransition: function(rules) { + var self = this, + transitionString = rules.join(', '); + + self.callActions('beforeApplyTransition', arguments); + + self.dom.el.style[mixitup.features.transitionProp] = transitionString; + + self.callActions('afterApplyTransition', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Event} e + * @return {void} + */ + + handleTransitionEnd: function(e) { + var self = this, + propName = e.propertyName, + canResize = self.mixer.config.animation.animateResizeTargets; + + self.callActions('beforeHandleTransitionEnd', arguments); + + if ( + self.isBound && + e.target.matches(self.mixer.config.selectors.target) && + ( + propName.indexOf('transform') > -1 || + propName.indexOf('opacity') > -1 || + canResize && propName.indexOf('height') > -1 || + canResize && propName.indexOf('width') > -1 || + canResize && propName.indexOf('margin') > -1 + ) + ) { + self.callback.call(self, self.operation); + + self.isBound = false; + self.callback = null; + self.operation = null; + } + + self.callActions('afterHandleTransitionEnd', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {Event} e + * @return {void} + */ + + eventBus: function(e) { + var self = this; + + self.callActions('beforeEventBus', arguments); + + switch (e.type) { + case 'webkitTransitionEnd': + case 'transitionend': + self.handleTransitionEnd(e); + } + + self.callActions('afterEventBus', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @return {void} + */ + + unbindEvents: function() { + var self = this; + + self.callActions('beforeUnbindEvents', arguments); + + h.off(self.dom.el, 'webkitTransitionEnd', self.handler); + h.off(self.dom.el, 'transitionend', self.handler); + + self.callActions('afterUnbindEvents', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @return {void} + */ + + bindEvents: function() { + var self = this, + transitionEndEvent = ''; + + self.callActions('beforeBindEvents', arguments); + + transitionEndEvent = mixitup.features.transitionPrefix === 'webkit' ? 'webkitTransitionEnd' : 'transitionend'; + + self.handler = function(e) { + return self.eventBus(e); + }; + + h.on(self.dom.el, transitionEndEvent, self.handler); + + self.callActions('afterBindEvents', arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @param {boolean} [getBox] + * @return {PosData} + */ + + getPosData: function(getBox) { + var self = this, + styles = {}, + rect = null, + posData = new mixitup.StyleData(); + + self.callActions('beforeGetPosData', arguments); + + posData.x = self.dom.el.offsetLeft; + posData.y = self.dom.el.offsetTop; + + if (self.mixer.config.animation.animateResizeTargets || getBox) { + rect = self.dom.el.getBoundingClientRect(); + + posData.top = rect.top; + posData.right = rect.right; + posData.bottom = rect.bottom; + posData.left = rect.left; + + posData.width = rect.width; + posData.height = rect.height; + } + + if (self.mixer.config.animation.animateResizeTargets) { + styles = window.getComputedStyle(self.dom.el); + + posData.marginBottom = parseFloat(styles.marginBottom); + posData.marginRight = parseFloat(styles.marginRight); + } + + return self.callFilters('posDataGetPosData', posData, arguments); + }, + + /** + * @private + * @instance + * @since 3.0.0 + * @return {void} + */ + + cleanUp: function() { + var self = this; + + self.callActions('beforeCleanUp', arguments); + + self.dom.el.style[mixitup.features.transformProp] = ''; + self.dom.el.style[mixitup.features.transitionProp] = ''; + self.dom.el.style.opacity = ''; + + if (self.mixer.config.animation.animateResizeTargets) { + self.dom.el.style.width = ''; + self.dom.el.style.height = ''; + self.dom.el.style.marginRight = ''; + self.dom.el.style.marginBottom = ''; + } + + self.callActions('afterCleanUp', arguments); + } + }); + + /** + * A jQuery-collection-like wrapper around one or more `mixitup.Mixer` instances + * allowing simultaneous control of said instances similar to the MixItUp 2 API. + * + * @example + * new mixitup.Collection(instances) + * + * @constructor + * @namespace + * @memberof mixitup + * @private + * @since 3.0.0 + * @param {mixitup.Mixer[]} instances + */ + + mixitup.Collection = function(instances) { + var instance = null, + i = -1; + + this.callActions('beforeConstruct'); + + for (i = 0; instance = instances[i]; i++) { + this[i] = instance; + } + + this.length = instances.length; + + this.callActions('afterConstruct'); + + h.freeze(this); + }; + + mixitup.BaseStatic.call(mixitup.Collection); + + mixitup.Collection.prototype = Object.create(mixitup.Base.prototype); + + h.extend(mixitup.Collection.prototype, + /** @lends mixitup.Collection */ + { + constructor: mixitup.Collection, + + /** + * Calls a method on all instances in the collection by passing the method + * name as a string followed by any applicable parameters to be curried into + * to the method. + * + * @example + * .mixitup(methodName[,arg1][,arg2..]); + * + * @example + * var collection = new Collection([mixer1, mixer2]); + * + * return collection.mixitup('filter', '.category-a') + * .then(function(states) { + * state.forEach(function(state) { + * console.log(state.activeFilter.selector); // .category-a + * }); + * }); + * + * @public + * @instance + * @since 3.0.0 + * @param {string} methodName + * @return {Promise>} + */ + + mixitup: function(methodName) { + var self = this, + instance = null, + args = Array.prototype.slice.call(arguments), + tasks = [], + i = -1; + + this.callActions('beforeMixitup'); + + args.shift(); + + for (i = 0; instance = self[i]; i++) { + tasks.push(instance[methodName].apply(instance, args)); + } + + return self.callFilters('promiseMixitup', h.all(tasks, mixitup.libraries), arguments); + } + }); + + /** + * `mixitup.Operation` objects contain all data neccessary to describe the full + * lifecycle of any MixItUp operation. They can be used to compute and store an + * operation for use at a later time (e.g. programmatic tweening). + * + * @constructor + * @namespace + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.Operation = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.id = ''; + + this.args = []; + this.command = null; + this.showPosData = []; + this.toHidePosData = []; + + this.startState = null; + this.newState = null; + this.docState = null; + + this.willSort = false; + this.willChangeLayout = false; + this.hasEffect = false; + this.hasFailed = false; + + this.triggerElement = null; + + this.show = []; + this.hide = []; + this.matching = []; + this.toShow = []; + this.toHide = []; + this.toMove = []; + this.toRemove = []; + this.startOrder = []; + this.newOrder = []; + this.startSort = null; + this.newSort = null; + this.startFilter = null; + this.newFilter = null; + this.startDataset = null; + this.newDataset = null; + this.viewportDeltaX = 0; + this.viewportDeltaY = 0; + this.startX = 0; + this.startY = 0; + this.startHeight = 0; + this.startWidth = 0; + this.newX = 0; + this.newY = 0; + this.newHeight = 0; + this.newWidth = 0; + this.startContainerClassName = ''; + this.startDisplay = ''; + this.newContainerClassName = ''; + this.newDisplay = ''; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Operation); + + mixitup.Operation.prototype = Object.create(mixitup.Base.prototype); + + mixitup.Operation.prototype.constructor = mixitup.Operation; + + /** + * `mixitup.State` objects expose various pieces of data detailing the state of + * a MixItUp instance. They are provided at the start and end of any operation via + * callbacks and events, with the most recent state stored between operations + * for retrieval at any time via the API. + * + * @constructor + * @namespace + * @memberof mixitup + * @public + * @since 3.0.0 + */ + + mixitup.State = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /** + * The ID of the mixer instance. + * + * @name id + * @memberof mixitup.State + * @instance + * @type {string} + * @default '' + */ + + this.id = ''; + + /** + * The currently active filter command as set by a control click or API call. + * + * @name activeFilter + * @memberof mixitup.State + * @instance + * @type {mixitup.CommandFilter} + * @default null + */ + + this.activeFilter = null; + + /** + * The currently active sort command as set by a control click or API call. + * + * @name activeSort + * @memberof mixitup.State + * @instance + * @type {mixitup.CommandSort} + * @default null + */ + + this.activeSort = null; + + /** + * The current layout-specific container class name, if applied. + * + * @name activeContainerClassName + * @memberof mixitup.State + * @instance + * @type {string} + * @default '' + */ + + this.activeContainerClassName = ''; + + /** + * A reference to the container element that the mixer is instantiated on. + * + * @name container + * @memberof mixitup.State + * @instance + * @type {Element} + * @default null + */ + + this.container = null; + + /** + * An array of all target elements indexed by the mixer. + * + * @name targets + * @memberof mixitup.State + * @instance + * @type {Array.} + * @default [] + */ + + this.targets = []; + + /** + * An array of all target elements not matching the current filter. + * + * @name hide + * @memberof mixitup.State + * @instance + * @type {Array.} + * @default [] + */ + + this.hide = []; + + /** + * An array of all target elements matching the current filter and any additional + * limits applied such as pagination. + * + * @name show + * @memberof mixitup.State + * @instance + * @type {Array.} + * @default [] + */ + + this.show = []; + + /** + * An array of all target elements matching the current filter irrespective of + * any additional limits applied such as pagination. + * + * @name matching + * @memberof mixitup.State + * @instance + * @type {Array.} + * @default [] + */ + + this.matching = []; + + /** + * An integer representing the total number of target elements indexed by the + * mixer. Equivalent to `state.targets.length`. + * + * @name totalTargets + * @memberof mixitup.State + * @instance + * @type {number} + * @default -1 + */ + + this.totalTargets = -1; + + /** + * An integer representing the total number of target elements matching the + * current filter and any additional limits applied such as pagination. + * Equivalent to `state.show.length`. + * + * @name totalShow + * @memberof mixitup.State + * @instance + * @type {number} + * @default -1 + */ + + this.totalShow = -1; + + /** + * An integer representing the total number of target elements not matching + * the current filter. Equivalent to `state.hide.length`. + * + * @name totalHide + * @memberof mixitup.State + * @instance + * @type {number} + * @default -1 + */ + + this.totalHide = -1; + + /** + * An integer representing the total number of target elements matching the + * current filter irrespective of any other limits applied such as pagination. + * Equivalent to `state.matching.length`. + * + * @name totalMatching + * @memberof mixitup.State + * @instance + * @type {number} + * @default -1 + */ + + this.totalMatching = -1; + + /** + * A boolean indicating whether the last operation "failed", i.e. no targets + * could be found matching the filter. + * + * @name hasFailed + * @memberof mixitup.State + * @instance + * @type {boolean} + * @default false + */ + + this.hasFailed = false; + + /** + * The DOM element that was clicked if the last operation was triggered by the + * clicking of a control and not an API call. + * + * @name triggerElement + * @memberof mixitup.State + * @instance + * @type {Element|null} + * @default null + */ + + this.triggerElement = null; + + /** + * The currently active dataset underlying the rendered targets, if the + * dataset API is in use. + * + * @name activeDataset + * @memberof mixitup.State + * @instance + * @type {Array.} + * @default null + */ + + this.activeDataset = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.State); + + mixitup.State.prototype = Object.create(mixitup.Base.prototype); + + mixitup.State.prototype.constructor = mixitup.State; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.UserInstruction = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + this.command = {}; + this.animate = false; + this.callback = null; + + this.callActions('afterConstruct'); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.UserInstruction); + + mixitup.UserInstruction.prototype = Object.create(mixitup.Base.prototype); + + mixitup.UserInstruction.prototype.constructor = mixitup.UserInstruction; + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + */ + + mixitup.Messages = function() { + mixitup.Base.call(this); + + this.callActions('beforeConstruct'); + + /* Errors + ----------------------------------------------------------------------------- */ + + this.ERROR_FACTORY_INVALID_CONTAINER = + '[MixItUp] An invalid selector or element reference was passed to the mixitup factory function'; + + this.ERROR_FACTORY_CONTAINER_NOT_FOUND = + '[MixItUp] The provided selector yielded no container element'; + + this.ERROR_CONFIG_INVALID_ANIMATION_EFFECTS = + '[MixItUp] Invalid value for `animation.effects`'; + + this.ERROR_CONFIG_INVALID_CONTROLS_SCOPE = + '[MixItUp] Invalid value for `controls.scope`'; + + this.ERROR_CONFIG_INVALID_PROPERTY = + '[MixitUp] Invalid configuration object property "${erroneous}"${suggestion}'; + + this.ERROR_CONFIG_INVALID_PROPERTY_SUGGESTION = + '. Did you mean "${probableMatch}"?'; + + this.ERROR_CONFIG_DATA_UID_KEY_NOT_SET = + '[MixItUp] To use the dataset API, a UID key must be specified using `data.uidKey`'; + + this.ERROR_DATASET_INVALID_UID_KEY = + '[MixItUp] The specified UID key "${uidKey}" is not present on one or more dataset items'; + + this.ERROR_DATASET_DUPLICATE_UID = + '[MixItUp] The UID "${uid}" was found on two or more dataset items. UIDs must be unique.'; + + this.ERROR_INSERT_INVALID_ARGUMENTS = + '[MixItUp] Please provider either an index or a sibling and position to insert, not both'; + + this.ERROR_INSERT_PREEXISTING_ELEMENT = + '[MixItUp] An element to be inserted already exists in the container'; + + this.ERROR_FILTER_INVALID_ARGUMENTS = + '[MixItUp] Please provide either a selector or collection `.filter()`, not both'; + + this.ERROR_DATASET_NOT_SET = + '[MixItUp] To use the dataset API with pre-rendered targets, a starting dataset must be set using `load.dataset`'; + + this.ERROR_DATASET_PRERENDERED_MISMATCH = + '[MixItUp] `load.dataset` does not match pre-rendered targets'; + + this.ERROR_DATASET_RENDERER_NOT_SET = + '[MixItUp] To insert an element via the dataset API, a target renderer function must be provided to `render.target`'; + + this.ERROR_SORT_NON_EXISTENT_ELEMENT = + '[MixItUp] An element to be sorted does not already exist in the container'; + + /* Warnings + ----------------------------------------------------------------------------- */ + + this.WARNING_FACTORY_PREEXISTING_INSTANCE = + '[MixItUp] WARNING: This element already has an active MixItUp instance. The provided configuration object will be ignored.' + + ' If you wish to perform additional methods on this instance, please create a reference.'; + + this.WARNING_INSERT_NO_ELEMENTS = + '[MixItUp] WARNING: No valid elements were passed to `.insert()`'; + + this.WARNING_REMOVE_NO_ELEMENTS = + '[MixItUp] WARNING: No valid elements were passed to `.remove()`'; + + this.WARNING_MULTIMIX_INSTANCE_QUEUE_FULL = + '[MixItUp] WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the ' + + 'queue is full or queuing is disabled.'; + + this.WARNING_GET_OPERATION_INSTANCE_BUSY = + '[MixItUp] WARNING: Operations can be be created while the MixItUp instance is busy.'; + + this.WARNING_NO_PROMISE_IMPLEMENTATION = + '[MixItUp] WARNING: No Promise implementations could be found. If you wish to use promises with MixItUp please install' + + ' an ES6 Promise polyfill.'; + + this.WARNING_INCONSISTENT_SORTING_ATTRIBUTES = + '[MixItUp] WARNING: The requested sorting data attribute "${attribute}" was not present on one or more target elements' + + ' which may product unexpected sort output'; + + this.callActions('afterConstruct'); + + this.compileTemplates(); + + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Messages); + + mixitup.Messages.prototype = Object.create(mixitup.Base.prototype); + + mixitup.Messages.prototype.constructor = mixitup.Messages; + + /** + * @return {void} + */ + + mixitup.Messages.prototype.compileTemplates = function() { + var errorKey = ''; + var errorMessage = ''; + + for (errorKey in this) { + if (typeof (errorMessage = this[errorKey]) !== 'string') continue; + + this[h.camelCase(errorKey)] = h.template(errorMessage); + } + }; + + mixitup.messages = new mixitup.Messages(); + + /** + * @constructor + * @memberof mixitup + * @private + * @since 3.0.0 + * @param {mixitup.Mixer} mixer + */ + + mixitup.Facade = function Mixer(mixer) { + mixitup.Base.call(this); + + this.callActions('beforeConstruct', arguments); + + this.configure = mixer.configure.bind(mixer); + this.show = mixer.show.bind(mixer); + this.hide = mixer.hide.bind(mixer); + this.filter = mixer.filter.bind(mixer); + this.toggleOn = mixer.toggleOn.bind(mixer); + this.toggleOff = mixer.toggleOff.bind(mixer); + this.sort = mixer.sort.bind(mixer); + this.changeLayout = mixer.changeLayout.bind(mixer); + this.multimix = mixer.multimix.bind(mixer); + this.dataset = mixer.dataset.bind(mixer); + this.tween = mixer.tween.bind(mixer); + this.insert = mixer.insert.bind(mixer); + this.insertBefore = mixer.insertBefore.bind(mixer); + this.insertAfter = mixer.insertAfter.bind(mixer); + this.prepend = mixer.prepend.bind(mixer); + this.append = mixer.append.bind(mixer); + this.remove = mixer.remove.bind(mixer); + this.destroy = mixer.destroy.bind(mixer); + this.forceRefresh = mixer.forceRefresh.bind(mixer); + this.forceRender = mixer.forceRender.bind(mixer); + this.isMixing = mixer.isMixing.bind(mixer); + this.getOperation = mixer.getOperation.bind(mixer); + this.getConfig = mixer.getConfig.bind(mixer); + this.getState = mixer.getState.bind(mixer); + + this.callActions('afterConstruct', arguments); + + h.freeze(this); + h.seal(this); + }; + + mixitup.BaseStatic.call(mixitup.Facade); + + mixitup.Facade.prototype = Object.create(mixitup.Base.prototype); + + mixitup.Facade.prototype.constructor = mixitup.Facade; + + if (typeof exports === 'object' && typeof module === 'object') { + module.exports = mixitup; + } else if (typeof define === 'function' && define.amd) { + define(function() { + return mixitup; + }); + } else if (typeof window.mixitup === 'undefined' || typeof window.mixitup !== 'function') { + window.mixitup = mixitup; + } + mixitup.BaseStatic.call(mixitup.constructor); + + mixitup.NAME = 'mixitup'; + mixitup.CORE_VERSION = '3.3.1'; +})(window); \ No newline at end of file diff --git a/themes/jamstackthemes/assets/js/scripts.js b/themes/jamstackthemes/assets/js/scripts.js new file mode 100644 index 0000000..e69de29 diff --git a/themes/jamstackthemes/assets/scss/_breadcrumbs.scss b/themes/jamstackthemes/assets/scss/_breadcrumbs.scss new file mode 100644 index 0000000..f168b6b --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_breadcrumbs.scss @@ -0,0 +1,32 @@ +.breadcrumb { + padding: 0; + list-style: none; + display: flex; + flex-flow: row; + flex-wrap: wrap; + align-items: center; + a { + color: $primary; + padding: 8px; + &:first-of-type { + padding-left: 0; + } + } + .end { + padding: 8px; + font-weight: bold; + } + li { + &:not(:last-of-type) { + &::after { + content: '/'; + margin: 0 6px; + color: $steel; + } + } + &.active { + color: $primary;; + pointer-events: none; + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_buttons.scss b/themes/jamstackthemes/assets/scss/_buttons.scss new file mode 100644 index 0000000..ec22c73 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_buttons.scss @@ -0,0 +1,54 @@ +.button { + border-radius: 3px; + color: $primary; + outline: none; + text-decoration: none; + padding: 5px 10px; + margin-right: 5px; + cursor: pointer; + background: none; + border: 1px solid $primary; + margin-bottom: 5px; + &:hover { + border-color: $primary; + opacity: 0.8; + } + &:focus { + outline: none; + } + &.selected, + &.mixitup-control-active { + background: $primary; + color: white; + } +} + +.sort-buttons { + margin-bottom: 10px; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + @include media-breakpoint-up(sm) { + margin-bottom: 0; + margin-top: 23px; + } + .sort-by { + display: none; + margin-right: 5px; + color: #666; + @include media-breakpoint-up(sm) { + margin-bottom: 0; + } + } + button { + font-size: 14px; + flex-grow: 1; + @include media-breakpoint-up(sm) { + font-size: 16px; + margin-bottom: 0; + } + @include media-breakpoint-up(lg) { + flex-grow: 0; + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_content.scss b/themes/jamstackthemes/assets/scss/_content.scss new file mode 100644 index 0000000..e635244 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_content.scss @@ -0,0 +1,103 @@ +.content { + p { + margin: 0; + padding: 0; + margin-bottom: 20px; + } + h1 { + font-size: 36px; + line-height: 1.3; + font-weight: normal; + margin-top: 20px; + margin-bottom: 20px; + &:first-of-type { + margin-top: 0; + } + } + h2 { + font-size: 28px; + line-height: 1.4; + font-weight: normal; + margin-top: 20px; + margin-bottom: 20px; + &:first-of-type { + margin-top: 0; + } + @include media-breakpoint-up(sm) { + font-size: 30px; + line-height: 1.4; + } + } + h3 { + font-size: 22px; + line-height: 1.4; + font-weight: bold; + margin-top: 20px; + margin-bottom: 20px; + } + ul, + ol { + margin-left: 0; + margin-top: 10px; + margin-bottom: 20px; + padding: 0; + list-style: disc; + li { + margin-bottom: 5px; + margin-left: 15px; + @include media-breakpoint-up(sm) { + margin-left: 20px; + } + } + @include media-breakpoint-up(sm) { + margin-left: 20px; + } + } + a { + text-decoration: underline; + color: $primary; + } + blockquote { + margin-left: 0; + margin-right: 0; + margin-top: 40px; + margin-bottom: 40px; + padding-left: 40px; + } + blockquote p { + display: inline; + } + img { + max-width: 100%; + height: auto; + } + .highlight { + border-radius: 2px; + margin-bottom: 20px; + } + code { + background: #f5f5f5; + padding: 3px 6px; + border-radius: 3px; + font-family: $font-family-mono; + font-size: 0.9rem; + line-height: 1.4; + } + pre { + font-family: $font-family-mono; + font-size: 0.9rem; + line-height: 1.4; + margin: 0; + padding: 10px; + border-radius: 1px; + overflow-x: auto; + code { + font-family: $font-family-mono; + font-size: 0.9rem; + line-height: 1.4; + padding: 0; + margin: 0; + background: none; + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_demo.scss b/themes/jamstackthemes/assets/scss/_demo.scss new file mode 100644 index 0000000..afed9bd --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_demo.scss @@ -0,0 +1,152 @@ +.iframe-preview { + position: absolute; + border: none; + width: 100%; + height: calc(100% - 60px); + margin-top: 60px; +} + +.iframe-preview--mobile { + width: 375px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } + +.demo { + background-color: white; + border-bottom: 1px solid $grey; + box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25); + position: fixed; + width: 100%; + z-index: 10; + @include media-breakpoint-up(sm) { + padding-left: $layout-padding; + padding-right: $layout-padding; + } + @include media-breakpoint-up(md) { + padding-left: $layout-padding * 2; + padding-right: $layout-padding * 2; + } + @include media-breakpoint-up(lg) { + padding-left: $layout-padding * 4; + padding-right: $layout-padding * 4; + } + .container { + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + } + h1.demo-title { + font-size: 20px; + font-family: $font_family_heading; + margin: 0; + margin-left: 10px; + font-weight: 600; + margin-right: 10px; + a { + color: $primary; + } + } + .demo-heading { + display: flex; + } + .demo-info { + font-size: 14px; + } + .demo-buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + .theme-buttons-group { + &:last-of-type { + margin-bottom: 0; + } + } + .theme-button { + @extend .button; + text-align: center; + flex: 1 0 auto; + font-size: 14px; + &.theme-button-fill { + background-color: $primary; + color: white; + } + &.theme-button-link { + border: none; + text-decoration: underline; + } + } + } + .submit { + display: flex; + align-items: center; + .submit-button { + padding: 10px; + border-radius: 3px; + text-decoration: none; + color: #000; + &:hover { + color: $primary; + } + } + .submit-button-mobile { + display: block; + @include media-breakpoint-up(sm) { + display: none; + } + } + .submit-button-desktop { + display: none; + @include media-breakpoint-up(sm) { + display: block; + } + } + svg { + width: 20px; + height: 20px; + @include media-breakpoint-up(sm) { + width: 24px; + height: 24px; + } + } + .github { + &:hover { + opacity: 0.7; + } + } + } + .main-menu { + display: none; + @include media-breakpoint-up(md) { + display: block; + } + > ul { + margin: 0; + padding: 0; + display: flex; + align-items: center; + justify-content: flex-start; + > li { + flex: 1 0 auto; + list-style: none; + margin: 0; + padding: 0; + > a { + text-decoration: none; + color: $primary; + padding: 5px 8px; + &:hover { + text-decoration: underline; + } + } + &.active { + > a { + font-weight: bold; + text-decoration: none; + } + } + } + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_filter.scss b/themes/jamstackthemes/assets/scss/_filter.scss new file mode 100644 index 0000000..908cfb2 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_filter.scss @@ -0,0 +1,298 @@ +.filters { + .filter { + padding: 15px 0px; + &.closed { + .filter-list { + display: none; + } + .filter-title { + margin: 0; + } + .toggle-icon { + transform: rotate(270deg); + } + } + &:first-of-type { + padding-top: 0; + } + } + .filter-title { + display: flex; + flex-wrap: wrap; + margin-bottom: 10px; + @include media-breakpoint-up(md) { + display: flex; + align-items: center; + } + span { + display: flex; + align-items: center; + } + h3 { + margin-bottom: 0; + font-size: 14px; + line-height: 18px; + @include media-breakpoint-up(md) { + font-size: 17px; + line-height: 22px; + } + } + .toggle-info { + margin-left: 4px; + display: flex; + @include media-breakpoint-up(md) { + margin-left: 6px; + margin-bottom: 1px; + } + a { + display: flex; + align-items: center; + } + svg { + width: 18px; + height: auto; + fill: $primary; + path { + fill: $primary; + } + @include media-breakpoint-up(md) { + width: 19px; + fill: $primary; + path { + fill: $primary; + } + } + } + &:hover { + opacity: 0.6; + } + } + .toggle-icon { + margin-left: auto; + cursor: pointer; + display: none; + @include media-breakpoint-up(md) { + display: flex; + } + img { + width: 14px; + } + svg { + width: 14px; + color: $primary; + } + &:hover { + opacity: 0.6; + } + } + } + .filter-list { + margin: 0; + padding: 0; + &.closed { + .filter-item { + display: none; + } + .toggle-more { + .toggle-more-icon-plus { + display: inline-block; + } + .toggle-more-icon-minus { + display: none; + } + } + } + .toggle-more { + text-transform: uppercase; + line-height: 18px; + color: $primary; + margin-left: 26px; + display: flex; + cursor: pointer; + padding: 6px 2px; + &:hover { + opacity: 0.8; + } + .toggle-more-icon { + height: 14px; + width: 14px; + svg { + color: $primary; + } + } + .toggle-more-icon-plus { + display: none; + } + .toggle-more-icon-minus { + display: inline-block; + } + } + .filter-item { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 6px; + font-size: 13px; + line-height: 18px; + &:last-of-type { + margin-bottom: 0; + } + .filter-button { + margin-right: 8px; + display: inline-block; + vertical-align: text-top; + width: 18px; + height: 18px; + background: lighten($grey,6%); + border: 1px solid darken($grey, 40%); + border-radius: 3px; + cursor: pointer; + &:hover { + border: 2px solid $primary; + } + &:focus { + outline: none; + box-shadow: 0 0 5px $primary; + } + &:focus:not(:focus-visible) { + // for modern browsers, remove outline if mouse focus + box-shadow: none; + } + &.mixitup-control-active { + background: $primary; + border: 2px solid $primary; + background-image: url("../images/ui/check-solid.svg"); + background-size: 12px 12px; + background-position: center center; + background-repeat: no-repeat; + } + } + .filter-icon { + img { + + } + width: 18px; + height: 18px; + margin-right: 8px; + } + .filter-name { + display: none; + color: $carbon; + a { + color: black; + text-decoration: none; + } + @include media-breakpoint-up(md) { + display: block; + } + } + .filter-link { + display: none; + color: $primary; + text-decoration: none; + padding: 2px 5px; + @include media-breakpoint-up(md) { + display: block; + } + &:hover { + text-decoration: underline; + } + } + .filter-count { + color: #666; + @include media-breakpoint-up(md) { + margin: 0 0 0 auto; + } + } + } + } +} + +.styled-checkbox { + position: absolute; // take it out of document flow + opacity: 0; // hide it + + & + label { + position: relative; + cursor: pointer; + padding: 0; + } + + // Box. + & + label:before { + content: ''; + margin-right: 10px; + display: inline-block; + vertical-align: text-top; + width: 20px; + height: 20px; + background: lighten($grey,6%); + border: 2px solid darken($grey, 0%); + border-radius: 3px; + // box-shadow: inset 0 0 10px rgba(0,0,0,0.5); + } + + // Box hover + &:hover + label:before { + // background: #f35429; + // box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); + border: 2px solid $primary; + } + + // Box focus + &:focus + label:before { + // box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); + } + + // Box checked + &:checked + label:before { + background: $primary; + border: 2px solid $primary; + } + + // Disabled state label. + &:disabled + label { + color: #b8b8b8; + cursor: auto; + } + + // Disabled box. + &:disabled + label:before { + box-shadow: none; + background: #ddd; + } + + // Checkmark. Could be replaced with an image + &:checked + label:after { + content: ''; + position: absolute; + left: 5px; + top: 9px; + background: white; + width: 2px; + height: 2px; + box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, + 4px -6px 0 white, 4px -8px 0 white; + transform: rotate(45deg); + } +} + +.fade-in { + opacity: 1; + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 300ms; +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/themes/jamstackthemes/assets/scss/_footer.scss b/themes/jamstackthemes/assets/scss/_footer.scss new file mode 100644 index 0000000..6dd3ef1 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_footer.scss @@ -0,0 +1,66 @@ +.footer { + background: #fff; + .footer-column { + margin-bottom: 30px; + @include media-breakpoint-up(sm) { + width: 235px; + margin-right: 50px; + margin-bottom: 0px; + } + &:last-of-type { + margin-bottom: 0; + } + } + .footer-column-brand { + @include media-breakpoint-up(sm) { + width: 235px; + } + } + p { + line-height: 18px; + margin: 0; + margin-bottom: 20px; + } + a { + display: block; + margin-bottom: 8px; + color: $primary; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + h3 { + margin-bottom: 10px; + } + ul { + margin: 0; + padding: 0; + list-style: none; + margin-right: 20px; + li { + + line-height: 18px; + a { + // color: darken($steel, 10%); + color: $primary; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } + } + .footer-social { + margin-bottom: 20px; + .social-icon { + margin-right: 5px; + a { + text-decoration: none; + img { + width: 18px; + } + } + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_github-metrics.scss b/themes/jamstackthemes/assets/scss/_github-metrics.scss new file mode 100644 index 0000000..fe2794f --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_github-metrics.scss @@ -0,0 +1,30 @@ +.github-metrics { + display: inline-flex; + align-content: center; + align-items: flex-start; + border-radius: 3px; + margin: 0px -9px 10px -9px; + div { + border-right: 1px solid $grey; + padding: 7px 9px; + line-height: 1; + display: flex; + align-content: center; + &:last-of-type { + border-right: none; + } + img, svg { + opacity: 0.7; + width: 15px; + height: 15px; + margin-right: 4px; + path { + fill: $carbon; + } + } + span { + margin: 0; + line-height: 16px; + } + } +} \ No newline at end of file diff --git a/themes/jamstackthemes/assets/scss/_header.scss b/themes/jamstackthemes/assets/scss/_header.scss new file mode 100644 index 0000000..7523a25 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_header.scss @@ -0,0 +1,114 @@ +.header { + background-color: white; + border-bottom: 1px solid $grey; + position: fixed; + width: 100%; + z-index: 10; + //@include media-breakpoint-up(sm) { + // padding-left: $layout-padding; + // padding-right: $layout-padding; + //} + //@include media-breakpoint-up(md) { + // padding-left: $layout-padding * 2; + // padding-right: $layout-padding * 2; + //} + //@include media-breakpoint-up(lg) { + // padding-left: $layout-padding * 4; + // padding-right: $layout-padding * 4; + //} + .container { + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + } + .submit { + display: flex; + align-items: center; + .submit-button { + padding: 10px; + border-radius: 3px; + text-decoration: none; + color: #000; + &:hover { + color: $primary; + } + } + .submit-button-mobile { + display: block; + @include media-breakpoint-up(sm) { + display: none; + } + } + .submit-button-desktop { + display: none; + @include media-breakpoint-up(sm) { + display: block; + } + } + svg { + width: 20px; + height: 20px; + @include media-breakpoint-up(sm) { + width: 24px; + height: 24px; + } + } + .github { + &:hover { + opacity: 0.7; + } + } + } + .main-menu { + display: none; + @include media-breakpoint-up(md) { + display: block; + } + > ul { + margin: 0; + padding: 0; + display: flex; + align-items: center; + justify-content: flex-start; + > li { + flex: 1 0 auto; + list-style: none; + margin: 0; + padding: 0; + > a { + text-decoration: none; + color: $primary; + padding: 5px 8px; + &:hover { + text-decoration: underline; + } + } + &.active { + > a { + font-weight: bold; + text-decoration: none; + } + } + } + } + } +} + +.logo { + margin: 0; + font-size: 18px; + font-weight: 700; + font-family: $font_family_heading; + margin-right: 20px; + align-items: center; + display: flex; + a { + color: black; + text-decoration: none; + display: block; + &:hover { + color: $primary; + } + } +} \ No newline at end of file diff --git a/themes/jamstackthemes/assets/scss/_icon.scss b/themes/jamstackthemes/assets/scss/_icon.scss new file mode 100644 index 0000000..8dbd321 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_icon.scss @@ -0,0 +1,44 @@ +.icon { + vertical-align: middle; + display: inline-block; + position: relative; + img, svg { + display: inline-block; + vertical-align: bottom; + width: 20px; + height: 20px; + //filter: grayscale(100%) contrast(70%) brightness(80%); + } +} + +a.icon { + &:hover { + opacity: 0.7; + } +} + +.icon-card { + //border: 1px solid $grey; + //border-radius: 3px; + //background-color: white; + //box-shadow: 1px 1px 8px 2px adjust-color(black, $alpha: -0.9); + //padding: 5px; + @include media-breakpoint-up(sm) { + padding: 10px; + } + //&:hover { + // transform: translateY(-3px); + // box-shadow: 1px 5px 16px 2px adjust-color($primary, $alpha: -0.8); + // color: currentColor; + //} + img { + display: inline-block; + vertical-align: bottom; + width: 24px; + height: 24px; + @include media-breakpoint-up(sm) { + width: 32px; + height: 32px; + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_intro.scss b/themes/jamstackthemes/assets/scss/_intro.scss new file mode 100644 index 0000000..f1c86e2 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_intro.scss @@ -0,0 +1,152 @@ +.intro { + .intro-heading { + margin-bottom: 10px; + } + .intro-icon { + display: inline-block; + vertical-align: middle; + margin-right: 2px; + img { + display: inline-block; + vertical-align: bottom; + width: 24px; + @include media-breakpoint-up(sm) { + width: 28px; + } + @include media-breakpoint-up(md) { + width: 36px; + } + @include media-breakpoint-up(xl) { + width: 46px; + } + } + } + .intro-title { + display: inline-block; + vertical-align: middle; + font-weight: 600; + font-size: 24px; + margin: 0; + @include media-breakpoint-up(sm) { + font-size: 28px; + } + @include media-breakpoint-up(md) { + font-size: 36px; + } + @include media-breakpoint-up(xl) { + font-size: 46px; + } + } + .intro-description { + @include media-breakpoint-up(md) { + font-size: 18px; + } + @include media-breakpoint-up(lg) { + font-size: 20px; + width: 85%; + } + } + .intro-backlink { + display: none; + margin-top: 6px; + padding: 4px 10px; + border: 1px solid $grey; + border-radius: 3px; + @include media-breakpoint-up(md) { + margin-left: auto; + display: block; + } + a { + color: $primary; + padding: 8px; + &:first-of-type { + padding-left: 0; + } + } + } + .intro-bar { + display: flex; + align-items: center; + } + .intro-hint { + font-size: 14px; + padding: 11px; + background: aliceblue; + border-radius: 2px; + color: #647f96; + display: flex; + justify-content: space-between; + align-items: center; + p { + margin: 0; + } + .button { + color: #647f96; + border-color: #647f96; + margin: 0; + } + } + .count { + color: lighten($steel, 20%); + font-weight: 400; + } + .page-number { + font-weight: 400; + } + + .stackbit-banner { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 40px 24px; + gap: 16px; + background: #02001D; + border-radius: 4px; + margin-bottom: 32px; + background-image: url("/images/banner/bg.svg"); + background-repeat: no-repeat; + background-position: right; + background-size: contain; + + .banner-title-row { + display: flex; + flex-direction: row; + align-items: center; + padding: 0px; + gap: 17px; + font-size: 32px; + font-weight: 400; + color: white; + line-height: 1; + } + + .banner-subtitle-row { + font-size: 18px; + color: white; + } + + .banner-primary-button { + padding: 8px 16px; + background: #8efbf7; + border-style: none; + border-radius: 3px; + outline: none; + font-weight: 400; + font-size: 16px; + line-height: 20px; + color: #014847; + text-decoration: none; + a { + color: #014847; + } + a:hover { + text-decoration: none; + } + a:visited { + color: inherit; + } + } + } +} + diff --git a/themes/jamstackthemes/assets/scss/_label.scss b/themes/jamstackthemes/assets/scss/_label.scss new file mode 100644 index 0000000..007e1ce --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_label.scss @@ -0,0 +1,26 @@ +.label { + text-transform: uppercase; + margin: 3px 0 3px 0; + display: flex; + align-items: center; + font-size: 12px; + @include media-breakpoint-up(lg) { + font-size: 14px; + } + .label-key { + display: inline-block; + margin-right: 4px; + color: $steel; + } + .label-icon { + margin-right: 2px; + svg, img { + height: 14px; + width: 14px; + } + } + .label-value { + display: inline-block; + color: black; + } +} diff --git a/themes/jamstackthemes/assets/scss/_layout.scss b/themes/jamstackthemes/assets/scss/_layout.scss new file mode 100644 index 0000000..f572351 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_layout.scss @@ -0,0 +1,172 @@ +$layout-padding: 15px; + +.page { + display: flex; + justify-content: space-between; + flex-direction: column; + min-height: 100vh; + &.has-sidebar { + .header { + @include media-breakpoint-up(sm) { + padding-left: $layout-padding; + padding-right: $layout-padding; + } + @include media-breakpoint-up(md) { + padding-left: $layout-padding * 2; + padding-right: $layout-padding * 2; + } + @include media-breakpoint-up(lg) { + padding-left: $layout-padding * 4; + padding-right: $layout-padding * 4; + } + .container { + max-width: none !important; + } + } + .wrapper { + display: flex; + .main { + flex: 1; + @include media-breakpoint-up(sm) { + padding: $layout-padding; + } + @include media-breakpoint-up(md) { + padding: $layout-padding * 2; + } + @include media-breakpoint-up(lg) { + padding: $layout-padding * 4; + } + } + .sidebar { + flex-basis: 110px; + @include media-breakpoint-up(sm) { + flex-basis: 140px; + } + @include media-breakpoint-up(md) { + flex-basis: 240px; + } + @include media-breakpoint-up(lg) { + flex-basis: 360px; + } + } + } + } + .header { + position: fixed; + width: 100%; + z-index: 10; + + .container { + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + } + } + .wrapper { + padding-top: 60px; + .main { + padding-top: $layout-padding; + padding-bottom: $layout-padding; + @include media-breakpoint-up(sm) { + padding-top: $layout-padding; + padding-bottom: $layout-padding; + } + @include media-breakpoint-up(md) { + padding-top: $layout-padding * 2; + padding-bottom: $layout-padding * 2; + } + @include media-breakpoint-up(lg) { + padding-top: $layout-padding * 4; + padding-bottom: $layout-padding * 4; + } + } + .sidebar { + position: sticky; + top: 60px; + z-index: 1; + width: 120px; + overflow: auto; + height: calc(100vh - 60px); + display: flex; + flex-direction: column; + background-color: $bone; + padding-top: $grid-gutter-width / 2; + padding-bottom: $grid-gutter-width / 2; + @include media-breakpoint-up(sm) { + width: 140px; + padding: $layout-padding; + } + @include media-breakpoint-up(md) { + width: 240px; + padding: $layout-padding * 2; + } + @include media-breakpoint-up(lg) { + width: 360px; + padding: $layout-padding * 4; + } + .container { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + .stackbit { + padding: 6px 0; + display: flex; + gap: 4px; + align-items: center; + font-size: 14px; + a { + color: inherit; + text-decoration: underline; + } + } + } + } + } + .footer { + width: 100%; + border-top: 1px solid $grey; + padding-top: $grid-gutter-width / 2; + padding-bottom: $grid-gutter-width / 2; + @include media-breakpoint-up(sm) { + padding: $layout-padding; + } + @include media-breakpoint-up(md) { + padding: $layout-padding * 2; + } + @include media-breakpoint-up(lg) { + padding: $layout-padding * 4; + } + .container { + .footer-columns { + display: flex; + flex-direction: column; + @include media-breakpoint-up(md) { + flex-direction: row; + display: flex; + justify-items: flex-end; + } + .footer-column { + margin-bottom: 20px; + } + } + } + } +} + +.not-found { + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; +} + +.strip-bone { + background: $bone; +} +.strip-title { + font-size: 38px; + font-weight: 400; +} diff --git a/themes/jamstackthemes/assets/scss/_pagination.scss b/themes/jamstackthemes/assets/scss/_pagination.scss new file mode 100644 index 0000000..dfdd633 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_pagination.scss @@ -0,0 +1,62 @@ +ul.pagination { + display: flex; + justify-content: center; + list-style: none; + margin: 20px 0 20px 0; + padding: 0; + li { + list-style: none; + text-decoration: none; + border: 2px solid $primary; + border-right: none; + text-align: center; + vertical-align: middle; + &:hover { + border-color: $primary; + background-color: $primary; + color: white; + a { + color: white; + } + } + &.pagination-active { + border-color: $primary; + background-color: $primary; + color: white; + a { + color: white; + } + } + a { + padding: 9px 13px; + display: block; + color: $primary; + text-decoration: none; + vertical-align: middle; + @include media-breakpoint-up(lg) { + padding: 10px 16px; + } + } + &:last-of-type { + border-right: 2px solid $primary; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + &:hover { + border-color: $primary; + } + &.active { + border-color: $primary; + } + } + &:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + svg { + width: 8px; + line-height: 10px; + margin-bottom: 2px; + vertical-align: middle; + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_star.scss b/themes/jamstackthemes/assets/scss/_star.scss new file mode 100644 index 0000000..9105c4a --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_star.scss @@ -0,0 +1,30 @@ +.star { + display: inline-block; + border: 1px solid $bone; + padding: 4px 7px 4px 22px; + border-radius: 2px; + margin-bottom: 8px; + background-image: url("../images/ui/star.svg"); + background-repeat: no-repeat; + background-position: 6px 6px; + background-size: 12px 12px; + img { + display: inline-block; + width: 12px; + height: 12px; + } + svg { + fill: $yellow; + } + .star-count { + display: inline-block; + } +} + +.star-large { + background-image: url("../images/ui/star.svg"); + background-repeat: no-repeat; + background-position: 6px 6px; + background-size: 22px 22px; + padding-left: 32px; +} diff --git a/themes/jamstackthemes/assets/scss/_terms.scss b/themes/jamstackthemes/assets/scss/_terms.scss new file mode 100644 index 0000000..6fcf70e --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_terms.scss @@ -0,0 +1,55 @@ +.terms { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + @include media-breakpoint-up(sm) { + margin-left: -10px; + margin-right: -10px; + justify-content: flex-start; + } + .term { + padding: 40px; + border: 1px solid $grey; + margin-bottom: 15px; + width: 48%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: white; + box-shadow: 1px 1px 8px 2px adjust-color(black, $alpha: -0.9); + transition: color 0.3s, box-shadow 0.3s, transform 0.3s; + position: relative; + z-index: 1; + @include media-breakpoint-up(sm) { + flex: 0; + min-width: 180px; + margin: 10px; + } + &:hover { + transform: translateY(-3px); + box-shadow: 1px 5px 16px 2px adjust-color($primary, $alpha: -0.8); + color: currentColor; + } + .term-overlay { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + } + h2 { + margin-top: 15px; + margin-bottom: 0; + font-weight: 400; + text-align: center; + a { + text-decoration: none; + color: black; + } + } + img { + display: block; + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_theme-buttons.scss b/themes/jamstackthemes/assets/scss/_theme-buttons.scss new file mode 100644 index 0000000..672f4ad --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_theme-buttons.scss @@ -0,0 +1,67 @@ +.action-buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + .action-buttons-group { + &:last-of-type { + margin-bottom: 0; + + } + } + .action-button { + @extend .button; + padding: 5px 8px; + text-align: center; + flex: 1 0 auto; + font-size: 14px; + &.action-button-fill { + background-color: $primary; + color: white; + } + &.action-button-link { + border: none; + text-decoration: underline; + } + &:last-of-type { + margin-right: 0; + } + } +} +.action-buttons-detail { + display: flex; + margin-top: 20px; + margin-bottom: 20px; + .action-button { + display: inline-block; + padding: 7px 15px; + border: 1px solid $primary; + border-radius: 4px; + font-size: 16px; + margin-right: 10px; + color: $primary; + text-decoration: none; + &:hover { + color: $primary; + opacity: 0.8; + } + &:last-of-type { + margin-right: 0; + } + &.action-button-fill { + background-color: $primary; + color: white; + } + &.action-button-link { + border: none; + text-decoration: underline; + } + } +} + +.tag-button { + color: $steel; + font-size: 14px; + padding: 5px 8px; + border: 1px solid $steel; + border-radius: 4px; +} \ No newline at end of file diff --git a/themes/jamstackthemes/assets/scss/_theme-card.scss b/themes/jamstackthemes/assets/scss/_theme-card.scss new file mode 100644 index 0000000..fc22117 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_theme-card.scss @@ -0,0 +1,122 @@ +.theme-card { + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + border: 1px solid $grey; + border-radius: 4px; + background-color: white; + position: relative; + z-index: 1; + height: 100%; + .theme-header { + border-bottom: 1px solid $grey; + max-height: 260px; + overflow: hidden; + img { + max-width: 100%; + width: 100%; + height: auto; + vertical-align: bottom; + transition: opacity 0.2s ease-out; + &:hover { + opacity: 0.7; + } + } + } + .theme-body { + //min-height: 200px; + background: white; + padding: 20px; + flex: 1; + display: flex; + flex-direction: column; + h2 { + font-size: 20px; + font-weight: 500; + margin-bottom: 10px; + @include media-breakpoint-up(xl) { + font-size: 26px; + } + } + p { + font-size: 14px; + @include media-breakpoint-up(xl) { + font-size: 16px; + } + &.description { + padding: 20px 0 20px 0; + padding: 0; + margin: 0; + } + } + .theme-description { + margin-bottom: 20px; + } + .action-buttons { + margin-top: auto; + } + } + .theme-footer { + //border-top: 1px solid $grey; + background: $bone; + padding: 8px 13px 8px 13px; + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + a { + flex: 0; + padding: 7px; + //border-right: 1px solid $grey; + //border-bottom: 1px solid $grey; + } + } + .theme-buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + .theme-buttons-group { + &:last-of-type { + margin-bottom: 0; + } + } + .theme-button { + @extend .button; + text-align: center; + flex: 1 0 auto; + font-size: 14px; + &.theme-button-fill { + background-color: $primary; + color: white; + } + &.theme-button-link { + border: none; + text-decoration: underline; + } + } + } + .theme-stars { + display: inline-block; + border: 1px solid $bone; + padding: 4px 6px 4px 24px; + border-radius: 2px; + color: $steel; + background-image: url("../images/ui/star.svg"); + background-repeat: no-repeat; + background-position: 6px; + background-size: 13px; + background-color: $bone; + font-size: 14px; + font-weight: 600; + @include media-breakpoint-up(xl) { + background-size: 15px; + background-position: 8px; + padding: 4px 6px 4px 28px; + font-size: 16px; + font-weight: normal; + } + .star-count { + display: inline-block; + } + } +} diff --git a/themes/jamstackthemes/assets/scss/_theme-detail.scss b/themes/jamstackthemes/assets/scss/_theme-detail.scss new file mode 100644 index 0000000..ffc864a --- /dev/null +++ b/themes/jamstackthemes/assets/scss/_theme-detail.scss @@ -0,0 +1,133 @@ +.theme-detail { + .theme-detail-bar { + display: flex; + align-items: center; + font-weight: bold; + text-transform: uppercase; + font-size: 12px; + margin-bottom: 5px; + color: $steel; + .theme-detail-icon { + margin-right: 4px; + width: 16px; + } + } + .theme-detail-heading { + display: flex; + align-items: flex-start; + margin-bottom: 10px; + } + .theme-detail-title { + font-size: 24px; + line-height: 28px; + font-weight: normal; + margin-bottom: 15px; + } + .theme-detail-stars { + float: right; + height: 18px; + margin-top: 4px; + font-size: 16px; + background-position: center left; + background-size: 18px; + background-repeat: no-repeat; + padding-left: 24px; + background-image: url("../images/ui/star.svg"); + span { + line-height: 22px; + } + } + .theme-detail-description { + font-size: 16px; + line-height: 22px; + color: $steel; + margin-bottom: 20px; + } + .theme-detail-github { + padding: 10px 0 10px 0; + display: flex; + align-items: center; + > div { + font-size: 16px; + line-height: 18px; + margin-right: 14px; + background-size: 18px 18px; + background-repeat: no-repeat; + padding-left: 26px; + vertical-align: middle; + } + .stars { + background-image: url("../images/ui/star.svg"); + } + .issues { + background-image: url("../images/ui/issues.svg"); + } + .forks { + background-image: url("../images/ui/forks.svg"); + } + } + .theme-detail-image { + img { + //box-shadow: 1px 2px 14px 2px rgba(0, 0, 0, 0.1); + border-radius: 3px; + border: 1px solid $grey; + width: 100%; + max-width: 100%; + height: auto; + vertical-align: bottom; + } + } + .theme-detail-tags { + margin-bottom: 20px; + .icon { + width: 36px; + height: 36px; + margin: 0; + display: inline-flex; + justify-content: center; + align-items: center; + } + } + .theme-detail-bottom { + padding-top: $layout-padding; + padding-bottom: $layout-padding; + @include media-breakpoint-up(sm) { + padding-top: $layout-padding; + padding-bottom: $layout-padding; + } + @include media-breakpoint-up(md) { + padding-top: $layout-padding * 2; + padding-bottom: $layout-padding * 2; + } + @include media-breakpoint-up(lg) { + padding-top: $layout-padding * 4; + padding-bottom: $layout-padding * 4; + } + } + +} + +.page-default-single .wrapper { + //position: relative; + //overflow: hidden; +} + +.page-default-single .wrapper::before { + //content: ""; + position: absolute; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + z-index: -1; + transform: rotate(30deg); + overflow: hidden; + //background-image: url(/images/material-design-4k-wallpaper-greyscale.png); + background-image: url(/images/1.png); + background-position: top right; + background-repeat: no-repeat; + background-size: cover; + //background-color: antiquewhite; + //background-color: #fdf5dd; + //background-color: #cdf3fd; +} diff --git a/themes/jamstackthemes/assets/scss/bootstrap/_alert.scss b/themes/jamstackthemes/assets/scss/bootstrap/_alert.scss new file mode 100644 index 0000000..da2a98a --- /dev/null +++ b/themes/jamstackthemes/assets/scss/bootstrap/_alert.scss @@ -0,0 +1,51 @@ +// +// Base styles +// + +.alert { + position: relative; + padding: $alert-padding-y $alert-padding-x; + margin-bottom: $alert-margin-bottom; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: $close-font-size + $alert-padding-x * 2; + + // Adjust close link position + .close { + position: absolute; + top: 0; + right: 0; + padding: $alert-padding-y $alert-padding-x; + color: inherit; + } +} + + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + } +} diff --git a/themes/jamstackthemes/assets/scss/bootstrap/_badge.scss b/themes/jamstackthemes/assets/scss/bootstrap/_badge.scss new file mode 100644 index 0000000..42c5d08 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/bootstrap/_badge.scss @@ -0,0 +1,54 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + @include font-size($badge-font-size); + font-weight: $badge-font-weight; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius($badge-border-radius); + @include transition($badge-transition); + + @at-root a#{&} { + @include hover-focus() { + text-decoration: none; + } + } + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/themes/jamstackthemes/assets/scss/bootstrap/_breadcrumb.scss b/themes/jamstackthemes/assets/scss/bootstrap/_breadcrumb.scss new file mode 100644 index 0000000..d748894 --- /dev/null +++ b/themes/jamstackthemes/assets/scss/bootstrap/_breadcrumb.scss @@ -0,0 +1,42 @@ +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; + margin-bottom: $breadcrumb-margin-bottom; + @include font-size($breadcrumb-font-size); + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($breadcrumb-border-radius); +} + +.breadcrumb-item { + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .breadcrumb-item { + padding-left: $breadcrumb-item-padding; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: escape-svg($breadcrumb-divider); + } + } + + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `