├── .eslintignore ├── .eslintrc.json ├── .github └── workflows │ ├── codeql.yml │ └── nodejs.yml ├── .gitignore ├── .on-save.json ├── .prettierignore ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── __test__ ├── index.html ├── protype.js └── test.js ├── dist ├── protype.es7.js ├── protype.es7.min.js ├── protype.js └── protype.min.js ├── docs ├── .gitignore ├── CNAME ├── README.md ├── _config.yml ├── _layouts │ └── html.html ├── _sass │ └── styles.scss ├── css │ └── main.scss ├── favicon.ico ├── icon.png ├── img │ ├── ProType-banner.png │ ├── ProType.png │ └── ProType.svg ├── index.html ├── js │ ├── functions.js │ └── webgl.js ├── lang.json └── robots.txt ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── base.js ├── export.js └── functions ├── Component.js ├── Component ├── constructor.js └── render.js ├── ExternalGroup.js ├── Group.js ├── Group ├── changeHandler.js ├── constructor.js ├── init.js ├── mountComponent.js └── setState.js ├── Router.js ├── ViewController.js ├── ViewController ├── constructor.js ├── mountGroup.js ├── onPipelineChange.js ├── preload.js ├── prepareForSegue.js ├── willDisappear.js └── willShow.js ├── autoMount.js ├── constructor.js ├── mount.js ├── performTransition.js ├── pipeline.js ├── pop.js └── set.js /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/**/*.min.js 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "es6": true, 6 | "amd": true 7 | }, 8 | "parser": "babel-eslint", 9 | "extends": "eslint:recommended", 10 | "rules": { 11 | "linebreak-style": [ 12 | "error", 13 | "unix" 14 | ], 15 | "quotes": [ 16 | "error", 17 | "double" 18 | ], 19 | "semi": [ 20 | "error", 21 | "always" 22 | ], 23 | "no-console": [ 24 | "error", 25 | { 26 | "allow": [ 27 | "warn", 28 | "error" 29 | ] 30 | } 31 | ], 32 | "no-unused-vars": "off", 33 | "no-cond-assign": "off", 34 | "no-inner-declaration": "off" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: [ "master" ] 6 | pull_request: 7 | branches: [ "master" ] 8 | schedule: 9 | - cron: "13 8 * * 3" 10 | 11 | jobs: 12 | analyze: 13 | name: Analyze 14 | runs-on: ubuntu-latest 15 | permissions: 16 | actions: read 17 | contents: read 18 | security-events: write 19 | 20 | strategy: 21 | fail-fast: false 22 | matrix: 23 | language: [ javascript ] 24 | 25 | steps: 26 | - name: Checkout 27 | uses: actions/checkout@v3 28 | 29 | - name: Initialize CodeQL 30 | uses: github/codeql-action/init@v2 31 | with: 32 | languages: ${{ matrix.language }} 33 | queries: +security-and-quality 34 | 35 | - name: Autobuild 36 | uses: github/codeql-action/autobuild@v2 37 | 38 | - name: Perform CodeQL Analysis 39 | uses: github/codeql-action/analyze@v2 40 | with: 41 | category: "/language:${{ matrix.language }}" 42 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [8.x, 10.x, 12.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v1 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - name: npm install, build, and test 21 | run: | 22 | npm ci 23 | npm run build --if-present 24 | npm test 25 | env: 26 | CI: true 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node,macos,bower,jekyll,windows 3 | 4 | ### Bower ### 5 | bower_components 6 | .bower-cache 7 | .bower-registry 8 | .bower-tmp 9 | 10 | ### Jekyll ### 11 | _site/ 12 | .sass-cache/ 13 | .jekyll-metadata 14 | 15 | ### macOS ### 16 | *.DS_Store 17 | .AppleDouble 18 | .LSOverride 19 | *.config 20 | # Icon must end with two \r 21 | Icon 22 | 23 | # Thumbnails 24 | ._* 25 | 26 | # Files that might appear in the root of a volume 27 | .DocumentRevisions-V100 28 | .fseventsd 29 | .Spotlight-V100 30 | .TemporaryItems 31 | .Trashes 32 | .VolumeIcon.icns 33 | .com.apple.timemachine.donotpresent 34 | 35 | # Directories potentially created on remote AFP share 36 | .AppleDB 37 | .AppleDesktop 38 | Network Trash Folder 39 | Temporary Items 40 | .apdisk 41 | 42 | ### Node ### 43 | # Logs 44 | logs 45 | *.log 46 | npm-debug.log* 47 | yarn-debug.log* 48 | yarn-error.log* 49 | 50 | # Runtime data 51 | pids 52 | *.pid 53 | *.seed 54 | *.pid.lock 55 | 56 | # Directory for instrumented libs generated by jscoverage/JSCover 57 | lib-cov 58 | 59 | # Coverage directory used by tools like istanbul 60 | coverage 61 | 62 | # nyc test coverage 63 | .nyc_output 64 | 65 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 66 | .grunt 67 | 68 | # Bower dependency directory (https://bower.io/) 69 | 70 | # node-waf configuration 71 | .lock-wscript 72 | 73 | # Compiled binary addons (http://nodejs.org/api/addons.html) 74 | build/Release 75 | 76 | # Dependency directories 77 | node_modules/ 78 | jspm_packages/ 79 | 80 | # Typescript v1 declaration files 81 | typings/ 82 | 83 | # Optional npm cache directory 84 | .npm 85 | 86 | # Optional eslint cache 87 | .eslintcache 88 | 89 | # Optional REPL history 90 | .node_repl_history 91 | 92 | # Output of 'npm pack' 93 | *.tgz 94 | 95 | # Yarn Integrity file 96 | .yarn-integrity 97 | 98 | # dotenv environment variables file 99 | .env 100 | 101 | 102 | ### Windows ### 103 | # Windows thumbnail cache files 104 | Thumbs.db 105 | ehthumbs.db 106 | ehthumbs_vista.db 107 | 108 | # Folder config file 109 | Desktop.ini 110 | 111 | # Recycle Bin used on file shares 112 | $RECYCLE.BIN/ 113 | 114 | # Windows Installer files 115 | *.cab 116 | *.msi 117 | *.msm 118 | *.msp 119 | 120 | # Windows shortcuts 121 | *.lnk 122 | 123 | # End of https://www.gitignore.io/api/node,macos,bower,jekyll,windows 124 | -------------------------------------------------------------------------------- /.on-save.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "srcDir": "src", 4 | "destDir": "dist", 5 | "files": "**/*.js", 6 | "command": "npm run gulp" 7 | } 8 | ] 9 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/**/*.min.js 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" 4 | env: 5 | - ENV=CI 6 | before_install: 7 | - npm install -g npm@latest 8 | 9 | install: 10 | - npm install 11 | 12 | script: 13 | - npm run test 14 | 15 | notifications: 16 | email: false 17 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | ## When Something Happens 4 | 5 | If you see a Code of Conduct violation, follow these steps: 6 | 7 | 1. Let the person know that what they did is not appropriate and ask them to stop and/or edit their message(s) or commits. 8 | 2. That person should immediately stop the behavior and correct the issue. 9 | 3. If this doesn’t happen, or if you're uncomfortable speaking up, [contact the maintainers](#contacting-maintainers). 10 | 4. As soon as available, a maintainer will look into the issue, and take [further action (see below)](#further-enforcement), starting with a warning, then temporary block, then long-term repo or organization ban. 11 | 12 | When reporting, please include any relevant details, links, screenshots, context, or other information that may be used to better understand and resolve the situation. 13 | 14 | **The maintainer team will prioritize the well-being and comfort of the recipients of the violation over the comfort of the violator.** See [some examples below](#enforcement-examples). 15 | 16 | ## Our Pledge 17 | 18 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers of this project pledge to making participation in our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, technical preferences, nationality, personal appearance, race, religion, or sexual identity and orientation. 19 | 20 | ## Our Standards 21 | 22 | Examples of behavior that contributes to creating a positive environment include: 23 | 24 | * Using welcoming and inclusive language. 25 | * Being respectful of differing viewpoints and experiences. 26 | * Gracefully accepting constructive feedback. 27 | * Focusing on what is best for the community. 28 | * Showing empathy and kindness towards other community members. 29 | * Encouraging and raising up your peers in the project so you can all bask in hacks and glory. 30 | 31 | Examples of unacceptable behavior by participants include: 32 | 33 | * The use of sexualized language or imagery and unwelcome sexual attention or advances, including when simulated online. The only exception to sexual topics is channels/spaces specifically for topics of sexual identity. 34 | * Casual mention of slavery or indentured servitude and/or false comparisons of one's occupation or situation to slavery. Please consider using or asking about alternate terminology when referring to such metaphors in technology. 35 | * Making light of/making mocking comments about trigger warnings and content warnings. 36 | * Trolling, insulting/derogatory comments, and personal or political attacks. 37 | * Public or private harassment, deliberate intimidation, or threats. 38 | * Publishing others' private information, such as a physical or electronic address, without explicit permission. This includes any sort of "outing" of any aspect of someone's identity without their consent. 39 | * Publishing private screenshots or quotes of interactions in the context of this project without all quoted users' *explicit* consent. 40 | * Publishing of private communication that doesn't have to do with reporting harrassment. 41 | * Any of the above even when [presented as "ironic" or "joking"](https://en.wikipedia.org/wiki/Hipster_racism). 42 | * Any attempt to present "reverse-ism" versions of the above as violations. Examples of reverse-isms are "reverse racism", "reverse sexism", "heterophobia", and "cisphobia". 43 | * Unsolicited explanations under the assumption that someone doesn't already know it. Ask before you teach! Don't assume what people's knowledge gaps are. 44 | * [Feigning or exaggerating surprise](https://www.recurse.com/manual#no-feigned-surprise) when someone admits to not knowing something. 45 | * "[Well-actuallies](https://www.recurse.com/manual#no-well-actuallys)" 46 | * Other conduct which could reasonably be considered inappropriate in a professional or community setting. 47 | 48 | ## Scope 49 | 50 | This Code of Conduct applies both within spaces involving this project and in other spaces involving community members. This includes the repository, its Pull Requests and Issue tracker, its Twitter community, private email communications in the context of the project, and any events where members of the project are participating, as well as adjacent communities and venues affecting the project's members. 51 | 52 | Depending on the violation, the maintainers may decide that violations of this code of conduct that have happened outside of the scope of the community may deem an individual unwelcome, and take appropriate action to maintain the comfort and safety of its members. 53 | 54 | ### Other Community Standards 55 | 56 | As a project on GitHub, this project is additionally covered by the [GitHub Community Guidelines](https://help.github.com/articles/github-community-guidelines/). 57 | 58 | Additionally, as a project hosted on npm, is is covered by [npm, Inc's Code of Conduct](https://www.npmjs.com/policies/conduct). 59 | 60 | Enforcement of those guidelines after violations overlapping with the above are the responsibility of the entities, and enforcement may happen in any or all of the services/communities. 61 | 62 | ## Maintainer Enforcement Process 63 | 64 | Once the maintainers get involved, they will follow a documented series of steps and do their best to preserve the well-being of project members. This section covers actual concrete steps. 65 | 66 | ### Contacting Maintainers 67 | 68 | Tweet me at [@arthur_guiot](https://twitter.com/arthur_guiot), or leave an issue. 69 | 70 | ### Further Enforcement 71 | 72 | If you've already followed the [initial enforcement steps](#enforcement), these are the steps maintainers will take for further enforcement, as needed: 73 | 74 | 1. Repeat the request to stop. 75 | 2. If the person doubles down, they will have offending messages removed or edited by a maintainers given an official warning. The PR or Issue may be locked. 76 | 3. If the behavior continues or is repeated later, the person will be blocked from participating for 24 hours. 77 | 4. If the behavior continues or is repeated after the temporary block, a long-term (6-12mo) ban will be used. 78 | 79 | On top of this, maintainers may remove any offending messages, images, contributions, etc, as they deem necessary. 80 | 81 | Maintainers reserve full rights to skip any of these steps, at their discretion, if the violation is considered to be a serious and/or immediate threat to the health and well-being of members of the community. These include any threats, serious physical or verbal attacks, and other such behavior that would be completely unacceptable in any social setting that puts our members at risk. 82 | 83 | Members expelled from events or venues with any sort of paid attendance will not be refunded. 84 | 85 | ### Who Watches the Watchers? 86 | 87 | Maintainers and other leaders who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. These may include anything from removal from the maintainer team to a permanent ban from the community. 88 | 89 | Additionally, as a project hosted on both GitHub and npm, [their own Codes of Conducts may be applied against maintainers of this project](#other-community-standards), externally of this project's procedures. 90 | 91 | ### Enforcement Examples 92 | 93 | #### The Best Case 94 | 95 | The vast majority of situations work out like this. This interaction is common, and generally positive. 96 | 97 | > Alex: "Yeah I used X and it was really crazy!" 98 | 99 | > Patt (not a maintainer): "Hey, could you not use that word? What about 'ridiculous' instead?" 100 | 101 | > Alex: "oh sorry, sure." -> edits old comment to say "it was really confusing!" 102 | 103 | #### The Maintainer Case 104 | 105 | Sometimes, though, you need to get maintainers involved. Maintainers will do their best to resolve conflicts, but people who were harmed by something **will take priority**. 106 | 107 | > Patt: "Honestly, sometimes I just really hate using $library and anyone who uses it probably sucks at their job." 108 | 109 | > Alex: "Whoa there, could you dial it back a bit? There's a CoC thing about attacking folks' tech use like that." 110 | 111 | > Patt: "I'm not attacking anyone, what's your problem?" 112 | 113 | > Alex: "@maintainers hey uh. Can someone look at this issue? Patt is getting a bit aggro. I tried to nudge them about it, but nope." 114 | 115 | > KeeperOfCommitBits: (on issue) "Hey Patt, maintainer here. Could you tone it down? This sort of attack is really not okay in this space." 116 | 117 | > Patt: "Leave me alone I haven't said anything bad wtf is wrong with you." 118 | 119 | > KeeperOfCommitBits: (deletes user's comment), "@patt I mean it. Please refer to the CoC over at (URL to this CoC) if you have questions, but you can consider this an actual warning. I'd appreciate it if you reworded your messages in this thread, since they made folks there uncomfortable. Let's try and be kind, yeah?" 120 | 121 | > Patt: "@keeperofbits Okay sorry. I'm just frustrated and I'm kinda burnt out and I guess I got carried away. I'll DM Alex a note apologizing and edit my messages. Sorry for the trouble." 122 | 123 | > KeeperOfCommitBits: "@patt Thanks for that. I hear you on the stress. Burnout sucks :/. Have a good one!" 124 | 125 | #### The Nope Case 126 | 127 | > PepeTheFrog🐸: "Hi, I am a literal actual nazi and I think white supremacists are quite fashionable." 128 | 129 | > Patt: "NOOOOPE. OH NOPE NOPE." 130 | 131 | > Alex: "JFC NO. NOPE. @keeperofbits NOPE NOPE LOOK HERE" 132 | 133 | > KeeperOfCommitBits: "👀 Nope. NOPE NOPE NOPE. 🔥" 134 | 135 | > PepeTheFrog🐸 has been banned from all organization or user repositories belonging to KeeperOfCommitBits. 136 | 137 | ## Attribution 138 | 139 | This Code of Conduct was generated using [WeAllJS Code of Conduct Generator](https://npm.im/weallbehave), which is based on the [WeAllJS Code of 140 | Conduct](https://wealljs.org/code-of-conduct), which is itself based on 141 | [Contributor Covenant](http://contributor-covenant.org), version 1.4, available 142 | at 143 | [http://contributor-covenant.org/version/1/4](http://contributor-covenant.org/version/1/4), 144 | and the LGBTQ in Technology Slack [Code of 145 | Conduct](http://lgbtq.technology/coc.html). 146 | 147 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## How do I... 4 | 5 | * [Use This Guide](#introduction)? 6 | * Ask or Say Something? 🤔🐛😱 7 | * [Request Support](#request-support) 8 | * [Report an Error or Bug](#report-an-error-or-bug) 9 | * [Request a Feature](#request-a-feature) 10 | * Make Something? 🤓👩🏽‍💻📜🍳 11 | * [Project Setup](#project-setup) 12 | * [Contribute Documentation](#contribute-documentation) 13 | * [Contribute Code](#contribute-code) 14 | * Manage Something ✅🙆🏼💃👔 15 | * [Provide Support on Issues](#provide-support-on-issues) 16 | * [Label Issues](#label-issues) 17 | * [Clean Up Issues and PRs](#clean-up-issues-and-prs) 18 | * [Review Pull Requests](#review-pull-requests) 19 | * [Merge Pull Requests](#merge-pull-requests) 20 | * [Tag a Release](#tag-a-release) 21 | * [Join the Project Team](#join-the-project-team) 22 | * Add a Guide Like This One [To My Project](#attribution)? 🤖😻👻 23 | 24 | ## Introduction 25 | 26 | Thank you so much for your interest in contributing!. All types of contributions are encouraged and valued. See the [table of contents](#toc) for different ways to help and details about how this project handles them!📝 27 | 28 | Please make sure to read the relevant section before making your contribution! It will make it a lot easier for us maintainers to make the most of it and smooth out the experience for all involved. 💚 29 | 30 | The [Project Team](#join-the-project-team) looks forward to your contributions. 🙌🏾✨ 31 | 32 | ## Request Support 33 | 34 | If you have a question about this project, how to use it, or just need clarification about something: 35 | 36 | * Open an Issue at https://github.com/arguiot/Protype/issues 37 | * Provide as much context as you can about what you're running into. 38 | * Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. If not, please be ready to provide that information if maintainers ask for it. 39 | 40 | Once it's filed: 41 | 42 | * The project team will [label the issue](#label-issues). 43 | * Someone will try to have a response soon. 44 | * If you or the maintainers don't respond to an issue for 30 days, the [issue will be closed](#clean-up-issues-and-prs). If you want to come back to it, reply (once, please), and we'll reopen the existing issue. Please avoid filing new issues as extensions of one you already made. 45 | 46 | ## Report an Error or Bug 47 | 48 | If you run into an error or bug with the project: 49 | 50 | * Open an Issue at https://github.com/arguiot/Protype/issues 51 | * Include *reproduction steps* that someone else can follow to recreate the bug or error on their own. 52 | * Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. If not, please be ready to provide that information if maintainers ask for it. 53 | 54 | Once it's filed: 55 | 56 | * The project team will [label the issue](#label-issues). 57 | * A team member will try to reproduce the issue with your provided steps. If there are no repro steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. 58 | * If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#contribute-code). 59 | * If you or the maintainers don't respond to an issue for 30 days, the [issue will be closed](#clean-up-issues-and-prs). If you want to come back to it, reply (once, please), and we'll reopen the existing issue. Please avoid filing new issues as extensions of one you already made. 60 | * `critical` issues may be left open, depending on perceived immediacy and severity, even past the 30 day deadline. 61 | 62 | ## Request a Feature 63 | 64 | If the project doesn't do something you need or want it to do: 65 | 66 | * Open an Issue at https://github.com/arguiot/Protype/issues 67 | * Provide as much context as you can about what you're running into. 68 | * Please try and be clear about why existing features and alternatives would not work for you. 69 | 70 | Once it's filed: 71 | 72 | * The project team will [label the issue](#label-issues). 73 | * The project team will evaluate the feature request, possibly asking you more questions to understand its purpose and any relevant requirements. If the issue is closed, the team will convey their reasoning and suggest an alternative path forward. 74 | * If the feature request is accepted, it will be marked for implementation with `feature-accepted`, which can then be done by either by a core team member or by anyone in the community who wants to [contribute code](#contribute-code). 75 | 76 | Note: The team is unlikely to be able to accept every single feature request that is filed. Please understand if they need to say no. 77 | 78 | ## Project Setup 79 | 80 | So you wanna contribute some code! That's great! This project uses GitHub Pull Requests to manage contributions, so [read up on how to fork a GitHub project and file a PR](https://guides.github.com/activities/forking) if you've never done it before. 81 | 82 | If this seems like a lot or you aren't able to do all this setup, you might also be able to [edit the files directly](https://help.github.com/articles/editing-files-in-another-user-s-repository/) without having to do any of this setup. Yes, [even code](#contribute-code). 83 | 84 | If you want to go the usual route and run the project locally, though: 85 | 86 | * [Install Node.js](https://nodejs.org/en/download/) 87 | * [Fork the project](https://guides.github.com/activities/forking/#fork) 88 | 89 | Then in your terminal: 90 | * `cd path/to/your/clone` 91 | * `npm install` 92 | * `npm test` 93 | 94 | And you should be ready to go! 95 | 96 | ## Contribute Documentation 97 | 98 | Documentation is a super important, critical part of this project. Docs are how we keep track of what we're doing, how, and why. It's how we stay on the same page about our policies. And it's how we tell others everything they need in order to be able to use this project -- or contribute to it. So thank you in advance. 99 | 100 | Documentation contributions of any size are welcome! Feel free to file a PR even if you're just rewording a sentence to be more clear, or fixing a spelling mistake! 101 | 102 | To contribute documentation: 103 | 104 | * [Set up the project](#project-setup). 105 | * Edit or add any relevant documentation. 106 | * Make sure your changes are formatted correctly and consistently with the rest of the documentation. 107 | * Re-read what you wrote, and run a spellchecker on it to make sure you didn't miss anything. 108 | * In your commit message(s), begin the first line with `docs: `. For example: `docs: Adding a doc contrib section to CONTRIBUTING.md`. 109 | * Write clear, concise commit message(s) using [conventional-changelog format](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md). Documentation commits should use `docs(): `. 110 | * Go to https://github.com/arguiot/Protype/pulls and open a new pull request with your changes. 111 | * If your PR is connected to an open issue, add a line in your PR's description that says `Fixes: #123`, where `#123` is the number of the issue you're fixing. 112 | 113 | Once you've filed the PR: 114 | 115 | * One or more maintainers will use GitHub's review feature to review your PR. 116 | * If the maintainer asks for any changes, edit your changes, push, and ask for another review. 117 | * If the maintainer decides to pass on your PR, they will thank you for the contribution and explain why they won't be accepting the changes. That's ok! We still really appreciate you taking the time to do it, and we don't take that lightly. 💚 118 | * If your PR gets accepted, it will be marked as such, and merged into the `latest` branch soon after. Your contribution will be distributed to the masses next time the maintainers [tag a release](#tag-a-release) 119 | 120 | ## Contribute Code 121 | 122 | We like code commits a lot! They're super handy, and they keep the project going and doing the work it needs to do to be useful to others. 123 | 124 | Code contributions of just about any size are acceptable! 125 | 126 | The main difference between code contributions and documentation contributions is that contributing code requires inclusion of relevant tests for the code being added or changed. Contributions without accompanying tests will be held off until a test is added, unless the maintainers consider the specific tests to be either impossible, or way too much of a burden for such a contribution. 127 | 128 | To contribute code: 129 | 130 | * [Set up the project](#project-setup). 131 | * Make any necessary changes to the source code. 132 | * Include any [additional documentation](#contribute-documentation) the changes might need. 133 | * Write tests that verify that your contribution works as expected. 134 | * Write clear, concise commit message(s) using [conventional-changelog format](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md). 135 | * Dependency updates, additions, or removals must be in individual commits, and the message must use the format: `(deps): PKG@VERSION`, where `` is any of the usual `conventional-changelog` prefixes, at your discretion. 136 | * Go to https://github.com/arguiot/Protype/pulls and open a new pull request with your changes. 137 | * If your PR is connected to an open issue, add a line in your PR's description that says `Fixes: #123`, where `#123` is the number of the issue you're fixing. 138 | 139 | Once you've filed the PR: 140 | 141 | * Barring special circumstances, maintainers will not review PRs until all checks pass (Travis, AppVeyor, etc). 142 | * One or more maintainers will use GitHub's review feature to review your PR. 143 | * If the maintainer asks for any changes, edit your changes, push, and ask for another review. Additional tags (such as `needs-tests`) will be added depending on the review. 144 | * If the maintainer decides to pass on your PR, they will thank you for the contribution and explain why they won't be accepting the changes. That's ok! We still really appreciate you taking the time to do it, and we don't take that lightly. 💚 145 | * If your PR gets accepted, it will be marked as such, and merged into the `latest` branch soon after. Your contribution will be distributed to the masses next time the maintainers [tag a release](#tag-a-release) 146 | 147 | ## Provide Support on Issues 148 | 149 | [Needs Collaborator](#join-the-project-team): none 150 | 151 | Helping out other users with their questions is a really awesome way of contributing to any community. It's not uncommon for most of the issues on an open source projects being support-related questions by users trying to understand something they ran into, or find their way around a known bug. 152 | 153 | Sometimes, the `support` label will be added to things that turn out to actually be other things, like bugs or feature requests. In that case, suss out the details with the person who filed the original issue, add a comment explaining what the bug is, and change the label from `support` to `bug` or `feature`. If you can't do this yourself, @mention a maintainer so they can do it. 154 | 155 | In order to help other folks out with their questions: 156 | 157 | * Go to the issue tracker and [filter open issues by the `support` label](https://github.com/arguiot/Protype/issues?q=is%3Aopen+is%3Aissue+label%3Asupport). 158 | * Read through the list until you find something that you're familiar enough with to give an answer to. 159 | * Respond to the issue with whatever details are needed to clarify the question, or get more details about what's going on. 160 | * Once the discussion wraps up and things are clarified, either close the issue, or ask the original issue filer (or a maintainer) to close it for you. 161 | 162 | Some notes on picking up support issues: 163 | 164 | * Avoid responding to issues you don't know you can answer accurately. 165 | * As much as possible, try to refer to past issues with accepted answers. Link to them from your replies with the `#123` format. 166 | * Be kind and patient with users -- often, folks who have run into confusing things might be upset or impatient. This is ok. Try to understand where they're coming from, and if you're too uncomfortable with the tone, feel free to stay away or withdraw from the issue. (note: if the user is outright hostile or is violating the CoC, [refer to the Code of Conduct](CODE_OF_CONDUCT.md) to resolve the conflict). 167 | 168 | ## Label Issues 169 | 170 | [Needs Collaborator](#join-the-project-team): Issue Tracker 171 | 172 | One of the most important tasks in handling issues is labeling them usefully and accurately. All other tasks involving issues ultimately rely on the issue being classified in such a way that relevant parties looking to do their own tasks can find them quickly and easily. 173 | 174 | In order to label issues, [open up the list of unlabeled issues](https://github.com/arguiot/Protype/issues?q=is%3Aopen+is%3Aissue+no%3Alabel) and, **from newest to oldest**, read through each one and apply issue labels according to the table below. If you're unsure about what label to apply, skip the issue and try the next one: don't feel obligated to label each and every issue yourself! 175 | 176 | Label | Apply When | Notes 177 | --- | --- | --- 178 | `bug` | Cases where the code (or documentation) is behaving in a way it wasn't intended to. | If something is happening that surprises the *user* but does not go against the way the code is designed, it should use the `enhancement` label. 179 | `critical` | Added to `bug` issues if the problem described makes the code completely unusable in a common situation. | 180 | `documentation` | Added to issues or pull requests that affect any of the documentation for the project. | Can be combined with other labels, such as `bug` or `enhancement`. 181 | `duplicate` | Added to issues or PRs that refer to the exact same issue as another one that's been previously labeled. | Duplicate issues should be marked and closed right away, with a message referencing the issue it's a duplicate of (with `#123`) 182 | `enhancement` | Added to [feature requests](#request-a-feature), PRs, or documentation issues that are purely additive: the code or docs currently work as expected, but a change is being requested or suggested. | 183 | `help wanted` | Applied by [Committers](#join-the-project-team) to issues and PRs that they would like to get outside help for. Generally, this means it's lower priority for the maintainer team to itself implement, but that the community is encouraged to pick up if they so desire | Never applied on first-pass labeling. 184 | `in-progress` | Applied by [Committers](#join-the-project-team) to PRs that are pending some work before they're ready for review. | The original PR submitter should @mention the team member that applied the label once the PR is complete. 185 | `performance` | This issue or PR is directly related to improving performance. | 186 | `refactor` | Added to issues or PRs that deal with cleaning up or modifying the project for the betterment of it. | 187 | `starter` | Applied by [Committers](#join-the-project-team) to issues that they consider good introductions to the project for people who have not contributed before. These are not necessarily "easy", but rather focused around how much context is necessary in order to understand what needs to be done for this project in particular. | Existing project members are expected to stay away from these unless they increase in priority. 188 | `support` | This issue is either asking a question about how to use the project, clarifying the reason for unexpected behavior, or possibly reporting a `bug` but does not have enough detail yet to determine whether it would count as such. | The label should be switched to `bug` if reliable reproduction steps are provided. Issues primarily with unintended configurations of a user's environment are not considered bugs, even if they cause crashes. 189 | `tests` | This issue or PR either requests or adds primarily tests to the project. | If a PR is pending tests, that will be handled through the [PR review process](#review-pull-requests) 190 | `wontfix` | Labelers may apply this label to issues that clearly have nothing at all to do with the project or are otherwise entirely outside of its scope/sphere of influence. [Committers](#join-the-project-team) may apply this label and close an issue or PR if they decide to pass on an otherwise relevant issue. | The issue or PR should be closed as soon as the label is applied, and a clear explanation provided of why the label was used. Contributors are free to contest the labeling, but the decision ultimately falls on committers as to whether to accept something or not. 191 | 192 | ## Clean Up Issues and PRs 193 | 194 | [Needs Collaborator](#join-the-project-team): Issue Tracker 195 | 196 | Issues and PRs can go stale after a while. Maybe they're abandoned. Maybe the team will just plain not have time to address them any time soon. 197 | 198 | In these cases, they should be closed until they're brought up again or the interaction starts over. 199 | 200 | To clean up issues and PRs: 201 | 202 | * Search the issue tracker for issues or PRs, and add the term `updated:<=YYYY-MM-DD`, where the date is 30 days before today. 203 | * Go through each issue *from oldest to newest*, and close them if **all of the following are true**: 204 | * not opened by a maintainer 205 | * not marked as `critical` 206 | * not marked as `starter` or `help wanted` (these might stick around for a while, in general, as they're intended to be available) 207 | * no explicit messages in the comments asking for it to be left open 208 | * does not belong to a milestone 209 | * Leave a message when closing saying "Cleaning up stale issue. Please reopen or ping us if and when you're ready to resume this. See https://github.com/arguiot/Protype/blob/latest/CONTRIBUTING.md#clean-up-issues-and-prs for more details." 210 | 211 | ## Review Pull Requests 212 | 213 | [Needs Collaborator](#join-the-project-team): Issue Tracker 214 | 215 | While anyone can comment on a PR, add feedback, etc, PRs are only *approved* by team members with Issue Tracker or higher permissions. 216 | 217 | PR reviews use [GitHub's own review feature](https://help.github.com/articles/about-pull-request-reviews/), which manages comments, approval, and review iteration. 218 | 219 | Some notes: 220 | 221 | * You may ask for minor changes ("nitpicks"), but consider whether they are really blockers to merging: try to err on the side of "approve, with comments". 222 | * *ALL PULL REQUESTS* should be covered by a test: either by a previously-failing test, an existing test that covers the entire functionality of the submitted code, or new tests to verify any new/changed behavior. All tests must also pass and follow established conventions. Test coverage should not drop, unless the specific case is considered reasonable by maintainers. 223 | * Please make sure you're familiar with the code or documentation being updated, unless it's a minor change (spellchecking, minor formatting, etc). You may @mention another project member who you think is better suited for the review, but still provide a non-approving review of your own. 224 | * Be extra kind: people who submit code/doc contributions are putting themselves in a pretty vulnerable position, and have put time and care into what they've done (even if that's not obvious to you!) -- always respond with respect, be understanding, but don't feel like you need to sacrifice your standards for their sake, either. Just don't be a jerk about it? 225 | 226 | ## Merge Pull Requests 227 | 228 | [Needs Collaborator](#join-the-project-team): Committer 229 | 230 | TBD - need to hash out a bit more of this process. 231 | 232 | ## Tag A Release 233 | 234 | [Needs Collaborator](#join-the-project-team): Committer 235 | 236 | TBD - need to hash out a bit more of this process. The most important bit here is probably that all tests must pass, and tags must use [semver](https://semver.org). 237 | 238 | ## Join the Project Team 239 | 240 | ### Ways to Join 241 | 242 | There are many ways to contribute! Most of them don't require any official status unless otherwise noted. That said, there's a couple of positions that grant special repository abilities, and this section describes how they're granted and what they do. 243 | 244 | All of the below positions are granted based on the project team's needs, as well as their consensus opinion about whether they would like to work with the person and think that they would fit well into that position. The process is relatively informal, and it's likely that people who express interest in participating can just be granted the permissions they'd like. 245 | 246 | You can spot a collaborator on the repo by looking for the `[Collaborator]` or `[Owner]` tags next to their names. 247 | 248 | Permission | Description 249 | --- | --- 250 | Issue Tracker | Granted to contributors who express a strong interest in spending time on the project's issue tracker. These tasks are mainly [labeling issues](#label-issues), [cleaning up old ones](#clean-up-issues-and-prs), and [reviewing pull requests](#review-pull-requests), as well as all the usual things non-team-member contributors can do. Issue handlers should not merge pull requests, tag releases, or directly commit code themselves: that should still be done through the usual pull request process. Becoming an Issue Handler means the project team trusts you to understand enough of the team's process and context to implement it on the issue tracker. 251 | Committer | Granted to contributors who want to handle the actual pull request merges, tagging new versions, etc. Committers should have a good level of familiarity with the codebase, and enough context to understand the implications of various changes, as well as a good sense of the will and expectations of the project team. 252 | Admin/Owner | Granted to people ultimately responsible for the project, its community, etc. 253 | 254 | ## Attribution 255 | 256 | Thanks to WeAllJS. 257 | 258 | © Arthur Guiot 2017 259 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Arthur Guiot 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

ProType

4 |

The next generation JavaScript framework

5 | 6 | [![GitHub release](https://img.shields.io/github/release/arguiot/ProType.svg)](https://github.com/arguiot/ProType/releases) 7 | [![Build Status](https://travis-ci.org/arguiot/ProType.svg?branch=master)](https://travis-ci.org/arguiot/ProType) 8 | [![Github All Releases](https://img.shields.io/github/downloads/arguiot/ProType/total.svg)](https://github.com/arguiot/ProType/) 9 | [![npm](https://img.shields.io/npm/dt/protype.js.svg)](https://www.npmjs.com/package/protype.js) 10 | [![License](https://img.shields.io/github/license/arguiot/ProType.svg)](LICENSE) 11 |
12 | 13 | > You can find demos on the [website](https://protype.js.org) 14 | 15 | ## The docs can be found [here](https://github.com/arguiot/ProType/wiki) 16 | If you need help, you can go to the docs, and get your answers. Or you can submit an issue, and I'll try to answer you as fast as possible. 17 | ## Support 18 | ProType is a project that required a lot of work and effort. You can show your appreciation by leaving a ⭐️. But you can also contribute in a 'financial' way by giving to my [Patreon](https://www.patreon.com/bePatron?u=10987869) 19 | ## Contributing 20 | 21 | Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us. 22 | 23 | #### Made a website using the ProType? 24 | 25 | Add the built with ProType badge to your `README.md` 26 | 27 | [![Built with ProType](https://img.shields.io/badge/Built%20with-ProType-orange.svg)](https://img.shields.io/badge/Built%20with-ProType-orange.svg) 28 | 29 | 30 | Feel free to send me an email at [arguiot@gmail.com](mailto:arguiot@gmail.com), and I might add your site to an examples section I'm currently working on. 31 | 32 | ## Versioning 33 | 34 | We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/arguiot/ProType/tags). 35 | 36 | ## Authors 37 | 38 | - **Arthur Guiot** - *Initial work* - [@arguiot](https://github.com/arguiot) 39 | 40 | See also the list of [contributors](https://github.com/arguiot/ProType/contributors) who participated in this project. If you don't code but you have great ideas, don't hesitate to write your idea in the issue part. If your idea is accepted, I will add you to this list 😊. 41 |
42 |
Thank You
43 |
for support
44 | 45 | 46 | ## License 47 | 48 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 49 | 50 | Copyright © 2017 Arthur Guiot All Rights Reserved. 51 | -------------------------------------------------------------------------------- /__test__/index.html: -------------------------------------------------------------------------------- 1 | 2 | 29 | 30 | 31 | 32 |
33 |
34 | 35 |
36 |
37 |
38 | 39 |
40 | 41 | 42 | 92 | 107 | 108 | -------------------------------------------------------------------------------- /__test__/protype.js: -------------------------------------------------------------------------------- 1 | /***************************************************** 2 | 3 | ProType 4 | ================================================= 5 | Copyright © Arthur Guiot 2018. All right reserved. 6 | 7 | ******************************************************/ 8 | class ProType { 9 | get Component() { 10 | class component { 11 | constructor(el) { 12 | this.component = el; 13 | this.state = {} 14 | 15 | this.render() 16 | } 17 | render() { 18 | this.component.innerHTML = "" 19 | } 20 | } 21 | return component 22 | } 23 | mountExternalGroup(el, group) { 24 | const g = new group(el, null) 25 | return g 26 | } 27 | get Group() { 28 | class group { 29 | changeHandler(e) { 30 | 31 | } 32 | constructor(el, viewName) { 33 | this.group = el 34 | this.viewName = viewName 35 | this.state = {} 36 | this.init() 37 | } 38 | init() { 39 | 40 | } 41 | mountComponent(el, obj) { 42 | const object = new obj(el) 43 | return object 44 | } 45 | setState(data) { 46 | if (JSON.stringify(data) != JSON.stringify(this.state)) { 47 | this.state = data 48 | 49 | this.changeHandler(this.state) 50 | } 51 | } 52 | } 53 | return group 54 | } 55 | Router() { 56 | const args = [...arguments] 57 | let handler; 58 | let pattern = "" 59 | switch (args.length) { 60 | case 1: 61 | handler = args[0] 62 | break; 63 | 64 | default: 65 | pattern = args[0] 66 | handler = args[1] 67 | break; 68 | } 69 | const regex = new RegExp(/^:\w*$/) 70 | const routes = {} 71 | pattern.split("/").forEach((el, i) => { 72 | if (el.match(regex)) { 73 | routes[i] = el.split(":")[1] 74 | } 75 | }) 76 | const rep = new RegExp(/\/:\w*(\/|$)/gi) 77 | const match = new RegExp(pattern.replace("/\\w*/")) 78 | document.addEventListener("DOMContentLoaded", e => { 79 | let data = {}; 80 | 81 | const url = window.location.href 82 | data.url = url 83 | const origin = window.location.origin 84 | data.origin = origin 85 | const path = window.location.pathname 86 | data.path = path 87 | const hash = window.location.hash 88 | data.hash = hash 89 | const search = window.location.search.substring(1).split("&") 90 | let searchObj = {} 91 | for (let i = 0; i < search.length; i++) { 92 | const splitted = search[i].split("=") 93 | searchObj[decodeURIComponent(splitted[0])] = decodeURIComponent(splitted[1]) 94 | } 95 | data.search = searchObj 96 | data.pathValue = path.split("/") 97 | 98 | if (path.match(match) && pattern != "") { 99 | const components = path.split("/") 100 | let r = {} 101 | Object.keys(routes).forEach(i => { 102 | r[routes[i]] = components[i] 103 | }) 104 | handler(data, r) 105 | } 106 | }) 107 | } 108 | get ViewController() { 109 | class view { 110 | constructor(el, viewsName, views) { 111 | this.view = el 112 | this.views = views 113 | this.viewsName = viewsName 114 | const index = this.views.indexOf(this.view) 115 | this.viewName = this.viewsName[index] 116 | 117 | this.pipeline = {} 118 | 119 | this.preload() 120 | } 121 | mountGroup(el, ObjectClass) { 122 | const obj = new ObjectClass(el, this.viewName) 123 | return obj; 124 | } 125 | 126 | mountGroups(els, ObjectClass) { 127 | let classes = [] 128 | for (let i = 0; i < els.length; i++) { 129 | classes.push(new ObjectClass(els[i], this.viewName)) 130 | } 131 | return classes 132 | } 133 | onPipelineChange(pipeline) { 134 | // Handle the event 135 | } 136 | preload() { 137 | // Do stuff that doesn't require DOM interaction 138 | } 139 | prepareForSegue(nextVC) { 140 | // Do something with nextVC 141 | } 142 | willDisappear(sender = "Main") { 143 | // perform UI changes 144 | } 145 | willShow(sender = "Main") { 146 | // perform UI changes on load. 147 | } 148 | } 149 | return view 150 | } 151 | autoMount() { 152 | const controllers = [...arguments] 153 | const els = document.querySelectorAll("[protype]") 154 | this.views.push(...els) 155 | 156 | if (els.length != controllers.length) { 157 | throw "Controllers and Elements don't match" 158 | } 159 | 160 | for (let i = 0; i < els.length; i++) { 161 | this.viewsName.push(els[i].getAttribute("protype")) 162 | } 163 | for (let i = 0; i < controllers.length; i++) { // need to finish register everything 164 | this.controllers.push(new controllers[i](els[i], this.viewsName, this.views)) 165 | } 166 | } 167 | constructor() { 168 | this.version = "v1.1.0" // ProType version 169 | 170 | this.views = [] 171 | this.viewsName = [] 172 | 173 | this.controllers = [] 174 | 175 | this.currentView = ""; 176 | this.last = ""; 177 | this.root = ""; 178 | 179 | this.workspace = {} // share data between views 180 | } 181 | mount() { 182 | const args = [...arguments] 183 | for (let i = 0; i < args.length; i++) { 184 | this.views.push(args[i][1]) 185 | this.viewsName.push(args[i][0]) 186 | } 187 | for (let i = 0; i < args.length; i++) { 188 | this.controllers.push(new args[i][2](this.views[i], this.viewsName, this.views)) 189 | } 190 | } 191 | performTransition(to, options) { 192 | if (to == this.currentView) { 193 | return 194 | } 195 | const opt = Object.assign({ 196 | animation: "none", 197 | duration: "1s", 198 | Group: false 199 | }, options) 200 | 201 | const sender = this.currentView 202 | const sendIndex = this.viewsName.indexOf(sender) 203 | const senderView = this.views[sendIndex] 204 | const senderController = this.controllers[sendIndex] 205 | 206 | const index = this.viewsName.indexOf(to) 207 | const viewBis = this.views[index].cloneNode(true); 208 | this.views[index].parentNode.replaceChild(viewBis, this.views[index]) 209 | 210 | this.views[index] = viewBis 211 | 212 | const view = this.views[index] 213 | let controller = this.controllers[index] 214 | 215 | controller.view = view 216 | controller.views = this.views; 217 | 218 | this.last = this.currentView 219 | this.currentView = to; 220 | 221 | view.setAttribute("style", "") 222 | view.style["z-index"] = "-10" 223 | 224 | senderController.prepareForSegue(controller) 225 | 226 | controller.willShow(sender) 227 | 228 | if (opt.Group !== false) { 229 | const after = () => { 230 | view.style.display = "block" 231 | view.style["z-index"] = "0" 232 | senderView.style.display = "none" 233 | senderController.willDisappear(sender) 234 | } 235 | if (opt.animation !== "none") { 236 | opt.Group.style.animation = `${opt.animation} ${opt.duration} forwards`; 237 | 238 | opt.Group.addEventListener("animationend", e => after()) 239 | } else { 240 | after() 241 | } 242 | 243 | } else { 244 | view.style.display = "block" 245 | 246 | const after = () => { 247 | view.style["z-index"] = "0" 248 | senderView.style.display = "none" 249 | senderController.willDisappear(sender) 250 | view.style.display = "block" 251 | } 252 | if (opt.animation !== "none") { 253 | senderView.style.animation = `${opt.animation} ${opt.duration} forwards`; 254 | 255 | senderView.addEventListener("animationend", e => after()) 256 | } else { 257 | after() 258 | } 259 | 260 | } 261 | 262 | } 263 | get pipeline() { 264 | const viewName = this.currentView; 265 | const index = this.viewsName.indexOf(viewName) 266 | const view = this.views[index] 267 | return view.pipeline; 268 | } 269 | setPipeline(data) { 270 | const viewName = this.currentView; 271 | const index = this.viewsName.indexOf(viewName) 272 | const old = this.views[index].pipeline 273 | if (JSON.stringify(old) != JSON.stringify(data)) { 274 | this.views[index].pipeline = data 275 | this.views[index].onPipelineChange(data) 276 | } 277 | } 278 | pop() { 279 | this.performTransition(this.last) 280 | } 281 | popToRoot() { 282 | this.performTransition(this.root) 283 | } 284 | set(name) { 285 | this.root = name 286 | this.currentView = name; 287 | document.addEventListener("DOMContentLoaded", e => { 288 | for (var i = 0; i < this.views.length; i++) { 289 | if (this.viewsName[i] == name) { 290 | this.views[i].style.display = "block" 291 | this.controllers[i].willShow() 292 | } else { 293 | this.views[i].style.display = "none" 294 | } 295 | } 296 | }) 297 | } 298 | } 299 | // Browserify / Node.js 300 | if (typeof define === "function" && define.amd) { 301 | define(() => new ProType); 302 | // CommonJS and Node.js module support. 303 | } else if (typeof exports !== "undefined") { 304 | // Support Node.js specific `module.exports` (which can be a function) 305 | if (typeof module !== "undefined" && module.exports) { 306 | exports = module.exports = new ProType; 307 | } 308 | // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) 309 | exports.ProType = new ProType; 310 | } else if (typeof global !== "undefined") { 311 | global.ProType = new ProType; 312 | } -------------------------------------------------------------------------------- /__test__/test.js: -------------------------------------------------------------------------------- 1 | eye.test("DOM", "browser", __testDir + "index.html") 2 | -------------------------------------------------------------------------------- /dist/protype.es7.js: -------------------------------------------------------------------------------- 1 | /***************************************************** 2 | 3 | ProType 4 | ================================================= 5 | Copyright © Arthur Guiot 2018. All right reserved. 6 | 7 | ******************************************************/ 8 | class ProType { 9 | get Component() { 10 | class component { 11 | constructor(el) { 12 | this.component = el; 13 | this.state = {}; 14 | 15 | this.render(); 16 | } 17 | render() { 18 | this.component.innerHTML = ""; 19 | } 20 | } 21 | return component; 22 | } 23 | mountExternalGroup(el, group) { 24 | const g = new group(el, null); 25 | return g; 26 | } 27 | get Group() { 28 | class group { 29 | changeHandler(e) {} 30 | constructor(el, viewName) { 31 | this.group = el; 32 | this.viewName = viewName; 33 | this.state = {}; 34 | this.init(); 35 | } 36 | init() {} 37 | mountComponent(el, obj) { 38 | const object = new obj(el); 39 | return object; 40 | } 41 | setState(data) { 42 | if (JSON.stringify(data) != JSON.stringify(this.state)) { 43 | this.state = data; 44 | 45 | this.changeHandler(this.state); 46 | } 47 | } 48 | } 49 | return group; 50 | } 51 | Router() { 52 | const args = [...arguments]; 53 | let handler; 54 | let pattern = ""; 55 | switch (args.length) { 56 | case 1: 57 | handler = args[0]; 58 | break; 59 | 60 | default: 61 | pattern = args[0]; 62 | handler = args[1]; 63 | break; 64 | } 65 | const regex = new RegExp(/^:\w*$/); 66 | const routes = {}; 67 | pattern.split("/").forEach((el, i) => { 68 | if (el.match(regex)) { 69 | routes[i] = el.split(":")[1]; 70 | } 71 | }); 72 | const rep = new RegExp(/\/:\w*(\/|$)/gi); 73 | const match = new RegExp(pattern.replace("/\\w*/")); 74 | document.addEventListener("DOMContentLoaded", e => { 75 | let data = {}; 76 | 77 | const url = window.location.href; 78 | data.url = url; 79 | const origin = window.location.origin; 80 | data.origin = origin; 81 | const path = window.location.pathname; 82 | data.path = path; 83 | const hash = window.location.hash; 84 | data.hash = hash; 85 | const search = window.location.search.substring(1).split("&"); 86 | let searchObj = {}; 87 | for (let i = 0; i < search.length; i++) { 88 | const splitted = search[i].split("="); 89 | searchObj[decodeURIComponent(splitted[0])] = decodeURIComponent( 90 | splitted[1] 91 | ); 92 | } 93 | data.search = searchObj; 94 | data.pathValue = path.split("/"); 95 | 96 | if (path.match(match) && pattern != "") { 97 | const components = path.split("/"); 98 | let r = {}; 99 | Object.keys(routes).forEach(i => { 100 | r[routes[i]] = components[i]; 101 | }); 102 | handler(data, r); 103 | } 104 | }); 105 | } 106 | get ViewController() { 107 | class view { 108 | constructor(el, viewsName, views) { 109 | this.view = el; 110 | this.views = views; 111 | this.viewsName = viewsName; 112 | const index = this.views.indexOf(this.view); 113 | this.viewName = this.viewsName[index]; 114 | 115 | this.pipeline = {}; 116 | 117 | this.preload(); 118 | } 119 | mountGroup(el, ObjectClass) { 120 | const obj = new ObjectClass(el, this.viewName); 121 | return obj; 122 | } 123 | 124 | mountGroups(els, ObjectClass) { 125 | let classes = []; 126 | for (let i = 0; i < els.length; i++) { 127 | classes.push(new ObjectClass(els[i], this.viewName)); 128 | } 129 | return classes; 130 | } 131 | onPipelineChange(pipeline) { 132 | // Handle the event 133 | } 134 | preload() { 135 | // Do stuff that doesn't require DOM interaction 136 | } 137 | prepareForSegue(nextVC) { 138 | // Do something with nextVC 139 | } 140 | willDisappear(sender = "Main") { 141 | // perform UI changes 142 | } 143 | willShow(sender = "Main") { 144 | // perform UI changes on load. 145 | } 146 | } 147 | return view; 148 | } 149 | autoMount() { 150 | const controllers = [...arguments]; 151 | const els = document.querySelectorAll("[protype]"); 152 | this.views.push(...els); 153 | 154 | if (els.length != controllers.length) { 155 | throw "Controllers and Elements don't match"; 156 | } 157 | 158 | for (let i = 0; i < els.length; i++) { 159 | this.viewsName.push(els[i].getAttribute("protype")); 160 | } 161 | for (let i = 0; i < controllers.length; i++) { 162 | // need to finish register everything 163 | this.controllers.push( 164 | new controllers[i](els[i], this.viewsName, this.views) 165 | ); 166 | } 167 | } 168 | constructor() { 169 | this.version = "v1.1.0"; // ProType version 170 | 171 | this.views = []; 172 | this.viewsName = []; 173 | 174 | this.controllers = []; 175 | 176 | this.currentView = ""; 177 | this.last = ""; 178 | this.root = ""; 179 | 180 | this.workspace = {}; // share data between views 181 | } 182 | mount() { 183 | const args = [...arguments]; 184 | for (let i = 0; i < args.length; i++) { 185 | this.views.push(args[i][1]); 186 | this.viewsName.push(args[i][0]); 187 | } 188 | for (let i = 0; i < args.length; i++) { 189 | this.controllers.push( 190 | new args[i][2](this.views[i], this.viewsName, this.views) 191 | ); 192 | } 193 | } 194 | performTransition(to, options) { 195 | if (to == this.currentView) { 196 | return; 197 | } 198 | const opt = Object.assign( 199 | { 200 | animation: "none", 201 | duration: "1s", 202 | Group: false 203 | }, 204 | options 205 | ); 206 | 207 | const sender = this.currentView; 208 | const sendIndex = this.viewsName.indexOf(sender); 209 | const senderView = this.views[sendIndex]; 210 | const senderController = this.controllers[sendIndex]; 211 | 212 | const index = this.viewsName.indexOf(to); 213 | const viewBis = this.views[index].cloneNode(true); 214 | this.views[index].parentNode.replaceChild(viewBis, this.views[index]); 215 | 216 | this.views[index] = viewBis; 217 | 218 | const view = this.views[index]; 219 | let controller = this.controllers[index]; 220 | 221 | controller.view = view; 222 | controller.views = this.views; 223 | 224 | this.last = this.currentView; 225 | this.currentView = to; 226 | 227 | view.setAttribute("style", ""); 228 | view.style["z-index"] = "-10"; 229 | 230 | senderController.prepareForSegue(controller); 231 | 232 | controller.willShow(sender); 233 | 234 | if (opt.Group !== false) { 235 | const after = () => { 236 | view.style.display = "block"; 237 | view.style["z-index"] = "0"; 238 | senderView.style.display = "none"; 239 | senderController.willDisappear(sender); 240 | }; 241 | if (opt.animation !== "none") { 242 | opt.Group.style.animation = `${opt.animation} ${opt.duration} forwards`; 243 | 244 | opt.Group.addEventListener("animationend", e => after()); 245 | } else { 246 | after(); 247 | } 248 | } else { 249 | view.style.display = "block"; 250 | 251 | const after = () => { 252 | view.style["z-index"] = "0"; 253 | senderView.style.display = "none"; 254 | senderController.willDisappear(sender); 255 | view.style.display = "block"; 256 | }; 257 | if (opt.animation !== "none") { 258 | senderView.style.animation = `${opt.animation} ${ 259 | opt.duration 260 | } forwards`; 261 | 262 | senderView.addEventListener("animationend", e => after()); 263 | } else { 264 | after(); 265 | } 266 | } 267 | } 268 | get pipeline() { 269 | const viewName = this.currentView; 270 | const index = this.viewsName.indexOf(viewName); 271 | const view = this.views[index]; 272 | return view.pipeline; 273 | } 274 | setPipeline(data) { 275 | const viewName = this.currentView; 276 | const index = this.viewsName.indexOf(viewName); 277 | const old = this.views[index].pipeline; 278 | if (JSON.stringify(old) != JSON.stringify(data)) { 279 | this.views[index].pipeline = data; 280 | this.views[index].onPipelineChange(data); 281 | } 282 | } 283 | pop() { 284 | this.performTransition(this.last); 285 | } 286 | popToRoot() { 287 | this.performTransition(this.root); 288 | } 289 | set(name) { 290 | this.root = name; 291 | this.currentView = name; 292 | document.addEventListener("DOMContentLoaded", e => { 293 | for (var i = 0; i < this.views.length; i++) { 294 | if (this.viewsName[i] == name) { 295 | this.views[i].style.display = "block"; 296 | this.controllers[i].willShow(); 297 | } else { 298 | this.views[i].style.display = "none"; 299 | } 300 | } 301 | }); 302 | } 303 | } 304 | // Browserify / Node.js 305 | if (typeof define === "function" && define.amd) { 306 | define(() => new ProType()); 307 | // CommonJS and Node.js module support. 308 | } else if (typeof exports !== "undefined") { 309 | // Support Node.js specific `module.exports` (which can be a function) 310 | if (typeof module !== "undefined" && module.exports) { 311 | exports = module.exports = new ProType(); 312 | } 313 | // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) 314 | exports.ProType = new ProType(); 315 | } else if (typeof global !== "undefined") { 316 | global.ProType = new ProType(); 317 | } 318 | -------------------------------------------------------------------------------- /dist/protype.es7.min.js: -------------------------------------------------------------------------------- 1 | class ProType{get Component(){return class{constructor(a){this.component=a,this.state={},this.render()}render(){this.component.innerHTML=""}}}mountExternalGroup(a,b){const c=new b(a,null);return c}get Group(){return class{changeHandler(){}constructor(a,b){this.group=a,this.viewName=b,this.state={},this.init()}init(){}mountComponent(a,b){const c=new b(a);return c}setState(a){JSON.stringify(a)!=JSON.stringify(this.state)&&(this.state=a,this.changeHandler(this.state))}}}Router(){const a=[...arguments];let b,c="";switch(a.length){case 1:b=a[0];break;default:c=a[0],b=a[1];}const d=new RegExp(/^:\w*$/),e={};c.split("/").forEach((a,b)=>{a.match(d)&&(e[b]=a.split(":")[1])});const f=new RegExp(/\/:\w*(\/|$)/gi),g=new RegExp(c.replace("/\\w*/"));document.addEventListener("DOMContentLoaded",()=>{let a={};const d=window.location.href;a.url=d;const f=window.location.origin;a.origin=f;const h=window.location.pathname;a.path=h;const i=window.location.hash;a.hash=i;const j=window.location.search.substring(1).split("&");let k={};for(let a=0;a{d[e[a]]=c[a]}),b(a,d)}})}get ViewController(){return class{constructor(a,b,c){this.view=a,this.views=c,this.viewsName=b;const d=this.views.indexOf(this.view);this.viewName=this.viewsName[d],this.pipeline={},this.preload()}mountGroup(a,b){const c=new b(a,this.viewName);return c}mountGroups(a,b){let c=[];for(let d=0;d{j.style.display="block",j.style["z-index"]="0",f.style.display="none",g.willDisappear(d)};"none"===c.animation?a():(c.Group.style.animation=`${c.animation} ${c.duration} forwards`,c.Group.addEventListener("animationend",()=>a()))}else{j.style.display="block";const a=()=>{j.style["z-index"]="0",f.style.display="none",g.willDisappear(d),j.style.display="block"};"none"===c.animation?a():(f.style.animation=`${c.animation} ${c.duration} forwards`,f.addEventListener("animationend",()=>a()))}}get pipeline(){const a=this.currentView,b=this.viewsName.indexOf(a),c=this.views[b];return c.pipeline}setPipeline(a){const b=this.currentView,c=this.viewsName.indexOf(b),d=this.views[c].pipeline;JSON.stringify(d)!=JSON.stringify(a)&&(this.views[c].pipeline=a,this.views[c].onPipelineChange(a))}pop(){this.performTransition(this.last)}popToRoot(){this.performTransition(this.root)}set(a){this.root=a,this.currentView=a,document.addEventListener("DOMContentLoaded",()=>{for(var b=0;bnew ProType):"undefined"==typeof exports?"undefined"!=typeof global&&(global.ProType=new ProType):("undefined"!=typeof module&&module.exports&&(exports=module.exports=new ProType),exports.ProType=new ProType); -------------------------------------------------------------------------------- /dist/protype.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function() { 4 | function defineProperties(target, props) { 5 | for (var i = 0; i < props.length; i++) { 6 | var descriptor = props[i]; 7 | descriptor.enumerable = descriptor.enumerable || false; 8 | descriptor.configurable = true; 9 | if ("value" in descriptor) descriptor.writable = true; 10 | Object.defineProperty(target, descriptor.key, descriptor); 11 | } 12 | } 13 | return function(Constructor, protoProps, staticProps) { 14 | if (protoProps) defineProperties(Constructor.prototype, protoProps); 15 | if (staticProps) defineProperties(Constructor, staticProps); 16 | return Constructor; 17 | }; 18 | })(); 19 | 20 | function _toConsumableArray(arr) { 21 | if (Array.isArray(arr)) { 22 | for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { 23 | arr2[i] = arr[i]; 24 | } 25 | return arr2; 26 | } else { 27 | return Array.from(arr); 28 | } 29 | } 30 | 31 | function _classCallCheck(instance, Constructor) { 32 | if (!(instance instanceof Constructor)) { 33 | throw new TypeError("Cannot call a class as a function"); 34 | } 35 | } 36 | 37 | /***************************************************** 38 | 39 | ProType 40 | ================================================= 41 | Copyright © Arthur Guiot 2018. All right reserved. 42 | 43 | ******************************************************/ 44 | var ProType = (function() { 45 | _createClass(ProType, [ 46 | { 47 | key: "mountExternalGroup", 48 | value: function mountExternalGroup(el, group) { 49 | var g = new group(el, null); 50 | return g; 51 | } 52 | }, 53 | { 54 | key: "Router", 55 | value: function Router() { 56 | var args = [].concat(Array.prototype.slice.call(arguments)); 57 | var handler = void 0; 58 | var pattern = ""; 59 | switch (args.length) { 60 | case 1: 61 | handler = args[0]; 62 | break; 63 | 64 | default: 65 | pattern = args[0]; 66 | handler = args[1]; 67 | break; 68 | } 69 | var regex = new RegExp(/^:\w*$/); 70 | var routes = {}; 71 | pattern.split("/").forEach(function(el, i) { 72 | if (el.match(regex)) { 73 | routes[i] = el.split(":")[1]; 74 | } 75 | }); 76 | var rep = new RegExp(/\/:\w*(\/|$)/gi); 77 | var match = new RegExp(pattern.replace("/\\w*/")); 78 | document.addEventListener("DOMContentLoaded", function(e) { 79 | var data = {}; 80 | 81 | var url = window.location.href; 82 | data.url = url; 83 | var origin = window.location.origin; 84 | data.origin = origin; 85 | var path = window.location.pathname; 86 | data.path = path; 87 | var hash = window.location.hash; 88 | data.hash = hash; 89 | var search = window.location.search.substring(1).split("&"); 90 | var searchObj = {}; 91 | for (var i = 0; i < search.length; i++) { 92 | var splitted = search[i].split("="); 93 | searchObj[decodeURIComponent(splitted[0])] = decodeURIComponent( 94 | splitted[1] 95 | ); 96 | } 97 | data.search = searchObj; 98 | data.pathValue = path.split("/"); 99 | 100 | if (path.match(match) && pattern != "") { 101 | var components = path.split("/"); 102 | var r = {}; 103 | Object.keys(routes).forEach(function(i) { 104 | r[routes[i]] = components[i]; 105 | }); 106 | handler(data, r); 107 | } 108 | }); 109 | } 110 | }, 111 | { 112 | key: "autoMount", 113 | value: function autoMount() { 114 | var _views; 115 | 116 | var controllers = [].concat(Array.prototype.slice.call(arguments)); 117 | var els = document.querySelectorAll("[protype]"); 118 | (_views = this.views).push.apply(_views, _toConsumableArray(els)); 119 | 120 | if (els.length != controllers.length) { 121 | throw "Controllers and Elements don't match"; 122 | } 123 | 124 | for (var i = 0; i < els.length; i++) { 125 | this.viewsName.push(els[i].getAttribute("protype")); 126 | } 127 | for (var _i = 0; _i < controllers.length; _i++) { 128 | // need to finish register everything 129 | this.controllers.push( 130 | new controllers[_i](els[_i], this.viewsName, this.views) 131 | ); 132 | } 133 | } 134 | }, 135 | { 136 | key: "Component", 137 | get: function get() { 138 | var component = (function() { 139 | function component(el) { 140 | _classCallCheck(this, component); 141 | 142 | this.component = el; 143 | this.state = {}; 144 | 145 | this.render(); 146 | } 147 | 148 | _createClass(component, [ 149 | { 150 | key: "render", 151 | value: function render() { 152 | this.component.innerHTML = ""; 153 | } 154 | } 155 | ]); 156 | 157 | return component; 158 | })(); 159 | 160 | return component; 161 | } 162 | }, 163 | { 164 | key: "Group", 165 | get: function get() { 166 | var group = (function() { 167 | _createClass(group, [ 168 | { 169 | key: "changeHandler", 170 | value: function changeHandler(e) {} 171 | } 172 | ]); 173 | 174 | function group(el, viewName) { 175 | _classCallCheck(this, group); 176 | 177 | this.group = el; 178 | this.viewName = viewName; 179 | this.state = {}; 180 | this.init(); 181 | } 182 | 183 | _createClass(group, [ 184 | { 185 | key: "init", 186 | value: function init() {} 187 | }, 188 | { 189 | key: "mountComponent", 190 | value: function mountComponent(el, obj) { 191 | var object = new obj(el); 192 | return object; 193 | } 194 | }, 195 | { 196 | key: "setState", 197 | value: function setState(data) { 198 | if (JSON.stringify(data) != JSON.stringify(this.state)) { 199 | this.state = data; 200 | 201 | this.changeHandler(this.state); 202 | } 203 | } 204 | } 205 | ]); 206 | 207 | return group; 208 | })(); 209 | 210 | return group; 211 | } 212 | }, 213 | { 214 | key: "ViewController", 215 | get: function get() { 216 | var view = (function() { 217 | function view(el, viewsName, views) { 218 | _classCallCheck(this, view); 219 | 220 | this.view = el; 221 | this.views = views; 222 | this.viewsName = viewsName; 223 | var index = this.views.indexOf(this.view); 224 | this.viewName = this.viewsName[index]; 225 | 226 | this.pipeline = {}; 227 | 228 | this.preload(); 229 | } 230 | 231 | _createClass(view, [ 232 | { 233 | key: "mountGroup", 234 | value: function mountGroup(el, ObjectClass) { 235 | var obj = new ObjectClass(el, this.viewName); 236 | return obj; 237 | } 238 | }, 239 | { 240 | key: "mountGroups", 241 | value: function mountGroups(els, ObjectClass) { 242 | var classes = []; 243 | for (var i = 0; i < els.length; i++) { 244 | classes.push(new ObjectClass(els[i], this.viewName)); 245 | } 246 | return classes; 247 | } 248 | }, 249 | { 250 | key: "onPipelineChange", 251 | value: function onPipelineChange(pipeline) { 252 | // Handle the event 253 | } 254 | }, 255 | { 256 | key: "preload", 257 | value: function preload() { 258 | // Do stuff that doesn't require DOM interaction 259 | } 260 | }, 261 | { 262 | key: "prepareForSegue", 263 | value: function prepareForSegue(nextVC) { 264 | // Do something with nextVC 265 | } 266 | }, 267 | { 268 | key: "willDisappear", 269 | value: function willDisappear() { 270 | // perform UI changes 271 | 272 | var sender = 273 | arguments.length > 0 && arguments[0] !== undefined 274 | ? arguments[0] 275 | : "Main"; 276 | } 277 | }, 278 | { 279 | key: "willShow", 280 | value: function willShow() { 281 | // perform UI changes on load. 282 | 283 | var sender = 284 | arguments.length > 0 && arguments[0] !== undefined 285 | ? arguments[0] 286 | : "Main"; 287 | } 288 | } 289 | ]); 290 | 291 | return view; 292 | })(); 293 | 294 | return view; 295 | } 296 | } 297 | ]); 298 | 299 | function ProType() { 300 | _classCallCheck(this, ProType); 301 | 302 | this.version = "v1.1.0"; // ProType version 303 | 304 | this.views = []; 305 | this.viewsName = []; 306 | 307 | this.controllers = []; 308 | 309 | this.currentView = ""; 310 | this.last = ""; 311 | this.root = ""; 312 | 313 | this.workspace = {}; // share data between views 314 | } 315 | 316 | _createClass(ProType, [ 317 | { 318 | key: "mount", 319 | value: function mount() { 320 | var args = [].concat(Array.prototype.slice.call(arguments)); 321 | for (var i = 0; i < args.length; i++) { 322 | this.views.push(args[i][1]); 323 | this.viewsName.push(args[i][0]); 324 | } 325 | for (var _i2 = 0; _i2 < args.length; _i2++) { 326 | this.controllers.push( 327 | new args[_i2][2](this.views[_i2], this.viewsName, this.views) 328 | ); 329 | } 330 | } 331 | }, 332 | { 333 | key: "performTransition", 334 | value: function performTransition(to, options) { 335 | if (to == this.currentView) { 336 | return; 337 | } 338 | var opt = Object.assign( 339 | { 340 | animation: "none", 341 | duration: "1s", 342 | Group: false 343 | }, 344 | options 345 | ); 346 | 347 | var sender = this.currentView; 348 | var sendIndex = this.viewsName.indexOf(sender); 349 | var senderView = this.views[sendIndex]; 350 | var senderController = this.controllers[sendIndex]; 351 | 352 | var index = this.viewsName.indexOf(to); 353 | var viewBis = this.views[index].cloneNode(true); 354 | this.views[index].parentNode.replaceChild(viewBis, this.views[index]); 355 | 356 | this.views[index] = viewBis; 357 | 358 | var view = this.views[index]; 359 | var controller = this.controllers[index]; 360 | 361 | controller.view = view; 362 | controller.views = this.views; 363 | 364 | this.last = this.currentView; 365 | this.currentView = to; 366 | 367 | view.setAttribute("style", ""); 368 | view.style["z-index"] = "-10"; 369 | 370 | senderController.prepareForSegue(controller); 371 | 372 | controller.willShow(sender); 373 | 374 | if (opt.Group !== false) { 375 | var after = function after() { 376 | view.style.display = "block"; 377 | view.style["z-index"] = "0"; 378 | senderView.style.display = "none"; 379 | senderController.willDisappear(sender); 380 | }; 381 | if (opt.animation !== "none") { 382 | opt.Group.style.animation = 383 | opt.animation + " " + opt.duration + " forwards"; 384 | 385 | opt.Group.addEventListener("animationend", function(e) { 386 | return after(); 387 | }); 388 | } else { 389 | after(); 390 | } 391 | } else { 392 | view.style.display = "block"; 393 | 394 | var _after = function _after() { 395 | view.style["z-index"] = "0"; 396 | senderView.style.display = "none"; 397 | senderController.willDisappear(sender); 398 | view.style.display = "block"; 399 | }; 400 | if (opt.animation !== "none") { 401 | senderView.style.animation = 402 | opt.animation + " " + opt.duration + " forwards"; 403 | 404 | senderView.addEventListener("animationend", function(e) { 405 | return _after(); 406 | }); 407 | } else { 408 | _after(); 409 | } 410 | } 411 | } 412 | }, 413 | { 414 | key: "setPipeline", 415 | value: function setPipeline(data) { 416 | var viewName = this.currentView; 417 | var index = this.viewsName.indexOf(viewName); 418 | var old = this.views[index].pipeline; 419 | if (JSON.stringify(old) != JSON.stringify(data)) { 420 | this.views[index].pipeline = data; 421 | this.views[index].onPipelineChange(data); 422 | } 423 | } 424 | }, 425 | { 426 | key: "pop", 427 | value: function pop() { 428 | this.performTransition(this.last); 429 | } 430 | }, 431 | { 432 | key: "popToRoot", 433 | value: function popToRoot() { 434 | this.performTransition(this.root); 435 | } 436 | }, 437 | { 438 | key: "set", 439 | value: function set(name) { 440 | var _this = this; 441 | 442 | this.root = name; 443 | this.currentView = name; 444 | document.addEventListener("DOMContentLoaded", function(e) { 445 | for (var i = 0; i < _this.views.length; i++) { 446 | if (_this.viewsName[i] == name) { 447 | _this.views[i].style.display = "block"; 448 | _this.controllers[i].willShow(); 449 | } else { 450 | _this.views[i].style.display = "none"; 451 | } 452 | } 453 | }); 454 | } 455 | }, 456 | { 457 | key: "pipeline", 458 | get: function get() { 459 | var viewName = this.currentView; 460 | var index = this.viewsName.indexOf(viewName); 461 | var view = this.views[index]; 462 | return view.pipeline; 463 | } 464 | } 465 | ]); 466 | 467 | return ProType; 468 | })(); 469 | // Browserify / Node.js 470 | 471 | if (typeof define === "function" && define.amd) { 472 | define(function() { 473 | return new ProType(); 474 | }); 475 | // CommonJS and Node.js module support. 476 | } else if (typeof exports !== "undefined") { 477 | // Support Node.js specific `module.exports` (which can be a function) 478 | if (typeof module !== "undefined" && module.exports) { 479 | exports = module.exports = new ProType(); 480 | } 481 | // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) 482 | exports.ProType = new ProType(); 483 | } else if (typeof global !== "undefined") { 484 | global.ProType = new ProType(); 485 | } 486 | -------------------------------------------------------------------------------- /dist/protype.min.js: -------------------------------------------------------------------------------- 1 | "use strict";var _createClass=function(){function i(e,t){for(var n=0;n 2 | 3 | 4 | 5 | 6 | 7 | {{page.title}} 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 | {{content}} 43 | 44 | 45 | 46 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /docs/_sass/styles.scss: -------------------------------------------------------------------------------- 1 | // Your website's CSS 2 | 3 | body { 4 | font-family: -apple-system, BlinkMacSystemFont, "myriad-pro", sans-serif; 5 | font-weight: 400; 6 | padding: 0; 7 | margin: 0; 8 | } 9 | 10 | #three-container { 11 | background: #000; 12 | position: fixed; 13 | top: 0; 14 | z-index: -10; 15 | } 16 | 17 | nav { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | position: absolute; 22 | top: 30px; 23 | margin: 0 auto; 24 | width: 100%; 25 | 26 | a { 27 | font-size: 40px; 28 | font-weight: 400; 29 | color: white; 30 | line-height: 32px; 31 | letter-spacing: 0.002em; 32 | width: 200px; 33 | text-align: center; 34 | text-shadow: 0 0 20px rgba(0, 0, 0, .5); 35 | 36 | svg { 37 | filter: drop-shadow(0, 0, 20px, rgba(0, 0, 0, .5)); 38 | } 39 | } 40 | } 41 | 42 | header { 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: center; 46 | align-items: center; 47 | height: 100vh; 48 | // background: #000; 49 | font-family: -apple-system, BlinkMacSystemFont, "myriad-pro", sans-serif; 50 | font-weight: 400; 51 | text-align: center; 52 | 53 | * { 54 | text-shadow: 0 0 20px rgba(0, 0, 0, .5); 55 | } 56 | 57 | .logo { 58 | background: url("../img/ProType.svg"); 59 | background-size: cover; 60 | width: 200px; 61 | height: 200px; 62 | } 63 | 64 | h1, 65 | h2 { 66 | color: #e7e7e7; 67 | } 68 | 69 | p { 70 | color: white; 71 | } 72 | 73 | .scroll { 74 | font-size: 64px; 75 | color: white; 76 | animation: 2s ease 0s scroll infinite; 77 | position: absolute; 78 | transform: translateY(-50%); 79 | } 80 | } 81 | 82 | h1 { 83 | font-size: 73px; 84 | font-weight: 600; 85 | line-height: 88px; 86 | letter-spacing: -0.002em; 87 | } 88 | 89 | h2 { 90 | margin-top: -24px; 91 | font-size: 44px; 92 | font-weight: 400; 93 | line-height: 53px; 94 | letter-spacing: -0.0275em; 95 | text-align: center; 96 | } 97 | 98 | p { 99 | font-size: 20px; 100 | font-weight: 400; 101 | color: #333333; 102 | line-height: 32px; 103 | letter-spacing: 0.002em; 104 | box-sizing: border-box; 105 | padding: 30px; 106 | } 107 | 108 | a { 109 | color: inherit; 110 | text-decoration: none; 111 | 112 | &:hover { 113 | text-decoration: underline; 114 | } 115 | } 116 | // Article 117 | 118 | .container { 119 | transform: skewY(-10deg); 120 | background: white; 121 | box-sizing: border-box; 122 | margin-top: 150px; 123 | padding: 100px 0; 124 | 125 | article { 126 | transform: skewY(10deg); 127 | width: 960px; 128 | max-width: 80%; 129 | margin: 0 auto; 130 | 131 | &:before { 132 | content: ''; 133 | } 134 | 135 | h1 { 136 | text-align: center; 137 | } 138 | 139 | .install { 140 | .gist-meta { 141 | display: none; 142 | } 143 | 144 | .gist-data, 145 | table.highlight { 146 | background: transparent; 147 | border: none; 148 | } 149 | 150 | .gist-file { 151 | border: none; 152 | } 153 | } 154 | 155 | .demo { 156 | .cp_embed_wrapper { 157 | margin: 10px; 158 | } 159 | } 160 | 161 | .me { 162 | margin-top: 100px; 163 | text-align: center; 164 | 165 | h4 { 166 | font-size: 34px; 167 | font-weight: 600; 168 | line-height: 53px; 169 | letter-spacing: -0.0275em; 170 | } 171 | } 172 | 173 | .seechange { 174 | padding: 20px; 175 | background: #292929; 176 | cursor: pointer; 177 | color: white; 178 | text-align: center; 179 | } 180 | .video { 181 | cursor: pointer; 182 | &:hover { 183 | color: #0366d6; 184 | } 185 | } 186 | } 187 | } 188 | .yt-video { 189 | display: none; 190 | justify-content: center; 191 | align-items: center; 192 | width: 100vw; 193 | height: 100vh; 194 | background: rgba(0, 0, 0, 0.5); 195 | position: fixed; 196 | top: 0; 197 | z-index: 10; 198 | .exit { 199 | position: fixed; 200 | top: 20px; 201 | left: 20px; 202 | color: black; 203 | cursor: pointer; 204 | font-size: 40px; 205 | color: white; 206 | } 207 | iframe { 208 | width: 80vw; 209 | height: 80vh; 210 | } 211 | } 212 | /* TERMINAL - Installation */ 213 | .install { 214 | flex-direction: column; 215 | } 216 | 217 | .window { 218 | width: 80%; 219 | margin: 0 auto 2rem; 220 | box-shadow: 0 0.25rem 0.5rem #292929; 221 | border-radius: 0 0 0.1rem 0.1rem; 222 | color: white; 223 | } 224 | 225 | .bar { 226 | background: #191919; 227 | height: 36px; 228 | border-radius: 0.5rem 0.5rem 0 0; 229 | } 230 | 231 | .btn { 232 | width: 12px; 233 | height: 12px; 234 | border-radius: 100%; 235 | display: block; 236 | 237 | &::after, 238 | &::before { 239 | width: 12px; 240 | height: 12px; 241 | border-radius: 100%; 242 | display: block; 243 | } 244 | background: #f6b73e; 245 | position: relative; 246 | margin-left: 38px; 247 | top: 12px; 248 | 249 | &::after { 250 | content: " "; 251 | position: absolute; 252 | } 253 | 254 | &::before { 255 | content: " "; 256 | position: absolute; 257 | background: #f55551; 258 | margin-left: -20px; 259 | } 260 | 261 | &::after { 262 | background: #32c146; 263 | margin-left: 20px; 264 | } 265 | } 266 | 267 | .body { 268 | height: 5rem; 269 | // background: #232323; 270 | background: #fff; 271 | padding: 18px; 272 | 273 | pre { 274 | margin: 0; 275 | } 276 | 277 | .pulse { 278 | -webkit-animation: pulse 1s ease-in-out infinite; 279 | -moz-animation: pulse 1s ease-in-out infinite; 280 | animation: pulse 1s ease-in-out infinite; 281 | } 282 | } 283 | @keyframes pulse { 284 | 0% { 285 | opacity: 0; 286 | } 287 | 288 | 50% { 289 | opacity: 1; 290 | } 291 | 292 | 100% { 293 | opacity: 0; 294 | } 295 | } 296 | 297 | .command { 298 | color: #32c146; 299 | } 300 | 301 | .comment { 302 | opacity: 0.5; 303 | } 304 | 305 | footer { 306 | display: flex; 307 | justify-content: center; 308 | align-items: center; 309 | flex-direction: column; 310 | height: 300px; 311 | 312 | p { 313 | color: white; 314 | text-shadow: 0 0 20px rgba(0, 0, 0, .5); 315 | 316 | &.small { 317 | font-size: 12px; 318 | opacity: 0.8; 319 | } 320 | } 321 | } 322 | @keyframes scroll { 323 | 0%, 324 | 100% { 325 | bottom: 70px; 326 | } 327 | 328 | 50% { 329 | bottom: 48px; 330 | } 331 | } 332 | @media (max-width: 800px) { 333 | header { 334 | .logo { 335 | width: 100px; 336 | height: 100px; 337 | } 338 | 339 | .scroll { 340 | display: none; 341 | } 342 | } 343 | 344 | h1 { 345 | font-size: 10vh; 346 | text-align: center; 347 | } 348 | 349 | h2 { 350 | font-size: 5vh; 351 | text-align: center; 352 | } 353 | 354 | .container { 355 | article {} 356 | } 357 | } 358 | 359 | .changelog { 360 | width: 100vw; 361 | height: 100vh; 362 | overflow: hidden; 363 | position: fixed; 364 | top: 0; 365 | background: white; 366 | display: none; 367 | .exit { 368 | position: fixed; 369 | top: 20px; 370 | left: 20px; 371 | color: black; 372 | cursor: pointer; 373 | font-size: 40px; 374 | } 375 | 376 | .gh-log { 377 | margin-top: 0; 378 | overflow: auto; 379 | max-width: 840px; 380 | margin: 0 auto; 381 | height: 100vh; 382 | 383 | h1 { 384 | text-align: center; 385 | } 386 | } 387 | } 388 | @keyframes changelog { 389 | from { 390 | transform: translate(0); 391 | } 392 | 393 | to { 394 | transform: translate(-100vw); 395 | } 396 | } 397 | @keyframes main { 398 | from { 399 | transform: translate(0); 400 | } 401 | 402 | to { 403 | transform: translate(100vw); 404 | } 405 | } 406 | -------------------------------------------------------------------------------- /docs/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ 5 | 6 | /* 7 | * What follows is the result of much research on cross-browser styling. 8 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 9 | * Kroc Camen, and the H5BP dev community and team. 10 | */ 11 | 12 | /* ========================================================================== 13 | Base styles: opinionated defaults 14 | ========================================================================== */ 15 | 16 | html { 17 | color: #222; 18 | font-size: 1em; 19 | line-height: 1.4; 20 | } 21 | 22 | /* 23 | * Remove text-shadow in selection highlight: 24 | * https://twitter.com/miketaylr/status/12228805301 25 | * 26 | * These selection rule sets have to be separate. 27 | * Customize the background color to match your design. 28 | */ 29 | 30 | ::-moz-selection { 31 | background: #b3d4fc; 32 | text-shadow: none; 33 | } 34 | 35 | ::selection { 36 | background: #b3d4fc; 37 | text-shadow: none; 38 | } 39 | 40 | /* 41 | * A better looking default horizontal rule 42 | */ 43 | 44 | hr { 45 | display: block; 46 | height: 1px; 47 | border: 0; 48 | border-top: 1.5px solid #ccc; 49 | margin: 1em 0; 50 | padding: 0; 51 | } 52 | 53 | /* 54 | * Remove the gap between audio, canvas, iframes, 55 | * images, videos and the bottom of their containers: 56 | * https://github.com/h5bp/html5-boilerplate/issues/440 57 | */ 58 | 59 | audio, 60 | canvas, 61 | iframe, 62 | img, 63 | svg, 64 | video { 65 | vertical-align: middle; 66 | } 67 | 68 | /* 69 | * Remove default fieldset styles. 70 | */ 71 | 72 | fieldset { 73 | border: 0; 74 | margin: 0; 75 | padding: 0; 76 | } 77 | 78 | /* 79 | * Allow only vertical resizing of textareas. 80 | */ 81 | 82 | textarea { 83 | resize: vertical; 84 | } 85 | 86 | /* ========================================================================== 87 | Browser Upgrade Prompt 88 | ========================================================================== */ 89 | 90 | .browserupgrade { 91 | margin: 0.2em 0; 92 | background: #ccc; 93 | color: #000; 94 | padding: 0.2em 0; 95 | } 96 | 97 | /* ========================================================================== 98 | Author's custom styles 99 | ========================================================================== */ 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | @import "styles.scss"; 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | /* ========================================================================== 118 | Helper classes 119 | ========================================================================== */ 120 | 121 | /* 122 | * Hide visually and from screen readers 123 | */ 124 | 125 | .hidden { 126 | display: none !important; 127 | } 128 | 129 | /* 130 | * Hide only visually, but have it available for screen readers: 131 | * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility 132 | * 133 | * 1. For long content, line feeds are not interpreted as spaces and small width 134 | * causes content to wrap 1 word per line: 135 | * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe 136 | */ 137 | 138 | .visuallyhidden { 139 | border: 0; 140 | clip: rect(0 0 0 0); 141 | height: 1px; 142 | margin: -1px; 143 | overflow: hidden; 144 | padding: 0; 145 | position: absolute; 146 | width: 1px; 147 | white-space: nowrap; /* 1 */ 148 | } 149 | 150 | /* 151 | * Extends the .visuallyhidden class to allow the element 152 | * to be focusable when navigated to via the keyboard: 153 | * https://www.drupal.org/node/897638 154 | */ 155 | 156 | .visuallyhidden.focusable:active, 157 | .visuallyhidden.focusable:focus { 158 | clip: auto; 159 | height: auto; 160 | margin: 0; 161 | overflow: visible; 162 | position: static; 163 | width: auto; 164 | white-space: inherit; 165 | } 166 | 167 | /* 168 | * Hide visually and from screen readers, but maintain layout 169 | */ 170 | 171 | .invisible { 172 | visibility: hidden; 173 | } 174 | 175 | /* 176 | * Clearfix: contain floats 177 | * 178 | * For modern browsers 179 | * 1. The space content is one way to avoid an Opera bug when the 180 | * `contenteditable` attribute is included anywhere else in the document. 181 | * Otherwise it causes space to appear at the top and bottom of elements 182 | * that receive the `clearfix` class. 183 | * 2. The use of `table` rather than `block` is only necessary if using 184 | * `:before` to contain the top-margins of child elements. 185 | */ 186 | 187 | .clearfix:before, 188 | .clearfix:after { 189 | content: " "; /* 1 */ 190 | display: table; /* 2 */ 191 | } 192 | 193 | .clearfix:after { 194 | clear: both; 195 | } 196 | 197 | /* ========================================================================== 198 | EXAMPLE Media Queries for Responsive Design. 199 | These examples override the primary ('mobile first') styles. 200 | Modify as content requires. 201 | ========================================================================== */ 202 | 203 | @media only screen and (min-width: 35em) { 204 | /* Style adjustments for viewports that meet the condition */ 205 | } 206 | 207 | @media print, 208 | (-webkit-min-device-pixel-ratio: 1.25), 209 | (min-resolution: 1.25dppx), 210 | (min-resolution: 120dpi) { 211 | /* Style adjustments for high resolution devices */ 212 | } 213 | 214 | /* ========================================================================== 215 | Print styles. 216 | Inlined to avoid the additional HTTP request: 217 | http://www.phpied.com/delay-loading-your-print-css/ 218 | ========================================================================== */ 219 | 220 | @media print { 221 | *, 222 | *:before, 223 | *:after, 224 | p:first-letter, 225 | div:first-letter, 226 | blockquote:first-letter, 227 | li:first-letter, 228 | p:first-line, 229 | div:first-line, 230 | blockquote:first-line, 231 | li:first-line { 232 | background: transparent !important; 233 | color: #000 !important; /* Black prints faster: 234 | http://www.sanbeiji.com/archives/953 */ 235 | box-shadow: none !important; 236 | text-shadow: none !important; 237 | } 238 | 239 | a, 240 | a:visited { 241 | text-decoration: underline; 242 | } 243 | 244 | a[href]:after { 245 | content: " (" attr(href) ")"; 246 | } 247 | 248 | abbr[title]:after { 249 | content: " (" attr(title) ")"; 250 | } 251 | 252 | /* 253 | * Don't show links that are fragment identifiers, 254 | * or use the `javascript:` pseudo protocol 255 | */ 256 | 257 | a[href^="#"]:after, 258 | a[href^="javascript:"]:after { 259 | content: ""; 260 | } 261 | 262 | pre { 263 | white-space: pre-wrap !important; 264 | } 265 | pre, 266 | blockquote { 267 | border: 1px solid #999; 268 | page-break-inside: avoid; 269 | } 270 | 271 | /* 272 | * Printing Tables: 273 | * http://css-discuss.incutio.com/wiki/Printing_Tables 274 | */ 275 | 276 | thead { 277 | display: table-header-group; 278 | } 279 | 280 | tr, 281 | img { 282 | page-break-inside: avoid; 283 | } 284 | 285 | p, 286 | h2, 287 | h3 { 288 | orphans: 3; 289 | widows: 3; 290 | } 291 | 292 | h2, 293 | h3 { 294 | page-break-after: avoid; 295 | } 296 | } 297 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguiot/ProType/a7b2dd2f11301b01a30f126fb40e94883b9f98ee/docs/favicon.ico -------------------------------------------------------------------------------- /docs/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguiot/ProType/a7b2dd2f11301b01a30f126fb40e94883b9f98ee/docs/icon.png -------------------------------------------------------------------------------- /docs/img/ProType-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguiot/ProType/a7b2dd2f11301b01a30f126fb40e94883b9f98ee/docs/img/ProType-banner.png -------------------------------------------------------------------------------- /docs/img/ProType.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguiot/ProType/a7b2dd2f11301b01a30f126fb40e94883b9f98ee/docs/img/ProType.png -------------------------------------------------------------------------------- /docs/img/ProType.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: html 3 | title: ProType 4 | description: The next generation JavaScript framework. 5 | --- 6 | 7 |
8 |
9 | 15 |
16 | 19 |

20 | ProType 21 |

22 |

23 | The next generation JavaScript framework. 24 |

25 | 26 |
27 |
28 |
29 | 30 |
31 | 32 |
33 |
34 |
35 |
36 |

37 | 38 | Watch the video 39 |

40 |
41 |
42 |
43 |

44 | What is ProType? 45 |

46 |

47 | ProType is JavaScript front end (browser) framework. It is object oriented only and help you separate tasks and views while staying productive. 48 |

49 |
50 |
51 |

52 | Why ProType? 53 |

54 |

55 | Because I couldn't find a framework that could use classes in the most effective way. I wanted something that could resemble other language, such as Swift (and Cocoa) or Dart (with Flutter). ProType will help you build big UIs, such as web apps or apps 56 | with other frameworks like Cordova or Electron. 57 |
58 |
59 | P.S. The word ProType comes from Prototype, a property used in JavaScript to add elements to a class 60 |

61 |
62 |
63 |

How it work?

64 |

65 | ProType follows a set of rules: 66 |

67 |

68 | Object Oriented 69 |

70 |

71 | ProType is a Object Oriented based framework, which means that everything is defined in terms of class. 72 |

73 |

74 | Modern 75 |

76 |

77 | The code that is written with ProType is meant to be wrote in the latest version of ECMAScript (JavaScript). I use the latest technologie when developping ProType, and I encourage you to do the same. But that doesn't mean your website won't work with 78 | older browsers, our friends at Babel are helping us implementing ProType and your code for every browsers using their tools. 79 |

80 |

81 | Productive 82 |

83 |

84 | ProType code might seems a little bit longer to write for very small projects, but it was designed to fit very large projects. And you will be much more productive using ProType for large projects than other JavaScript frameworks such as DisplayJS, jQuery 85 | or even Vue. 86 |

87 |

88 | Reactive 89 |

90 |

91 | ProType will react to user interaction or events based on your code. This will help you show to your users what they want in milliseconds. 92 |

93 |

94 | Safe 95 |

96 |

97 | ProType is safe and non-destructive. You can use other framework, library or piece of code in addition to ProType without breaking anything. 98 |

99 |

100 | Fast 101 |

102 |

103 | ProType is fast, very fast. You will be able to optimize your website / app very easily and quickly. ProType was designed to run as fast or even faster than vanilla JavaScript. 104 |

105 |
106 |
107 |

Install, build, deploy.

108 |
109 |
110 |
111 |
112 |
113 | 114 |
115 |
116 |
117 |
118 |

Changelog

119 |
120 | See the changelog 121 |
122 |
123 |
124 |

Demos

125 |

See the Pen ProType - Name by Arthur Guiot (@arguiot) on CodePen.

126 |

See the Pen ProType - Clock by Arthur Guiot (@arguiot) on CodePen.

127 | 128 |
129 |
130 |
131 |

Made with ❤️ by Arthur Guiot

132 |

133 | I created my Patreon page not that long ago, check it out: 134 | Become a Patron! 135 | 136 |

137 |
138 |
139 | 140 |
141 | 142 |
143 |

Copyright Arthur Guiot

144 |

The WebGL animation was made by Szenia Zadvornykh

145 |
146 |
147 |
148 |
149 | 150 |
151 |
152 | 153 |
154 |
155 | -------------------------------------------------------------------------------- /docs/js/functions.js: -------------------------------------------------------------------------------- 1 | const P = new ProType(); 2 | const glot = new Glottologist(); 3 | 4 | class Video extends P.Group { 5 | init() { 6 | this.state = { 7 | video: false 8 | } 9 | document.querySelector(".video").addEventListener("click", e => { 10 | this.setState({ 11 | video: !this.state.video 12 | }) 13 | }) 14 | this.group.addEventListener("click", e => { 15 | this.setState({ 16 | video: !this.state.video 17 | }) 18 | }) 19 | } 20 | changeHandler() { 21 | let display = "none" 22 | if (this.state.video) { 23 | display = "flex" 24 | } 25 | this.group.style.display = display 26 | } 27 | } 28 | 29 | class MainViewController extends P.ViewController { 30 | willShow() { 31 | glot.import("lang.json").then(() => { 32 | glot.render() 33 | 34 | this.year = this.view.querySelector("span.year") 35 | this.year.innerHTML = new Date().getFullYear() 36 | lunarIcons.replace() 37 | 38 | let span = this.view.querySelector("span.rules") 39 | let parent = span.parentNode.parentNode 40 | const n = parent.querySelectorAll("h2").length 41 | span.innerHTML = n 42 | }) 43 | this.mountGroup( 44 | this.view.querySelector(".yt-video"), 45 | Video 46 | ) 47 | this.view.querySelector(".seechange").addEventListener("click", e => { 48 | P.performTransition("changelog", { 49 | animation: "changelog" 50 | }) 51 | }) 52 | } 53 | } 54 | 55 | class Changelog extends P.ViewController { 56 | willShow() { 57 | this.view.querySelector(".exit").addEventListener("click", e => { 58 | P.performTransition("main", { 59 | animation: "main" 60 | }) 61 | }) 62 | this.getGH() 63 | } 64 | 65 | getGH() { 66 | fetch("https://api.github.com/repos/arguiot/ProType/releases") 67 | .then(data => data.json()) 68 | .then(data => { 69 | this.display(data) 70 | }) 71 | } 72 | display(data) { 73 | let container = this.view.querySelector(".gh-log") 74 | if (data.length == 0) { 75 | container.innerHTML = "Nothing to display." 76 | } 77 | for (var i = 0; i < data.length; i++) { 78 | const el = document.createElement("a") 79 | el.href = data[i].url 80 | el.innerHTML = ` 81 |

${data[i].tag_name}

82 |

${data[i].name}

83 |

84 | ${marked(data[i].body)} 85 |

86 | ` 87 | container.appendChild(el) 88 | } 89 | } 90 | } 91 | 92 | P.autoMount(MainViewController, Changelog) 93 | 94 | P.set("main") 95 | -------------------------------------------------------------------------------- /docs/js/webgl.js: -------------------------------------------------------------------------------- 1 | const COLORS = { 2 | red: 0xf54843, 3 | green: 0x43f565, 4 | yellow: 0xeff543, 5 | }; 6 | 7 | const SCENE_CONFIG = { 8 | pathRadius: 4, 9 | pathAnimationDuration: 20, 10 | cameraSpeed: 14.079549454417457, 11 | }; 12 | 13 | const NEXT_PATH_MATRIX = new THREE.Matrix4().multiplyMatrices( 14 | new THREE.Matrix4().makeTranslation(0, 0, -8), 15 | new THREE.Matrix4().makeScale(-1, -1, 1) 16 | ); 17 | 18 | let root; 19 | let tubes = []; 20 | let cameraTween; 21 | 22 | window.onload = () => { 23 | root = new THREERoot({ 24 | createCameraControls: false, 25 | antialias: true, //(window.devicePixelRatio === 1), 26 | fov: 80, 27 | zNear: 0.001, 28 | zFar: 2000, 29 | }); 30 | 31 | root.renderer.setClearColor(new THREE.Color().setHSL(0, 0, 0.05)); 32 | root.camera.position.set(0, 0.05, 1); 33 | 34 | createTubes(); 35 | beginTubesSequence(); 36 | } 37 | 38 | // METHODS 39 | 40 | function createTubes() { 41 | const matrix = new THREE.Matrix4(); 42 | 43 | matrix.makeRotationZ(Math.PI * 0.00); 44 | tubes[0] = createPathMesh(matrix); 45 | 46 | matrix.makeRotationZ(Math.PI * 0.66); 47 | tubes[1] = createPathMesh(matrix); 48 | 49 | matrix.makeRotationZ(Math.PI * 1.32); 50 | tubes[2] = createPathMesh(matrix); 51 | } 52 | 53 | function beginTubesSequence() { 54 | // BLOOM 55 | 56 | const strength = 1.25; // 0 - x 57 | const radius = 1.0; // 0 - 1 58 | const threshold = 0.5; // 0 - 1 59 | const bloomPass = new THREE.UnrealBloomPass( 60 | new THREE.Vector2(window.innerWidth, window.innerHeight), 61 | strength, 62 | radius, 63 | threshold 64 | ); 65 | const copyPass = new THREE.ShaderPass(THREE.CopyShader); 66 | 67 | root.initPostProcessing([ 68 | bloomPass, 69 | copyPass 70 | ]); 71 | 72 | // LIGHT 73 | 74 | light = new THREE.DirectionalLight(COLORS.red, 1); 75 | light.position.set(1, 0, 0); 76 | root.add(light); 77 | 78 | light = new THREE.DirectionalLight(COLORS.green, 1); 79 | light.position.set(-1, 0, 0); 80 | root.add(light); 81 | 82 | light = new THREE.DirectionalLight(COLORS.red, 1); 83 | light.position.set(0, 0, 1); 84 | root.add(light); 85 | 86 | // CAMERA ROTATION 87 | 88 | let cameraPanRange = 1.0, 89 | cameraYawRange = cameraPanRange * 1.125; 90 | 91 | window.addEventListener('mousemove', (e) => { 92 | const nx = e.clientX / window.innerWidth * 2 - 1; 93 | const ny = -e.clientY / window.innerHeight * 2 + 1; 94 | const ry = -THREE.Math.mapLinear(nx, -1, 1, cameraPanRange * -0.5, cameraPanRange * 0.5); 95 | const rx = THREE.Math.mapLinear(ny, -1, 1, cameraYawRange * -0.5, cameraYawRange * 0.5); 96 | 97 | TweenMax.to(root.camera.rotation, 1, { 98 | x: rx, 99 | y: ry, 100 | ease: Power2.easeOut, 101 | }); 102 | }); 103 | 104 | // CAMERA MOVEMENT 105 | 106 | const tweenCamera = () => { 107 | cameraTween = TweenMax.to(root.camera.position, SCENE_CONFIG.cameraSpeed, { 108 | z: `-=${SCENE_CONFIG.pathRadius * 2}`, 109 | ease: Power0.easeIn, 110 | onComplete: tweenCamera 111 | }); 112 | }; 113 | 114 | tweenCamera(); 115 | 116 | cameraTween.timeScale(0); 117 | 118 | const proxy = { 119 | rx: 0, 120 | ry: 0, 121 | rz: 0, 122 | cz: 0, 123 | }; 124 | const camTL = new TimelineMax(); 125 | 126 | camTL.to(proxy, 4, { 127 | rz: 1, 128 | cz: 1, 129 | ease: Power2.easeIn, 130 | onUpdate: () => { 131 | cameraTween.timeScale(proxy.cz); 132 | } 133 | }, 0); 134 | 135 | root.addUpdateCallback(() => { 136 | root.scene.rotation.z -= proxy.rz * 0.003; 137 | }); 138 | 139 | // WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 140 | 141 | tubes.forEach((tube) => { 142 | root.add(tube); 143 | advanceTube(tube); 144 | }); 145 | } 146 | 147 | function advanceTube(tube) { 148 | const tl = new TimelineMax(); 149 | const firstCompleteTime = tube.geometry.firstCompleteTime * tube.__config.duration; 150 | 151 | // if (firstCompleteTime > SCENE_CONFIG.cameraSpeed) { 152 | // console.log('>>>>>>', firstCompleteTime, SCENE_CONFIG.cameraSpeed); 153 | // } 154 | 155 | tl.add(tube.animate(tube.__config.duration, { 156 | ease: Power0.easeInOut 157 | })); 158 | tl.add(() => { 159 | const transformMatrix = new THREE.Matrix4().multiplyMatrices( 160 | tube.__pathMatrix, 161 | NEXT_PATH_MATRIX 162 | ); 163 | 164 | const nextTube = createPathMesh(transformMatrix, { 165 | tubeCount: tube.__config.tubeCount, 166 | tubeArcLength: tube.__config.tubeArcLength, 167 | tubeStagger: tube.__config.tubeStagger 168 | }); 169 | 170 | root.add(nextTube); 171 | advanceTube(nextTube); 172 | 173 | }, firstCompleteTime); 174 | 175 | tl.add(() => { 176 | root.remove(tube); 177 | tube.geometry.dispose(); 178 | tube.material.dispose(); 179 | }); 180 | } 181 | 182 | function createPath() { 183 | let length = 16; 184 | let path = []; 185 | let point = new THREE.Vector3(); 186 | 187 | for (let i = 0; i < length; i++) { 188 | let angle = i / (length - 1) * Math.PI - Math.PI * 1.5; 189 | let radius = SCENE_CONFIG.pathRadius; 190 | 191 | let scaleX = THREE.Math.mapLinear(i, 0, length - 1, 0.75, 0.25) * THREE.Math.randFloat(0.6, 1.0); 192 | 193 | point.x = Math.cos(angle) * radius * scaleX; 194 | point.z = Math.sin(angle) * radius - radius; 195 | point.y = (i === 0 || i === length - 1) ? 0 : THREE.Math.randFloatSpread(2) * (i / length); 196 | // point.y = 0; 197 | 198 | let twistOffset = (i === 0 || i === length - 1) ? 0 : THREE.Math.randFloatSpread(2); 199 | // let twistOffset = 0; 200 | 201 | path.push(new THREE.Vector4(point.x, point.y, point.z, twistOffset)); 202 | } 203 | 204 | return path; 205 | } 206 | 207 | function createPathMesh(matrix, cfg) { 208 | const config = Object.assign({}, 209 | cfg, { 210 | tubeSegments: 128, 211 | // tubeCount: THREE.Math.randInt(32, 48), 212 | // tubeArcLength: THREE.Math.randFloat(0.15, 0.3), 213 | // tubeStagger: THREE.Math.randFloat(0.0002, 0.002), 214 | 215 | tubeCount: 32, 216 | tubeArcLength: 0.25, 217 | tubeStagger: 0.001, 218 | 219 | tubeRadius: THREE.Math.randFloat(0.005, 0.01), 220 | twistDistance: THREE.Math.randFloat(0.1, 1.5), 221 | twistAngle: Math.PI * THREE.Math.randFloat(2, 16), 222 | duration: SCENE_CONFIG.pathAnimationDuration, 223 | 224 | path: createPath() 225 | } 226 | ); 227 | 228 | const mesh = new Tubes(config); 229 | 230 | mesh.applyMatrix(matrix); 231 | mesh.__pathMatrix = matrix.clone(); 232 | mesh.__config = config; 233 | 234 | return mesh; 235 | } 236 | 237 | // CLASSES 238 | 239 | function Tubes(config) { 240 | const geometry = new TubesGeometry(config); 241 | 242 | const material = new THREE.BAS.StandardAnimationMaterial({ 243 | shading: THREE.FlatShading, 244 | defines: { 245 | ROBUST: false, 246 | TUBE_LENGTH_SEGMENTS: config.tubeSegments.toFixed(1), 247 | PATH_LENGTH: config.path.length, 248 | PATH_MAX: (config.path.length - 1).toFixed(1) 249 | }, 250 | 251 | uniforms: { 252 | thickness: { 253 | value: config.tubeRadius 254 | }, 255 | uTwist: { 256 | value: new THREE.Vector2( 257 | config.twistDistance, 258 | config.twistAngle 259 | ) 260 | }, 261 | time: { 262 | value: 0.0 263 | }, 264 | uPath: { 265 | value: config.path 266 | } 267 | }, 268 | 269 | uniformValues: { 270 | diffuse: new THREE.Color(COLORS.yellow), 271 | roughness: .75, 272 | metalness: .0 273 | }, 274 | 275 | vertexParameters: [ 276 | THREE.BAS.ShaderChunk['catmull_rom_spline'], 277 | 278 | ` 279 | attribute vec2 aAngle; 280 | attribute float aTwistOffset; 281 | 282 | uniform float thickness; 283 | uniform float time; 284 | uniform vec2 uTwist; 285 | uniform vec4 uPath[PATH_LENGTH]; 286 | 287 | varying float vProgress; 288 | 289 | // Some constants for the robust version 290 | #ifdef ROBUST 291 | const float MAX_NUMBER = 1.79769313e+32; 292 | #endif 293 | 294 | vec3 sample(float t) { 295 | 296 | float pathProgress = t * PATH_MAX; 297 | 298 | ivec4 indices = getCatmullRomSplineIndices(PATH_MAX, pathProgress); 299 | 300 | vec4 p0 = uPath[indices[0]]; 301 | vec4 p1 = uPath[indices[1]]; 302 | vec4 p2 = uPath[indices[2]]; 303 | vec4 p3 = uPath[indices[3]]; 304 | 305 | float angle = t * uTwist.y; 306 | float ca = cos(angle); 307 | float sa = sin(angle); 308 | vec3 offset = vec3(ca, sa * ca, sa) * aTwistOffset * uTwist.x; 309 | 310 | return catmullRomSpline( 311 | p0.xyz + offset * p0.w, 312 | p1.xyz + offset * p1.w, 313 | p2.xyz + offset * p2.w, 314 | p3.xyz + offset * p3.w, 315 | fract(pathProgress) 316 | ); 317 | } 318 | 319 | #ifdef ROBUST 320 | // ------ 321 | // Robust handling of Frenet-Serret frames with Parallel Transport 322 | // ------ 323 | vec3 getTangent (vec3 a, vec3 b) { 324 | return normalize(b - a); 325 | } 326 | 327 | void rotateByAxisAngle (inout vec3 normal, vec3 axis, float angle) { 328 | // http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm 329 | // assumes axis is normalized 330 | float halfAngle = angle / 2.0; 331 | float s = sin(halfAngle); 332 | vec4 quat = vec4(axis * s, cos(halfAngle)); 333 | normal = normal + 2.0 * cross(quat.xyz, cross(quat.xyz, normal) + quat.w * normal); 334 | } 335 | 336 | void createTube (float t, vec2 volume, out vec3 outPosition) { 337 | // Reference: 338 | // https://github.com/mrdoob/three.js/blob/b07565918713771e77b8701105f2645b1e5009a7/src/extras/core/Curve.js#L268 339 | 340 | // find first tangent 341 | vec3 point0 = sample(0.0); 342 | vec3 point1 = sample(1.0 / TUBE_LENGTH_SEGMENTS); 343 | 344 | vec3 lastTangent = getTangent(point0, point1); 345 | vec3 absTangent = abs(lastTangent); 346 | vec3 tmpNormal = vec3(1.0, 0.0, 0.0); 347 | vec3 tmpVec = normalize(cross(lastTangent, tmpNormal)); 348 | vec3 lastNormal = cross(lastTangent, tmpVec); 349 | vec3 lastBinormal = cross(lastTangent, lastNormal); 350 | vec3 lastPoint = point0; 351 | 352 | vec3 normal; 353 | vec3 tangent; 354 | vec3 binormal; 355 | vec3 point; 356 | float maxLen = (TUBE_LENGTH_SEGMENTS - 1.0); 357 | float epSq = EPSILON * EPSILON; 358 | for (float i = 1.0; i < TUBE_LENGTH_SEGMENTS; i += 1.0) { 359 | float u = i / maxLen; 360 | // could avoid additional sample here at expense of ternary 361 | // point = i == 1.0 ? point1 : sample(u); 362 | point = sample(u); 363 | tangent = getTangent(lastPoint, point); 364 | normal = lastNormal; 365 | binormal = lastBinormal; 366 | 367 | tmpVec = cross(lastTangent, tangent); 368 | if ((tmpVec.x * tmpVec.x + tmpVec.y * tmpVec.y + tmpVec.z * tmpVec.z) > epSq) { 369 | tmpVec = normalize(tmpVec); 370 | float tangentDot = dot(lastTangent, tangent); 371 | float theta = acos(clamp(tangentDot, -1.0, 1.0)); // clamp for floating pt errors 372 | rotateByAxisAngle(normal, tmpVec, theta); 373 | } 374 | 375 | binormal = cross(tangent, normal); 376 | if (u >= t) break; 377 | 378 | lastPoint = point; 379 | lastTangent = tangent; 380 | lastNormal = normal; 381 | lastBinormal = binormal; 382 | } 383 | 384 | // extrude outward to create a tube 385 | float circX = aAngle.x; 386 | float circY = aAngle.y; 387 | 388 | // compute the TBN matrix 389 | vec3 T = tangent; 390 | vec3 B = binormal; 391 | vec3 N = -normal; 392 | 393 | // extrude the path & create a new normal 394 | outPosition.xyz = point + B * volume.x * circX + N * volume.y * circY; 395 | } 396 | #else 397 | 398 | 399 | // ------ 400 | // Fast version; computes the local Frenet-Serret frame 401 | // ------ 402 | void createTube (float t, vec2 volume, out vec3 offset) { 403 | // find next sample along curve 404 | // float nextT = t + (1.0 / TUBE_LENGTH_SEGMENTS) * fract(time * TUBE_LENGTH_SEGMENTS); 405 | float nextT = t + (1.0 / TUBE_LENGTH_SEGMENTS); 406 | 407 | // sample the curve in two places 408 | vec3 current = sample(t); 409 | vec3 next = sample(nextT); 410 | 411 | // compute the TBN matrix 412 | vec3 T = normalize(next - current); 413 | vec3 B = normalize(cross(T, next + current)); 414 | vec3 N = -normalize(cross(B, T)); 415 | 416 | // extrude outward to create a tube 417 | float circX = aAngle.x; 418 | float circY = aAngle.y; 419 | 420 | float a = length(cross(next, current)); 421 | 422 | volume *= 0.5 + a * a * 0.5; 423 | 424 | // compute position and normal 425 | offset.xyz = current + B * volume.x * circX + N * volume.y * circY; 426 | } 427 | #endif 428 | ` 429 | ], 430 | 431 | fragmentParameters: [ 432 | `varying float vProgress;` 433 | ], 434 | 435 | vertexPosition: [ 436 | ` 437 | float t = position.x; 438 | 439 | t = clamp(t + time, 0.0, 1.0); 440 | 441 | vec2 volume = vec2(thickness); 442 | vec3 tTransformed; 443 | 444 | createTube(t, volume, tTransformed); 445 | transformed = tTransformed; 446 | 447 | vProgress = t; 448 | ` 449 | ], 450 | 451 | fragmentInit: [ 452 | `if (vProgress == 0.0 || vProgress == 1.0) discard;` 453 | ] 454 | }); 455 | 456 | THREE.Mesh.call(this, geometry, material); 457 | 458 | this.frustumCulled = false; 459 | } 460 | Tubes.prototype = Object.create(THREE.Mesh.prototype); 461 | Tubes.prototype.constructor = Tubes; 462 | 463 | Object.defineProperty(Tubes.prototype, 'time', { 464 | get: function() { 465 | return this.material.uniforms['time'].value; 466 | }, 467 | set: function(v) { 468 | this.material.uniforms['time'].value = v; 469 | } 470 | }); 471 | 472 | Tubes.prototype.animate = function(duration, options) { 473 | options = options || {}; 474 | options.time = this.geometry.totalDuration; 475 | 476 | return TweenMax.fromTo(this, duration, { 477 | time: 0.0 478 | }, options); 479 | }; 480 | 481 | function TubesGeometry(config) { 482 | const radius = 1; 483 | const length = config.tubeArcLength; 484 | const sides = 6; 485 | const segments = config.tubeSegments; 486 | const openEnded = false; 487 | const prefab = new THREE.CylinderGeometry(radius, radius, length, sides, segments, openEnded); 488 | 489 | prefab.rotateZ(Math.PI / 2); 490 | 491 | this.tubeLength = length; 492 | this.tubeStagger = config.tubeStagger; 493 | 494 | THREE.BAS.PrefabBufferGeometry.call(this, prefab, config.tubeCount); 495 | 496 | let aAngle = this.createAttribute('aAngle', 2); 497 | let tmp = new THREE.Vector2(); 498 | 499 | for (let i = 0, offset = 0; i < config.tubeCount; i++) { 500 | for (let j = 0; j < prefab.vertices.length; j++) { 501 | let v = prefab.vertices[j]; 502 | 503 | tmp.set(v.y, v.z).normalize(); 504 | 505 | let angle = Math.atan2(tmp.y, tmp.x); 506 | 507 | aAngle.array[offset++] = Math.cos(angle); // angle x 508 | aAngle.array[offset++] = Math.sin(angle); // angle y 509 | } 510 | } 511 | 512 | // const offset = Math.random() * 2 - 1; 513 | const offset = 0; 514 | 515 | this.createAttribute('aTwistOffset', 1, (data, i, count) => { 516 | data[0] = THREE.Math.mapLinear(i, 0, count - 1, -1, 1) + offset; 517 | }); 518 | } 519 | TubesGeometry.prototype = Object.create(THREE.BAS.PrefabBufferGeometry.prototype); 520 | TubesGeometry.prototype.constructor = TubesGeometry; 521 | 522 | TubesGeometry.prototype.bufferPositions = function() { 523 | let positionBuffer = this.createAttribute('position', 3).array; 524 | 525 | let matrix = new THREE.Matrix4(); 526 | let p = new THREE.Vector3(); 527 | 528 | let tubeLength, tubeTimeOffset; 529 | 530 | for (let i = 0, offset = 0; i < this.prefabCount; i++) { 531 | tubeLength = this.tubeLength + i * this.tubeStagger; 532 | tubeTimeOffset = i * this.tubeStagger; 533 | 534 | matrix.identity(); 535 | matrix.makeTranslation(tubeLength * -0.5 - tubeTimeOffset, 0.0, 0.0); 536 | 537 | for (let j = 0; j < this.prefabVertexCount; j++, offset += 3) { 538 | let prefabVertex = this.prefabGeometry.vertices[j]; 539 | 540 | p.copy(prefabVertex); 541 | p.applyMatrix4(matrix); 542 | 543 | positionBuffer[offset] = p.x; 544 | positionBuffer[offset + 1] = p.y; 545 | positionBuffer[offset + 2] = p.z; 546 | } 547 | } 548 | 549 | // todo simplify this.. 550 | this.totalDuration = 1.0 - (tubeLength * -0.5 - tubeTimeOffset) + this.tubeLength - this.tubeStagger; 551 | this.firstCompleteTime = 1.0 / this.totalDuration; 552 | }; 553 | 554 | function LineHelper(points, params) { 555 | let g = new THREE.Geometry(); 556 | let m = new THREE.LineBasicMaterial(params); 557 | 558 | g.vertices = points; 559 | 560 | THREE.Line.call(this, g, m); 561 | } 562 | 563 | LineHelper.prototype = Object.create(THREE.Line.prototype); 564 | LineHelper.prototype.constructor = LineHelper; 565 | 566 | 567 | function THREERoot(params) { 568 | // defaults 569 | params = Object.assign({ 570 | container: '#three-container', 571 | fov: 60, 572 | zNear: 1, 573 | zFar: 10000, 574 | createCameraControls: true, 575 | autoStart: true, 576 | pixelRatio: window.devicePixelRatio, 577 | antialias: (window.devicePixelRatio === 1), 578 | alpha: false 579 | }, params); 580 | 581 | // maps and arrays 582 | this.updateCallbacks = []; 583 | this.resizeCallbacks = []; 584 | this.objects = {}; 585 | 586 | // renderer 587 | this.renderer = new THREE.WebGLRenderer({ 588 | antialias: params.antialias, 589 | alpha: params.alpha 590 | }); 591 | this.renderer.setPixelRatio(params.pixelRatio); 592 | 593 | // container 594 | this.container = (typeof params.container === 'string') ? document.querySelector(params.container) : params.container; 595 | this.container.appendChild(this.renderer.domElement); 596 | 597 | // camera 598 | this.camera = new THREE.PerspectiveCamera( 599 | params.fov, 600 | window.innerWidth / window.innerHeight, 601 | params.zNear, 602 | params.zFar 603 | ); 604 | 605 | // scene 606 | this.scene = new THREE.Scene(); 607 | 608 | // resize handling 609 | this.resize = this.resize.bind(this); 610 | this.resize(); 611 | window.addEventListener('resize', this.resize, false); 612 | 613 | // tick / update / render 614 | this.tick = this.tick.bind(this); 615 | params.autoStart && this.tick(); 616 | 617 | // optional camera controls 618 | params.createCameraControls && this.createOrbitControls(); 619 | } 620 | THREERoot.prototype = { 621 | createOrbitControls: function() { 622 | this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); 623 | this.addUpdateCallback(this.controls.update.bind(this.controls)); 624 | }, 625 | start: function() { 626 | this.tick(); 627 | }, 628 | addUpdateCallback: function(callback) { 629 | this.updateCallbacks.push(callback); 630 | }, 631 | addResizeCallback: function(callback) { 632 | this.resizeCallbacks.push(callback); 633 | }, 634 | add: function(object, key) { 635 | key && (this.objects[key] = object); 636 | this.scene.add(object); 637 | }, 638 | addTo: function(object, parentKey, key) { 639 | key && (this.objects[key] = object); 640 | this.get(parentKey).add(object); 641 | }, 642 | get: function(key) { 643 | return this.objects[key]; 644 | }, 645 | remove: function(o) { 646 | var object; 647 | 648 | if (typeof o === 'string') { 649 | object = this.objects[o]; 650 | } else { 651 | object = o; 652 | } 653 | 654 | if (object) { 655 | object.parent.remove(object); 656 | delete this.objects[o]; 657 | } 658 | }, 659 | tick: function() { 660 | this.interval = setInterval(() => { 661 | this.update(); 662 | this.render(); 663 | }, 1000 / 24) 664 | }, 665 | update: function() { 666 | this.updateCallbacks.forEach(function(callback) { 667 | callback() 668 | }); 669 | }, 670 | render: function() { 671 | this.renderer.render(this.scene, this.camera); 672 | }, 673 | resize: function() { 674 | var width = window.innerWidth; 675 | var height = window.innerHeight; 676 | 677 | this.camera.aspect = width / height; 678 | this.camera.updateProjectionMatrix(); 679 | 680 | this.renderer.setSize(width, height); 681 | this.resizeCallbacks.forEach(function(callback) { 682 | callback() 683 | }); 684 | }, 685 | initPostProcessing: function(passes) { 686 | var size = this.renderer.getSize(); 687 | var pixelRatio = this.renderer.getPixelRatio(); 688 | size.width *= pixelRatio; 689 | size.height *= pixelRatio; 690 | 691 | var composer = this.composer = new THREE.EffectComposer(this.renderer, new THREE.WebGLRenderTarget(size.width, size.height, { 692 | minFilter: THREE.LinearFilter, 693 | magFilter: THREE.LinearFilter, 694 | format: THREE.RGBAFormat, 695 | stencilBuffer: false 696 | })); 697 | 698 | var renderPass = new THREE.RenderPass(this.scene, this.camera); 699 | this.composer.addPass(renderPass); 700 | 701 | for (var i = 0; i < passes.length; i++) { 702 | var pass = passes[i]; 703 | pass.renderToScreen = (i === passes.length - 1); 704 | this.composer.addPass(pass); 705 | } 706 | 707 | this.renderer.autoClear = false; 708 | this.render = function() { 709 | this.renderer.clear(); 710 | this.composer.render(); 711 | }.bind(this); 712 | 713 | this.addResizeCallback(function() { 714 | var width = window.innerWidth; 715 | var height = window.innerHeight; 716 | 717 | composer.setSize(width * pixelRatio, height * pixelRatio); 718 | }.bind(this)); 719 | } 720 | }; 721 | -------------------------------------------------------------------------------- /docs/lang.json: -------------------------------------------------------------------------------- 1 | { 2 | "slogan": { 3 | "en": "The next generation JavaScript framework.", 4 | "fr": "Le framework JavaScript de prochaine génération." 5 | }, 6 | "video": { 7 | "en": " Watch the video", 8 | "fr": " Regarder la vidéo" 9 | }, 10 | "what": { 11 | "en": "What is ProType?", 12 | "fr": "Qu’est-ce que ProType ?" 13 | }, 14 | "what-content": { 15 | "en": "ProType is JavaScript front end (browser) framework. It is object oriented only and help you separate tasks and views while staying productive.", 16 | "fr": "ProType est un framework JavaScript pour le front end (navigateur). Il est orienté objet, c’est-à-dire qu’il vous aidera à séparer correctement les tâches en restant productif." 17 | }, 18 | "why": { 19 | "en": "Why ProType?", 20 | "fr": "Pourquoi ProType ?" 21 | }, 22 | "why-content": { 23 | "en": "Because I couldn't find a framework that could use classes in the most effective way. I wanted something that could resemble other language, such as Swift (and Cocoa) or Dart (with Flutter). ProType will help you build big UIs, such as web apps or apps with other frameworks like Cordova or Electron.

P.S. The word ProType comes from Prototype, a property used in JavaScript to add elements to a class", 24 | "fr": "Car je ne pouvais pas trouver un framework qui pouvait utiliser les classes de la meilleur façon. Je voulais quelque chose qui pouvait ressembler aux autres languages comme Swift (avec Cocoa) ou Dart (avec Flutter). ProType vous aidera à créer de grosses UIs (interfaces utilisateur) comme des web apps ou des app avec d’autres frameworks comme Cordova ou Electron

P.S. Le nom ProType vient de la contraction de Prototype, un mot utilisé en JavaScript pour ajouter des éléments à une classe." 25 | }, 26 | "how": { 27 | "en": "How it works?", 28 | "fr": "Comment ça marche ?" 29 | }, 30 | "rules": { 31 | "en": "ProType follows a set of rules:", 32 | "fr": "ProType suit règles fondamentales:" 33 | }, 34 | "oop": { 35 | "en": "Object Oriented", 36 | "fr": "Orienté objet" 37 | }, 38 | "oop-content": { 39 | "en": "ProType is a Object Oriented based framework, which means that everything is defined in terms of class.", 40 | "fr": "ProType est un framework orienté objet, ce qui veut dire que tout est défini par des class." 41 | }, 42 | "modern": { 43 | "en": "Modern", 44 | "fr": "Moderne" 45 | }, 46 | "modern-content": { 47 | "en": "The code that is written with ProType is meant to be wrote in the latest version of ECMAScript (JavaScript). I use the latest technologie when developping ProType, and I encourage you to do the same. But that doesn't mean your website won't work with older browsers, our friends at Babel will help us implementing ProType and your code for every browsers using their tools.", 48 | "fr": "Le code qui est écrit avec ProType doit être écrit avec la dernière version d’ECMAScript (JavaScript). J’utilise les dernières technologies quand je développe ProType, et je vous encourage à faire de même. Mais cela ne veux pas dire que votre site web ne fonctionnera pas avec les navigateurs anciens. Nos amis de chez Babel nous aideront à implémenter ProType ainsi que votre code pour tout les navigateurs avec leur produit." 49 | }, 50 | "prod": { 51 | "en": "Productive", 52 | "fr": "Productif" 53 | }, 54 | "prod-content": { 55 | "en": "ProType code might seems a little bit longer to write for very small projects, but it was designed to fit very large projects. And you will be much more productive using ProType for large projects than other JavaScript frameworks such as DisplayJS, jQuery or even Vue.", 56 | "fr": "Le code écrit avec ProType peut sembler un peu plus long à écrire pour les petits projets, néanmoins il a été pensé pour les gros projets. Et vous serez on ne peut plus productif avec ProType qu’avec les autres framework JavaScript comme DisplayJS, jQuery ou même Vue." 57 | }, 58 | "react": { 59 | "en": "Reactive", 60 | "fr": "Réactif" 61 | }, 62 | "react-content": { 63 | "en": "ProType will react to user interaction or events based on your code. This will help you show to your users what they want in milliseconds.", 64 | "fr": "ProType réagira aux interections de vos utilisateurs ou aux évenements dans votre code. Cela vous aidera à montrer aux utilisateurs ce qu’ils veulent en quelques millisecondes" 65 | }, 66 | "safe": { 67 | "en": "Safe", 68 | "fr": "Sûr" 69 | }, 70 | "safe-content": { 71 | "en": "ProType is safe and non-destructive. You can use other framework, library or piece of code in addition to ProType without breaking anything.", 72 | "fr": "ProType est sûr et non destructif. Vous pouvez utiliser d’autres frameworks, bibliothèques ou bouts de code avec ProType sans tout casser." 73 | }, 74 | "fast": { 75 | "en": "Fast", 76 | "fr": "Rapide" 77 | }, 78 | "fast-content": { 79 | "en": "ProType is fast, very fast. You will be able to optimize your website / app very easily and quickly. ProType was designed to run as fast or even faster than vanilla JavaScript.", 80 | "fr": "ProType est rapide, vraiment rapide. Vous allez pouvoir optimiser votre site web / app très facilement et rapidement. ProType a été conçu pour tourner aussi vite voir plus vite que du code JavaScript natif." 81 | }, 82 | "install": { 83 | "en": "Install, build, deploy.", 84 | "fr": "Installez, créez, déployez." 85 | }, 86 | "changelog": { 87 | "en": "Changelog", 88 | "fr": "Changelog" 89 | }, 90 | "changelog-a": { 91 | "en": "See the changelog ", 92 | "fr": "Voir le changelog " 93 | }, 94 | "patreon": { 95 | "en": "I created my Patreon page not that long ago, check it out:", 96 | "fr": "J’ai créé ma page Patreon il n’y a pas si longtemps, venez y faire un tour :" 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp") 2 | const rename = require("gulp-rename"); 3 | const uglify = require("gulp-uglify"); 4 | const babel = require("gulp-babel"); 5 | const babili = require("gulp-babili"); 6 | const rigger = require("gulp-rigger"); 7 | const injectVersion = require("gulp-inject-version") 8 | const modern = () => { 9 | return gulp.src("src/base.js") 10 | .pipe(rigger()) 11 | .pipe(injectVersion()) 12 | .pipe(rename({ 13 | basename: "protype", 14 | suffix: ".es7" 15 | })) 16 | .pipe(gulp.dest("dist")); 17 | } 18 | const minify = () => { 19 | return gulp.src("src/base.js") 20 | .pipe(rigger()) 21 | .pipe(injectVersion()) 22 | .pipe(babili({ 23 | mangle: { 24 | keepClassName: true 25 | } 26 | })) 27 | .pipe(rename({ 28 | basename: "protype", 29 | suffix: ".es7.min" 30 | })) 31 | .pipe(gulp.dest("dist")); 32 | } 33 | const old = () => { 34 | return gulp.src("src/base.js") 35 | .pipe(rigger()) 36 | .pipe(injectVersion()) 37 | .pipe(babel({ 38 | presets: ["env"] 39 | })) 40 | .pipe(rename({ 41 | basename: "protype" 42 | })) 43 | .pipe(gulp.dest("dist")); 44 | } 45 | const minifyOld = () => { 46 | return gulp.src("src/base.js") 47 | .pipe(rigger()) 48 | .pipe(injectVersion()) 49 | .pipe(babel({ 50 | presets: ["env"] 51 | })) 52 | .pipe(uglify()) 53 | .pipe(rename({ 54 | basename: "protype", 55 | suffix: ".min" 56 | })) 57 | .pipe(gulp.dest("dist")); 58 | } 59 | const tests = () => { 60 | return gulp.src("src/base.js") 61 | .pipe(rigger()) 62 | .pipe(injectVersion()) 63 | .pipe(rename({ 64 | basename: "protype" 65 | })) 66 | .pipe(gulp.dest("__test__")); 67 | } 68 | 69 | exports.modern = modern 70 | exports.minify = minify 71 | exports.old = old 72 | exports.minifyOld = minifyOld 73 | exports.tests = tests 74 | exports.default = gulp.parallel(modern, minify, old, minifyOld, tests) 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "protype.js", 3 | "version": "1.1.0", 4 | "description": "A new kind of object oriented front-end JS framework", 5 | "main": "dist/protype.min.js", 6 | "scripts": { 7 | "run": "npm test", 8 | "build": "npm test", 9 | "test": "npm run gulp && npm run prettier && npm run lint && npm run eye && exit 0", 10 | "gulp": "gulp", 11 | "prettier": "prettier \"dist/**/*.js\" --write", 12 | "lint": "./node_modules/.bin/eslint \"dist/**/*\" --fix", 13 | "eye": "./node_modules/.bin/eye __test__/test.js -ci" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/arguiot/Protype.git" 18 | }, 19 | "keywords": [ 20 | "js", 21 | "framework", 22 | "protype", 23 | "class", 24 | "frontend", 25 | "browser" 26 | ], 27 | "author": "Arthur Guiot", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/arguiot/Protype/issues" 31 | }, 32 | "homepage": "https://github.com/arguiot/Protype#readme", 33 | "devDependencies": { 34 | "babel-eslint": "^10.0.3", 35 | "babel-helper-flip-expressions": "^0.4.0", 36 | "babel-minify": "^0.5.1", 37 | "babel-plugin-minify-builtins": "^0.5.0", 38 | "babel-plugin-minify-constant-folding": "^0.5.0", 39 | "babel-plugin-minify-dead-code-elimination": "^0.5.1", 40 | "babel-plugin-minify-flip-comparisons": "^0.4.0", 41 | "babel-plugin-minify-guarded-expressions": "^0.4.0", 42 | "babel-plugin-minify-infinity": "^0.4.0", 43 | "babel-plugin-minify-mangle-names": "^0.5.0", 44 | "babel-plugin-minify-replace": "^0.5.0", 45 | "babel-plugin-minify-simplify": "^0.5.1", 46 | "babel-plugin-minify-type-constructors": "^0.4.0", 47 | "babel-plugin-transform-inline-consecutive-adds": "^0.4.0", 48 | "babel-plugin-transform-member-expression-literals": "^6.9.1", 49 | "babel-plugin-transform-merge-sibling-variables": "^6.9.1", 50 | "babel-plugin-transform-minify-booleans": "^6.9.1", 51 | "babel-plugin-transform-property-literals": "^6.9.1", 52 | "babel-plugin-transform-remove-console": "^6.9.1", 53 | "babel-plugin-transform-remove-debugger": "^6.9.1", 54 | "babel-plugin-transform-remove-undefined": "^0.5.0", 55 | "babel-plugin-transform-simplify-comparison-operators": "^6.9.1", 56 | "babel-plugin-transform-undefined-to-void": "^6.9.1", 57 | "babel-preset-babili": "^0.1.4", 58 | "babel-preset-env": "^1.6.1", 59 | "babili": "^0.1.4", 60 | "buffer-shims": "^1.0.0", 61 | "eslint": "^7.22.0", 62 | "eslint-config-airbnb-base": "^14.0.0", 63 | "eslint-plugin-import": "^2.11.0", 64 | "eye.js": "1.2.1", 65 | "gulp": "^4.0.0", 66 | "gulp-babel": "^7.0.1", 67 | "gulp-babili": "^0.1.4", 68 | "gulp-inject-version": "^1.0.1", 69 | "gulp-rename": "^2.0.0", 70 | "gulp-rigger": "^0.5.8", 71 | "gulp-uglify": "^3.0.0", 72 | "prettier": "1.19.1" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/base.js: -------------------------------------------------------------------------------- 1 | /***************************************************** 2 | 3 | ProType 4 | ================================================= 5 | Copyright © Arthur Guiot 2018. All right reserved. 6 | 7 | ******************************************************/ 8 | class ProType { 9 | //= functions 10 | } 11 | //= export.js 12 | -------------------------------------------------------------------------------- /src/export.js: -------------------------------------------------------------------------------- 1 | // Browserify / Node.js 2 | if (typeof define === "function" && define.amd) { 3 | define(() => new ProType); 4 | // CommonJS and Node.js module support. 5 | } else if (typeof exports !== "undefined") { 6 | // Support Node.js specific `module.exports` (which can be a function) 7 | if (typeof module !== "undefined" && module.exports) { 8 | exports = module.exports = new ProType; 9 | } 10 | // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) 11 | exports.ProType = new ProType; 12 | } else if (typeof global !== "undefined") { 13 | global.ProType = new ProType; 14 | } 15 | -------------------------------------------------------------------------------- /src/functions/Component.js: -------------------------------------------------------------------------------- 1 | get Component() { 2 | class component { 3 | //= Component 4 | } 5 | return component 6 | } 7 | -------------------------------------------------------------------------------- /src/functions/Component/constructor.js: -------------------------------------------------------------------------------- 1 | constructor(el) { 2 | this.component = el; 3 | this.state = {} 4 | 5 | this.render() 6 | } 7 | -------------------------------------------------------------------------------- /src/functions/Component/render.js: -------------------------------------------------------------------------------- 1 | render() { 2 | this.component.innerHTML = "" 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/ExternalGroup.js: -------------------------------------------------------------------------------- 1 | mountExternalGroup(el, group) { 2 | const g = new group(el, null) 3 | return g 4 | } 5 | -------------------------------------------------------------------------------- /src/functions/Group.js: -------------------------------------------------------------------------------- 1 | get Group() { 2 | class group { 3 | //= Group 4 | } 5 | return group 6 | } 7 | -------------------------------------------------------------------------------- /src/functions/Group/changeHandler.js: -------------------------------------------------------------------------------- 1 | changeHandler(e) { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/Group/constructor.js: -------------------------------------------------------------------------------- 1 | constructor(el, viewName) { 2 | this.group = el 3 | this.viewName = viewName 4 | this.state = {} 5 | this.init() 6 | } 7 | -------------------------------------------------------------------------------- /src/functions/Group/init.js: -------------------------------------------------------------------------------- 1 | init() { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/Group/mountComponent.js: -------------------------------------------------------------------------------- 1 | mountComponent(el, obj) { 2 | const object = new obj(el) 3 | return object 4 | } 5 | -------------------------------------------------------------------------------- /src/functions/Group/setState.js: -------------------------------------------------------------------------------- 1 | setState(data) { 2 | if (JSON.stringify(data) != JSON.stringify(this.state)) { 3 | this.state = data 4 | 5 | this.changeHandler(this.state) 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/functions/Router.js: -------------------------------------------------------------------------------- 1 | Router() { 2 | const args = [...arguments] 3 | let handler; 4 | let pattern = "" 5 | switch (args.length) { 6 | case 1: 7 | handler = args[0] 8 | break; 9 | 10 | default: 11 | pattern = args[0] 12 | handler = args[1] 13 | break; 14 | } 15 | const regex = new RegExp(/^:\w*$/) 16 | const routes = {} 17 | pattern.split("/").forEach((el, i) => { 18 | if (el.match(regex)) { 19 | routes[i] = el.split(":")[1] 20 | } 21 | }) 22 | const rep = new RegExp(/\/:\w*(\/|$)/gi) 23 | const match = new RegExp(pattern.replace("/\\w*/")) 24 | document.addEventListener("DOMContentLoaded", e => { 25 | let data = {}; 26 | 27 | const url = window.location.href 28 | data.url = url 29 | const origin = window.location.origin 30 | data.origin = origin 31 | const path = window.location.pathname 32 | data.path = path 33 | const hash = window.location.hash 34 | data.hash = hash 35 | const search = window.location.search.substring(1).split("&") 36 | let searchObj = {} 37 | for (let i = 0; i < search.length; i++) { 38 | const splitted = search[i].split("=") 39 | searchObj[decodeURIComponent(splitted[0])] = decodeURIComponent(splitted[1]) 40 | } 41 | data.search = searchObj 42 | data.pathValue = path.split("/") 43 | 44 | if (path.match(match) && pattern != "") { 45 | const components = path.split("/") 46 | let r = {} 47 | Object.keys(routes).forEach(i => { 48 | r[routes[i]] = components[i] 49 | }) 50 | handler(data, r) 51 | } 52 | }) 53 | } 54 | -------------------------------------------------------------------------------- /src/functions/ViewController.js: -------------------------------------------------------------------------------- 1 | get ViewController() { 2 | class view { 3 | //= ViewController 4 | } 5 | return view 6 | } 7 | -------------------------------------------------------------------------------- /src/functions/ViewController/constructor.js: -------------------------------------------------------------------------------- 1 | constructor(el, viewsName, views) { 2 | this.view = el 3 | this.views = views 4 | this.viewsName = viewsName 5 | const index = this.views.indexOf(this.view) 6 | this.viewName = this.viewsName[index] 7 | 8 | this.pipeline = {} 9 | 10 | this.preload() 11 | } 12 | -------------------------------------------------------------------------------- /src/functions/ViewController/mountGroup.js: -------------------------------------------------------------------------------- 1 | mountGroup(el, ObjectClass) { 2 | const obj = new ObjectClass(el, this.viewName) 3 | return obj; 4 | } 5 | 6 | mountGroups(els, ObjectClass) { 7 | let classes = [] 8 | for (let i = 0; i < els.length; i++) { 9 | classes.push(new ObjectClass(els[i], this.viewName)) 10 | } 11 | return classes 12 | } 13 | -------------------------------------------------------------------------------- /src/functions/ViewController/onPipelineChange.js: -------------------------------------------------------------------------------- 1 | onPipelineChange(pipeline) { 2 | // Handle the event 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/ViewController/preload.js: -------------------------------------------------------------------------------- 1 | preload() { 2 | // Do stuff that doesn't require DOM interaction 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/ViewController/prepareForSegue.js: -------------------------------------------------------------------------------- 1 | prepareForSegue(nextVC) { 2 | // Do something with nextVC 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/ViewController/willDisappear.js: -------------------------------------------------------------------------------- 1 | willDisappear(sender = "Main") { 2 | // perform UI changes 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/ViewController/willShow.js: -------------------------------------------------------------------------------- 1 | willShow(sender = "Main") { 2 | // perform UI changes on load. 3 | } 4 | -------------------------------------------------------------------------------- /src/functions/autoMount.js: -------------------------------------------------------------------------------- 1 | autoMount() { 2 | const controllers = [...arguments] 3 | const els = document.querySelectorAll("[protype]") 4 | this.views.push(...els) 5 | 6 | if (els.length != controllers.length) { 7 | throw "Controllers and Elements don't match" 8 | } 9 | 10 | for (let i = 0; i < els.length; i++) { 11 | this.viewsName.push(els[i].getAttribute("protype")) 12 | } 13 | for (let i = 0; i < controllers.length; i++) { // need to finish register everything 14 | this.controllers.push(new controllers[i](els[i], this.viewsName, this.views)) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/functions/constructor.js: -------------------------------------------------------------------------------- 1 | constructor() { 2 | this.version = "%%GULP_INJECT_VERSION%%" // ProType version 3 | 4 | this.views = [] 5 | this.viewsName = [] 6 | 7 | this.controllers = [] 8 | 9 | this.currentView = ""; 10 | this.last = ""; 11 | this.root = ""; 12 | 13 | this.workspace = {} // share data between views 14 | } 15 | -------------------------------------------------------------------------------- /src/functions/mount.js: -------------------------------------------------------------------------------- 1 | mount() { 2 | const args = [...arguments] 3 | for (let i = 0; i < args.length; i++) { 4 | this.views.push(args[i][1]) 5 | this.viewsName.push(args[i][0]) 6 | } 7 | for (let i = 0; i < args.length; i++) { 8 | this.controllers.push(new args[i][2](this.views[i], this.viewsName, this.views)) 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/functions/performTransition.js: -------------------------------------------------------------------------------- 1 | performTransition(to, options) { 2 | if (to == this.currentView) { 3 | return 4 | } 5 | const opt = Object.assign({ 6 | animation: "none", 7 | duration: "1s", 8 | Group: false 9 | }, options) 10 | 11 | const sender = this.currentView 12 | const sendIndex = this.viewsName.indexOf(sender) 13 | const senderView = this.views[sendIndex] 14 | const senderController = this.controllers[sendIndex] 15 | 16 | const index = this.viewsName.indexOf(to) 17 | const viewBis = this.views[index].cloneNode(true); 18 | this.views[index].parentNode.replaceChild(viewBis, this.views[index]) 19 | 20 | this.views[index] = viewBis 21 | 22 | const view = this.views[index] 23 | let controller = this.controllers[index] 24 | 25 | controller.view = view 26 | controller.views = this.views; 27 | 28 | this.last = this.currentView 29 | this.currentView = to; 30 | 31 | view.setAttribute("style", "") 32 | view.style["z-index"] = "-10" 33 | 34 | senderController.prepareForSegue(controller) 35 | 36 | controller.willShow(sender) 37 | 38 | if (opt.Group !== false) { 39 | const after = () => { 40 | view.style.display = "block" 41 | view.style["z-index"] = "0" 42 | senderView.style.display = "none" 43 | senderController.willDisappear(sender) 44 | } 45 | if (opt.animation !== "none") { 46 | opt.Group.style.animation = `${opt.animation} ${opt.duration} forwards`; 47 | 48 | opt.Group.addEventListener("animationend", e => after()) 49 | } else { 50 | after() 51 | } 52 | 53 | } else { 54 | view.style.display = "block" 55 | 56 | const after = () => { 57 | view.style["z-index"] = "0" 58 | senderView.style.display = "none" 59 | senderController.willDisappear(sender) 60 | view.style.display = "block" 61 | } 62 | if (opt.animation !== "none") { 63 | senderView.style.animation = `${opt.animation} ${opt.duration} forwards`; 64 | 65 | senderView.addEventListener("animationend", e => after()) 66 | } else { 67 | after() 68 | } 69 | 70 | } 71 | 72 | } 73 | -------------------------------------------------------------------------------- /src/functions/pipeline.js: -------------------------------------------------------------------------------- 1 | get pipeline() { 2 | const viewName = this.currentView; 3 | const index = this.viewsName.indexOf(viewName) 4 | const view = this.views[index] 5 | return view.pipeline; 6 | } 7 | setPipeline(data) { 8 | const viewName = this.currentView; 9 | const index = this.viewsName.indexOf(viewName) 10 | const old = this.views[index].pipeline 11 | if (JSON.stringify(old) != JSON.stringify(data)) { 12 | this.views[index].pipeline = data 13 | this.views[index].onPipelineChange(data) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/functions/pop.js: -------------------------------------------------------------------------------- 1 | pop() { 2 | this.performTransition(this.last) 3 | } 4 | popToRoot() { 5 | this.performTransition(this.root) 6 | } 7 | -------------------------------------------------------------------------------- /src/functions/set.js: -------------------------------------------------------------------------------- 1 | set(name) { 2 | this.root = name 3 | this.currentView = name; 4 | document.addEventListener("DOMContentLoaded", e => { 5 | for (var i = 0; i < this.views.length; i++) { 6 | if (this.viewsName[i] == name) { 7 | this.views[i].style.display = "block" 8 | this.controllers[i].willShow() 9 | } else { 10 | this.views[i].style.display = "none" 11 | } 12 | } 13 | }) 14 | } 15 | --------------------------------------------------------------------------------