├── .all-contributorsrc ├── .changeset ├── README.md └── config.json ├── .editorconfig ├── .github └── workflows │ ├── codeql-analysis.yml │ └── publish.yml ├── .gitignore ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENCE ├── README.md ├── lerna.json ├── package.json ├── packages ├── examples │ ├── .eslintignore │ ├── .gitignore │ ├── LICENCE │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── calendar.js │ │ ├── fw-book-example.vue │ │ ├── fw-bookblock-example.vue │ │ ├── fw-bookblock2-example.vue │ │ ├── fw-turn-example.vue │ │ ├── main.js │ │ ├── router.js │ │ └── styles │ │ ├── calendar.scss │ │ ├── default.scss │ │ ├── demo1.scss │ │ ├── demo2.scss │ │ ├── demo3.scss │ │ ├── demo4.scss │ │ └── demo5.scss ├── storybook │ ├── .browserslistrc │ ├── .eslintrc.js │ ├── .gitignore │ ├── .storybook │ │ └── main.js │ ├── README.md │ ├── babel.config.js │ ├── jest.config.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── stories │ │ ├── 0-Flipping-Widgets.stories.js │ │ ├── calendar.js │ │ ├── fw-book-story.vue │ │ ├── fw-bookblock-story.vue │ │ ├── fw-bookblock2-story.vue │ │ ├── fw-turn-story.vue │ │ └── styles │ │ ├── calendar.scss │ │ ├── default.scss │ │ ├── demo1.scss │ │ ├── demo2.scss │ │ ├── demo3.scss │ │ ├── demo4.scss │ │ └── demo5.scss └── vue-turnjs │ ├── .browserslistrc │ ├── .gitignore │ ├── LICENCE │ ├── README.md │ ├── babel.config.js │ ├── dist │ ├── vue-turnjs.esm.css │ ├── vue-turnjs.esm.js │ ├── vue-turnjs.esm.js.map │ ├── vue-turnjs.min.js │ └── vue-turnjs.ssr.js │ ├── package.json │ ├── rollup.config.js │ └── src │ ├── components │ ├── book │ │ ├── _book.scss │ │ ├── book.vue │ │ ├── index.js │ │ ├── index.scss │ │ └── loading.vue │ ├── bookblock │ │ ├── README.md │ │ ├── _bookblock.scss │ │ ├── bookblock.vue │ │ ├── index.js │ │ └── index.scss │ ├── bookblock2 │ │ ├── README.md │ │ ├── _bookblock2.scss │ │ ├── bookblock2.vue │ │ ├── index.js │ │ └── index.scss │ ├── index.js │ └── turn │ │ ├── README.md │ │ ├── index.js │ │ └── turn.vue │ ├── index.js │ ├── lib │ ├── jquery.bookblock.modified.js │ ├── jquery.bookblock.original.js │ ├── jquerypp.custom.js │ ├── modernizr-custom.js │ └── turn.js │ └── utils │ ├── array.js │ ├── clone-deep.js │ ├── config-defaults.js │ ├── config-set.js │ ├── env.js │ ├── get.js │ ├── identity.js │ ├── inspect.js │ ├── object.js │ ├── plugin.js │ ├── safe-types.js │ └── warn.js ├── static ├── bookblock │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── 5.jpg ├── bookblock2 │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.jpg └── turn │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ └── 06.jpg └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "vue-turnjs", 3 | "projectOwner": "Reidond", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": true, 11 | "commitConvention": "angular", 12 | "contributors": [ 13 | { 14 | "login": "Reidond", 15 | "name": "Andrii Shafar", 16 | "avatar_url": "https://avatars0.githubusercontent.com/u/20406775?v=4", 17 | "profile": "https://github.com/Reidond", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "maintenance" 22 | ] 23 | }, 24 | { 25 | "login": "Orest-2", 26 | "name": "Pidfihurnyi Orest", 27 | "avatar_url": "https://avatars3.githubusercontent.com/u/20842843?v=4", 28 | "profile": "https://github.com/Orest-2", 29 | "contributions": [ 30 | "code", 31 | "review", 32 | "test" 33 | ] 34 | } 35 | ], 36 | "contributorsPerLine": 7 37 | } 38 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@1.3.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "linked": [], 6 | "access": "restricted", 7 | "baseBranch": "master", 8 | "updateInternalDependencies": "patch", 9 | "ignore": [] 10 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '22 10 * * 5' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | 28 | strategy: 29 | fail-fast: false 30 | matrix: 31 | language: [ 'javascript' ] 32 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 33 | # Learn more: 34 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 35 | 36 | steps: 37 | - name: Checkout repository 38 | uses: actions/checkout@v2 39 | 40 | # Initializes the CodeQL tools for scanning. 41 | - name: Initialize CodeQL 42 | uses: github/codeql-action/init@v1 43 | with: 44 | languages: ${{ matrix.language }} 45 | # If you wish to specify custom queries, you can do so here or in a config file. 46 | # By default, queries listed here will override any specified in a config file. 47 | # Prefix the list here with "+" to use these queries and those in the config file. 48 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 49 | 50 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 51 | # If this step fails, then you should remove it and run the build manually (see below) 52 | # - name: Autobuild 53 | # uses: github/codeql-action/autobuild@v1 54 | 55 | # ℹ️ Command-line programs to run using the OS shell. 56 | # 📚 https://git.io/JvXDl 57 | 58 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 59 | # and modify them (or add more) to build your code if your project 60 | # uses a compiled language 61 | 62 | - run: | 63 | yarn 64 | yarn build 65 | 66 | - name: Perform CodeQL Analysis 67 | uses: github/codeql-action/analyze@v1 68 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish Packages 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | build: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v1 11 | - uses: actions/setup-node@v1 12 | with: 13 | node-version: 12 14 | - run: yarn 15 | - run: yarn build 16 | release: 17 | name: Release 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout Repo 21 | uses: actions/checkout@v1 22 | - name: Setup Node.js 23 | uses: actions/setup-node@v1 24 | with: 25 | node-version: 12 26 | - name: Install Dependencies 27 | run: yarn 28 | - name: Create Release Pull Request 29 | uses: changesets/action@master 30 | env: 31 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} 32 | publish-npm: 33 | needs: build 34 | runs-on: ubuntu-latest 35 | steps: 36 | - uses: actions/checkout@v1 37 | - uses: actions/setup-node@v1 38 | with: 39 | node-version: 12 40 | registry-url: https://registry.npmjs.org/ 41 | - run: yarn 42 | - run: yarn publish-ci 43 | env: 44 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 45 | publish-gpr: 46 | needs: build 47 | runs-on: ubuntu-latest 48 | steps: 49 | - uses: actions/checkout@v1 50 | - uses: actions/setup-node@v1 51 | with: 52 | node-version: 12 53 | registry-url: https://npm.pkg.github.com/ 54 | scope: "@reidond" 55 | - run: yarn 56 | # - run: yarn publish-ci 57 | env: 58 | NODE_AUTH_TOKEN: ${{secrets.GH_TOKEN}} 59 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .idea 3 | yarn.lock 4 | package-lock.json 5 | # Local Netlify folder 6 | .netlify -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # root 2 | 3 | ## null 4 | ### Minor Changes 5 | 6 | - 1d1fb60: All packages now have great demos and bug free (almost) 7 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright © 2007 Free Software Foundation, Inc. 5 | 6 | Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. 7 | 8 | This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below. 9 | 10 | 0. Additional Definitions. 11 | As used herein, “this License” refers to version 3 of the GNU Lesser General Public License, and the “GNU GPL” refers to version 3 of the GNU General Public License. 12 | 13 | “The Library” refers to a covered work governed by this License, other than an Application or a Combined Work as defined below. 14 | 15 | An “Application” is any work that makes use of an interface provided by the Library, but which is not otherwise based on the Library. Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library. 16 | 17 | A “Combined Work” is a work produced by combining or linking an Application with the Library. The particular version of the Library with which the Combined Work was made is also called the “Linked Version”. 18 | 19 | The “Minimal Corresponding Source” for a Combined Work means the Corresponding Source for the Combined Work, excluding any source code for portions of the Combined Work that, considered in isolation, are based on the Application, and not on the Linked Version. 20 | 21 | The “Corresponding Application Code” for a Combined Work means the object code and/or source code for the Application, including any data and utility programs needed for reproducing the Combined Work from the Application, but excluding the System Libraries of the Combined Work. 22 | 23 | 1. Exception to Section 3 of the GNU GPL. 24 | You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL. 25 | 26 | 2. Conveying Modified Versions. 27 | If you modify a copy of the Library, and, in your modifications, a facility refers to a function or data to be supplied by an Application that uses the facility (other than as an argument passed when the facility is invoked), then you may convey a copy of the modified version: 28 | 29 | a) under this License, provided that you make a good faith effort to ensure that, in the event an Application does not supply the function or data, the facility still operates, and performs whatever part of its purpose remains meaningful, or 30 | b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy. 31 | 3. Object Code Incorporating Material from Library Header Files. 32 | The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following: 33 | 34 | a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License. 35 | b) Accompany the object code with a copy of the GNU GPL and this license document. 36 | 4. Combined Works. 37 | You may convey a Combined Work under terms of your choice that, taken together, effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications, if you also do each of the following: 38 | 39 | a) Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License. 40 | b) Accompany the Combined Work with a copy of the GNU GPL and this license document. 41 | c) For a Combined Work that displays copyright notices during execution, include the copyright notice for the Library among these notices, as well as a reference directing the user to the copies of the GNU GPL and this license document. 42 | d) Do one of the following: 43 | 0) Convey the Minimal Corresponding Source under the terms of this License, and the Corresponding Application Code in a form suitable for, and under terms that permit, the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work, in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source. 44 | 1) Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (a) uses at run time a copy of the Library already present on the user's computer system, and (b) will operate properly with a modified version of the Library that is interface-compatible with the Linked Version. 45 | e) Provide Installation Information, but only if you would otherwise be required to provide such information under section 6 of the GNU GPL, and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version. (If you use option 4d0, the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code. If you use option 4d1, you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.) 46 | 5. Combined Libraries. 47 | You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License, and convey such a combined library under terms of your choice, if you do both of the following: 48 | 49 | a) Accompany the combined library with a copy of the same work based on the Library, uncombined with any other library facilities, conveyed under the terms of this License. 50 | b) Give prominent notice with the combined library that part of it is a work based on the Library, and explaining where to find the accompanying uncombined form of the same work. 51 | 6. Revised Versions of the GNU Lesser General Public License. 52 | The Free Software Foundation may publish revised and/or new versions of the GNU Lesser General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. 53 | 54 | Each version is given a distinguishing version number. If the Library as you received it specifies that a certain numbered version of the GNU Lesser General Public License “or any later version” applies to it, you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation. If the Library as you received it does not specify a version number of the GNU Lesser General Public License, you may choose any version of the GNU Lesser General Public License ever published by the Free Software Foundation. 55 | 56 | If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply, that proxy's public statement of acceptance of any version is permanent authorization for you to choose that version for the Library. 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-turnjs 2 | 3 | 4 | 5 | [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-) 6 | 7 | 8 | 9 | ![npm](https://img.shields.io/npm/dw/vue-turnjs) 10 | ![npm](https://img.shields.io/npm/v/vue-turnjs) 11 | 12 | 📦 [NPM](https://www.npmjs.com/package/vue-turnjs) 13 | 14 | 📖 [Docs](https://reidond.gitbook.io/vue-turnjs/) 15 | 16 | 📚 [Storybook](https://vue-turnjs-storybook.netlify.app/) 17 | 18 | ## Contribution 19 | 20 | Feel free to grab an issue from the list, just remember to squash your commits before merge. 21 | 22 | ## Contributors ✨ 23 | 24 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |

Andrii Shafar
💻 📖 🚧
Pidfihurnyi Orest
💻 👀 ⚠️
35 | 36 | 37 | 38 | 39 | 40 | 41 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 42 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "npmClient": "yarn", 6 | "version": "1.3.2" 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "licence": "LGPL-3.0-only", 5 | "devDependencies": { 6 | "all-contributors-cli": "^6.14.2", 7 | "lerna": "^3.20.2" 8 | }, 9 | "scripts": { 10 | "exec:vue-turnjs": "lerna exec --scope vue-turnjs yarn run", 11 | "exec:examples": "lerna exec --scope examples yarn run", 12 | "exec:storybook": "lerna exec --scope storybook yarn run", 13 | "build": "lerna bootstrap && yarn run exec:vue-turnjs build && yarn run exec:examples build && yarn run exec:storybook build-storybook", 14 | "publish-ci": "lerna publish from-package -y --no-verify-access" 15 | }, 16 | "dependencies": { 17 | "@changesets/cli": "^2.9.1" 18 | }, 19 | "version": null 20 | } 21 | -------------------------------------------------------------------------------- /packages/examples/.eslintignore: -------------------------------------------------------------------------------- 1 | ../vue-turnjs/dist 2 | -------------------------------------------------------------------------------- /packages/examples/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | 23 | .now 24 | yarn.lock 25 | package-lock.json 26 | -------------------------------------------------------------------------------- /packages/examples/LICENCE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright © 2007 Free Software Foundation, Inc. 5 | 6 | Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. 7 | 8 | This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below. 9 | 10 | 0. Additional Definitions. 11 | As used herein, “this License” refers to version 3 of the GNU Lesser General Public License, and the “GNU GPL” refers to version 3 of the GNU General Public License. 12 | 13 | “The Library” refers to a covered work governed by this License, other than an Application or a Combined Work as defined below. 14 | 15 | An “Application” is any work that makes use of an interface provided by the Library, but which is not otherwise based on the Library. Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library. 16 | 17 | A “Combined Work” is a work produced by combining or linking an Application with the Library. The particular version of the Library with which the Combined Work was made is also called the “Linked Version”. 18 | 19 | The “Minimal Corresponding Source” for a Combined Work means the Corresponding Source for the Combined Work, excluding any source code for portions of the Combined Work that, considered in isolation, are based on the Application, and not on the Linked Version. 20 | 21 | The “Corresponding Application Code” for a Combined Work means the object code and/or source code for the Application, including any data and utility programs needed for reproducing the Combined Work from the Application, but excluding the System Libraries of the Combined Work. 22 | 23 | 1. Exception to Section 3 of the GNU GPL. 24 | You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL. 25 | 26 | 2. Conveying Modified Versions. 27 | If you modify a copy of the Library, and, in your modifications, a facility refers to a function or data to be supplied by an Application that uses the facility (other than as an argument passed when the facility is invoked), then you may convey a copy of the modified version: 28 | 29 | a) under this License, provided that you make a good faith effort to ensure that, in the event an Application does not supply the function or data, the facility still operates, and performs whatever part of its purpose remains meaningful, or 30 | b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy. 31 | 3. Object Code Incorporating Material from Library Header Files. 32 | The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following: 33 | 34 | a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License. 35 | b) Accompany the object code with a copy of the GNU GPL and this license document. 36 | 4. Combined Works. 37 | You may convey a Combined Work under terms of your choice that, taken together, effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications, if you also do each of the following: 38 | 39 | a) Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License. 40 | b) Accompany the Combined Work with a copy of the GNU GPL and this license document. 41 | c) For a Combined Work that displays copyright notices during execution, include the copyright notice for the Library among these notices, as well as a reference directing the user to the copies of the GNU GPL and this license document. 42 | d) Do one of the following: 43 | 0) Convey the Minimal Corresponding Source under the terms of this License, and the Corresponding Application Code in a form suitable for, and under terms that permit, the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work, in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source. 44 | 1) Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (a) uses at run time a copy of the Library already present on the user's computer system, and (b) will operate properly with a modified version of the Library that is interface-compatible with the Linked Version. 45 | e) Provide Installation Information, but only if you would otherwise be required to provide such information under section 6 of the GNU GPL, and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version. (If you use option 4d0, the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code. If you use option 4d1, you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.) 46 | 5. Combined Libraries. 47 | You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License, and convey such a combined library under terms of your choice, if you do both of the following: 48 | 49 | a) Accompany the combined library with a copy of the same work based on the Library, uncombined with any other library facilities, conveyed under the terms of this License. 50 | b) Give prominent notice with the combined library that part of it is a work based on the Library, and explaining where to find the accompanying uncombined form of the same work. 51 | 6. Revised Versions of the GNU Lesser General Public License. 52 | The Free Software Foundation may publish revised and/or new versions of the GNU Lesser General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. 53 | 54 | Each version is given a distinguishing version number. If the Library as you received it specifies that a certain numbered version of the GNU Lesser General Public License “or any later version” applies to it, you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation. If the Library as you received it does not specify a version number of the GNU Lesser General Public License, you may choose any version of the GNU Lesser General Public License ever published by the Free Software Foundation. 55 | 56 | If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply, that proxy's public statement of acceptance of any version is permanent authorization for you to choose that version for the Library. 57 | -------------------------------------------------------------------------------- /packages/examples/README.md: -------------------------------------------------------------------------------- 1 | # vue-turnjs-example 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/examples/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "examples", 3 | "version": "1.3.2", 4 | "private": true, 5 | "publishConfig": { 6 | "access": "restricted" 7 | }, 8 | "licence": "LGPL-3.0-only", 9 | "scripts": { 10 | "serve": "vue-cli-service serve", 11 | "build": "vue-cli-service build", 12 | "lint": "vue-cli-service lint" 13 | }, 14 | "dependencies": { 15 | "bootstrap": "^4.5.0", 16 | "bootstrap-vue": "^2.14.0", 17 | "core-js": "^3.6.4", 18 | "vue": "^2.6.11", 19 | "vue-router": "^3.1.6", 20 | "vue-turnjs": "^1.3.2" 21 | }, 22 | "devDependencies": { 23 | "@vue/cli-plugin-babel": "~4.3.0", 24 | "@vue/cli-plugin-eslint": "~4.3.0", 25 | "@vue/cli-service": "~4.3.0", 26 | "babel-eslint": "^10.1.0", 27 | "eslint": "^6.7.2", 28 | "eslint-plugin-vue": "^6.2.2", 29 | "fibers": "^5.0.0", 30 | "sass": "^1.26.8", 31 | "sass-loader": "^8.0.2", 32 | "vue-template-compiler": "^2.6.11" 33 | }, 34 | "eslintConfig": { 35 | "root": true, 36 | "env": { 37 | "node": true 38 | }, 39 | "extends": [ 40 | "plugin:vue/essential", 41 | "eslint:recommended" 42 | ], 43 | "parserOptions": { 44 | "parser": "babel-eslint" 45 | }, 46 | "rules": {} 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions", 51 | "not dead" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /packages/examples/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/packages/examples/public/favicon.ico -------------------------------------------------------------------------------- /packages/examples/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/examples/src/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 27 | 28 | 34 | -------------------------------------------------------------------------------- /packages/examples/src/fw-book-example.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 57 | 58 | 80 | -------------------------------------------------------------------------------- /packages/examples/src/fw-bookblock-example.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 92 | 93 | 96 | -------------------------------------------------------------------------------- /packages/examples/src/fw-bookblock2-example.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 94 | 95 | 99 | -------------------------------------------------------------------------------- /packages/examples/src/fw-turn-example.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 38 | -------------------------------------------------------------------------------- /packages/examples/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import { BootstrapVue, IconsPlugin } from "bootstrap-vue"; 4 | import "bootstrap/dist/css/bootstrap.css"; 5 | import "bootstrap-vue/dist/bootstrap-vue.css"; 6 | 7 | // vue-turnjs install 8 | import { FlippingWidgets } from "vue-turnjs"; 9 | import "vue-turnjs/dist/vue-turnjs.esm.css"; 10 | 11 | import "./styles/default.scss"; 12 | 13 | import VueRouter from "vue-router"; 14 | import { router } from "./router.js"; 15 | 16 | // Install BootstrapVue 17 | Vue.use(BootstrapVue); 18 | // Optionally install the BootstrapVue icon components plugin 19 | Vue.use(IconsPlugin); 20 | Vue.use(FlippingWidgets); 21 | Vue.use(VueRouter); 22 | 23 | Vue.config.productionTip = false; 24 | 25 | new Vue({ 26 | router, 27 | render: h => h(App) 28 | }).$mount("#app"); 29 | -------------------------------------------------------------------------------- /packages/examples/src/router.js: -------------------------------------------------------------------------------- 1 | import VueRouter from "vue-router"; 2 | import FwBookblockExample from "./fw-bookblock-example.vue"; 3 | import FwBookblock2Example from "./fw-bookblock2-example.vue"; 4 | import FwTurnExample from "./fw-turn-example.vue"; 5 | import FwBookExample from "./fw-book-example.vue"; 6 | 7 | const routes = [ 8 | { 9 | name: "demo-1", 10 | path: "/fw-bookblock-example", 11 | component: FwBookblockExample 12 | }, 13 | { 14 | name: "demo-2", 15 | path: "/fw-bookblock2-example", 16 | component: FwBookblock2Example 17 | }, 18 | { name: "demo-3", path: "/fw-turn-example", component: FwTurnExample }, 19 | { name: "demo-4", path: "/fw-book-example", component: FwBookExample } 20 | ]; 21 | 22 | export const router = new VueRouter({ 23 | mode: "history", 24 | routes 25 | }); 26 | -------------------------------------------------------------------------------- /packages/examples/src/styles/calendar.scss: -------------------------------------------------------------------------------- 1 | /* Style from Caledario: */ 2 | 3 | .fc-calendar-wrap { 4 | margin-top: 300px; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | .fc-calendar-wrap h2 { 9 | color: #fff; 10 | position: absolute; 11 | z-index: 100; 12 | margin: -2.4em 0.9em 0 0; 13 | font-weight: 300; 14 | right: 0; 15 | font-size: 40px; 16 | border: 3px solid #fff; 17 | padding: 5px 20px; 18 | } 19 | 20 | .fc-calendar-container { 21 | position: relative; 22 | height: 300px; 23 | width: 100%; 24 | background: #fff; 25 | } 26 | 27 | .fc-calendar { 28 | width: 100%; 29 | height: 100%; 30 | } 31 | 32 | .fc-calendar .fc-head { 33 | height: 30px; 34 | line-height: 30px; 35 | background: #883b61; 36 | color: #fff; 37 | font-size: 10px; 38 | font-weight: 700; 39 | letter-spacing: 1px; 40 | text-transform: uppercase; 41 | } 42 | 43 | .fc-calendar .fc-body { 44 | position: relative; 45 | width: 100%; 46 | height: 100%; 47 | height: calc(100% - 30px); 48 | padding: 15px; 49 | } 50 | 51 | .fc-calendar .fc-row { 52 | width: 100%; 53 | border-bottom: 1px solid #ddd; 54 | } 55 | 56 | .fc-four-rows .fc-row { 57 | height: 25%; 58 | } 59 | 60 | .fc-five-rows .fc-row { 61 | height: 20%; 62 | } 63 | 64 | .fc-six-rows .fc-row { 65 | height: 16.66%; 66 | height: calc(100% / 6); 67 | } 68 | 69 | .fc-calendar .fc-row > div, 70 | .fc-calendar .fc-head > div { 71 | float: left; 72 | height: 100%; 73 | width: 14.28%; /* 100% / 7 */ 74 | width: calc(100% / 7); 75 | position: relative; 76 | } 77 | 78 | /* IE 9 is rounding up the calc it seems */ 79 | .ie9 .fc-calendar .fc-row > div, 80 | .ie9 .fc-calendar .fc-head > div { 81 | width: 14.2%; 82 | } 83 | 84 | .fc-calendar .fc-row > div { 85 | border-right: 1px solid #ddd; 86 | padding: 4px; 87 | overflow: hidden; 88 | position: relative; 89 | } 90 | 91 | .fc-calendar .fc-head > div { 92 | text-align: center; 93 | } 94 | 95 | .fc-calendar .fc-row > div > span.fc-date { 96 | position: absolute; 97 | width: 30px; 98 | height: 20px; 99 | font-size: 20px; 100 | line-height: 20px; 101 | font-weight: 700; 102 | color: #ceb1bf; 103 | bottom: 5px; 104 | right: 5px; 105 | text-align: right; 106 | } 107 | 108 | .fc-calendar .fc-row > div > span.fc-weekday { 109 | padding-left: 5px; 110 | display: none; 111 | } 112 | 113 | .fc-calendar .fc-row > div.fc-today { 114 | background: #f3e0e9; 115 | } 116 | 117 | .fc-calendar .fc-row > div.fc-out { 118 | opacity: 0.6; 119 | } 120 | 121 | .fc-calendar .fc-row > div:last-child, 122 | .fc-calendar .fc-head > div:last-child { 123 | border-right: none; 124 | } 125 | 126 | .fc-calendar .fc-row:last-child { 127 | border-bottom: none; 128 | } 129 | 130 | .fc-content-data { 131 | position: inherit; 132 | font-size: 10px; 133 | color: #ceb1bf; 134 | } 135 | -------------------------------------------------------------------------------- /packages/examples/src/styles/default.scss: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/fira-sans.min.css"); 3 | 4 | *, 5 | *:after, 6 | *:before { 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | } 11 | body, 12 | html { 13 | font-size: 100%; 14 | padding: 0; 15 | margin: 0; 16 | height: 100%; 17 | } 18 | 19 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 20 | .clearfix:before, 21 | .clearfix:after { 22 | content: " "; 23 | display: table; 24 | } 25 | .clearfix:after { 26 | clear: both; 27 | } 28 | 29 | body { 30 | font-family: "Fira Sans", sans-serif; 31 | color: #777; 32 | background: #f6f6f6; 33 | } 34 | 35 | a { 36 | color: #555; 37 | text-decoration: none; 38 | outline: none; 39 | } 40 | 41 | a:hover, 42 | a:active { 43 | color: #777; 44 | } 45 | 46 | a img { 47 | border: none; 48 | } 49 | 50 | /* Header Style */ 51 | .main, 52 | .container > header { 53 | margin: 0 auto; 54 | padding: 2em; 55 | } 56 | 57 | .container { 58 | height: 100%; 59 | } 60 | 61 | .container > header { 62 | text-align: center; 63 | background: rgba(0, 0, 0, 0.01); 64 | } 65 | 66 | .container > header h1 { 67 | font-size: 2.625em; 68 | line-height: 1.3; 69 | margin: 0; 70 | font-weight: 300; 71 | } 72 | 73 | .container > header span { 74 | display: block; 75 | font-size: 60%; 76 | opacity: 0.3; 77 | padding: 0 0 0.6em 0.1em; 78 | } 79 | 80 | /* Main Content */ 81 | .main { 82 | max-width: 69em; 83 | } 84 | 85 | .column { 86 | float: left; 87 | width: 50%; 88 | padding: 0 2em; 89 | min-height: 300px; 90 | position: relative; 91 | } 92 | 93 | .column:nth-child(2) { 94 | box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1); 95 | } 96 | 97 | .column p { 98 | font-weight: 300; 99 | font-size: 2em; 100 | padding: 0; 101 | margin: 0; 102 | text-align: right; 103 | line-height: 1.5; 104 | } 105 | 106 | /* To Navigation Style */ 107 | .codrops-top { 108 | background: #fff; 109 | background: rgba(255, 255, 255, 0.6); 110 | text-transform: uppercase; 111 | width: 100%; 112 | font-size: 0.69em; 113 | line-height: 2.2; 114 | } 115 | 116 | .codrops-top a { 117 | padding: 0 1em; 118 | letter-spacing: 0.1em; 119 | color: #888; 120 | display: inline-block; 121 | } 122 | 123 | .codrops-top a:hover { 124 | background: rgba(255, 255, 255, 0.95); 125 | color: #333; 126 | } 127 | 128 | .codrops-top span.right { 129 | float: right; 130 | } 131 | 132 | .codrops-top span.right a { 133 | float: left; 134 | display: block; 135 | } 136 | 137 | .codrops-icon:before { 138 | font-family: "codropsicons"; 139 | margin: 0 4px; 140 | speak: none; 141 | font-style: normal; 142 | font-weight: normal; 143 | font-variant: normal; 144 | text-transform: none; 145 | line-height: 1; 146 | -webkit-font-smoothing: antialiased; 147 | } 148 | 149 | .codrops-icon-drop:before { 150 | content: "\e001"; 151 | } 152 | 153 | .codrops-icon-prev:before { 154 | content: "\e004"; 155 | } 156 | 157 | .codrops-icon-archive:before { 158 | content: "\e002"; 159 | } 160 | 161 | .codrops-icon-next:before { 162 | content: "\e000"; 163 | } 164 | 165 | .codrops-icon-about:before { 166 | content: "\e003"; 167 | } 168 | 169 | /* Demo Buttons Style */ 170 | .codrops-demos { 171 | padding-top: 1em; 172 | font-size: 0.9em; 173 | } 174 | 175 | .codrops-demos a { 176 | display: inline-block; 177 | margin: 0.2em; 178 | padding: 0.45em 1em; 179 | background: #999; 180 | color: #fff; 181 | font-weight: 700; 182 | border-radius: 2px; 183 | } 184 | 185 | .codrops-demos a:hover, 186 | .codrops-demos a.current-demo, 187 | .codrops-demos a.current-demo:hover { 188 | opacity: 0.6; 189 | } 190 | 191 | .codrops-nav { 192 | text-align: center; 193 | } 194 | 195 | .codrops-nav a { 196 | display: inline-block; 197 | margin: 20px auto; 198 | padding: 0.3em; 199 | } 200 | 201 | /* Demo Styles */ 202 | 203 | .demo-1 { 204 | color: #87968e; 205 | background: #fff2e3; 206 | } 207 | 208 | .demo-1 a { 209 | color: #72b890; 210 | } 211 | 212 | .demo-1 .codrops-demos a { 213 | background: #72b890; 214 | color: #fff; 215 | } 216 | 217 | .demo-2 { 218 | color: #fff; 219 | background: #c05d8e; 220 | } 221 | 222 | .demo-2 a { 223 | color: #d38daf; 224 | } 225 | 226 | .demo-2 a:hover, 227 | .demo-2 a:active { 228 | color: #fff; 229 | } 230 | 231 | .demo-2 .codrops-demos a { 232 | background: #883b61; 233 | color: #fff; 234 | } 235 | 236 | .demo-2 .codrops-top a:hover { 237 | background: rgba(255, 255, 255, 0.3); 238 | color: #333; 239 | } 240 | 241 | .demo-3 { 242 | background: #ccc; 243 | } 244 | 245 | .demo-3 a { 246 | color: #ea5381; 247 | } 248 | 249 | .demo-3 .codrops-demos a { 250 | background: #ea5381; 251 | color: #fff; 252 | } 253 | 254 | .demo-4 { 255 | color: #999; 256 | background: #fff2e3; 257 | overflow: hidden; 258 | } 259 | 260 | .demo-4 a { 261 | color: #1baede; 262 | } 263 | 264 | .demo-4 a:hover, 265 | .demo-4 a:active { 266 | opacity: 0.6; 267 | } 268 | 269 | .demo-4 .codrops-demos a { 270 | background: #1baede; 271 | color: #fff; 272 | } 273 | 274 | .demo-5 { 275 | background: #fffbd6; 276 | } 277 | 278 | @media screen and (max-width: 46.0625em) { 279 | .column { 280 | width: 100%; 281 | min-width: auto; 282 | min-height: auto; 283 | padding: 1em; 284 | } 285 | 286 | .column p { 287 | text-align: left; 288 | font-size: 1.5em; 289 | } 290 | 291 | .column:nth-child(2) { 292 | box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); 293 | } 294 | } 295 | 296 | @media screen and (max-width: 25em) { 297 | .codrops-icon span { 298 | display: none; 299 | } 300 | } 301 | 302 | .pointer { 303 | cursor: pointer; 304 | } 305 | -------------------------------------------------------------------------------- /packages/examples/src/styles/demo1.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 720px; 3 | position: relative; 4 | margin: 0 auto 40px; 5 | text-align: center; 6 | } 7 | 8 | .bb-custom-wrapper .bb-bookblock { 9 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 10 | } 11 | 12 | .bb-custom-wrapper .fw-turn { 13 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 14 | } 15 | 16 | .bb-custom-wrapper h3 { 17 | font-size: 1.4em; 18 | font-weight: 300; 19 | margin: 0.4em 0 1em; 20 | } 21 | 22 | .bb-custom-wrapper nav { 23 | width: 100%; 24 | height: 30px; 25 | margin: 1em auto 0; 26 | position: relative; 27 | z-index: 0; 28 | text-align: center; 29 | } 30 | 31 | .bb-custom-wrapper nav a { 32 | display: inline-block; 33 | width: 30px; 34 | height: 30px; 35 | text-align: center; 36 | border-radius: 2px; 37 | background: #72b890; 38 | color: #fff; 39 | margin: 2px; 40 | } 41 | 42 | .bb-custom-wrapper nav a:hover { 43 | opacity: 0.6; 44 | } 45 | 46 | /* No JS */ 47 | .no-js .bb-custom-wrapper { 48 | height: auto; 49 | } 50 | 51 | .no-js .bb-custom-content { 52 | height: 470px; 53 | } 54 | -------------------------------------------------------------------------------- /packages/examples/src/styles/demo2.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 560px; 3 | position: relative; 4 | margin: 0 auto 40px; 5 | text-align: center; 6 | } 7 | 8 | .bb-custom-wrapper .bb-bookblock { 9 | width: 560px; 10 | height: 600px; 11 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 12 | } 13 | 14 | .bb-custom-img { 15 | position: absolute; 16 | left: 0; 17 | top: 0; 18 | } 19 | 20 | .bb-custom-wrapper h3 { 21 | font-size: 1.4em; 22 | font-weight: 300; 23 | margin: 0.4em 0 1em; 24 | } 25 | 26 | .bb-custom-wrapper nav { 27 | width: 100%; 28 | height: 30px; 29 | margin: 1em auto 0; 30 | position: relative; 31 | z-index: 0; 32 | text-align: center; 33 | } 34 | 35 | .bb-custom-wrapper nav a { 36 | display: inline-block; 37 | width: 30px; 38 | height: 30px; 39 | text-align: center; 40 | border-radius: 2px; 41 | background: #883b61; 42 | color: #fff; 43 | margin: 2px; 44 | } 45 | 46 | .bb-custom-wrapper nav a:hover { 47 | opacity: 0.6; 48 | } 49 | 50 | /* No JS */ 51 | .no-js .bb-custom-wrapper { 52 | height: auto; 53 | } 54 | 55 | .no-js .bb-custom-content { 56 | height: 470px; 57 | } 58 | -------------------------------------------------------------------------------- /packages/examples/src/styles/demo3.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 420px; 3 | position: relative; 4 | margin: 0 auto 40px; 5 | text-align: center; 6 | } 7 | 8 | .bb-custom-wrapper .bb-bookblock { 9 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 10 | } 11 | 12 | .bb-custom-wrapper h3 { 13 | font-size: 1.4em; 14 | font-weight: 300; 15 | margin: 0.4em 0 1em; 16 | } 17 | 18 | .bb-custom-wrapper nav { 19 | width: 100%; 20 | height: 30px; 21 | margin: 1em auto 0; 22 | position: relative; 23 | z-index: 0; 24 | text-align: center; 25 | } 26 | 27 | .bb-custom-wrapper nav a { 28 | display: inline-block; 29 | width: 30px; 30 | height: 30px; 31 | text-align: center; 32 | border-radius: 2px; 33 | background: #ea5381; 34 | color: #fff; 35 | font-size: 0; 36 | margin: 2px; 37 | } 38 | 39 | .bb-custom-wrapper nav a:hover { 40 | opacity: 0.6; 41 | } 42 | 43 | .bb-custom-icon:before { 44 | font-family: "arrows"; 45 | speak: none; 46 | font-style: normal; 47 | font-weight: normal; 48 | font-variant: normal; 49 | text-transform: none; 50 | line-height: 1; 51 | font-size: 20px; 52 | line-height: 30px; 53 | display: block; 54 | -webkit-font-smoothing: antialiased; 55 | } 56 | 57 | .bb-custom-icon-first:before, 58 | .bb-custom-icon-last:before { 59 | content: "\e002"; 60 | } 61 | 62 | .bb-custom-icon-arrow-left:before, 63 | .bb-custom-icon-arrow-right:before { 64 | content: "\e003"; 65 | } 66 | 67 | .bb-custom-icon-arrow-left:before, 68 | .bb-custom-icon-first:before { 69 | -webkit-transform: rotate(180deg); 70 | transform: rotate(180deg); 71 | } 72 | 73 | /* No JS */ 74 | .no-js .bb-custom-wrapper { 75 | height: auto; 76 | } 77 | 78 | .no-js .bb-custom-content { 79 | height: 470px; 80 | } 81 | -------------------------------------------------------------------------------- /packages/examples/src/styles/demo4.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 100%; 3 | height: 100%; 4 | position: relative; 5 | } 6 | 7 | .bb-custom-wrapper .bb-bookblock { 8 | width: 100%; 9 | height: 100%; 10 | -webkit-perspective: 2000px; 11 | perspective: 2000px; 12 | } 13 | 14 | .bb-custom-side { 15 | width: 50%; 16 | float: left; 17 | height: 100%; 18 | overflow: hidden; 19 | background: #fff; 20 | /* Centering with flexbox */ 21 | display: -webkit-box; 22 | display: -moz-box; 23 | display: -webkit-flex; 24 | display: flex; 25 | -webkit-flex-direction: row; 26 | flex-direction: row; 27 | -webkit-flex-wrap: wrap; 28 | flex-wrap: wrap; 29 | -webkit-box-pack: center; 30 | -moz-box-pack: center; 31 | -webkit-justify-content: center; 32 | justify-content: center; 33 | -webkit-box-align: center; 34 | -moz-box-align: center; 35 | -webkit-align-items: center; 36 | align-items: center; 37 | } 38 | 39 | .bb-custom-firstpage h1 { 40 | font-size: 2.625em; 41 | line-height: 1.3; 42 | margin: 0; 43 | font-weight: 300; 44 | background: #fff; 45 | } 46 | 47 | .bb-custom-firstpage h1 span { 48 | display: block; 49 | font-size: 60%; 50 | opacity: 0.3; 51 | padding: 0 0 0.6em 0.1em; 52 | } 53 | 54 | .bb-custom-firstpage { 55 | text-align: center; 56 | padding-top: 15%; 57 | width: 50%; 58 | float: left; 59 | height: 100%; 60 | } 61 | 62 | .bb-custom-side p { 63 | padding: 8%; 64 | font-size: 1.8em; 65 | font-weight: 300; 66 | } 67 | 68 | .bb-custom-wrapper h3 { 69 | font-size: 1.4em; 70 | font-weight: 300; 71 | margin: 0.4em 0 1em; 72 | } 73 | 74 | .bb-custom-wrapper > nav { 75 | width: 100%; 76 | height: 40px; 77 | margin: 1em auto 0; 78 | position: fixed; 79 | bottom: 20px; 80 | z-index: 1000; 81 | text-align: center; 82 | } 83 | 84 | .bb-custom-wrapper > nav a { 85 | display: inline-block; 86 | width: 40px; 87 | height: 40px; 88 | text-align: center; 89 | border-radius: 2px; 90 | background: #1baede; 91 | color: #fff; 92 | font-size: 0; 93 | margin: 2px; 94 | } 95 | 96 | .bb-custom-wrapper > nav a:hover { 97 | opacity: 0.6; 98 | } 99 | 100 | .bb-custom-icon:before { 101 | font-family: "arrows"; 102 | speak: none; 103 | font-style: normal; 104 | font-weight: normal; 105 | font-variant: normal; 106 | text-transform: none; 107 | line-height: 1; 108 | font-size: 30px; 109 | line-height: 40px; 110 | display: block; 111 | -webkit-font-smoothing: antialiased; 112 | } 113 | 114 | .bb-custom-icon-first:before, 115 | .bb-custom-icon-last:before { 116 | content: "\e002"; 117 | } 118 | 119 | .bb-custom-icon-arrow-left:before, 120 | .bb-custom-icon-arrow-right:before { 121 | content: "\e003"; 122 | } 123 | 124 | .bb-custom-icon-arrow-left:before, 125 | .bb-custom-icon-first:before { 126 | -webkit-transform: rotate(180deg); 127 | transform: rotate(180deg); 128 | } 129 | 130 | /* No JS */ 131 | .no-js .bb-custom-wrapper { 132 | height: auto; 133 | } 134 | 135 | .no-js .bb-custom-content { 136 | height: 470px; 137 | } 138 | 139 | @media screen and (max-width: 61.75em) { 140 | .bb-custom-side { 141 | font-size: 70%; 142 | } 143 | } 144 | 145 | @media screen and (max-width: 33em) { 146 | .bb-custom-side { 147 | font-size: 60%; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /packages/examples/src/styles/demo5.scss: -------------------------------------------------------------------------------- 1 | .bb-bookblock { 2 | width: 300px; 3 | height: 225px; 4 | } 5 | 6 | ul.bb-custom-grid { 7 | list-style: none; 8 | margin: 0 auto 30px auto; 9 | padding: 0; 10 | max-width: 700px; 11 | display: block; 12 | } 13 | 14 | /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */ 15 | ul.bb-custom-grid:before, 16 | ul.bb-custom-grid:after { 17 | content: " "; 18 | display: table; 19 | } 20 | 21 | ul.bb-custom-grid:after { 22 | clear: both; 23 | } 24 | /* end clearfix hack */ 25 | 26 | ul.bb-custom-grid li { 27 | float: left; 28 | width: 300px; 29 | height: 260px; 30 | padding: 10px 20px 50px 20px; 31 | background: #fff; 32 | position: relative; 33 | box-sizing: content-box; 34 | margin-bottom: 20px; 35 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 36 | } 37 | 38 | ul.bb-custom-grid li:nth-child(odd) { 39 | margin-right: 20px; 40 | } 41 | 42 | ul.bb-custom-grid li:before, 43 | ul.bb-custom-grid li:after{ 44 | content: ''; 45 | position: absolute; 46 | z-index: -2; 47 | bottom: 15px; 48 | left: 10px; 49 | width: 50%; 50 | height: 20%; 51 | box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); 52 | -webkit-transform: rotate(-3deg); 53 | -moz-transform: rotate(-3deg); 54 | -ms-transform: rotate(-3deg); 55 | -o-transform: rotate(-3deg); 56 | transform: rotate(-3deg); 57 | } 58 | 59 | ul.bb-custom-grid li:after { 60 | right: 10px; 61 | left: auto; 62 | -webkit-transform: rotate(3deg); 63 | transform: rotate(3deg); 64 | } 65 | 66 | ul.bb-custom-grid li a { 67 | display: block; 68 | } 69 | 70 | ul.bb-custom-grid li h3 { 71 | color: #9a9b92; 72 | margin: 0; 73 | padding: 0; 74 | text-transform: uppercase; 75 | font-weight: 700; 76 | font-size: 14px; 77 | line-height: 35px; 78 | letter-spacing: 1px; 79 | } 80 | 81 | ul.bb-custom-grid nav { 82 | text-align: center; 83 | margin-top: 12px; 84 | padding-bottom: 5px; 85 | } 86 | 87 | ul.bb-custom-grid nav span { 88 | display: inline-block; 89 | width: 12px; 90 | height: 12px; 91 | border-radius: 50%; 92 | background: #f0f0f0; 93 | margin: 3px; 94 | cursor: pointer; 95 | box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 2px 1px rgba(255,255,255,0.9); 96 | } 97 | 98 | ul.bb-custom-grid nav span.bb-current { 99 | background: #ecb700; 100 | } 101 | -------------------------------------------------------------------------------- /packages/storybook/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /packages/storybook/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 7 | parserOptions: { 8 | parser: "babel-eslint" 9 | }, 10 | globals: { 11 | h: "readonly" 12 | }, 13 | rules: { 14 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 15 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" 16 | }, 17 | overrides: [ 18 | { 19 | files: [ 20 | "**/__tests__/*.{j,t}s?(x)", 21 | "**/tests/unit/**/*.spec.{j,t}s?(x)" 22 | ], 23 | env: { 24 | jest: true 25 | } 26 | } 27 | ] 28 | }; 29 | -------------------------------------------------------------------------------- /packages/storybook/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | 24 | storybook-static/ 25 | -------------------------------------------------------------------------------- /packages/storybook/.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | stories: ["../stories/**/*.stories.js"], 5 | addons: ["@storybook/addon-actions", "@storybook/addon-links"], 6 | webpackFinal: async (config, { configType }) => { 7 | // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' 8 | // You can change the configuration based on that. 9 | // 'PRODUCTION' is used when building the static version of storybook. 10 | 11 | // Make whatever fine-grained changes you need 12 | config.module.rules.push({ 13 | test: /\.scss$/, 14 | use: ["style-loader", "css-loader", "sass-loader"], 15 | include: path.resolve(__dirname, "../") 16 | }); 17 | 18 | // Return the altered config 19 | return config; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /packages/storybook/README.md: -------------------------------------------------------------------------------- 1 | # storybook 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Run your unit tests 19 | ``` 20 | yarn test:unit 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /packages/storybook/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /packages/storybook/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "@vue/cli-plugin-unit-jest" 3 | }; 4 | -------------------------------------------------------------------------------- /packages/storybook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "storybook", 3 | "version": "1.3.2", 4 | "private": true, 5 | "publishConfig": { 6 | "access": "restricted" 7 | }, 8 | "licence": "LGPL-3.0-only", 9 | "scripts": { 10 | "storybook": "start-storybook -p 6006", 11 | "build-storybook": "build-storybook" 12 | }, 13 | "dependencies": { 14 | "bootstrap-icons": "^1.0.0-alpha4", 15 | "bootstrap-vue": "^2.15.0", 16 | "core-js": "^3.6.5", 17 | "vue": "^2.6.11", 18 | "vue-turnjs": "^1.3.2" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.10.3", 22 | "@storybook/addon-actions": "^5.3.19", 23 | "@storybook/addon-links": "^5.3.19", 24 | "@storybook/addons": "^5.3.19", 25 | "@storybook/vue": "^5.3.19", 26 | "@vue/cli-plugin-babel": "~4.4.0", 27 | "@vue/cli-plugin-eslint": "~4.4.0", 28 | "@vue/cli-plugin-unit-jest": "~4.4.0", 29 | "@vue/cli-service": "~4.4.0", 30 | "@vue/eslint-config-prettier": "^6.0.0", 31 | "@vue/test-utils": "^1.0.3", 32 | "babel-eslint": "^10.1.0", 33 | "babel-loader": "^8.1.0", 34 | "babel-preset-vue": "^2.0.2", 35 | "eslint": "^6.7.2", 36 | "eslint-plugin-prettier": "^3.1.3", 37 | "eslint-plugin-vue": "^6.2.2", 38 | "fibers": "^5.0.0", 39 | "prettier": "^1.19.1", 40 | "sass": "^1.26.8", 41 | "sass-loader": "^8.0.2", 42 | "vue-template-compiler": "^2.6.11" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/storybook/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/packages/storybook/public/favicon.ico -------------------------------------------------------------------------------- /packages/storybook/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/storybook/stories/0-Flipping-Widgets.stories.js: -------------------------------------------------------------------------------- 1 | import FwBookStory from "./fw-book-story.vue"; 2 | import FwBookblockStory from "./fw-bookblock-story.vue"; 3 | import FwBookblock2Story from "./fw-bookblock2-story.vue"; 4 | import FwTurnStory from "./fw-turn-story.vue"; 5 | import "vue-turnjs/dist/vue-turnjs.esm.css"; 6 | import "./styles/default.scss"; 7 | 8 | export default { title: "Flipping Widgets" }; 9 | 10 | export const Book = () => ({ 11 | render(h) { 12 | return h(FwBookStory); 13 | } 14 | }); 15 | 16 | export const Bookblock = () => ({ 17 | render(h) { 18 | return h(FwBookblockStory); 19 | } 20 | }); 21 | 22 | export const Bookblock2 = () => ({ 23 | render(h) { 24 | return h(FwBookblock2Story); 25 | } 26 | }); 27 | 28 | export const Turn = () => ({ 29 | render(h) { 30 | return h(FwTurnStory); 31 | } 32 | }); 33 | -------------------------------------------------------------------------------- /packages/storybook/stories/fw-book-story.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 60 | 61 | 83 | -------------------------------------------------------------------------------- /packages/storybook/stories/fw-bookblock-story.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 107 | 108 | 111 | -------------------------------------------------------------------------------- /packages/storybook/stories/fw-bookblock2-story.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 101 | 102 | 106 | -------------------------------------------------------------------------------- /packages/storybook/stories/fw-turn-story.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 32 | 33 | 43 | -------------------------------------------------------------------------------- /packages/storybook/stories/styles/calendar.scss: -------------------------------------------------------------------------------- 1 | /* Style from Caledario: */ 2 | 3 | .fc-calendar-wrap { 4 | margin-top: 300px; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | .fc-calendar-wrap h2 { 9 | color: #fff; 10 | position: absolute; 11 | z-index: 100; 12 | margin: -2.4em 0.9em 0 0; 13 | font-weight: 300; 14 | right: 0; 15 | font-size: 40px; 16 | border: 3px solid #fff; 17 | padding: 5px 20px; 18 | } 19 | 20 | .fc-calendar-container { 21 | position: relative; 22 | height: 300px; 23 | width: 100%; 24 | background: #fff; 25 | } 26 | 27 | .fc-calendar { 28 | width: 100%; 29 | height: 100%; 30 | } 31 | 32 | .fc-calendar .fc-head { 33 | height: 30px; 34 | line-height: 30px; 35 | background: #883b61; 36 | color: #fff; 37 | font-size: 10px; 38 | font-weight: 700; 39 | letter-spacing: 1px; 40 | text-transform: uppercase; 41 | } 42 | 43 | .fc-calendar .fc-body { 44 | position: relative; 45 | width: 100%; 46 | height: 100%; 47 | height: calc(100% - 30px); 48 | padding: 15px; 49 | } 50 | 51 | .fc-calendar .fc-row { 52 | width: 100%; 53 | border-bottom: 1px solid #ddd; 54 | } 55 | 56 | .fc-four-rows .fc-row { 57 | height: 25%; 58 | } 59 | 60 | .fc-five-rows .fc-row { 61 | height: 20%; 62 | } 63 | 64 | .fc-six-rows .fc-row { 65 | height: 16.66%; 66 | height: calc(100% / 6); 67 | } 68 | 69 | .fc-calendar .fc-row > div, 70 | .fc-calendar .fc-head > div { 71 | float: left; 72 | height: 100%; 73 | width: 14.28%; /* 100% / 7 */ 74 | width: calc(100% / 7); 75 | position: relative; 76 | } 77 | 78 | /* IE 9 is rounding up the calc it seems */ 79 | .ie9 .fc-calendar .fc-row > div, 80 | .ie9 .fc-calendar .fc-head > div { 81 | width: 14.2%; 82 | } 83 | 84 | .fc-calendar .fc-row > div { 85 | border-right: 1px solid #ddd; 86 | padding: 4px; 87 | overflow: hidden; 88 | position: relative; 89 | } 90 | 91 | .fc-calendar .fc-head > div { 92 | text-align: center; 93 | } 94 | 95 | .fc-calendar .fc-row > div > span.fc-date { 96 | position: absolute; 97 | width: 30px; 98 | height: 20px; 99 | font-size: 20px; 100 | line-height: 20px; 101 | font-weight: 700; 102 | color: #ceb1bf; 103 | bottom: 5px; 104 | right: 5px; 105 | text-align: right; 106 | } 107 | 108 | .fc-calendar .fc-row > div > span.fc-weekday { 109 | padding-left: 5px; 110 | display: none; 111 | } 112 | 113 | .fc-calendar .fc-row > div.fc-today { 114 | background: #f3e0e9; 115 | } 116 | 117 | .fc-calendar .fc-row > div.fc-out { 118 | opacity: 0.6; 119 | } 120 | 121 | .fc-calendar .fc-row > div:last-child, 122 | .fc-calendar .fc-head > div:last-child { 123 | border-right: none; 124 | } 125 | 126 | .fc-calendar .fc-row:last-child { 127 | border-bottom: none; 128 | } 129 | 130 | .fc-content-data { 131 | position: inherit; 132 | font-size: 10px; 133 | color: #ceb1bf; 134 | } 135 | -------------------------------------------------------------------------------- /packages/storybook/stories/styles/default.scss: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/fira-sans.min.css"); 3 | 4 | *, 5 | *:after, 6 | *:before { 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | } 11 | body, 12 | html { 13 | font-size: 100%; 14 | padding: 0; 15 | margin: 0; 16 | height: 100%; 17 | } 18 | 19 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 20 | .clearfix:before, 21 | .clearfix:after { 22 | content: " "; 23 | display: table; 24 | } 25 | .clearfix:after { 26 | clear: both; 27 | } 28 | 29 | body { 30 | font-family: "Fira Sans", sans-serif; 31 | color: #777; 32 | background: #f6f6f6; 33 | } 34 | 35 | a { 36 | color: #555; 37 | text-decoration: none; 38 | outline: none; 39 | } 40 | 41 | a:hover, 42 | a:active { 43 | color: #777; 44 | } 45 | 46 | a img { 47 | border: none; 48 | } 49 | 50 | /* Header Style */ 51 | .main, 52 | .container > header { 53 | margin: 0 auto; 54 | padding: 2em; 55 | } 56 | 57 | .container { 58 | height: 100%; 59 | } 60 | 61 | .container > header { 62 | text-align: center; 63 | background: rgba(0, 0, 0, 0.01); 64 | } 65 | 66 | .container > header h1 { 67 | font-size: 2.625em; 68 | line-height: 1.3; 69 | margin: 0; 70 | font-weight: 300; 71 | } 72 | 73 | .container > header span { 74 | display: block; 75 | font-size: 60%; 76 | opacity: 0.3; 77 | padding: 0 0 0.6em 0.1em; 78 | } 79 | 80 | /* Main Content */ 81 | .main { 82 | max-width: 69em; 83 | } 84 | 85 | .column { 86 | float: left; 87 | width: 50%; 88 | padding: 0 2em; 89 | min-height: 300px; 90 | position: relative; 91 | } 92 | 93 | .column:nth-child(2) { 94 | box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1); 95 | } 96 | 97 | .column p { 98 | font-weight: 300; 99 | font-size: 2em; 100 | padding: 0; 101 | margin: 0; 102 | text-align: right; 103 | line-height: 1.5; 104 | } 105 | 106 | /* To Navigation Style */ 107 | .codrops-top { 108 | background: #fff; 109 | background: rgba(255, 255, 255, 0.6); 110 | text-transform: uppercase; 111 | width: 100%; 112 | font-size: 0.69em; 113 | line-height: 2.2; 114 | } 115 | 116 | .codrops-top a { 117 | padding: 0 1em; 118 | letter-spacing: 0.1em; 119 | color: #888; 120 | display: inline-block; 121 | } 122 | 123 | .codrops-top a:hover { 124 | background: rgba(255, 255, 255, 0.95); 125 | color: #333; 126 | } 127 | 128 | .codrops-top span.right { 129 | float: right; 130 | } 131 | 132 | .codrops-top span.right a { 133 | float: left; 134 | display: block; 135 | } 136 | 137 | .codrops-icon:before { 138 | font-family: "codropsicons"; 139 | margin: 0 4px; 140 | speak: none; 141 | font-style: normal; 142 | font-weight: normal; 143 | font-variant: normal; 144 | text-transform: none; 145 | line-height: 1; 146 | -webkit-font-smoothing: antialiased; 147 | } 148 | 149 | .codrops-icon-drop:before { 150 | content: "\e001"; 151 | } 152 | 153 | .codrops-icon-prev:before { 154 | content: "\e004"; 155 | } 156 | 157 | .codrops-icon-archive:before { 158 | content: "\e002"; 159 | } 160 | 161 | .codrops-icon-next:before { 162 | content: "\e000"; 163 | } 164 | 165 | .codrops-icon-about:before { 166 | content: "\e003"; 167 | } 168 | 169 | /* Demo Buttons Style */ 170 | .codrops-demos { 171 | padding-top: 1em; 172 | font-size: 0.9em; 173 | } 174 | 175 | .codrops-demos a { 176 | display: inline-block; 177 | margin: 0.2em; 178 | padding: 0.45em 1em; 179 | background: #999; 180 | color: #fff; 181 | font-weight: 700; 182 | border-radius: 2px; 183 | } 184 | 185 | .codrops-demos a:hover, 186 | .codrops-demos a.current-demo, 187 | .codrops-demos a.current-demo:hover { 188 | opacity: 0.6; 189 | } 190 | 191 | .codrops-nav { 192 | text-align: center; 193 | } 194 | 195 | .codrops-nav a { 196 | display: inline-block; 197 | margin: 20px auto; 198 | padding: 0.3em; 199 | } 200 | 201 | /* Demo Styles */ 202 | 203 | .demo-1 { 204 | color: #87968e; 205 | background: #fff2e3; 206 | } 207 | 208 | .demo-1 a { 209 | color: #72b890; 210 | } 211 | 212 | .demo-1 .codrops-demos a { 213 | background: #72b890; 214 | color: #fff; 215 | } 216 | 217 | .demo-2 { 218 | color: #fff; 219 | background: #c05d8e; 220 | } 221 | 222 | .demo-2 a { 223 | color: #d38daf; 224 | } 225 | 226 | .demo-2 a:hover, 227 | .demo-2 a:active { 228 | color: #fff; 229 | } 230 | 231 | .demo-2 .codrops-demos a { 232 | background: #883b61; 233 | color: #fff; 234 | } 235 | 236 | .demo-2 .codrops-top a:hover { 237 | background: rgba(255, 255, 255, 0.3); 238 | color: #333; 239 | } 240 | 241 | .demo-3 { 242 | background: #ccc; 243 | } 244 | 245 | .demo-3 a { 246 | color: #ea5381; 247 | } 248 | 249 | .demo-3 .codrops-demos a { 250 | background: #ea5381; 251 | color: #fff; 252 | } 253 | 254 | .demo-4 { 255 | color: #999; 256 | background: #fff2e3; 257 | overflow: hidden; 258 | } 259 | 260 | .demo-4 a { 261 | color: #1baede; 262 | } 263 | 264 | .demo-4 a:hover, 265 | .demo-4 a:active { 266 | opacity: 0.6; 267 | } 268 | 269 | .demo-4 .codrops-demos a { 270 | background: #1baede; 271 | color: #fff; 272 | } 273 | 274 | .demo-5 { 275 | background: #fffbd6; 276 | } 277 | 278 | @media screen and (max-width: 46.0625em) { 279 | .column { 280 | width: 100%; 281 | min-width: auto; 282 | min-height: auto; 283 | padding: 1em; 284 | } 285 | 286 | .column p { 287 | text-align: left; 288 | font-size: 1.5em; 289 | } 290 | 291 | .column:nth-child(2) { 292 | box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); 293 | } 294 | } 295 | 296 | @media screen and (max-width: 25em) { 297 | .codrops-icon span { 298 | display: none; 299 | } 300 | } 301 | 302 | .pointer { 303 | cursor: pointer; 304 | } 305 | -------------------------------------------------------------------------------- /packages/storybook/stories/styles/demo1.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 720px; 3 | position: relative; 4 | margin: 0 auto 40px; 5 | text-align: center; 6 | } 7 | 8 | .bb-custom-wrapper .bb-bookblock { 9 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 10 | } 11 | 12 | .bb-custom-wrapper .fw-turn { 13 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 14 | } 15 | 16 | .bb-custom-wrapper h3 { 17 | font-size: 1.4em; 18 | font-weight: 300; 19 | margin: 0.4em 0 1em; 20 | } 21 | 22 | .bb-custom-wrapper nav { 23 | width: 100%; 24 | height: 30px; 25 | margin: 1em auto 0; 26 | position: relative; 27 | z-index: 0; 28 | text-align: center; 29 | } 30 | 31 | .bb-custom-wrapper nav a { 32 | display: inline-block; 33 | width: 30px; 34 | height: 30px; 35 | text-align: center; 36 | border-radius: 2px; 37 | background: #72b890; 38 | color: #fff; 39 | margin: 2px; 40 | } 41 | 42 | .bb-custom-wrapper nav a:hover { 43 | opacity: 0.6; 44 | } 45 | 46 | /* No JS */ 47 | .no-js .bb-custom-wrapper { 48 | height: auto; 49 | } 50 | 51 | .no-js .bb-custom-content { 52 | height: 470px; 53 | } 54 | -------------------------------------------------------------------------------- /packages/storybook/stories/styles/demo2.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 560px; 3 | position: relative; 4 | margin: 0 auto 40px; 5 | text-align: center; 6 | } 7 | 8 | .bb-custom-wrapper .bb-bookblock { 9 | width: 560px; 10 | height: 600px; 11 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 12 | } 13 | 14 | .bb-custom-img { 15 | position: absolute; 16 | left: 0; 17 | top: 0; 18 | } 19 | 20 | .bb-custom-wrapper h3 { 21 | font-size: 1.4em; 22 | font-weight: 300; 23 | margin: 0.4em 0 1em; 24 | } 25 | 26 | .bb-custom-wrapper nav { 27 | width: 100%; 28 | height: 30px; 29 | margin: 1em auto 0; 30 | position: relative; 31 | z-index: 0; 32 | text-align: center; 33 | } 34 | 35 | .bb-custom-wrapper nav a { 36 | display: inline-block; 37 | width: 30px; 38 | height: 30px; 39 | text-align: center; 40 | border-radius: 2px; 41 | background: #883b61; 42 | color: #fff; 43 | margin: 2px; 44 | } 45 | 46 | .bb-custom-wrapper nav a:hover { 47 | opacity: 0.6; 48 | } 49 | 50 | /* No JS */ 51 | .no-js .bb-custom-wrapper { 52 | height: auto; 53 | } 54 | 55 | .no-js .bb-custom-content { 56 | height: 470px; 57 | } 58 | -------------------------------------------------------------------------------- /packages/storybook/stories/styles/demo3.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 420px; 3 | position: relative; 4 | margin: 0 auto 40px; 5 | text-align: center; 6 | } 7 | 8 | .bb-custom-wrapper .bb-bookblock { 9 | box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6); 10 | } 11 | 12 | .bb-custom-wrapper h3 { 13 | font-size: 1.4em; 14 | font-weight: 300; 15 | margin: 0.4em 0 1em; 16 | } 17 | 18 | .bb-custom-wrapper nav { 19 | width: 100%; 20 | height: 30px; 21 | margin: 1em auto 0; 22 | position: relative; 23 | z-index: 0; 24 | text-align: center; 25 | } 26 | 27 | .bb-custom-wrapper nav a { 28 | display: inline-block; 29 | width: 30px; 30 | height: 30px; 31 | text-align: center; 32 | border-radius: 2px; 33 | background: #ea5381; 34 | color: #fff; 35 | font-size: 0; 36 | margin: 2px; 37 | } 38 | 39 | .bb-custom-wrapper nav a:hover { 40 | opacity: 0.6; 41 | } 42 | 43 | .bb-custom-icon:before { 44 | font-family: "arrows"; 45 | speak: none; 46 | font-style: normal; 47 | font-weight: normal; 48 | font-variant: normal; 49 | text-transform: none; 50 | line-height: 1; 51 | font-size: 20px; 52 | line-height: 30px; 53 | display: block; 54 | -webkit-font-smoothing: antialiased; 55 | } 56 | 57 | .bb-custom-icon-first:before, 58 | .bb-custom-icon-last:before { 59 | content: "\e002"; 60 | } 61 | 62 | .bb-custom-icon-arrow-left:before, 63 | .bb-custom-icon-arrow-right:before { 64 | content: "\e003"; 65 | } 66 | 67 | .bb-custom-icon-arrow-left:before, 68 | .bb-custom-icon-first:before { 69 | -webkit-transform: rotate(180deg); 70 | transform: rotate(180deg); 71 | } 72 | 73 | /* No JS */ 74 | .no-js .bb-custom-wrapper { 75 | height: auto; 76 | } 77 | 78 | .no-js .bb-custom-content { 79 | height: 470px; 80 | } 81 | -------------------------------------------------------------------------------- /packages/storybook/stories/styles/demo4.scss: -------------------------------------------------------------------------------- 1 | .bb-custom-wrapper { 2 | width: 100%; 3 | height: 100%; 4 | position: relative; 5 | } 6 | 7 | .bb-custom-wrapper .bb-bookblock { 8 | width: 100%; 9 | height: 100%; 10 | -webkit-perspective: 2000px; 11 | perspective: 2000px; 12 | } 13 | 14 | .bb-custom-side { 15 | width: 50%; 16 | float: left; 17 | height: 100%; 18 | overflow: hidden; 19 | background: #fff; 20 | /* Centering with flexbox */ 21 | display: -webkit-box; 22 | display: -moz-box; 23 | display: -webkit-flex; 24 | display: flex; 25 | -webkit-flex-direction: row; 26 | flex-direction: row; 27 | -webkit-flex-wrap: wrap; 28 | flex-wrap: wrap; 29 | -webkit-box-pack: center; 30 | -moz-box-pack: center; 31 | -webkit-justify-content: center; 32 | justify-content: center; 33 | -webkit-box-align: center; 34 | -moz-box-align: center; 35 | -webkit-align-items: center; 36 | align-items: center; 37 | } 38 | 39 | .bb-custom-firstpage h1 { 40 | font-size: 2.625em; 41 | line-height: 1.3; 42 | margin: 0; 43 | font-weight: 300; 44 | background: #fff; 45 | } 46 | 47 | .bb-custom-firstpage h1 span { 48 | display: block; 49 | font-size: 60%; 50 | opacity: 0.3; 51 | padding: 0 0 0.6em 0.1em; 52 | } 53 | 54 | .bb-custom-firstpage { 55 | text-align: center; 56 | padding-top: 15%; 57 | width: 50%; 58 | float: left; 59 | height: 100%; 60 | } 61 | 62 | .bb-custom-side p { 63 | padding: 8%; 64 | font-size: 1.8em; 65 | font-weight: 300; 66 | } 67 | 68 | .bb-custom-wrapper h3 { 69 | font-size: 1.4em; 70 | font-weight: 300; 71 | margin: 0.4em 0 1em; 72 | } 73 | 74 | .bb-custom-wrapper > nav { 75 | width: 100%; 76 | height: 40px; 77 | margin: 1em auto 0; 78 | position: fixed; 79 | bottom: 20px; 80 | z-index: 1000; 81 | text-align: center; 82 | } 83 | 84 | .bb-custom-wrapper > nav a { 85 | display: inline-block; 86 | width: 40px; 87 | height: 40px; 88 | text-align: center; 89 | border-radius: 2px; 90 | background: #1baede; 91 | color: #fff; 92 | font-size: 0; 93 | margin: 2px; 94 | } 95 | 96 | .bb-custom-wrapper > nav a:hover { 97 | opacity: 0.6; 98 | } 99 | 100 | .bb-custom-icon:before { 101 | font-family: "arrows"; 102 | speak: none; 103 | font-style: normal; 104 | font-weight: normal; 105 | font-variant: normal; 106 | text-transform: none; 107 | line-height: 1; 108 | font-size: 30px; 109 | line-height: 40px; 110 | display: block; 111 | -webkit-font-smoothing: antialiased; 112 | } 113 | 114 | .bb-custom-icon-first:before, 115 | .bb-custom-icon-last:before { 116 | content: "\e002"; 117 | } 118 | 119 | .bb-custom-icon-arrow-left:before, 120 | .bb-custom-icon-arrow-right:before { 121 | content: "\e003"; 122 | } 123 | 124 | .bb-custom-icon-arrow-left:before, 125 | .bb-custom-icon-first:before { 126 | -webkit-transform: rotate(180deg); 127 | transform: rotate(180deg); 128 | } 129 | 130 | /* No JS */ 131 | .no-js .bb-custom-wrapper { 132 | height: auto; 133 | } 134 | 135 | .no-js .bb-custom-content { 136 | height: 470px; 137 | } 138 | 139 | @media screen and (max-width: 61.75em) { 140 | .bb-custom-side { 141 | font-size: 70%; 142 | } 143 | } 144 | 145 | @media screen and (max-width: 33em) { 146 | .bb-custom-side { 147 | font-size: 60%; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /packages/storybook/stories/styles/demo5.scss: -------------------------------------------------------------------------------- 1 | .bb-bookblock { 2 | width: 300px; 3 | height: 225px; 4 | } 5 | 6 | ul.bb-custom-grid { 7 | list-style: none; 8 | margin: 0 auto 30px auto; 9 | padding: 0; 10 | max-width: 700px; 11 | display: block; 12 | } 13 | 14 | /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */ 15 | ul.bb-custom-grid:before, 16 | ul.bb-custom-grid:after { 17 | content: " "; 18 | display: table; 19 | } 20 | 21 | ul.bb-custom-grid:after { 22 | clear: both; 23 | } 24 | /* end clearfix hack */ 25 | 26 | ul.bb-custom-grid li { 27 | float: left; 28 | width: 300px; 29 | height: 260px; 30 | padding: 10px 20px 50px 20px; 31 | background: #fff; 32 | position: relative; 33 | box-sizing: content-box; 34 | margin-bottom: 20px; 35 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 36 | } 37 | 38 | ul.bb-custom-grid li:nth-child(odd) { 39 | margin-right: 20px; 40 | } 41 | 42 | ul.bb-custom-grid li:before, 43 | ul.bb-custom-grid li:after{ 44 | content: ''; 45 | position: absolute; 46 | z-index: -2; 47 | bottom: 15px; 48 | left: 10px; 49 | width: 50%; 50 | height: 20%; 51 | box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); 52 | -webkit-transform: rotate(-3deg); 53 | -moz-transform: rotate(-3deg); 54 | -ms-transform: rotate(-3deg); 55 | -o-transform: rotate(-3deg); 56 | transform: rotate(-3deg); 57 | } 58 | 59 | ul.bb-custom-grid li:after { 60 | right: 10px; 61 | left: auto; 62 | -webkit-transform: rotate(3deg); 63 | transform: rotate(3deg); 64 | } 65 | 66 | ul.bb-custom-grid li a { 67 | display: block; 68 | } 69 | 70 | ul.bb-custom-grid li h3 { 71 | color: #9a9b92; 72 | margin: 0; 73 | padding: 0; 74 | text-transform: uppercase; 75 | font-weight: 700; 76 | font-size: 14px; 77 | line-height: 35px; 78 | letter-spacing: 1px; 79 | } 80 | 81 | ul.bb-custom-grid nav { 82 | text-align: center; 83 | margin-top: 12px; 84 | padding-bottom: 5px; 85 | } 86 | 87 | ul.bb-custom-grid nav span { 88 | display: inline-block; 89 | width: 12px; 90 | height: 12px; 91 | border-radius: 50%; 92 | background: #f0f0f0; 93 | margin: 3px; 94 | cursor: pointer; 95 | box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 2px 1px rgba(255,255,255,0.9); 96 | } 97 | 98 | ul.bb-custom-grid nav span.bb-current { 99 | background: #ecb700; 100 | } 101 | -------------------------------------------------------------------------------- /packages/vue-turnjs/.browserslistrc: -------------------------------------------------------------------------------- 1 | current node 2 | last 2 versions and > 2% 3 | ie > 10 4 | -------------------------------------------------------------------------------- /packages/vue-turnjs/.gitignore: -------------------------------------------------------------------------------- 1 | .now 2 | *.log 3 | yarn.lock 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /packages/vue-turnjs/LICENCE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright © 2007 Free Software Foundation, Inc. 5 | 6 | Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. 7 | 8 | This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below. 9 | 10 | 0. Additional Definitions. 11 | As used herein, “this License” refers to version 3 of the GNU Lesser General Public License, and the “GNU GPL” refers to version 3 of the GNU General Public License. 12 | 13 | “The Library” refers to a covered work governed by this License, other than an Application or a Combined Work as defined below. 14 | 15 | An “Application” is any work that makes use of an interface provided by the Library, but which is not otherwise based on the Library. Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library. 16 | 17 | A “Combined Work” is a work produced by combining or linking an Application with the Library. The particular version of the Library with which the Combined Work was made is also called the “Linked Version”. 18 | 19 | The “Minimal Corresponding Source” for a Combined Work means the Corresponding Source for the Combined Work, excluding any source code for portions of the Combined Work that, considered in isolation, are based on the Application, and not on the Linked Version. 20 | 21 | The “Corresponding Application Code” for a Combined Work means the object code and/or source code for the Application, including any data and utility programs needed for reproducing the Combined Work from the Application, but excluding the System Libraries of the Combined Work. 22 | 23 | 1. Exception to Section 3 of the GNU GPL. 24 | You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL. 25 | 26 | 2. Conveying Modified Versions. 27 | If you modify a copy of the Library, and, in your modifications, a facility refers to a function or data to be supplied by an Application that uses the facility (other than as an argument passed when the facility is invoked), then you may convey a copy of the modified version: 28 | 29 | a) under this License, provided that you make a good faith effort to ensure that, in the event an Application does not supply the function or data, the facility still operates, and performs whatever part of its purpose remains meaningful, or 30 | b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy. 31 | 3. Object Code Incorporating Material from Library Header Files. 32 | The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following: 33 | 34 | a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License. 35 | b) Accompany the object code with a copy of the GNU GPL and this license document. 36 | 4. Combined Works. 37 | You may convey a Combined Work under terms of your choice that, taken together, effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications, if you also do each of the following: 38 | 39 | a) Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License. 40 | b) Accompany the Combined Work with a copy of the GNU GPL and this license document. 41 | c) For a Combined Work that displays copyright notices during execution, include the copyright notice for the Library among these notices, as well as a reference directing the user to the copies of the GNU GPL and this license document. 42 | d) Do one of the following: 43 | 0) Convey the Minimal Corresponding Source under the terms of this License, and the Corresponding Application Code in a form suitable for, and under terms that permit, the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work, in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source. 44 | 1) Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (a) uses at run time a copy of the Library already present on the user's computer system, and (b) will operate properly with a modified version of the Library that is interface-compatible with the Linked Version. 45 | e) Provide Installation Information, but only if you would otherwise be required to provide such information under section 6 of the GNU GPL, and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version. (If you use option 4d0, the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code. If you use option 4d1, you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.) 46 | 5. Combined Libraries. 47 | You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License, and convey such a combined library under terms of your choice, if you do both of the following: 48 | 49 | a) Accompany the combined library with a copy of the same work based on the Library, uncombined with any other library facilities, conveyed under the terms of this License. 50 | b) Give prominent notice with the combined library that part of it is a work based on the Library, and explaining where to find the accompanying uncombined form of the same work. 51 | 6. Revised Versions of the GNU Lesser General Public License. 52 | The Free Software Foundation may publish revised and/or new versions of the GNU Lesser General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. 53 | 54 | Each version is given a distinguishing version number. If the Library as you received it specifies that a certain numbered version of the GNU Lesser General Public License “or any later version” applies to it, you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation. If the Library as you received it does not specify a version number of the GNU Lesser General Public License, you may choose any version of the GNU Lesser General Public License ever published by the Free Software Foundation. 55 | 56 | If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply, that proxy's public statement of acceptance of any version is permanent authorization for you to choose that version for the Library. 57 | -------------------------------------------------------------------------------- /packages/vue-turnjs/README.md: -------------------------------------------------------------------------------- 1 | # vue-turnjs 2 | 3 | 4 | 5 | [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-) 6 | 7 | 8 | 9 | ![npm](https://img.shields.io/npm/dw/vue-turnjs) 10 | ![npm](https://img.shields.io/npm/v/vue-turnjs) 11 | 12 | 📖 [Docs](https://reidond.gitbook.io/vue-turnjs/) 13 | 14 | 📚 [Storybook](https://vue-turnjs-storybook.netlify.app/) 15 | 16 | ## Contributors ✨ 17 | 18 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

Andrii Shafar
💻 📖 🚧
Pidfihurnyi Orest
💻 👀 ⚠️
29 | 30 | 31 | 32 | 33 | 34 | 35 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 36 | -------------------------------------------------------------------------------- /packages/vue-turnjs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-env', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /packages/vue-turnjs/dist/vue-turnjs.esm.css: -------------------------------------------------------------------------------- 1 | .bb-bookblock{width:400px;height:300px;margin:0 auto;position:relative;z-index:100;-webkit-perspective:1300px;perspective:1300px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-page{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;transition-property:transform}.bb-vertical .bb-page{width:50%;height:100%;left:50%;-webkit-transform-origin:left center;transform-origin:left center}.bb-horizontal .bb-page{width:100%;height:50%;top:50%;-webkit-transform-origin:center top;transform-origin:center top}.bb-content,.bb-inner,.bb-outer,.bb-page>div{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-vertical .bb-content{width:200%}.bb-horizontal .bb-content{height:200%}.bb-page>div{width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.bb-vertical .bb-back{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-horizontal .bb-back{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.bb-outer{width:100%;overflow:hidden;z-index:999}.bb-flipoverlay,.bb-overlay{background-color:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.bb-flipoverlay{background-color:rgba(0,0,0,.2)}.bb-bookblock.bb-vertical>div.bb-page:first-child,.bb-bookblock.bb-vertical>div.bb-page:first-child .bb-back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.bb-bookblock.bb-horizontal>div.bb-page:first-child,.bb-bookblock.bb-horizontal>div.bb-page:first-child .bb-back{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-content{background:#fff}.bb-vertical .bb-front .bb-content{left:-100%}.bb-horizontal .bb-front .bb-content{top:-100%}.bb-vertical .bb-flip-initial,.bb-vertical .bb-flip-next{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-vertical .bb-flip-prev{-webkit-transform:rotateY(0);transform:rotateY(0)}.bb-horizontal .bb-flip-initial,.bb-horizontal .bb-flip-next{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-horizontal .bb-flip-prev{-webkit-transform:rotateX(0);transform:rotateX(0)}.bb-vertical .bb-flip-next-end{-webkit-transform:rotateY(-15deg);transform:rotateY(-15deg)}.bb-vertical .bb-flip-prev-end{-webkit-transform:rotateY(-165deg);transform:rotateY(-165deg)}.bb-horizontal .bb-flip-next-end{-webkit-transform:rotateX(15deg);transform:rotateX(15deg)}.bb-horizontal .bb-flip-prev-end{-webkit-transform:rotateX(165deg);transform:rotateX(165deg)}.bb-item{width:100%;height:100%;position:absolute;top:0;left:0;display:none;background:#fff}.no-js .bb-bookblock,.no-js ul.bb-custom-grid li{width:auto;height:auto}.no-js .bb-item{display:block;position:relative}.bb-bookblock{width:400px;height:300px;margin:0 auto;position:relative;z-index:100;-webkit-perspective:1300px;perspective:1300px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-page{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;transition-property:transform}.bb-vertical .bb-page{width:50%;height:100%;left:50%;-webkit-transform-origin:left center;transform-origin:left center}.bb-horizontal .bb-page{width:100%;height:50%;top:50%;-webkit-transform-origin:center top;transform-origin:center top}.bb-content,.bb-inner,.bb-outer,.bb-page>div{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-vertical .bb-content{width:200%}.bb-horizontal .bb-content{height:200%}.bb-page>div{width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.bb-vertical .bb-back{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-horizontal .bb-back{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.bb-outer{width:100%;overflow:hidden;z-index:999}.bb-flipoverlay,.bb-overlay{background-color:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.bb-flipoverlay{background-color:rgba(0,0,0,.2)}.bb-bookblock.bb-vertical>div.bb-page:first-child,.bb-bookblock.bb-vertical>div.bb-page:first-child .bb-back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.bb-bookblock.bb-horizontal>div.bb-page:first-child,.bb-bookblock.bb-horizontal>div.bb-page:first-child .bb-back{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-content{background:#fff}.bb-vertical .bb-front .bb-content{left:-100%}.bb-horizontal .bb-front .bb-content{top:-100%}.bb-vertical .bb-flip-initial,.bb-vertical .bb-flip-next{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-vertical .bb-flip-prev{-webkit-transform:rotateY(0);transform:rotateY(0)}.bb-horizontal .bb-flip-initial,.bb-horizontal .bb-flip-next{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-horizontal .bb-flip-prev{-webkit-transform:rotateX(0);transform:rotateX(0)}.bb-vertical .bb-flip-next-end{-webkit-transform:rotateY(-15deg);transform:rotateY(-15deg)}.bb-vertical .bb-flip-prev-end{-webkit-transform:rotateY(-165deg);transform:rotateY(-165deg)}.bb-horizontal .bb-flip-next-end{-webkit-transform:rotateX(15deg);transform:rotateX(15deg)}.bb-horizontal .bb-flip-prev-end{-webkit-transform:rotateX(165deg);transform:rotateX(165deg)}.bb-item{width:100%;height:100%;position:absolute;top:0;left:0;display:none;background:#fff}.no-js .bb-bookblock,.no-js ul.bb-custom-grid li{width:auto;height:auto}.no-js .bb-item{display:block;position:relative}.fw-book{width:600px;height:350px;border:5px solid #1296db;box-sizing:border-box;border-radius:10px;position:relative;perspective:1500px}.fw-book .fw-bookitem{width:50%;height:100%;border-radius:10px;background:#fff;overflow:hidden;position:absolute;top:0;right:0}.fw-book .fw-bookitem>.loading{position:absolute;top:0;left:0;right:0;bottom:0;width:30px;height:30px;margin:auto;animation:loading linear 1s infinite}.fw-book .fw-bookitem .index{position:absolute;bottom:5px;font-style:normal;width:20px;height:20px;line-height:20px;text-align:center;background:rgba(18,150,219,.4);border-radius:50%}.fw-book .fw-bookitem .index.index-left{left:5px}.fw-book .fw-bookitem .index.index-right{right:5px}.fw-book .fw-bookitem.left{left:0;right:initial}.fw-book .fw-bookitem.right{left:initial;right:0}.fw-book .fw-bookitem.rotate180.left-hidden *,.fw-book .fw-bookitem.rotate180.left-visible *,.fw-book .fw-bookitem.rotate180.right-hidden *,.fw-book .fw-bookitem.rotate180.right-visible *{transform:rotateY(180deg)}.fw-book .fw-bookitem.rotate180.left-hidden .index.index-left,.fw-book .fw-bookitem.rotate180.left-visible .index.index-left,.fw-book .fw-bookitem.rotate180.right-hidden .index.index-left,.fw-book .fw-bookitem.rotate180.right-visible .index.index-left{left:initial;right:5px}.fw-book .fw-bookitem.rotate180.left-hidden .index.index-right,.fw-book .fw-bookitem.rotate180.left-visible .index.index-right,.fw-book .fw-bookitem.rotate180.right-hidden .index.index-right,.fw-book .fw-bookitem.rotate180.right-visible .index.index-right{right:initial;left:5px}.fw-book .fw-bookitem.right-hidden{z-index:99!important;transform-origin:right;animation:right-hidden linear 1s 1 both}.fw-book .fw-bookitem.right-visible{z-index:100!important;transform-origin:right;animation:right-visible linear 1s 1 both}.fw-book .fw-bookitem.left-hidden{z-index:99!important;transform-origin:left;animation:left-hidden linear 1s 1 both}.fw-book .fw-bookitem.left-visible{z-index:100!important;transform-origin:left;animation:left-visible linear 1s 1 both}@keyframes right-hidden{0%{opacity:1;transform:rotate3d(0,1,0,0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,90deg)}50.1%{opacity:0;transform:rotate3d(0,1,0,90deg)}100%{opacity:0;box-shadow:none;transform:rotate3d(0,1,0,180deg)}}@keyframes right-visible{0%{opacity:0;transform:rotate3d(0,1,0,0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,90deg)}50.1%{opacity:1;transform:rotate3d(0,1,0,90deg)}100%{opacity:1;box-shadow:none;transform:rotate3d(0,1,0,180deg)}}@keyframes left-hidden{0%{opacity:1;transform:rotate3d(0,1,0,0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,-90deg)}50.1%{opacity:0;transform:rotate3d(0,1,0,-90deg)}100%{opacity:0;box-shadow:none;transform:rotate3d(0,1,0,-180deg)}}@keyframes left-visible{0%{opacity:0;transform:rotate3d(0,1,0,0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,-90deg)}50.1%{opacity:1;transform:rotate3d(0,1,0,-90deg)}100%{opacity:1;box-shadow:none;transform:rotate3d(0,1,0,-180deg)}}@keyframes loading{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}} -------------------------------------------------------------------------------- /packages/vue-turnjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-turnjs", 3 | "version": "1.3.2", 4 | "description": "A vue wrapper for turn.js and bookblock libraries.", 5 | "publishConfig": { 6 | "access": "public" 7 | }, 8 | "author": { 9 | "name": "Andrii Shafar", 10 | "email": "andreyshafar@gmail.com", 11 | "url": "https://github.com/Reidond" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/Reidond/vue-turnjs.git" 16 | }, 17 | "contributors": [ 18 | "Pidfihurnyi Orest (https://github.com/Orest-2)" 19 | ], 20 | "keywords": [ 21 | "vue", 22 | "turn.js", 23 | "bookblock", 24 | "wrapper" 25 | ], 26 | "license": "LGPL-3.0-only", 27 | "main": "dist/vue-turnjs.ssr.js", 28 | "browser": "dist/vue-turnjs.esm.js", 29 | "module": "dist/vue-turnjs.esm.js", 30 | "unpkg": "dist/vue-turnjs.min.js", 31 | "files": [ 32 | "dist/**/*.{js,map,css}", 33 | "src/**/*.vue", 34 | "!src/serve-dev.*" 35 | ], 36 | "scripts": { 37 | "serve": "cross-env NODE_ENV=development rollup --config rollup.config.js --watch", 38 | "build": "cross-env NODE_ENV=production rollup --config rollup.config.js", 39 | "build:ssr": "cross-env NODE_ENV=production rollup --config rollup.config.js --format cjs", 40 | "build:es": "cross-env NODE_ENV=production rollup --config rollup.config.js --format es", 41 | "build:unpkg": "cross-env NODE_ENV=production rollup --config rollup.config.js --format iife" 42 | }, 43 | "dependencies": { 44 | "jquery": "^3.5.0", 45 | "nanoid": "^3.1.3" 46 | }, 47 | "devDependencies": { 48 | "@babel/core": "^7.7.7", 49 | "@babel/preset-env": "^7.7.7", 50 | "@rollup/plugin-alias": "^2.2.0", 51 | "@rollup/plugin-commonjs": "^11.0.1", 52 | "@rollup/plugin-inject": "^4.0.1", 53 | "@rollup/plugin-node-resolve": "^7.1.3", 54 | "@rollup/plugin-replace": "^2.2.1", 55 | "@vue/cli-plugin-babel": "^4.1.0", 56 | "@vue/cli-service": "^4.1.0", 57 | "cross-env": "^6.0.3", 58 | "minimist": "^1.2.0", 59 | "rollup": "^1.27.13", 60 | "rollup-plugin-babel": "^4.3.3", 61 | "rollup-plugin-bundle-imports": "^1.4.5", 62 | "rollup-plugin-css-only": "^2.0.0", 63 | "rollup-plugin-sass": "^1.2.2", 64 | "rollup-plugin-terser": "^5.1.3", 65 | "rollup-plugin-vue": "5.1.9", 66 | "vue": "^2.6.11", 67 | "vue-template-compiler": "^2.6.11", 68 | "webpack": "^4.43.0" 69 | }, 70 | "peerDependencies": { 71 | "vue": "^2.6.11" 72 | }, 73 | "engines": { 74 | "node": ">=8" 75 | }, 76 | "gitHead": "7ff31fc61bc261a12454486ba9f3f29712b675db" 77 | } 78 | -------------------------------------------------------------------------------- /packages/vue-turnjs/rollup.config.js: -------------------------------------------------------------------------------- 1 | // rollup.config.js 2 | import fs from "fs"; 3 | import path from "path"; 4 | import vue from "rollup-plugin-vue"; 5 | import alias from "@rollup/plugin-alias"; 6 | import resolve from "@rollup/plugin-node-resolve"; 7 | import commonjs from "@rollup/plugin-commonjs"; 8 | import replace from "@rollup/plugin-replace"; 9 | import babel from "rollup-plugin-babel"; 10 | import { terser } from "rollup-plugin-terser"; 11 | import minimist from "minimist"; 12 | import inject from "@rollup/plugin-inject"; 13 | import sass from "rollup-plugin-sass"; 14 | import css from "rollup-plugin-css-only"; 15 | 16 | // Get browserslist config and remove ie from es build targets 17 | const esbrowserslist = fs 18 | .readFileSync("./.browserslistrc") 19 | .toString() 20 | .split("\n") 21 | .filter(entry => entry && entry.substring(0, 2) !== "ie"); 22 | 23 | const argv = minimist(process.argv.slice(2)); 24 | 25 | const projectRoot = path.resolve(__dirname, ".."); 26 | 27 | const baseConfig = { 28 | input: "src/index.js", 29 | plugins: { 30 | preVue: [ 31 | alias({ 32 | resolve: [".js", ".jsx", ".ts", ".tsx", ".vue"], 33 | entries: { 34 | "@": path.resolve(projectRoot, "src") 35 | } 36 | }), 37 | inject({ 38 | $: "jquery", 39 | jquery: "jquery", 40 | jQuery: "jquery", 41 | "window.jQuery": "jquery" 42 | }), 43 | sass(), 44 | css() 45 | ], 46 | replace: { 47 | "process.env.NODE_ENV": JSON.stringify("production"), 48 | "process.env.ES_BUILD": JSON.stringify("false") 49 | }, 50 | vue: { 51 | css: false, 52 | template: { 53 | isProduction: true 54 | } 55 | }, 56 | babel: { 57 | exclude: ["node_modules/**"], 58 | extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"] 59 | } 60 | } 61 | }; 62 | 63 | // ESM/UMD/IIFE shared settings: externals 64 | // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency 65 | const external = [ 66 | // list external dependencies, exactly the way it is written in the import statement. 67 | // eg. 'jquery' 68 | "vue", 69 | "jquery" 70 | ]; 71 | 72 | // UMD/IIFE shared settings: output.globals 73 | // Refer to https://rollupjs.org/guide/en#output-globals for details 74 | const globals = { 75 | // Provide global variable names to replace your external imports 76 | // eg. jquery: '$' 77 | vue: "Vue", 78 | jquery: "$" 79 | }; 80 | 81 | // Customize configs for individual targets 82 | const buildFormats = []; 83 | if (!argv.format || argv.format === "es") { 84 | const esConfig = { 85 | ...baseConfig, 86 | external, 87 | output: { 88 | file: "dist/vue-turnjs.esm.js", 89 | format: "esm", 90 | exports: "named", 91 | sourcemap: true 92 | }, 93 | plugins: [ 94 | replace({ 95 | ...baseConfig.plugins.replace, 96 | "process.env.ES_BUILD": JSON.stringify("true") 97 | }), 98 | ...baseConfig.plugins.preVue, 99 | resolve(), 100 | 101 | vue(baseConfig.plugins.vue), 102 | babel({ 103 | ...baseConfig.plugins.babel, 104 | presets: [ 105 | [ 106 | "@babel/preset-env", 107 | { 108 | targets: esbrowserslist 109 | } 110 | ] 111 | ] 112 | }), 113 | commonjs() 114 | ] 115 | }; 116 | buildFormats.push(esConfig); 117 | } 118 | 119 | if (!argv.format || argv.format === "cjs") { 120 | const umdConfig = { 121 | ...baseConfig, 122 | external, 123 | output: { 124 | compact: true, 125 | file: "dist/vue-turnjs.ssr.js", 126 | format: "cjs", 127 | name: "VueTurnjs", 128 | exports: "named", 129 | globals 130 | }, 131 | plugins: [ 132 | ...baseConfig.plugins.preVue, 133 | 134 | vue({ 135 | ...baseConfig.plugins.vue, 136 | template: { 137 | ...baseConfig.plugins.vue.template, 138 | optimizeSSR: true 139 | } 140 | }), 141 | babel(baseConfig.plugins.babel), 142 | commonjs() 143 | ] 144 | }; 145 | buildFormats.push(umdConfig); 146 | } 147 | 148 | if (!argv.format || argv.format === "iife") { 149 | const unpkgConfig = { 150 | ...baseConfig, 151 | external, 152 | output: { 153 | compact: true, 154 | file: "dist/vue-turnjs.min.js", 155 | format: "iife", 156 | name: "VueTurnjs", 157 | exports: "named", 158 | globals 159 | }, 160 | plugins: [ 161 | ...baseConfig.plugins.preVue, 162 | 163 | vue(baseConfig.plugins.vue), 164 | babel(baseConfig.plugins.babel), 165 | commonjs(), 166 | terser({ 167 | output: { 168 | ecma: 5 169 | } 170 | }) 171 | ] 172 | }; 173 | buildFormats.push(unpkgConfig); 174 | } 175 | 176 | // Export config 177 | export default buildFormats; 178 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/book/_book.scss: -------------------------------------------------------------------------------- 1 | /*Book style*/ 2 | .fw-book { 3 | width: 600px; 4 | height: 350px; 5 | border: 5px solid #1296db; 6 | box-sizing: border-box; 7 | border-radius: 10px; 8 | position: relative; 9 | perspective: 1500px; 10 | } 11 | .fw-book .fw-bookitem { 12 | width: 50%; 13 | height: 100%; 14 | border-radius: 10px; 15 | background: #ffffff; 16 | overflow: hidden; 17 | position: absolute; 18 | top: 0; 19 | right: 0; 20 | } 21 | .fw-book .fw-bookitem > .loading { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | right: 0; 26 | bottom: 0; 27 | width: 30px; 28 | height: 30px; 29 | margin: auto; 30 | animation: loading linear 1s infinite; 31 | } 32 | .fw-book .fw-bookitem .index { 33 | position: absolute; 34 | bottom: 5px; 35 | font-style: normal; 36 | width: 20px; 37 | height: 20px; 38 | line-height: 20px; 39 | text-align: center; 40 | background: rgba(18, 150, 219, 0.4); 41 | border-radius: 50%; 42 | } 43 | .fw-book .fw-bookitem .index.index-left { 44 | left: 5px; 45 | } 46 | .fw-book .fw-bookitem .index.index-right { 47 | right: 5px; 48 | } 49 | .fw-book .fw-bookitem.left { 50 | left: 0; 51 | right: initial; 52 | } 53 | .fw-book .fw-bookitem.right { 54 | left: initial; 55 | right: 0; 56 | } 57 | /*Elements that need to be animated are reversed at first, and the direction changes correctly after the animation*/ 58 | .fw-book .fw-bookitem.rotate180.right-hidden *, 59 | .fw-book .fw-bookitem.rotate180.right-visible *, 60 | .fw-book .fw-bookitem.rotate180.left-hidden *, 61 | .fw-book .fw-bookitem.rotate180.left-visible * { 62 | transform: rotateY(180deg); 63 | } 64 | /*Audio button position*/ 65 | .fw-book .fw-bookitem.rotate180.right-hidden .index.index-left, 66 | .fw-book .fw-bookitem.rotate180.right-visible .index.index-left, 67 | .fw-book .fw-bookitem.rotate180.left-hidden .index.index-left, 68 | .fw-book .fw-bookitem.rotate180.left-visible .index.index-left { 69 | left: initial; 70 | right: 5px; 71 | } 72 | /*Page position*/ 73 | .fw-book .fw-bookitem.rotate180.right-hidden .index.index-right, 74 | .fw-book .fw-bookitem.rotate180.right-visible .index.index-right, 75 | .fw-book .fw-bookitem.rotate180.left-hidden .index.index-right, 76 | .fw-book .fw-bookitem.rotate180.left-visible .index.index-right { 77 | right: initial; 78 | left: 5px; 79 | } 80 | /*The page level in the animation is very high*/ 81 | .fw-book .fw-bookitem.right-hidden { 82 | z-index: 99 !important; 83 | transform-origin: right; 84 | animation: right-hidden linear 1s 1 both; 85 | } 86 | .fw-book .fw-bookitem.right-visible { 87 | z-index: 100 !important; 88 | transform-origin: right; 89 | animation: right-visible linear 1s 1 both; 90 | } 91 | .fw-book .fw-bookitem.left-hidden { 92 | z-index: 99 !important; 93 | transform-origin: left; 94 | animation: left-hidden linear 1s 1 both; 95 | } 96 | .fw-book .fw-bookitem.left-visible { 97 | z-index: 100 !important; 98 | transform-origin: left; 99 | animation: left-visible linear 1s 1 both; 100 | } 101 | /*The previous page with pages moving to the right gradually hides*/ 102 | @keyframes right-hidden { 103 | 0% { 104 | /* Animation starts */ 105 | opacity: 1; 106 | transform: rotate3d(0, 1, 0, 0deg); 107 | } 108 | 50% { 109 | opacity: 1; 110 | box-shadow: 0px 0px 20px #333333; 111 | transform: rotate3d(0, 1, 0, 90deg); 112 | } 113 | 50.1% { 114 | opacity: 0; 115 | transform: rotate3d(0, 1, 0, 90deg); 116 | } 117 | 100% { 118 | /* End of animation */ 119 | opacity: 0; 120 | box-shadow: none; 121 | transform: rotate3d(0, 1, 0, 180deg); 122 | } 123 | } 124 | 125 | /*The next page of the book pages moving to the right gradually appears*/ 126 | @keyframes right-visible { 127 | 0% { 128 | /* Animation starts */ 129 | opacity: 0; 130 | transform: rotate3d(0, 1, 0, 0deg); 131 | } 132 | 50% { 133 | opacity: 0; 134 | box-shadow: 0px 0px 20px #333333; 135 | transform: rotate3d(0, 1, 0, 90deg); 136 | } 137 | 50.1% { 138 | opacity: 1; 139 | transform: rotate3d(0, 1, 0, 90deg); 140 | } 141 | 100% { 142 | /* End of animation */ 143 | opacity: 1; 144 | box-shadow: none; 145 | transform: rotate3d(0, 1, 0, 180deg); 146 | } 147 | } 148 | 149 | /*The previous page with the pages moving to the left gradually hides*/ 150 | @keyframes left-hidden { 151 | 0% { 152 | /* Animation starts */ 153 | opacity: 1; 154 | transform: rotate3d(0, 1, 0, 0deg); 155 | } 156 | 50% { 157 | opacity: 1; 158 | box-shadow: 0px 0px 20px #333333; 159 | transform: rotate3d(0, 1, 0, -90deg); 160 | } 161 | 50.1% { 162 | opacity: 0; 163 | transform: rotate3d(0, 1, 0, -90deg); 164 | } 165 | 100% { 166 | /* End of animation */ 167 | opacity: 0; 168 | box-shadow: none; 169 | transform: rotate3d(0, 1, 0, -180deg); 170 | } 171 | } 172 | 173 | /*The next page of pages moving to the left gradually appears*/ 174 | @keyframes left-visible { 175 | 0% { 176 | /* Animation starts */ 177 | opacity: 0; 178 | transform: rotate3d(0, 1, 0, 0deg); 179 | } 180 | 50% { 181 | opacity: 0; 182 | box-shadow: 0px 0px 20px #333333; 183 | transform: rotate3d(0, 1, 0, -90deg); 184 | } 185 | 50.1% { 186 | opacity: 1; 187 | transform: rotate3d(0, 1, 0, -90deg); 188 | } 189 | 100% { 190 | /* End of animation */ 191 | opacity: 1; 192 | box-shadow: none; 193 | transform: rotate3d(0, 1, 0, -180deg); 194 | } 195 | } 196 | 197 | @keyframes loading { 198 | from { 199 | transform: rotateZ(0deg); 200 | } 201 | to { 202 | transform: rotateZ(360deg); 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/book/book.vue: -------------------------------------------------------------------------------- 1 | 38 | 396 | 397 | 400 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/book/index.js: -------------------------------------------------------------------------------- 1 | import FwBook from "./book.vue"; 2 | import { pluginFactory } from "../../utils/plugin"; 3 | 4 | const BookPlugin = pluginFactory({ components: { FwBook } }); 5 | 6 | export { BookPlugin, FwBook }; 7 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/book/index.scss: -------------------------------------------------------------------------------- 1 | @import "book"; 2 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/book/loading.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock/README.md: -------------------------------------------------------------------------------- 1 | # Bookblock 2 | 3 | ## API 4 | 5 | | Option | Default | Description | 6 | | ------------ | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | orientation | "horizontal" | vertical or horizontal flip | 8 | | direction | "ltr" | left to right or right to left | 9 | | speed | 1000 | speed for the flip transition in ms | 10 | | easing | "ease-in-out" | easing for the flip transition | 11 | | shadow | true | if set to true, both the flipping page and the sides will have an overlay to simulate shadows | 12 | | shadowSides | 0.2 | opacity value for the "shadow" on both sides (when the flipping page is over it). value: 0.1 - 1 | 13 | | shadowFlip | 0.1 | opacity value for the "shadow" on the flipping page (while it is flipping). value: 0.1 - 1 | 14 | | circular | false | if we should show the first item after reaching the end | 15 | | nextEl | "" | if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'. | 16 | | prevEl | "" | if we want to specify a selector that triggers the prev() function. | 17 | | autoplay | false | if true it overwrites the circular option to true! | 18 | | interval | 3000 | time (ms) between page switch, if autoplay is true. | 19 | | onEndFlip | `function(page, isLimit) { return false; }` | callback after the flip transition. page is the current item's index. isLimit is true if the current page is the last one (or the first one). | 20 | | onBeforeFlip | `function(page) { return false; }` | callback before the flip transition page is the current item's index. | 21 | 22 | ## Usage 23 | 24 | ```html 25 | 47 | ``` 48 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock/_bookblock.scss: -------------------------------------------------------------------------------- 1 | .bb-bookblock { 2 | width: 400px; 3 | height: 300px; 4 | margin: 0 auto; 5 | position: relative; 6 | z-index: 100; 7 | -webkit-perspective: 1300px; 8 | perspective: 1300px; 9 | -webkit-backface-visibility: hidden; 10 | backface-visibility: hidden; 11 | } 12 | 13 | .bb-page { 14 | position: absolute; 15 | -webkit-transform-style: preserve-3d; 16 | transform-style: preserve-3d; 17 | -webkit-transition-property: -webkit-transform; 18 | transition-property: transform; 19 | } 20 | 21 | .bb-vertical .bb-page { 22 | width: 50%; 23 | height: 100%; 24 | left: 50%; 25 | -webkit-transform-origin: left center; 26 | transform-origin: left center; 27 | } 28 | 29 | .bb-horizontal .bb-page { 30 | width: 100%; 31 | height: 50%; 32 | top: 50%; 33 | -webkit-transform-origin: center top; 34 | transform-origin: center top; 35 | } 36 | 37 | .bb-page > div, 38 | .bb-outer, 39 | .bb-content, 40 | .bb-inner { 41 | position: absolute; 42 | height: 100%; 43 | width: 100%; 44 | top: 0; 45 | left: 0; 46 | -webkit-backface-visibility: hidden; 47 | backface-visibility: hidden; 48 | } 49 | 50 | .bb-vertical .bb-content { 51 | width: 200%; 52 | } 53 | 54 | .bb-horizontal .bb-content { 55 | height: 200%; 56 | } 57 | 58 | .bb-page > div { 59 | width: 100%; 60 | -webkit-transform-style: preserve-3d; 61 | transform-style: preserve-3d; 62 | } 63 | 64 | .bb-vertical .bb-back { 65 | -webkit-transform: rotateY(-180deg); 66 | transform: rotateY(-180deg); 67 | } 68 | 69 | .bb-horizontal .bb-back { 70 | -webkit-transform: rotateX(-180deg); 71 | transform: rotateX(-180deg); 72 | } 73 | 74 | .bb-outer { 75 | width: 100%; 76 | overflow: hidden; 77 | z-index: 999; 78 | } 79 | 80 | .bb-overlay, 81 | .bb-flipoverlay { 82 | background-color: rgba(0, 0, 0, 0.7); 83 | position: absolute; 84 | top: 0px; 85 | left: 0px; 86 | width: 100%; 87 | height: 100%; 88 | opacity: 0; 89 | } 90 | 91 | .bb-flipoverlay { 92 | background-color: rgba(0, 0, 0, 0.2); 93 | } 94 | 95 | .bb-bookblock.bb-vertical > div.bb-page:first-child, 96 | .bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back { 97 | -webkit-transform: rotateY(180deg); 98 | transform: rotateY(180deg); 99 | } 100 | 101 | .bb-bookblock.bb-horizontal > div.bb-page:first-child, 102 | .bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back { 103 | -webkit-transform: rotateX(180deg); 104 | transform: rotateX(180deg); 105 | } 106 | 107 | /* Content display */ 108 | .bb-content { 109 | background: #fff; 110 | } 111 | 112 | .bb-vertical .bb-front .bb-content { 113 | left: -100%; 114 | } 115 | 116 | .bb-horizontal .bb-front .bb-content { 117 | top: -100%; 118 | } 119 | 120 | /* Flipping classes */ 121 | .bb-vertical .bb-flip-next, 122 | .bb-vertical .bb-flip-initial { 123 | -webkit-transform: rotateY(-180deg); 124 | transform: rotateY(-180deg); 125 | } 126 | 127 | .bb-vertical .bb-flip-prev { 128 | -webkit-transform: rotateY(0deg); 129 | transform: rotateY(0deg); 130 | } 131 | 132 | .bb-horizontal .bb-flip-next, 133 | .bb-horizontal .bb-flip-initial { 134 | -webkit-transform: rotateX(180deg); 135 | transform: rotateX(180deg); 136 | } 137 | 138 | .bb-horizontal .bb-flip-prev { 139 | -webkit-transform: rotateX(0deg); 140 | transform: rotateX(0deg); 141 | } 142 | 143 | .bb-vertical .bb-flip-next-end { 144 | -webkit-transform: rotateY(-15deg); 145 | transform: rotateY(-15deg); 146 | } 147 | 148 | .bb-vertical .bb-flip-prev-end { 149 | -webkit-transform: rotateY(-165deg); 150 | transform: rotateY(-165deg); 151 | } 152 | 153 | .bb-horizontal .bb-flip-next-end { 154 | -webkit-transform: rotateX(15deg); 155 | transform: rotateX(15deg); 156 | } 157 | 158 | .bb-horizontal .bb-flip-prev-end { 159 | -webkit-transform: rotateX(165deg); 160 | transform: rotateX(165deg); 161 | } 162 | 163 | .bb-item { 164 | width: 100%; 165 | height: 100%; 166 | position: absolute; 167 | top: 0; 168 | left: 0; 169 | display: none; 170 | background: #fff; 171 | } 172 | 173 | /* No JS */ 174 | .no-js .bb-bookblock, 175 | .no-js ul.bb-custom-grid li { 176 | width: auto; 177 | height: auto; 178 | } 179 | 180 | .no-js .bb-item { 181 | display: block; 182 | position: relative; 183 | } 184 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock/bookblock.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 134 | 135 | 138 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock/index.js: -------------------------------------------------------------------------------- 1 | import FwBookblock from "./bookblock.vue"; 2 | import { pluginFactory } from "../../utils/plugin"; 3 | 4 | const BookblockPlugin = pluginFactory({ components: { FwBookblock } }); 5 | 6 | export { BookblockPlugin, FwBookblock }; 7 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock/index.scss: -------------------------------------------------------------------------------- 1 | @import "bookblock"; 2 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock2/README.md: -------------------------------------------------------------------------------- 1 | # Bookblock 2 2 | 3 | ## API 4 | 5 | | Option | Default | Description | 6 | | ------------ | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | orientation | "horizontal" | vertical or horizontal flip | 8 | | direction | "ltr" | left to right or right to left | 9 | | speed | 1000 | speed for the flip transition in ms | 10 | | easing | "ease-in-out" | easing for the flip transition | 11 | | shadow | true | if set to true, both the flipping page and the sides will have an overlay to simulate shadows | 12 | | shadowSides | 0.2 | opacity value for the "shadow" on both sides (when the flipping page is over it). value: 0.1 - 1 | 13 | | shadowFlip | 0.1 | opacity value for the "shadow" on the flipping page (while it is flipping). value: 0.1 - 1 | 14 | | circular | false | if we should show the first item after reaching the end | 15 | | nextEl | "" | if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'. | 16 | | prevEl | "" | if we want to specify a selector that triggers the prev() function. | 17 | | autoplay | false | if true it overwrites the circular option to true! | 18 | | interval | 3000 | time (ms) between page switch, if autoplay is true. | 19 | | onEndFlip | `function(page, isLimit) { return false; }` | callback after the flip transition. page is the current item's index. isLimit is true if the current page is the last one (or the first one). | 20 | | onBeforeFlip | `function(page) { return false; }` | callback before the flip transition page is the current item's index. | 21 | 22 | ## Usage 23 | 24 | ```html 25 | 44 | ``` 45 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock2/_bookblock2.scss: -------------------------------------------------------------------------------- 1 | .bb-bookblock { 2 | width: 400px; 3 | height: 300px; 4 | margin: 0 auto; 5 | position: relative; 6 | z-index: 100; 7 | -webkit-perspective: 1300px; 8 | perspective: 1300px; 9 | -webkit-backface-visibility: hidden; 10 | backface-visibility: hidden; 11 | } 12 | 13 | .bb-page { 14 | position: absolute; 15 | -webkit-transform-style: preserve-3d; 16 | transform-style: preserve-3d; 17 | -webkit-transition-property: -webkit-transform; 18 | transition-property: transform; 19 | } 20 | 21 | .bb-vertical .bb-page { 22 | width: 50%; 23 | height: 100%; 24 | left: 50%; 25 | -webkit-transform-origin: left center; 26 | transform-origin: left center; 27 | } 28 | 29 | .bb-horizontal .bb-page { 30 | width: 100%; 31 | height: 50%; 32 | top: 50%; 33 | -webkit-transform-origin: center top; 34 | transform-origin: center top; 35 | } 36 | 37 | .bb-page > div, 38 | .bb-outer, 39 | .bb-content, 40 | .bb-inner { 41 | position: absolute; 42 | height: 100%; 43 | width: 100%; 44 | top: 0; 45 | left: 0; 46 | -webkit-backface-visibility: hidden; 47 | backface-visibility: hidden; 48 | } 49 | 50 | .bb-vertical .bb-content { 51 | width: 200%; 52 | } 53 | 54 | .bb-horizontal .bb-content { 55 | height: 200%; 56 | } 57 | 58 | .bb-page > div { 59 | width: 100%; 60 | -webkit-transform-style: preserve-3d; 61 | transform-style: preserve-3d; 62 | } 63 | 64 | .bb-vertical .bb-back { 65 | -webkit-transform: rotateY(-180deg); 66 | transform: rotateY(-180deg); 67 | } 68 | 69 | .bb-horizontal .bb-back { 70 | -webkit-transform: rotateX(-180deg); 71 | transform: rotateX(-180deg); 72 | } 73 | 74 | .bb-outer { 75 | width: 100%; 76 | overflow: hidden; 77 | z-index: 999; 78 | } 79 | 80 | .bb-overlay, 81 | .bb-flipoverlay { 82 | background-color: rgba(0, 0, 0, 0.7); 83 | position: absolute; 84 | top: 0px; 85 | left: 0px; 86 | width: 100%; 87 | height: 100%; 88 | opacity: 0; 89 | } 90 | 91 | .bb-flipoverlay { 92 | background-color: rgba(0, 0, 0, 0.2); 93 | } 94 | 95 | .bb-bookblock.bb-vertical > div.bb-page:first-child, 96 | .bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back { 97 | -webkit-transform: rotateY(180deg); 98 | transform: rotateY(180deg); 99 | } 100 | 101 | .bb-bookblock.bb-horizontal > div.bb-page:first-child, 102 | .bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back { 103 | -webkit-transform: rotateX(180deg); 104 | transform: rotateX(180deg); 105 | } 106 | 107 | /* Content display */ 108 | .bb-content { 109 | background: #fff; 110 | } 111 | 112 | .bb-vertical .bb-front .bb-content { 113 | left: -100%; 114 | } 115 | 116 | .bb-horizontal .bb-front .bb-content { 117 | top: -100%; 118 | } 119 | 120 | /* Flipping classes */ 121 | .bb-vertical .bb-flip-next, 122 | .bb-vertical .bb-flip-initial { 123 | -webkit-transform: rotateY(-180deg); 124 | transform: rotateY(-180deg); 125 | } 126 | 127 | .bb-vertical .bb-flip-prev { 128 | -webkit-transform: rotateY(0deg); 129 | transform: rotateY(0deg); 130 | } 131 | 132 | .bb-horizontal .bb-flip-next, 133 | .bb-horizontal .bb-flip-initial { 134 | -webkit-transform: rotateX(180deg); 135 | transform: rotateX(180deg); 136 | } 137 | 138 | .bb-horizontal .bb-flip-prev { 139 | -webkit-transform: rotateX(0deg); 140 | transform: rotateX(0deg); 141 | } 142 | 143 | .bb-vertical .bb-flip-next-end { 144 | -webkit-transform: rotateY(-15deg); 145 | transform: rotateY(-15deg); 146 | } 147 | 148 | .bb-vertical .bb-flip-prev-end { 149 | -webkit-transform: rotateY(-165deg); 150 | transform: rotateY(-165deg); 151 | } 152 | 153 | .bb-horizontal .bb-flip-next-end { 154 | -webkit-transform: rotateX(15deg); 155 | transform: rotateX(15deg); 156 | } 157 | 158 | .bb-horizontal .bb-flip-prev-end { 159 | -webkit-transform: rotateX(165deg); 160 | transform: rotateX(165deg); 161 | } 162 | 163 | .bb-item { 164 | width: 100%; 165 | height: 100%; 166 | position: absolute; 167 | top: 0; 168 | left: 0; 169 | display: none; 170 | background: #fff; 171 | } 172 | 173 | /* No JS */ 174 | .no-js .bb-bookblock, 175 | .no-js ul.bb-custom-grid li { 176 | width: auto; 177 | height: auto; 178 | } 179 | 180 | .no-js .bb-item { 181 | display: block; 182 | position: relative; 183 | } 184 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock2/bookblock2.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 156 | 157 | 160 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock2/index.js: -------------------------------------------------------------------------------- 1 | import FwBookblock2 from "./bookblock2.vue"; 2 | import { pluginFactory } from "../../utils/plugin"; 3 | 4 | const Bookblock2Plugin = pluginFactory({ components: { FwBookblock2 } }); 5 | 6 | export { Bookblock2Plugin, FwBookblock2 }; 7 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/bookblock2/index.scss: -------------------------------------------------------------------------------- 1 | @import "bookblock2"; 2 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/index.js: -------------------------------------------------------------------------------- 1 | import { BookblockPlugin } from "./bookblock"; 2 | import { Bookblock2Plugin } from "./bookblock2"; 3 | import { TurnPlugin } from "./turn"; 4 | import { BookPlugin } from "./book"; 5 | import { pluginFactory } from "../utils/plugin"; 6 | 7 | export const componentsPlugin = /*#__PURE__*/ pluginFactory({ 8 | plugins: { BookblockPlugin, Bookblock2Plugin, TurnPlugin, BookPlugin } 9 | }); 10 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/turn/README.md: -------------------------------------------------------------------------------- 1 | # TurnJS 2 | 3 | ## API 4 | 5 | [Official docs](http://turnjs.com/docs/Main_Page) 6 | 7 | ## Usage 8 | 9 | ```html 10 | 40 | 41 | 50 | 51 | 77 | ``` 78 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/turn/index.js: -------------------------------------------------------------------------------- 1 | import FwTurn from "./turn.vue"; 2 | import { pluginFactory } from "../../utils/plugin"; 3 | 4 | const TurnPlugin = pluginFactory({ components: { FwTurn } }); 5 | 6 | export { TurnPlugin, FwTurn }; 7 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/components/turn/turn.vue: -------------------------------------------------------------------------------- 1 | 71 | 72 | 77 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/index.js: -------------------------------------------------------------------------------- 1 | import { componentsPlugin } from "./components"; 2 | const { installFactory } = require("./utils/plugin"); 3 | 4 | const install = installFactory({ 5 | plugins: { 6 | componentsPlugin 7 | } 8 | }); 9 | 10 | const NAME = "FlippingWidgets"; 11 | 12 | const FlippingWidgets = { 13 | install, 14 | NAME 15 | }; 16 | 17 | // Installer exported in case the consumer does not import `default` 18 | // as the plugin in CommonJS build (or does not have interop enabled for CommonJS) 19 | // Both the following will work: 20 | // FlippingWidgets = require('vue-turnjs') 21 | // FlippingWidgets = require('vue-turnjs').default 22 | // Vue.use(FlippingWidgets) 23 | export { install, NAME, FlippingWidgets }; 24 | 25 | // export * from './components/bookblock' 26 | export { BookblockPlugin } from "./components/bookblock"; 27 | export { default as FwBookblock } from "./components/bookblock/bookblock.vue"; 28 | // backwards compat 29 | export { default as Bookblock } from "./components/bookblock/bookblock.vue"; 30 | 31 | // export * from './components/bookblock2' 32 | export { Bookblock2Plugin } from "./components/bookblock2"; 33 | export { default as FwBookblock2 } from "./components/bookblock2/bookblock2.vue"; 34 | // backwards compat 35 | export { default as Bookblock2 } from "./components/bookblock2/bookblock2.vue"; 36 | 37 | // export * from './components/turn' 38 | export { TurnPlugin } from "./components/turn"; 39 | export { default as FwTurn } from "./components/turn/turn.vue"; 40 | // backwards compat 41 | export { default as Turn } from "./components/turn/turn.vue"; 42 | 43 | // export * from './components/book' 44 | export { BookPlugin } from "./components/book"; 45 | export { default as FwBook } from "./components/book/book.vue"; 46 | 47 | export default FlippingWidgets; 48 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/lib/jquerypp.custom.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var event = jQuery.event, 3 | //helper that finds handlers by type and calls back a function, this is basically handle 4 | // events - the events object 5 | // types - an array of event types to look for 6 | // callback(type, handlerFunc, selector) - a callback 7 | // selector - an optional selector to filter with, if there, matches by selector 8 | // if null, matches anything, otherwise, matches with no selector 9 | findHelper = function(events, types, callback, selector) { 10 | var t, type, typeHandlers, all, h, handle, namespaces, namespace, match; 11 | for (t = 0; t < types.length; t++) { 12 | type = types[t]; 13 | all = type.indexOf(".") < 0; 14 | if (!all) { 15 | namespaces = type.split("."); 16 | type = namespaces.shift(); 17 | namespace = new RegExp( 18 | "(^|\\.)" + 19 | namespaces 20 | .slice(0) 21 | .sort() 22 | .join("\\.(?:.*\\.)?") + 23 | "(\\.|$)" 24 | ); 25 | } 26 | typeHandlers = (events[type] || []).slice(0); 27 | 28 | for (h = 0; h < typeHandlers.length; h++) { 29 | handle = typeHandlers[h]; 30 | 31 | match = all || namespace.test(handle.namespace); 32 | 33 | if (match) { 34 | if (selector) { 35 | if (handle.selector === selector) { 36 | callback(type, handle.origHandler || handle.handler); 37 | } 38 | } else if (selector === null) { 39 | callback( 40 | type, 41 | handle.origHandler || handle.handler, 42 | handle.selector 43 | ); 44 | } else if (!handle.selector) { 45 | callback(type, handle.origHandler || handle.handler); 46 | } 47 | } 48 | } 49 | } 50 | }; 51 | 52 | /** 53 | * Finds event handlers of a given type on an element. 54 | * @param {HTMLElement} el 55 | * @param {Array} types an array of event names 56 | * @param {String} [selector] optional selector 57 | * @return {Array} an array of event handlers 58 | */ 59 | event.find = function(el, types, selector) { 60 | var events = ($._data(el) || {}).events, 61 | handlers = [], 62 | t, 63 | liver, 64 | live; 65 | 66 | if (!events) { 67 | return handlers; 68 | } 69 | findHelper( 70 | events, 71 | types, 72 | function(type, handler) { 73 | handlers.push(handler); 74 | }, 75 | selector 76 | ); 77 | return handlers; 78 | }; 79 | /** 80 | * Finds all events. Group by selector. 81 | * @param {HTMLElement} el the element 82 | * @param {Array} types event types 83 | */ 84 | event.findBySelector = function(el, types) { 85 | var events = $._data(el).events, 86 | selectors = {}, 87 | //adds a handler for a given selector and event 88 | add = function(selector, event, handler) { 89 | var select = selectors[selector] || (selectors[selector] = {}), 90 | events = select[event] || (select[event] = []); 91 | events.push(handler); 92 | }; 93 | 94 | if (!events) { 95 | return selectors; 96 | } 97 | //first check live: 98 | /*$.each(events.live || [], function( i, live ) { 99 | if ( $.inArray(live.origType, types) !== -1 ) { 100 | add(live.selector, live.origType, live.origHandler || live.handler); 101 | } 102 | });*/ 103 | //then check straight binds 104 | findHelper( 105 | events, 106 | types, 107 | function(type, handler, selector) { 108 | add(selector || "", type, handler); 109 | }, 110 | null 111 | ); 112 | 113 | return selectors; 114 | }; 115 | event.supportTouch = "ontouchend" in document; 116 | 117 | $.fn.respondsTo = function(events) { 118 | if (!this.length) { 119 | return false; 120 | } else { 121 | //add default ? 122 | return ( 123 | event.find(this[0], $.isArray(events) ? events : [events]).length > 0 124 | ); 125 | } 126 | }; 127 | $.fn.triggerHandled = function(event, data) { 128 | event = typeof event == "string" ? $.Event(event) : event; 129 | this.trigger(event, data); 130 | return event.handled; 131 | }; 132 | /** 133 | * Only attaches one event handler for all types ... 134 | * @param {Array} types llist of types that will delegate here 135 | * @param {Object} startingEvent the first event to start listening to 136 | * @param {Object} onFirst a function to call 137 | */ 138 | event.setupHelper = function(types, startingEvent, onFirst) { 139 | if (!onFirst) { 140 | onFirst = startingEvent; 141 | startingEvent = null; 142 | } 143 | var add = function(handleObj) { 144 | var bySelector, 145 | selector = handleObj.selector || ""; 146 | if (selector) { 147 | bySelector = event.find(this, types, selector); 148 | if (!bySelector.length) { 149 | $(this).delegate(selector, startingEvent, onFirst); 150 | } 151 | } else { 152 | //var bySelector = event.find(this, types, selector); 153 | if (!event.find(this, types, selector).length) { 154 | event.add(this, startingEvent, onFirst, { 155 | selector: selector, 156 | delegate: this 157 | }); 158 | } 159 | } 160 | }, 161 | remove = function(handleObj) { 162 | var bySelector, 163 | selector = handleObj.selector || ""; 164 | if (selector) { 165 | bySelector = event.find(this, types, selector); 166 | if (!bySelector.length) { 167 | $(this).undelegate(selector, startingEvent, onFirst); 168 | } 169 | } else { 170 | if (!event.find(this, types, selector).length) { 171 | event.remove(this, startingEvent, onFirst, { 172 | selector: selector, 173 | delegate: this 174 | }); 175 | } 176 | } 177 | }; 178 | $.each(types, function() { 179 | event.special[this] = { 180 | add: add, 181 | remove: remove, 182 | setup: function() {}, 183 | teardown: function() {} 184 | }; 185 | }); 186 | }; 187 | })(jQuery); 188 | (function($) { 189 | var isPhantom = /Phantom/.test(navigator.userAgent), 190 | supportTouch = !isPhantom && "ontouchend" in document, 191 | scrollEvent = "touchmove scroll", 192 | // Use touch events or map it to mouse events 193 | touchStartEvent = supportTouch ? "touchstart" : "mousedown", 194 | touchStopEvent = supportTouch ? "touchend" : "mouseup", 195 | touchMoveEvent = supportTouch ? "touchmove" : "mousemove", 196 | data = function(event) { 197 | var d = event.originalEvent.touches 198 | ? event.originalEvent.touches[0] 199 | : event; 200 | return { 201 | time: new Date().getTime(), 202 | coords: [d.pageX, d.pageY], 203 | origin: $(event.target) 204 | }; 205 | }; 206 | 207 | /** 208 | * @add jQuery.event.swipe 209 | */ 210 | var swipe = ($.event.swipe = { 211 | /** 212 | * @attribute delay 213 | * Delay is the upper limit of time the swipe motion can take in milliseconds. This defaults to 500. 214 | * 215 | * A user must perform the swipe motion in this much time. 216 | */ 217 | delay: 500, 218 | /** 219 | * @attribute max 220 | * The maximum distance the pointer must travel in pixels. The default is 75 pixels. 221 | */ 222 | max: 75, 223 | /** 224 | * @attribute min 225 | * The minimum distance the pointer must travel in pixels. The default is 30 pixels. 226 | */ 227 | min: 30 228 | }); 229 | 230 | $.event.setupHelper( 231 | [ 232 | /** 233 | * @hide 234 | * @attribute swipe 235 | */ 236 | "swipe", 237 | /** 238 | * @hide 239 | * @attribute swipeleft 240 | */ 241 | "swipeleft", 242 | /** 243 | * @hide 244 | * @attribute swiperight 245 | */ 246 | "swiperight", 247 | /** 248 | * @hide 249 | * @attribute swipeup 250 | */ 251 | "swipeup", 252 | /** 253 | * @hide 254 | * @attribute swipedown 255 | */ 256 | "swipedown" 257 | ], 258 | touchStartEvent, 259 | function(ev) { 260 | var // update with data when the event was started 261 | start = data(ev), 262 | stop, 263 | delegate = ev.delegateTarget || ev.currentTarget, 264 | selector = ev.handleObj.selector, 265 | entered = this; 266 | 267 | function moveHandler(event) { 268 | if (!start) { 269 | return; 270 | } 271 | // update stop with the data from the current event 272 | stop = data(event); 273 | 274 | // prevent scrolling 275 | if (Math.abs(start.coords[0] - stop.coords[0]) > 10) { 276 | event.preventDefault(); 277 | } 278 | } 279 | 280 | // Attach to the touch move events 281 | $(document.documentElement) 282 | .bind(touchMoveEvent, moveHandler) 283 | .one(touchStopEvent, function(event) { 284 | $(this).unbind(touchMoveEvent, moveHandler); 285 | // if start and stop contain data figure out if we have a swipe event 286 | if (start && stop) { 287 | // calculate the distance between start and stop data 288 | var deltaX = Math.abs(start.coords[0] - stop.coords[0]), 289 | deltaY = Math.abs(start.coords[1] - stop.coords[1]), 290 | distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); 291 | 292 | // check if the delay and distance are matched 293 | if (stop.time - start.time < swipe.delay && distance >= swipe.min) { 294 | var events = ["swipe"]; 295 | // check if we moved horizontally 296 | if (deltaX >= swipe.min && deltaY < swipe.min) { 297 | // based on the x coordinate check if we moved left or right 298 | events.push( 299 | start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" 300 | ); 301 | } 302 | // check if we moved vertically 303 | else if (deltaY >= swipe.min && deltaX < swipe.min) { 304 | // based on the y coordinate check if we moved up or down 305 | events.push( 306 | start.coords[1] < stop.coords[1] ? "swipedown" : "swipeup" 307 | ); 308 | } 309 | 310 | // trigger swipe events on this guy 311 | $.each($.event.find(delegate, events, selector), function() { 312 | this.call(entered, ev, { start: start, end: stop }); 313 | }); 314 | } 315 | } 316 | // reset start and stop 317 | start = stop = undefined; 318 | }); 319 | } 320 | ); 321 | })(jQuery); 322 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/array.js: -------------------------------------------------------------------------------- 1 | // --- Static --- 2 | 3 | export const from = (...args) => Array.from(...args); 4 | export const isArray = val => Array.isArray(val); 5 | 6 | // --- Instance --- 7 | 8 | export const arrayIncludes = (array, value) => array.indexOf(value) !== -1; 9 | export const concat = (...args) => Array.prototype.concat.apply([], args); 10 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/clone-deep.js: -------------------------------------------------------------------------------- 1 | import { isArray, isPlainObject } from "./inspect"; 2 | import { keys } from "./object"; 3 | 4 | export const cloneDeep = (obj, defaultValue = obj) => { 5 | if (isArray(obj)) { 6 | return obj.reduce((result, val) => [...result, cloneDeep(val, val)], []); 7 | } 8 | if (isPlainObject(obj)) { 9 | return keys(obj).reduce( 10 | (result, key) => ({ ...result, [key]: cloneDeep(obj[key], obj[key]) }), 11 | {} 12 | ); 13 | } 14 | return defaultValue; 15 | }; 16 | 17 | export default cloneDeep; 18 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/config-defaults.js: -------------------------------------------------------------------------------- 1 | import { deepFreeze } from "./object"; 2 | 3 | // --- General BootstrapVue configuration --- 4 | 5 | // NOTES 6 | // 7 | // The global config SHALL NOT be used to set defaults for Boolean props, as the props 8 | // would loose their semantic meaning, and force people writing 3rd party components to 9 | // explicitly set a true or false value using the v-bind syntax on boolean props 10 | // 11 | // Supported config values (depending on the prop's supported type(s)): 12 | // `String`, `Array`, `Object`, `null` or `undefined` 13 | 14 | // BREAKPOINT DEFINITIONS 15 | // 16 | // Some components (`` and ``) generate props based on breakpoints, 17 | // and this occurs when the component is first loaded (evaluated), which may happen 18 | // before the config is created/modified 19 | // 20 | // To get around this we make these components' props async (lazy evaluation) 21 | // The component definition is only called/executed when the first access to the 22 | // component is used (and cached on subsequent uses) 23 | 24 | // PROP DEFAULTS 25 | // 26 | // For default values on props, we use the default value factory function approach so 27 | // that the default values are pulled in at each component instantiation 28 | // 29 | // props: { 30 | // variant: { 31 | // type: String, 32 | // default: () => getConfigComponent('BAlert', 'variant') 33 | // } 34 | // } 35 | // 36 | // We also provide a cached getter for breakpoints, which are "frozen" on first access 37 | 38 | // prettier-ignore 39 | export default deepFreeze({ 40 | FwBookblock: {}, 41 | FwBookblock2: {}, 42 | FwTurn: {} 43 | }) 44 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/config-set.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import cloneDeep from "./clone-deep"; 3 | import { getRaw } from "./get"; 4 | import { isArray, isPlainObject, isString, isUndefined } from "./inspect"; 5 | import { getOwnPropertyNames, hasOwnProperty } from "./object"; 6 | import { warn } from "./warn"; 7 | import DEFAULTS from "./config-defaults"; 8 | 9 | // --- Constants --- 10 | 11 | const NAME = "BvConfig"; 12 | const PROP_NAME = "$bvConfig"; 13 | 14 | // Config manager class 15 | class BvConfig { 16 | constructor() { 17 | // TODO: pre-populate with default config values (needs updated tests) 18 | // this.$_config = cloneDeep(DEFAULTS) 19 | this.$_config = {}; 20 | this.$_cachedBreakpoints = null; 21 | } 22 | 23 | /* istanbul ignore next */ 24 | static get Defaults() /* istanbul ignore next */ { 25 | return DEFAULTS; 26 | } 27 | 28 | /* istanbul ignore next */ 29 | get defaults() /* istanbul ignore next */ { 30 | return DEFAULTS; 31 | } 32 | 33 | // Returns the defaults 34 | /* istanbul ignore next */ 35 | getDefaults() /* istanbul ignore next */ { 36 | return this.defaults; 37 | } 38 | 39 | // Method to merge in user config parameters 40 | setConfig(config = {}) { 41 | if (!isPlainObject(config)) { 42 | /* istanbul ignore next */ 43 | return; 44 | } 45 | const configKeys = getOwnPropertyNames(config); 46 | configKeys.forEach(cmpName => { 47 | /* istanbul ignore next */ 48 | if (!hasOwnProperty(DEFAULTS, cmpName)) { 49 | warn(`Unknown config property "${cmpName}"`, NAME); 50 | return; 51 | } 52 | const cmpConfig = config[cmpName]; 53 | if (cmpName === "breakpoints") { 54 | // Special case for breakpoints 55 | const breakpoints = config.breakpoints; 56 | /* istanbul ignore if */ 57 | if ( 58 | !isArray(breakpoints) || 59 | breakpoints.length < 2 || 60 | breakpoints.some(b => !isString(b) || b.length === 0) 61 | ) { 62 | warn( 63 | '"breakpoints" must be an array of at least 2 breakpoint names', 64 | NAME 65 | ); 66 | } else { 67 | this.$_config.breakpoints = cloneDeep(breakpoints); 68 | } 69 | } else if (isPlainObject(cmpConfig)) { 70 | // Component prop defaults 71 | const props = getOwnPropertyNames(cmpConfig); 72 | props.forEach(prop => { 73 | /* istanbul ignore if */ 74 | if (!hasOwnProperty(DEFAULTS[cmpName], prop)) { 75 | warn(`Unknown config property "${cmpName}.${prop}"`, NAME); 76 | } else { 77 | // TODO: If we pre-populate the config with defaults, we can skip this line 78 | this.$_config[cmpName] = this.$_config[cmpName] || {}; 79 | if (!isUndefined(cmpConfig[prop])) { 80 | this.$_config[cmpName][prop] = cloneDeep(cmpConfig[prop]); 81 | } 82 | } 83 | }); 84 | } 85 | }); 86 | } 87 | 88 | // Clear the config. For testing purposes only 89 | resetConfig() { 90 | this.$_config = {}; 91 | } 92 | 93 | // Returns a deep copy of the user config 94 | getConfig() { 95 | return cloneDeep(this.$_config); 96 | } 97 | 98 | getConfigValue(key) { 99 | // First we try the user config, and if key not found we fall back to default value 100 | // NOTE: If we deep clone DEFAULTS into config, then we can skip the fallback for get 101 | return cloneDeep(getRaw(this.$_config, key, getRaw(DEFAULTS, key))); 102 | } 103 | } 104 | 105 | // Method for applying a global config 106 | export const setConfig = (config = {}, Vue = Vue) => { 107 | // Ensure we have a $bvConfig Object on the Vue prototype. 108 | // We set on Vue and Vue just in case consumer has not set an alias of `vue`. 109 | Vue.prototype[PROP_NAME] = Vue.prototype[PROP_NAME] = 110 | Vue.prototype[PROP_NAME] || Vue.prototype[PROP_NAME] || new BvConfig(); 111 | // Apply the config values 112 | Vue.prototype[PROP_NAME].setConfig(config); 113 | }; 114 | 115 | // Method for resetting the user config. Exported for testing purposes only. 116 | export const resetConfig = () => { 117 | if (Vue.prototype[PROP_NAME] && Vue.prototype[PROP_NAME].resetConfig) { 118 | Vue.prototype[PROP_NAME].resetConfig(); 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/env.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Utilities to get information about the current environment 3 | */ 4 | 5 | // --- Constants --- 6 | 7 | export const hasWindowSupport = typeof window !== "undefined"; 8 | export const hasDocumentSupport = typeof document !== "undefined"; 9 | export const hasNavigatorSupport = typeof navigator !== "undefined"; 10 | export const hasPromiseSupport = typeof Promise !== "undefined"; 11 | /* istanbul ignore next: JSDOM always returns false */ 12 | export const hasMutationObserverSupport = 13 | typeof MutationObserver !== "undefined" || 14 | typeof WebKitMutationObserver !== "undefined" || 15 | typeof MozMutationObserver !== "undefined"; 16 | 17 | export const isBrowser = 18 | hasWindowSupport && hasDocumentSupport && hasNavigatorSupport; 19 | 20 | // Browser type sniffing 21 | export const userAgent = isBrowser 22 | ? window.navigator.userAgent.toLowerCase() 23 | : ""; 24 | 25 | export const isJSDOM = userAgent.indexOf("jsdom") > 0; 26 | export const isIE = /msie|trident/.test(userAgent); 27 | 28 | // Determine if the browser supports the option passive for events 29 | export const hasPassiveEventSupport = (() => { 30 | let passiveEventSupported = false; 31 | if (isBrowser) { 32 | try { 33 | const options = { 34 | get passive() { 35 | // This function will be called when the browser 36 | // attempts to access the passive property. 37 | /* istanbul ignore next: will never be called in JSDOM */ 38 | passiveEventSupported = true; 39 | } 40 | }; 41 | window.addEventListener("test", options, options); 42 | window.removeEventListener("test", options, options); 43 | } catch (err) { 44 | /* istanbul ignore next: will never be called in JSDOM */ 45 | passiveEventSupported = false; 46 | } 47 | } 48 | return passiveEventSupported; 49 | })(); 50 | 51 | export const hasTouchSupport = 52 | isBrowser && 53 | ("ontouchstart" in document.documentElement || navigator.maxTouchPoints > 0); 54 | 55 | export const hasPointerEventSupport = 56 | isBrowser && Boolean(window.PointerEvent || window.MSPointerEvent); 57 | 58 | /* istanbul ignore next: JSDOM only checks for 'IntersectionObserver' */ 59 | export const hasIntersectionObserverSupport = 60 | isBrowser && 61 | "IntersectionObserver" in window && 62 | "IntersectionObserverEntry" in window && 63 | // Edge 15 and UC Browser lack support for `isIntersecting` 64 | // but we an use intersectionRatio > 0 instead 65 | // 'isIntersecting' in window.IntersectionObserverEntry.prototype && 66 | "intersectionRatio" in window.IntersectionObserverEntry.prototype; 67 | 68 | // --- Getters --- 69 | 70 | export const getEnv = (key, fallback = null) => { 71 | const env = 72 | typeof process !== "undefined" && process ? process.env || {} : {}; 73 | if (!key) { 74 | /* istanbul ignore next */ 75 | return env; 76 | } 77 | return env[key] || fallback; 78 | }; 79 | 80 | export const getNoWarn = () => getEnv("BOOTSTRAP_VUE_NO_WARN"); 81 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/get.js: -------------------------------------------------------------------------------- 1 | import identity from "./identity"; 2 | import { isArray, isNull, isObject, isUndefinedOrNull } from "./inspect"; 3 | 4 | const RX_ARRAY_NOTATION = /\[(\d+)]/g; 5 | 6 | /** 7 | * Get property defined by dot/array notation in string, returns undefined if not found 8 | * 9 | * @link https://gist.github.com/jeneg/9767afdcca45601ea44930ea03e0febf#gistcomment-1935901 10 | * 11 | * @param {Object} obj 12 | * @param {string|Array} path 13 | * @return {*} 14 | */ 15 | export const getRaw = (obj, path, defaultValue = undefined) => { 16 | // Handle array of path values 17 | path = isArray(path) ? path.join(".") : path; 18 | 19 | // If no path or no object passed 20 | if (!path || !isObject(obj)) { 21 | return defaultValue; 22 | } 23 | 24 | // Handle edge case where user has dot(s) in top-level item field key 25 | // See https://github.com/bootstrap-vue/bootstrap-vue/issues/2762 26 | // Switched to `in` operator vs `hasOwnProperty` to handle obj.prototype getters 27 | // https://github.com/bootstrap-vue/bootstrap-vue/issues/3463 28 | if (path in obj) { 29 | return obj[path]; 30 | } 31 | 32 | // Handle string array notation (numeric indices only) 33 | path = String(path).replace(RX_ARRAY_NOTATION, ".$1"); 34 | 35 | const steps = path.split(".").filter(identity); 36 | 37 | // Handle case where someone passes a string of only dots 38 | if (steps.length === 0) { 39 | return defaultValue; 40 | } 41 | 42 | // Traverse path in object to find result 43 | // Switched to `in` operator vs `hasOwnProperty` to handle obj.prototype getters 44 | // https://github.com/bootstrap-vue/bootstrap-vue/issues/3463 45 | return steps.every( 46 | step => 47 | isObject(obj) && step in obj && !isUndefinedOrNull((obj = obj[step])) 48 | ) 49 | ? obj 50 | : isNull(obj) 51 | ? null 52 | : defaultValue; 53 | }; 54 | 55 | /** 56 | * Get property defined by dot/array notation in string. 57 | * 58 | * @link https://gist.github.com/jeneg/9767afdcca45601ea44930ea03e0febf#gistcomment-1935901 59 | * 60 | * @param {Object} obj 61 | * @param {string|Array} path 62 | * @param {*} defaultValue (optional) 63 | * @return {*} 64 | */ 65 | export const get = (obj, path, defaultValue = null) => { 66 | const val = getRaw(obj, path); 67 | return isUndefinedOrNull(val) ? defaultValue : val; 68 | }; 69 | 70 | export default get; 71 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/identity.js: -------------------------------------------------------------------------------- 1 | const identity = x => x; 2 | 3 | export default identity; 4 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/inspect.js: -------------------------------------------------------------------------------- 1 | import { isArray } from "./array"; 2 | import { isObject, isPlainObject } from "./object"; 3 | import { File } from "./safe-types"; 4 | 5 | // --- Convenience inspection utilities --- 6 | 7 | export const toType = val => typeof val; 8 | 9 | export const toRawType = val => 10 | Object.prototype.toString.call(val).slice(8, -1); 11 | 12 | export const toRawTypeLC = val => toRawType(val).toLowerCase(); 13 | 14 | export const isUndefined = val => val === undefined; 15 | 16 | export const isNull = val => val === null; 17 | 18 | export const isEmptyString = val => val === ""; 19 | 20 | export const isUndefinedOrNull = val => isUndefined(val) || isNull(val); 21 | 22 | export const isUndefinedOrNullOrEmpty = val => 23 | isUndefinedOrNull(val) || isEmptyString(val); 24 | 25 | export const isFunction = val => toType(val) === "function"; 26 | 27 | export const isBoolean = val => toType(val) === "boolean"; 28 | 29 | export const isString = val => toType(val) === "string"; 30 | 31 | export const isNumber = val => toType(val) === "number"; 32 | 33 | export const isPrimitive = val => 34 | isBoolean(val) || isString(val) || isNumber(val); 35 | 36 | export const isDate = val => val instanceof Date; 37 | 38 | export const isEvent = val => val instanceof Event; 39 | 40 | export const isFile = val => val instanceof File; 41 | 42 | export const isRegExp = val => toRawType(val) === "RegExp"; 43 | 44 | export const isPromise = val => 45 | !isUndefinedOrNull(val) && isFunction(val.then) && isFunction(val.catch); 46 | 47 | // Extra convenience named re-exports 48 | export { isArray, isObject, isPlainObject }; 49 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/object.js: -------------------------------------------------------------------------------- 1 | import { isArray } from "./array"; 2 | 3 | // --- Static --- 4 | 5 | export const assign = (...args) => Object.assign(...args); 6 | export const create = (proto, optionalProps) => 7 | Object.create(proto, optionalProps); 8 | export const defineProperties = (obj, props) => 9 | Object.defineProperties(obj, props); 10 | export const defineProperty = (obj, prop, descriptor) => 11 | Object.defineProperty(obj, prop, descriptor); 12 | export const freeze = obj => Object.freeze(obj); 13 | export const getOwnPropertyNames = obj => Object.getOwnPropertyNames(obj); 14 | export const getOwnPropertyDescriptor = (obj, prop) => 15 | Object.getOwnPropertyDescriptor(obj, prop); 16 | export const getOwnPropertySymbols = obj => Object.getOwnPropertySymbols(obj); 17 | export const getPrototypeOf = obj => Object.getPrototypeOf(obj); 18 | export const is = (value1, value2) => Object.is(value1, value2); 19 | export const isFrozen = obj => Object.isFrozen(obj); 20 | export const keys = obj => Object.keys(obj); 21 | 22 | // --- "Instance" --- 23 | 24 | export const hasOwnProperty = (obj, prop) => 25 | Object.prototype.hasOwnProperty.call(obj, prop); 26 | export const toString = obj => Object.prototype.toString.call(obj); 27 | 28 | // --- Utilities --- 29 | 30 | /** 31 | * Quick object check - this is primarily used to tell 32 | * Objects from primitive values when we know the value 33 | * is a JSON-compliant type. 34 | * Note object could be a complex type like array, date, etc. 35 | */ 36 | export const isObject = obj => obj !== null && typeof obj === "object"; 37 | 38 | /** 39 | * Strict object type check. Only returns true 40 | * for plain JavaScript objects. 41 | */ 42 | export const isPlainObject = obj => 43 | Object.prototype.toString.call(obj) === "[object Object]"; 44 | 45 | /** 46 | * Shallow copy an object. If the passed in object 47 | * is null or undefined, returns an empty object 48 | */ 49 | export const clone = obj => ({ ...obj }); 50 | 51 | /** 52 | * Return a shallow copy of object with the specified properties only 53 | * @link https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc 54 | */ 55 | export const pick = (obj, props) => 56 | keys(obj) 57 | .filter(key => props.indexOf(key) !== -1) 58 | .reduce((result, key) => ({ ...result, [key]: obj[key] }), {}); 59 | 60 | /** 61 | * Return a shallow copy of object with the specified properties omitted 62 | * @link https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc 63 | */ 64 | export const omit = (obj, props) => 65 | keys(obj) 66 | .filter(key => props.indexOf(key) === -1) 67 | .reduce((result, key) => ({ ...result, [key]: obj[key] }), {}); 68 | 69 | /** 70 | * Convenience method to create a read-only descriptor 71 | */ 72 | export const readonlyDescriptor = () => ({ 73 | enumerable: true, 74 | configurable: false, 75 | writable: false 76 | }); 77 | 78 | /** 79 | * Deep-freezes and object, making it immutable / read-only. 80 | * Returns the same object passed-in, but frozen. 81 | * Freezes inner object/array/values first. 82 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze 83 | * Note: this method will not work for property values using Symbol() as a key 84 | */ 85 | export const deepFreeze = obj => { 86 | // Retrieve the property names defined on object/array 87 | // Note: `keys` will ignore properties that are keyed by a `Symbol()` 88 | const props = keys(obj); 89 | // Iterate over each prop and recursively freeze it 90 | props.forEach(prop => { 91 | const value = obj[prop]; 92 | // If value is a plain object or array, we deepFreeze it 93 | obj[prop] = 94 | value && (isPlainObject(value) || isArray(value)) 95 | ? deepFreeze(value) 96 | : value; 97 | }); 98 | return freeze(obj); 99 | }; 100 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/plugin.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import { setConfig } from "./config-set"; 3 | import { hasWindowSupport, isJSDOM } from "./env"; 4 | import { warn } from "./warn"; 5 | 6 | /** 7 | * Checks if there are multiple instances of Vue, and warns (once) about possible issues. 8 | * @param {object} Vue 9 | */ 10 | export const checkMultipleVue = (() => { 11 | let checkMultipleVueWarned = false; 12 | 13 | const MULTIPLE_VUE_WARNING = [ 14 | "Multiple instances of Vue detected!", 15 | "You may need to set up an alias for Vue in your bundler config.", 16 | "See: https://bootstrap-vue.org/docs#using-module-bundlers" 17 | ].join("\n"); 18 | 19 | return Vue => { 20 | /* istanbul ignore next */ 21 | if (!checkMultipleVueWarned && Vue !== Vue && !isJSDOM) { 22 | warn(MULTIPLE_VUE_WARNING); 23 | } 24 | checkMultipleVueWarned = true; 25 | }; 26 | })(); 27 | 28 | /** 29 | * Plugin install factory function. 30 | * @param {object} { components, directives } 31 | * @returns {function} plugin install function 32 | */ 33 | export const installFactory = ({ components, directives, plugins } = {}) => { 34 | const install = (Vue, config = {}) => { 35 | if (install.installed) { 36 | /* istanbul ignore next */ 37 | return; 38 | } 39 | install.installed = true; 40 | checkMultipleVue(Vue); 41 | setConfig(config, Vue); 42 | registerComponents(Vue, components); 43 | registerDirectives(Vue, directives); 44 | registerPlugins(Vue, plugins); 45 | }; 46 | 47 | install.installed = false; 48 | 49 | return install; 50 | }; 51 | 52 | /** 53 | * Plugin install factory function (no plugin config option). 54 | * @param {object} { components, directives } 55 | * @returns {function} plugin install function 56 | */ 57 | export const installFactoryNoConfig = ({ 58 | components, 59 | directives, 60 | plugins 61 | } = {}) => { 62 | const install = Vue => { 63 | if (install.installed) { 64 | /* istanbul ignore next */ 65 | return; 66 | } 67 | install.installed = true; 68 | checkMultipleVue(Vue); 69 | registerComponents(Vue, components); 70 | registerDirectives(Vue, directives); 71 | registerPlugins(Vue, plugins); 72 | }; 73 | 74 | install.installed = false; 75 | 76 | return install; 77 | }; 78 | 79 | /** 80 | * Plugin object factory function. 81 | * @param {object} { components, directives, plugins } 82 | * @returns {object} plugin install object 83 | */ 84 | export const pluginFactory = (options = {}, extend = {}) => ({ 85 | ...extend, 86 | install: installFactory(options) 87 | }); 88 | 89 | /** 90 | * Plugin object factory function (no config option). 91 | * @param {object} { components, directives, plugins } 92 | * @returns {object} plugin install object 93 | */ 94 | export const pluginFactoryNoConfig = (options = {}, extend = {}) => ({ 95 | ...extend, 96 | install: installFactoryNoConfig(options) 97 | }); 98 | 99 | /** 100 | * Load a group of plugins. 101 | * @param {object} Vue 102 | * @param {object} Plugin definitions 103 | */ 104 | export const registerPlugins = (Vue, plugins = {}) => { 105 | for (const plugin in plugins) { 106 | if (plugin && plugins[plugin]) { 107 | Vue.use(plugins[plugin]); 108 | } 109 | } 110 | }; 111 | 112 | /** 113 | * Load a component. 114 | * @param {object} Vue 115 | * @param {string} Component name 116 | * @param {object} Component definition 117 | */ 118 | export const registerComponent = (Vue, name, def) => { 119 | if (Vue && name && def) { 120 | Vue.component(name, def); 121 | } 122 | }; 123 | 124 | /** 125 | * Load a group of components. 126 | * @param {object} Vue 127 | * @param {object} Object of component definitions 128 | */ 129 | export const registerComponents = (Vue, components = {}) => { 130 | for (const component in components) { 131 | registerComponent(Vue, component, components[component]); 132 | } 133 | }; 134 | 135 | /** 136 | * Load a directive. 137 | * @param {object} Vue 138 | * @param {string} Directive name 139 | * @param {object} Directive definition 140 | */ 141 | export const registerDirective = (Vue, name, def) => { 142 | if (Vue && name && def) { 143 | // Ensure that any leading V is removed from the 144 | // name, as Vue adds it automatically 145 | Vue.directive(name.replace(/^VB/, "B"), def); 146 | } 147 | }; 148 | 149 | /** 150 | * Load a group of directives. 151 | * @param {object} Vue 152 | * @param {object} Object of directive definitions 153 | */ 154 | export const registerDirectives = (Vue, directives = {}) => { 155 | for (const directive in directives) { 156 | registerDirective(Vue, directive, directives[directive]); 157 | } 158 | }; 159 | 160 | /** 161 | * Install plugin if window.Vue available 162 | * @param {object} Plugin definition 163 | */ 164 | export const vueUse = VuePlugin => { 165 | /* istanbul ignore next */ 166 | if (hasWindowSupport && window.Vue) { 167 | window.Vue.use(VuePlugin); 168 | } 169 | /* istanbul ignore next */ 170 | if (hasWindowSupport && VuePlugin.NAME) { 171 | window[VuePlugin.NAME] = VuePlugin; 172 | } 173 | }; 174 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/safe-types.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SSR safe types 3 | */ 4 | 5 | import { hasWindowSupport } from "./env"; 6 | 7 | const w = hasWindowSupport ? window : {}; 8 | 9 | export const Element = hasWindowSupport 10 | ? w.Element 11 | : class Element extends Object {}; 12 | 13 | export const HTMLElement = hasWindowSupport 14 | ? w.HTMLElement 15 | : class HTMLElement extends Element {}; 16 | 17 | export const SVGElement = hasWindowSupport 18 | ? w.SVGElement 19 | : class SVGElement extends Element {}; 20 | 21 | export const File = hasWindowSupport ? w.File : class File extends Object {}; 22 | -------------------------------------------------------------------------------- /packages/vue-turnjs/src/utils/warn.js: -------------------------------------------------------------------------------- 1 | import { 2 | isBrowser, 3 | hasPromiseSupport, 4 | hasMutationObserverSupport, 5 | getNoWarn 6 | } from "./env"; 7 | 8 | /** 9 | * Log a warning message to the console with BootstrapVue formatting 10 | * @param {string} message 11 | */ 12 | export const warn = (message, source = null) => /* istanbul ignore next */ { 13 | if (!getNoWarn()) { 14 | console.warn( 15 | `[BootstrapVue warn]: ${source ? `${source} - ` : ""}${message}` 16 | ); 17 | } 18 | }; 19 | 20 | /** 21 | * Warn when no Promise support is given 22 | * @param {string} source 23 | * @returns {boolean} warned 24 | */ 25 | export const warnNotClient = source => { 26 | /* istanbul ignore else */ 27 | if (isBrowser) { 28 | return false; 29 | } else { 30 | warn(`${source}: Can not be called during SSR.`); 31 | return true; 32 | } 33 | }; 34 | 35 | /** 36 | * Warn when no Promise support is given 37 | * @param {string} source 38 | * @returns {boolean} warned 39 | */ 40 | export const warnNoPromiseSupport = source => { 41 | /* istanbul ignore else */ 42 | if (hasPromiseSupport) { 43 | return false; 44 | } else { 45 | warn(`${source}: Requires Promise support.`); 46 | return true; 47 | } 48 | }; 49 | 50 | /** 51 | * Warn when no MutationObserver support is given 52 | * @param {string} source 53 | * @returns {boolean} warned 54 | */ 55 | export const warnNoMutationObserverSupport = source => { 56 | /* istanbul ignore else */ 57 | if (hasMutationObserverSupport) { 58 | return false; 59 | } else { 60 | warn(`${source}: Requires MutationObserver support.`); 61 | return true; 62 | } 63 | }; 64 | -------------------------------------------------------------------------------- /static/bookblock/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock/1.jpg -------------------------------------------------------------------------------- /static/bookblock/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock/2.jpg -------------------------------------------------------------------------------- /static/bookblock/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock/3.jpg -------------------------------------------------------------------------------- /static/bookblock/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock/4.jpg -------------------------------------------------------------------------------- /static/bookblock/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock/5.jpg -------------------------------------------------------------------------------- /static/bookblock2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/1.jpg -------------------------------------------------------------------------------- /static/bookblock2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/2.jpg -------------------------------------------------------------------------------- /static/bookblock2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/3.jpg -------------------------------------------------------------------------------- /static/bookblock2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/4.jpg -------------------------------------------------------------------------------- /static/bookblock2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/5.jpg -------------------------------------------------------------------------------- /static/bookblock2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/6.jpg -------------------------------------------------------------------------------- /static/bookblock2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/7.jpg -------------------------------------------------------------------------------- /static/bookblock2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/bookblock2/8.jpg -------------------------------------------------------------------------------- /static/turn/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/turn/01.jpg -------------------------------------------------------------------------------- /static/turn/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/turn/02.jpg -------------------------------------------------------------------------------- /static/turn/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/turn/03.jpg -------------------------------------------------------------------------------- /static/turn/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/turn/04.jpg -------------------------------------------------------------------------------- /static/turn/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/turn/05.jpg -------------------------------------------------------------------------------- /static/turn/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reidond/vue-turnjs/88cf33e587603b88fb4ef70ab320e5c57eb83cfc/static/turn/06.jpg --------------------------------------------------------------------------------