mirror of https://github.com/sveltejs/svelte
swyx
6 years ago
committed by
GitHub
commit
3de0e4bca4
@ -1,7 +1,18 @@
|
|||||||
src/shared
|
|
||||||
shared.js
|
|
||||||
store.js
|
|
||||||
test/test.js
|
|
||||||
test/setup.js
|
|
||||||
**/_actual.js
|
**/_actual.js
|
||||||
**/expected.js
|
**/expected.js
|
||||||
|
_output
|
||||||
|
test/*/samples/*/output.js
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# automatically generated
|
||||||
|
internal_exports.ts
|
||||||
|
|
||||||
|
# output files
|
||||||
|
animate/*.js
|
||||||
|
esing/*.js
|
||||||
|
internal/*.js
|
||||||
|
motion/*.js
|
||||||
|
store/*.js
|
||||||
|
transition/*.js
|
||||||
|
index.js
|
||||||
|
compiler.js
|
||||||
|
|||||||
@ -0,0 +1,88 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
rules: {
|
||||||
|
indent: 'off',
|
||||||
|
'no-unused-vars': 'off',
|
||||||
|
semi: [2, 'always'],
|
||||||
|
'keyword-spacing': [2, { before: true, after: true }],
|
||||||
|
'space-before-blocks': [2, 'always'],
|
||||||
|
'no-mixed-spaces-and-tabs': [2, 'smart-tabs'],
|
||||||
|
'no-cond-assign': 0,
|
||||||
|
'object-shorthand': [2, 'always'],
|
||||||
|
'no-const-assign': 2,
|
||||||
|
'no-class-assign': 2,
|
||||||
|
'no-this-before-super': 2,
|
||||||
|
'no-var': 2,
|
||||||
|
'no-unreachable': 2,
|
||||||
|
'valid-typeof': 2,
|
||||||
|
'quote-props': [2, 'as-needed'],
|
||||||
|
'one-var': [2, 'never'],
|
||||||
|
'prefer-arrow-callback': 2,
|
||||||
|
'prefer-const': [2, { destructuring: 'all' }],
|
||||||
|
'arrow-spacing': 2,
|
||||||
|
'no-inner-declarations': 0,
|
||||||
|
'require-atomic-updates': 'off',
|
||||||
|
'@typescript-eslint/indent': 'off',
|
||||||
|
'@typescript-eslint/camelcase': 'off',
|
||||||
|
'@typescript-eslint/no-use-before-define': 'off',
|
||||||
|
'@typescript-eslint/array-type': ['error', 'array-simple'],
|
||||||
|
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||||
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
|
'@typescript-eslint/explicit-member-accessibility': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
argsIgnorePattern: '^_'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'@typescript-eslint/no-object-literal-type-assertion': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': 'off',
|
||||||
|
'@typescript-eslint/prefer-interface': 'off'
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
globalThis: false
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
mocha: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:import/errors',
|
||||||
|
'plugin:import/warnings',
|
||||||
|
'plugin:import/typescript',
|
||||||
|
'plugin:@typescript-eslint/recommended'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 9,
|
||||||
|
sourceType: 'module'
|
||||||
|
},
|
||||||
|
plugins: ['svelte3'],
|
||||||
|
settings: {
|
||||||
|
'import/core-modules': [
|
||||||
|
'svelte',
|
||||||
|
'svelte/internal',
|
||||||
|
'svelte/store',
|
||||||
|
'svelte/easing',
|
||||||
|
'estree'
|
||||||
|
],
|
||||||
|
'svelte3/compiler': require('./compiler')
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['*.js'],
|
||||||
|
rules: {
|
||||||
|
'@typescript-eslint/no-var-requires': 'off'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['*.svelte'],
|
||||||
|
processor: 'svelte3/svelte3',
|
||||||
|
rules: {
|
||||||
|
'@typescript-eslint/indent': 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -1,44 +0,0 @@
|
|||||||
{
|
|
||||||
"root": true,
|
|
||||||
"rules": {
|
|
||||||
"indent": [2, "tab", { "SwitchCase": 1 }],
|
|
||||||
"semi": [2, "always"],
|
|
||||||
"keyword-spacing": [2, { "before": true, "after": true }],
|
|
||||||
"space-before-blocks": [2, "always"],
|
|
||||||
"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
|
|
||||||
"no-cond-assign": 0,
|
|
||||||
"no-unused-vars": 2,
|
|
||||||
"object-shorthand": [2, "always"],
|
|
||||||
"no-const-assign": 2,
|
|
||||||
"no-class-assign": 2,
|
|
||||||
"no-this-before-super": 2,
|
|
||||||
"no-var": 2,
|
|
||||||
"no-unreachable": 2,
|
|
||||||
"valid-typeof": 2,
|
|
||||||
"quote-props": [2, "as-needed"],
|
|
||||||
"one-var": [2, "never"],
|
|
||||||
"prefer-arrow-callback": 2,
|
|
||||||
"prefer-const": [2, { "destructuring": "all" }],
|
|
||||||
"arrow-spacing": 2,
|
|
||||||
"no-inner-declarations": 0
|
|
||||||
},
|
|
||||||
"env": {
|
|
||||||
"es6": true,
|
|
||||||
"browser": true,
|
|
||||||
"node": true,
|
|
||||||
"mocha": true
|
|
||||||
},
|
|
||||||
"extends": [
|
|
||||||
"eslint:recommended",
|
|
||||||
"plugin:import/errors",
|
|
||||||
"plugin:import/warnings"
|
|
||||||
],
|
|
||||||
"parserOptions": {
|
|
||||||
"ecmaVersion": 9,
|
|
||||||
"sourceType": "module"
|
|
||||||
},
|
|
||||||
"settings": {
|
|
||||||
"import/core-modules": ["svelte"],
|
|
||||||
"svelte3/extensions": ["html"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
[ignore]
|
|
||||||
<PROJECT_ROOT>/dist/.*
|
|
||||||
|
|
||||||
[include]
|
|
||||||
|
|
||||||
[libs]
|
|
||||||
|
|
||||||
[options]
|
|
||||||
strip_root=true
|
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
---
|
||||||
|
name: Feature request
|
||||||
|
about: Suggest an idea for this project
|
||||||
|
title: ''
|
||||||
|
labels: 'New Feature'
|
||||||
|
assignees: ''
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Is your feature request related to a problem? Please describe.**
|
||||||
|
A clear and concise description of what the problem is. For example: I'm always frustrated when [...]
|
||||||
|
|
||||||
|
**Describe the solution you'd like**
|
||||||
|
A clear and concise description of what you want to happen.
|
||||||
|
|
||||||
|
**Describe alternatives you've considered**
|
||||||
|
A clear and concise description of any alternative solutions or features you've considered.
|
||||||
|
|
||||||
|
**How important is this feature to you?**
|
||||||
|
Note: the more honest and specific you are here the more we will take you seriously.
|
||||||
|
|
||||||
|
**Additional context**
|
||||||
|
Add any other context or screenshots about the feature request here.
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
name: Questions and help
|
||||||
|
about: If you think you need help with something related to Svelte
|
||||||
|
title: ''
|
||||||
|
labels: 'Question'
|
||||||
|
assignees: ''
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This issue tracker is intended to collect bug reports and feature requests.
|
||||||
|
|
||||||
|
For help with installation, information on how features work, or questions about specific features of Svelte, please come and join us in the [Svelte Discord](https://svelte.dev/chat), or ask your question on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte). Any issues open for help requests will be closed to keep from clogging up the issue tracker.
|
||||||
@ -1,7 +1,8 @@
|
|||||||
<!--
|
|
||||||
Thank you for creating a pull request. Before submitting, please note the following:
|
|
||||||
|
|
||||||
* If your pull request implements a new feature, please raise an issue to discuss it before sending code. In many cases features are absent for a reason.
|
|
||||||
* This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
|
### Before submitting the PR, please make sure you do the following
|
||||||
* Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to `npm run lint`!)
|
- [ ] It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
|
||||||
-->
|
- [ ] This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
|
||||||
|
- [ ] Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to `npm run lint`!)
|
||||||
|
### Tests
|
||||||
|
- [ ] Run the tests tests with `npm test` or `yarn test`)
|
||||||
|
|||||||
@ -0,0 +1,31 @@
|
|||||||
|
name: CI
|
||||||
|
on: [push, pull_request]
|
||||||
|
jobs:
|
||||||
|
Tests:
|
||||||
|
runs-on: ${{ matrix.os }}
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
node-version: [8, 10, 12]
|
||||||
|
os: [ubuntu-latest, windows-latest, macOS-latest]
|
||||||
|
steps:
|
||||||
|
- run: git config --global core.autocrlf false
|
||||||
|
- uses: actions/checkout@v1
|
||||||
|
- uses: actions/setup-node@v1
|
||||||
|
with:
|
||||||
|
node-version: ${{ matrix.node-version }}
|
||||||
|
- run: npm install
|
||||||
|
- run: npm test
|
||||||
|
env:
|
||||||
|
CI: true
|
||||||
|
Lint:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v1
|
||||||
|
- uses: actions/setup-node@v1
|
||||||
|
- run: 'npm i && npm run lint'
|
||||||
|
Unit:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v1
|
||||||
|
- uses: actions/setup-node@v1
|
||||||
|
- run: 'npm i && npm run test:unit'
|
||||||
@ -1,3 +0,0 @@
|
|||||||
useTabs: true
|
|
||||||
singleQuote: true
|
|
||||||
trailingComma: es5
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
language: node_js
|
|
||||||
node_js:
|
|
||||||
- "node"
|
|
||||||
|
|
||||||
env:
|
|
||||||
global:
|
|
||||||
- BUILD_TIMEOUT=20000
|
|
||||||
|
|
||||||
addons:
|
|
||||||
apt:
|
|
||||||
packages:
|
|
||||||
- xvfb
|
|
||||||
|
|
||||||
install:
|
|
||||||
- export DISPLAY=':99.0'
|
|
||||||
- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
|
|
||||||
- npm ci || npm install
|
|
||||||
|
|
||||||
after_success: npm run codecov
|
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
# Contributing to Svelte
|
||||||
|
|
||||||
|
Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
|
||||||
|
|
||||||
|
The [Open Source Guides](https://opensource.guide/) website has a collection of resources for individuals, communities, and companies. These resources help people who want to learn how to run and contribute to open source projects. Contributors and people new to open source alike will find the following guides especially useful:
|
||||||
|
|
||||||
|
* [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
|
||||||
|
* [Building Welcoming Communities](https://opensource.guide/building-community/)
|
||||||
|
|
||||||
|
## Get involved
|
||||||
|
|
||||||
|
There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here's a few ideas to get started:
|
||||||
|
|
||||||
|
- Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/blog/the-easiest-way-to-get-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
|
||||||
|
- Look through the [open issues](https://github.com/sveltejs/svelte/issues). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests).
|
||||||
|
- If you find an issue you would like to fix, [open a pull request](#your-first-pull-request).
|
||||||
|
- Read through our [tutorials](https://svelte.dev/tutorial/basics). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit this chapter" at the bottom left of the tutorial page.
|
||||||
|
- Take a look at the [features requested](https://github.com/sveltejs/svelte/labels/enhancement) by others in the community and consider opening a pull request if you see something you want to work on.
|
||||||
|
|
||||||
|
Contributions are very welcome. If you think you need help planning your contribution, please ping us on Discord at [svelte.dev/chat](https://svelte.dev/chat) and let us know you are looking for a bit of help.
|
||||||
|
|
||||||
|
### Triaging issues and pull requests
|
||||||
|
|
||||||
|
One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
|
||||||
|
|
||||||
|
- Ask for more information if you believe the issue does not provide all the details required to solve it.
|
||||||
|
- Suggest [labels](https://github.com/sveltejs/svelte/labels) that can help categorize issues.
|
||||||
|
- Flag issues that are stale or that should be closed.
|
||||||
|
- Ask for test plans and review code.
|
||||||
|
|
||||||
|
## Bugs
|
||||||
|
|
||||||
|
We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues).
|
||||||
|
|
||||||
|
If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions.
|
||||||
|
|
||||||
|
If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md)
|
||||||
|
|
||||||
|
## Reporting new issues
|
||||||
|
|
||||||
|
When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
|
||||||
|
|
||||||
|
- **One issue, one bug:** Please report a single bug per issue.
|
||||||
|
- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed.
|
||||||
|
1. After cloning the repository, run `npm install` in the root of the repository.
|
||||||
|
1. To start a development server, run `npm run dev`.
|
||||||
|
|
||||||
|
|
||||||
|
## Pull requests
|
||||||
|
|
||||||
|
### Your first pull request
|
||||||
|
|
||||||
|
So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at.
|
||||||
|
|
||||||
|
Working on your first Pull Request? You can learn how from this free video series:
|
||||||
|
|
||||||
|
[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
|
||||||
|
|
||||||
|
### Proposing a change
|
||||||
|
|
||||||
|
If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md).
|
||||||
|
|
||||||
|
If you're only fixing a bug, it's fine to submit a pull request right away but we still recommend that you file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
|
||||||
|
|
||||||
|
### Sending a pull request
|
||||||
|
|
||||||
|
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
|
||||||
|
|
||||||
|
Please make sure the following is done when submitting a pull request:
|
||||||
|
|
||||||
|
1. Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`.
|
||||||
|
1. Describe your **test plan** in your pull request description. Make sure to test your changes.
|
||||||
|
1. Make sure your code lints (`npm run lint`).
|
||||||
|
1. Make sure your tests pass (`npm run test`).
|
||||||
|
|
||||||
|
All pull requests should be opened against the `master` branch.
|
||||||
|
|
||||||
|
#### Test plan
|
||||||
|
|
||||||
|
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI.
|
||||||
|
|
||||||
|
- If you've changed APIs, update the documentation.
|
||||||
|
|
||||||
|
#### Writing tests
|
||||||
|
|
||||||
|
All tests are located in `/test` folder.
|
||||||
|
|
||||||
|
Test samples are kept in `/test/xxx/samples` folder.
|
||||||
|
|
||||||
|
#### Running tests
|
||||||
|
|
||||||
|
1. To run test, run `npm run test`
|
||||||
|
1. To run test for a specific feature, you can use the `-g` (aka `--grep`) option. For example, to only run test involving transitions, run `npm run test -- -g transition`.
|
||||||
|
|
||||||
|
##### Running solo test
|
||||||
|
|
||||||
|
1. To run only one test, rename the test sample folder to end with `.solo`. For example, to run the `test/js/samples/action` only, rename it to `test/js/samples/action.solo`.
|
||||||
|
1. To run only one test suite, rename the test suite folder to end with `.solo`. For example, to run the `test/js` test suite only, rename it to `test/js.solo`.
|
||||||
|
1. Remember to rename the test folder back. The CI will fail if there's a solo test.
|
||||||
|
|
||||||
|
##### Updating `.expected` files
|
||||||
|
|
||||||
|
1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`.
|
||||||
|
1. To update the content of the `.expected` file, run the test with `--update` flag. (`npm run test --update`)
|
||||||
|
|
||||||
|
#### Breaking changes
|
||||||
|
|
||||||
|
When adding a new breaking change, follow this template in your pull request:
|
||||||
|
|
||||||
|
```md
|
||||||
|
### New breaking change here
|
||||||
|
|
||||||
|
- **Who does this affect**:
|
||||||
|
- **How to migrate**:
|
||||||
|
- **Why make this breaking change**:
|
||||||
|
- **Severity (number of people affected x effort)**:
|
||||||
|
```
|
||||||
|
|
||||||
|
### What happens next?
|
||||||
|
|
||||||
|
The core Svelte team will be monitoring for pull requests. Do help us by making your pull request easy to review by following the guidelines above.
|
||||||
|
|
||||||
|
## Style guide
|
||||||
|
|
||||||
|
[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`.
|
||||||
|
|
||||||
|
### Code conventions
|
||||||
|
|
||||||
|
- `snake_case` for internal variable names and methods
|
||||||
|
- `camelCase` for public variable names and methods.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE).
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { cubicOut } from './easing';
|
|
||||||
import { is_function } from './internal';
|
|
||||||
|
|
||||||
export function flip(node, animation, params) {
|
|
||||||
const style = getComputedStyle(node);
|
|
||||||
const transform = style.transform === 'none' ? '' : style.transform;
|
|
||||||
|
|
||||||
const dx = animation.from.left - animation.to.left;
|
|
||||||
const dy = animation.from.top - animation.to.top;
|
|
||||||
|
|
||||||
const d = Math.sqrt(dx * dx + dy * dy);
|
|
||||||
|
|
||||||
const {
|
|
||||||
delay = 0,
|
|
||||||
duration = d => Math.sqrt(d) * 120,
|
|
||||||
easing = cubicOut
|
|
||||||
} = params;
|
|
||||||
|
|
||||||
return {
|
|
||||||
delay,
|
|
||||||
duration: is_function(duration) ? duration(d) : duration,
|
|
||||||
easing,
|
|
||||||
css: (t, u) => `transform: ${transform} translate(${u * dx}px, ${u * dy}px);`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
# http://www.appveyor.com/docs/appveyor-yml
|
|
||||||
|
|
||||||
version: "{build}"
|
|
||||||
|
|
||||||
clone_depth: 10
|
|
||||||
|
|
||||||
init:
|
|
||||||
- git config --global core.autocrlf false
|
|
||||||
|
|
||||||
environment:
|
|
||||||
matrix:
|
|
||||||
# node.js
|
|
||||||
- nodejs_version: 10
|
|
||||||
|
|
||||||
install:
|
|
||||||
- ps: Install-Product node $env:nodejs_version
|
|
||||||
- npm install
|
|
||||||
|
|
||||||
build: off
|
|
||||||
|
|
||||||
test_script:
|
|
||||||
- node --version && npm --version
|
|
||||||
- npm test
|
|
||||||
|
|
||||||
matrix:
|
|
||||||
fast_finish: false
|
|
||||||
|
|
||||||
# cache:
|
|
||||||
# - C:\Users\appveyor\AppData\Roaming\npm-cache -> package.json # npm cache
|
|
||||||
# - node_modules -> package.json # local npm modules
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
export {
|
|
||||||
onMount,
|
|
||||||
onDestroy,
|
|
||||||
beforeUpdate,
|
|
||||||
afterUpdate,
|
|
||||||
setContext,
|
|
||||||
getContext,
|
|
||||||
tick,
|
|
||||||
createEventDispatcher
|
|
||||||
} from './internal';
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
|||||||
|
NODE_ENV=
|
||||||
|
|
||||||
|
PORT=
|
||||||
|
BASEURL=
|
||||||
|
GITHUB_CLIENT_ID=
|
||||||
|
GITHUB_CLIENT_SECRET=
|
||||||
|
MAPBOX_ACCESS_TOKEN=
|
||||||
|
|
||||||
|
PGHOST=hostname
|
||||||
|
PGPORT=port
|
||||||
|
PGUSER=username
|
||||||
|
PGPASSWORD=password
|
||||||
|
PGDATABASE=database_name
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
rules: {
|
||||||
|
indent: [2, 'tab', { SwitchCase: 1 }],
|
||||||
|
semi: [2, 'always'],
|
||||||
|
'keyword-spacing': [2, { before: true, after: true }],
|
||||||
|
'space-before-blocks': [2, 'always'],
|
||||||
|
'no-mixed-spaces-and-tabs': [2, 'smart-tabs'],
|
||||||
|
'no-cond-assign': 0,
|
||||||
|
'no-unused-vars': 2,
|
||||||
|
'object-shorthand': [2, 'always'],
|
||||||
|
'no-const-assign': 2,
|
||||||
|
'no-class-assign': 2,
|
||||||
|
'no-this-before-super': 2,
|
||||||
|
'no-var': 2,
|
||||||
|
'no-unreachable': 2,
|
||||||
|
'valid-typeof': 2,
|
||||||
|
'quote-props': [2, 'as-needed'],
|
||||||
|
'one-var': [2, 'never'],
|
||||||
|
'prefer-arrow-callback': 2,
|
||||||
|
'prefer-const': [2, { destructuring: 'all' }],
|
||||||
|
'arrow-spacing': 2,
|
||||||
|
'no-inner-declarations': 0,
|
||||||
|
'require-atomic-updates': 0
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
mocha: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:import/errors',
|
||||||
|
'plugin:import/warnings'
|
||||||
|
],
|
||||||
|
plugins: ['svelte3'],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['*.svelte'],
|
||||||
|
processor: 'svelte3/svelte3'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 9,
|
||||||
|
sourceType: 'module'
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
'import/core-modules': ['svelte'],
|
||||||
|
'svelte3/compiler': (() => {
|
||||||
|
try {
|
||||||
|
return require('svelte/compiler');
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,44 +0,0 @@
|
|||||||
{
|
|
||||||
"root": true,
|
|
||||||
"rules": {
|
|
||||||
"indent": [2, "tab", { "SwitchCase": 1 }],
|
|
||||||
"semi": [2, "always"],
|
|
||||||
"keyword-spacing": [2, { "before": true, "after": true }],
|
|
||||||
"space-before-blocks": [2, "always"],
|
|
||||||
"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
|
|
||||||
"no-cond-assign": 0,
|
|
||||||
"no-unused-vars": 2,
|
|
||||||
"object-shorthand": [2, "always"],
|
|
||||||
"no-const-assign": 2,
|
|
||||||
"no-class-assign": 2,
|
|
||||||
"no-this-before-super": 2,
|
|
||||||
"no-var": 2,
|
|
||||||
"no-unreachable": 2,
|
|
||||||
"valid-typeof": 2,
|
|
||||||
"quote-props": [2, "as-needed"],
|
|
||||||
"one-var": [2, "never"],
|
|
||||||
"prefer-arrow-callback": 2,
|
|
||||||
"prefer-const": [2, { "destructuring": "all" }],
|
|
||||||
"arrow-spacing": 2,
|
|
||||||
"no-inner-declarations": 0
|
|
||||||
},
|
|
||||||
"env": {
|
|
||||||
"es6": true,
|
|
||||||
"browser": true,
|
|
||||||
"node": true,
|
|
||||||
"mocha": true
|
|
||||||
},
|
|
||||||
"extends": [
|
|
||||||
"eslint:recommended",
|
|
||||||
"plugin:import/errors",
|
|
||||||
"plugin:import/warnings"
|
|
||||||
],
|
|
||||||
"plugins": ["svelte3"],
|
|
||||||
"parserOptions": {
|
|
||||||
"ecmaVersion": 8,
|
|
||||||
"sourceType": "module"
|
|
||||||
},
|
|
||||||
"settings": {
|
|
||||||
"import/core-modules": ["svelte"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,9 +1,24 @@
|
|||||||
<script>
|
<script>
|
||||||
// `value` is updated whenever the prop value changes...
|
// `current` is updated whenever the prop value changes...
|
||||||
export let value;
|
export let current;
|
||||||
|
|
||||||
// ...but `valueAtStart` is fixed upon initialisation
|
// ...but `initial` is fixed upon initialisation
|
||||||
const valueAtStart = value;
|
const initial = current;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p>{valueAtStart} / {value}</p>
|
<p>
|
||||||
|
<span style="background-color: {initial}">initial</span>
|
||||||
|
<span style="background-color: {current}">current</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.2em 0.5em;
|
||||||
|
margin: 0 0.2em 0.2em 0;
|
||||||
|
width: 4em;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,12 +1,12 @@
|
|||||||
<script>
|
<script>
|
||||||
import marked from 'marked';
|
import marked from 'marked';
|
||||||
let value = `Some words are *italic*, some are **bold**`;
|
let text = `Some words are *italic*, some are **bold**`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
textarea { width: 100%; height: 200px; }
|
textarea { width: 100%; height: 200px; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<textarea bind:value></textarea>
|
<textarea bind:value={text}></textarea>
|
||||||
|
|
||||||
{@html marked(value)}
|
{@html marked(text)}
|
||||||
@ -1,140 +1,153 @@
|
|||||||
<script>
|
<script>
|
||||||
import { quintOut } from 'svelte/easing';
|
import { crossfade, scale } from 'svelte/transition';
|
||||||
import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
|
import images from './images.js';
|
||||||
|
|
||||||
const { send, receive } = crossfade({
|
const [send, receive] = crossfade({
|
||||||
fallback(node, params) {
|
duration: 200,
|
||||||
const style = getComputedStyle(node);
|
fallback: scale
|
||||||
const transform = style.transform === 'none' ? '' : style.transform;
|
|
||||||
|
|
||||||
return {
|
|
||||||
duration: 600,
|
|
||||||
easing: quintOut,
|
|
||||||
css: t => `
|
|
||||||
transform: ${transform} scale(${t});
|
|
||||||
opacity: ${t}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
let todos = [
|
let selected = null;
|
||||||
{ id: 1, done: false, description: 'write some docs' },
|
let loading = null;
|
||||||
{ id: 2, done: false, description: 'start writing JSConf talk' },
|
|
||||||
{ id: 3, done: true, description: 'buy some milk' },
|
|
||||||
{ id: 4, done: false, description: 'mow the lawn' },
|
|
||||||
{ id: 5, done: false, description: 'feed the turtle' },
|
|
||||||
{ id: 6, done: false, description: 'fix some bugs' },
|
|
||||||
];
|
|
||||||
|
|
||||||
let uid = todos.length + 1;
|
|
||||||
|
|
||||||
function add(input) {
|
|
||||||
const todo = {
|
|
||||||
id: uid++,
|
|
||||||
done: false,
|
|
||||||
description: input.value
|
|
||||||
};
|
|
||||||
|
|
||||||
todos = [todo, ...todos];
|
const ASSETS = `https://sveltejs.github.io/assets/crossfade`;
|
||||||
input.value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function remove(todo) {
|
const load = image => {
|
||||||
todos = todos.filter(t => t !== todo);
|
const timeout = setTimeout(() => loading = image, 100);
|
||||||
}
|
|
||||||
|
const img = new Image();
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
selected = image;
|
||||||
|
clearTimeout(timeout);
|
||||||
|
loading = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
img.src = `${ASSETS}/${image.id}.jpg`;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="phone">
|
||||||
|
<h1>Photo gallery</h1>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
{#each images as image}
|
||||||
|
<div class="square">
|
||||||
|
{#if selected !== image}
|
||||||
|
<button
|
||||||
|
style="background-color: {image.color};"
|
||||||
|
on:click="{() => load(image)}"
|
||||||
|
in:receive={{key:image.id}}
|
||||||
|
out:send={{key:image.id}}
|
||||||
|
>{loading === image ? '...' : image.id}</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if selected}
|
||||||
|
{#await selected then d}
|
||||||
|
<div class="photo" in:receive={{key:d.id}} out:send={{key:d.id}}>
|
||||||
|
<img
|
||||||
|
alt={d.alt}
|
||||||
|
src="{ASSETS}/{d.id}.jpg"
|
||||||
|
on:click="{() => selected = null}"
|
||||||
|
>
|
||||||
|
|
||||||
|
<p class='credit'>
|
||||||
|
<a target="_blank" href="https://www.flickr.com/photos/{d.path}">via Flickr</a> –
|
||||||
|
<a target="_blank" href={d.license.url}>{d.license.name}</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/await}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.new-todo {
|
.container {
|
||||||
font-size: 1.4em;
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 2em 0 1em 0;
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.board {
|
.phone {
|
||||||
max-width: 36em;
|
position: relative;
|
||||||
margin: 0 auto;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 52vmin;
|
||||||
|
height: 76vmin;
|
||||||
|
border: 2vmin solid #ccc;
|
||||||
|
border-bottom-width: 10vmin;
|
||||||
|
padding: 3vmin;
|
||||||
|
border-radius: 2vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left, .right {
|
h1 {
|
||||||
float: left;
|
font-weight: 300;
|
||||||
width: 50%;
|
text-transform: uppercase;
|
||||||
padding: 0 1em 0 0;
|
font-size: 5vmin;
|
||||||
box-sizing: border-box;
|
margin: 0.2em 0 0.5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
.grid {
|
||||||
font-size: 2em;
|
display: grid;
|
||||||
font-weight: 200;
|
flex: 1;
|
||||||
user-select: none;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: repeat(4, 1fr);
|
||||||
|
grid-gap: 2vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
button {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
font-size: 5vmin;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo, img {
|
||||||
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: block;
|
width: 100%;
|
||||||
font-size: 1em;
|
height: 100%;
|
||||||
line-height: 1;
|
overflow: hidden;
|
||||||
padding: 0.5em;
|
|
||||||
margin: 0 auto 0.5em auto;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: #eee;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input { margin: 0 }
|
.photo {
|
||||||
|
display: flex;
|
||||||
.right label {
|
align-items: stretch;
|
||||||
background-color: rgb(180,240,100);
|
justify-content: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
img {
|
||||||
float: right;
|
object-fit: cover;
|
||||||
height: 1em;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 0.5em;
|
|
||||||
line-height: 1;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
color: rgb(170,30,30);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label:hover button {
|
.credit {
|
||||||
opacity: 1;
|
text-align: right;
|
||||||
|
font-size: 2.5vmin;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
opacity: 0.6;
|
||||||
|
background: rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class='board'>
|
|
||||||
<input class="new-todo" placeholder="what needs to be done?" on:keydown="{event => event.which === 13 && add(event.target)}">
|
|
||||||
|
|
||||||
<div class='left'>
|
|
||||||
<h2>todo</h2>
|
|
||||||
{#each todos.filter(t => !t.done) as todo (todo.id)}
|
|
||||||
<label
|
|
||||||
in:receive="{{key: todo.id}}"
|
|
||||||
out:send="{{key: todo.id}}"
|
|
||||||
>
|
|
||||||
<input type=checkbox bind:checked={todo.done}>
|
|
||||||
{todo.description}
|
|
||||||
<button on:click="{() => remove(todo)}">x</button>
|
|
||||||
</label>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='right'>
|
.credit a, .credit a:visited {
|
||||||
<h2>done</h2>
|
color: white;
|
||||||
{#each todos.filter(t => t.done) as todo (todo.id)}
|
}
|
||||||
<label
|
</style>
|
||||||
in:receive="{{key: todo.id}}"
|
|
||||||
out:send="{{key: todo.id}}"
|
|
||||||
>
|
|
||||||
<input type=checkbox bind:checked={todo.done}>
|
|
||||||
{todo.description}
|
|
||||||
<button on:click="{() => remove(todo)}">x</button>
|
|
||||||
</label>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import { quintOut } from 'svelte/easing';
|
|
||||||
|
|
||||||
export default function crossfade({ send, receive, fallback }) {
|
|
||||||
let requested = new Map();
|
|
||||||
let provided = new Map();
|
|
||||||
|
|
||||||
function crossfade(from, node) {
|
|
||||||
const to = node.getBoundingClientRect();
|
|
||||||
const dx = from.left - to.left;
|
|
||||||
const dy = from.top - to.top;
|
|
||||||
|
|
||||||
const style = getComputedStyle(node);
|
|
||||||
const transform = style.transform === 'none' ? '' : style.transform;
|
|
||||||
|
|
||||||
return {
|
|
||||||
duration: 400,
|
|
||||||
easing: quintOut,
|
|
||||||
css: (t, u) => `
|
|
||||||
opacity: ${t};
|
|
||||||
transform: ${transform} translate(${u * dx}px,${u * dy}px);
|
|
||||||
`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
send(node, params) {
|
|
||||||
provided.set(params.key, {
|
|
||||||
rect: node.getBoundingClientRect()
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (requested.has(params.key)) {
|
|
||||||
const { rect } = requested.get(params.key);
|
|
||||||
requested.delete(params.key);
|
|
||||||
|
|
||||||
return crossfade(rect, node);
|
|
||||||
}
|
|
||||||
|
|
||||||
// if the node is disappearing altogether
|
|
||||||
// (i.e. wasn't claimed by the other list)
|
|
||||||
// then we need to supply an outro
|
|
||||||
provided.delete(params.key);
|
|
||||||
return fallback(node, params);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
receive(node, params) {
|
|
||||||
requested.set(params.key, {
|
|
||||||
rect: node.getBoundingClientRect()
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (provided.has(params.key)) {
|
|
||||||
const { rect } = provided.get(params.key);
|
|
||||||
provided.delete(params.key);
|
|
||||||
|
|
||||||
return crossfade(rect, node);
|
|
||||||
}
|
|
||||||
|
|
||||||
requested.delete(params.key);
|
|
||||||
return fallback(node, params);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
const BY = {
|
||||||
|
name: 'CC BY 2.0',
|
||||||
|
url: 'https://creativecommons.org/licenses/by/2.0/'
|
||||||
|
};
|
||||||
|
|
||||||
|
const BY_SA = {
|
||||||
|
name: 'CC BY-SA 2.0',
|
||||||
|
url: 'https://creativecommons.org/licenses/by-sa/2.0/'
|
||||||
|
};
|
||||||
|
|
||||||
|
const BY_ND = {
|
||||||
|
name: 'CC BY-ND 2.0',
|
||||||
|
url: 'https://creativecommons.org/licenses/by-nd/2.0/'
|
||||||
|
};
|
||||||
|
|
||||||
|
// via http://labs.tineye.com/multicolr
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
color: '#001f3f',
|
||||||
|
id: '1',
|
||||||
|
alt: 'Crepuscular rays',
|
||||||
|
path: '43428526@N03/7863279376',
|
||||||
|
license: BY
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#0074D9',
|
||||||
|
id: '2',
|
||||||
|
alt: 'Lapland winter scene',
|
||||||
|
path: '25507134@N00/6527537485',
|
||||||
|
license: BY
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#7FDBFF',
|
||||||
|
id: '3',
|
||||||
|
alt: 'Jellyfish',
|
||||||
|
path: '37707866@N00/3354331318',
|
||||||
|
license: BY
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#39CCCC',
|
||||||
|
id: '4',
|
||||||
|
alt: 'A man scuba diving',
|
||||||
|
path: '32751486@N00/4608886209',
|
||||||
|
license: BY_SA
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#3D9970',
|
||||||
|
id: '5',
|
||||||
|
alt: 'Underwater scene',
|
||||||
|
path: '25483059@N08/5548569010',
|
||||||
|
license: BY
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#2ECC40',
|
||||||
|
id: '6',
|
||||||
|
alt: 'Ferns',
|
||||||
|
path: '8404611@N06/2447470760',
|
||||||
|
license: BY
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#01FF70',
|
||||||
|
id: '7',
|
||||||
|
alt: 'Posters in a bar',
|
||||||
|
path: '33917831@N00/114428206',
|
||||||
|
license: BY_SA
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#FFDC00',
|
||||||
|
id: '8',
|
||||||
|
alt: 'Daffodil',
|
||||||
|
path: '46417125@N04/4818617089',
|
||||||
|
license: BY_ND
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#FF851B',
|
||||||
|
id: '9',
|
||||||
|
alt: 'Dust storm in Sydney',
|
||||||
|
path: '56068058@N00/3945496657',
|
||||||
|
license: BY
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#FF4136',
|
||||||
|
id: '10',
|
||||||
|
alt: 'Postbox',
|
||||||
|
path: '31883499@N05/4216820032',
|
||||||
|
license: BY
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#85144b',
|
||||||
|
id: '11',
|
||||||
|
alt: 'Fireworks',
|
||||||
|
path: '8484971@N07/2625506561',
|
||||||
|
license: BY_ND
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#B10DC9',
|
||||||
|
id: '12',
|
||||||
|
alt: 'The Stereophonics',
|
||||||
|
path: '58028312@N00/5385464371',
|
||||||
|
license: BY_ND
|
||||||
|
}
|
||||||
|
];
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import { quintOut } from 'svelte/easing';
|
|
||||||
|
|
||||||
export default function crossfade({ send, receive, fallback }) {
|
|
||||||
let requested = new Map();
|
|
||||||
let provided = new Map();
|
|
||||||
|
|
||||||
function crossfade(from, node) {
|
|
||||||
const to = node.getBoundingClientRect();
|
|
||||||
const dx = from.left - to.left;
|
|
||||||
const dy = from.top - to.top;
|
|
||||||
|
|
||||||
const style = getComputedStyle(node);
|
|
||||||
const transform = style.transform === 'none' ? '' : style.transform;
|
|
||||||
|
|
||||||
return {
|
|
||||||
duration: 400,
|
|
||||||
easing: quintOut,
|
|
||||||
css: (t, u) => `
|
|
||||||
opacity: ${t};
|
|
||||||
transform: ${transform} translate(${u * dx}px,${u * dy}px);
|
|
||||||
`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
send(node, params) {
|
|
||||||
provided.set(params.key, {
|
|
||||||
rect: node.getBoundingClientRect()
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (requested.has(params.key)) {
|
|
||||||
const { rect } = requested.get(params.key);
|
|
||||||
requested.delete(params.key);
|
|
||||||
|
|
||||||
return crossfade(rect, node);
|
|
||||||
}
|
|
||||||
|
|
||||||
// if the node is disappearing altogether
|
|
||||||
// (i.e. wasn't claimed by the other list)
|
|
||||||
// then we need to supply an outro
|
|
||||||
provided.delete(params.key);
|
|
||||||
return fallback(node, params);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
receive(node, params) {
|
|
||||||
requested.set(params.key, {
|
|
||||||
rect: node.getBoundingClientRect()
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (provided.has(params.key)) {
|
|
||||||
const { rect } = provided.get(params.key);
|
|
||||||
provided.delete(params.key);
|
|
||||||
|
|
||||||
return crossfade(rect, node);
|
|
||||||
}
|
|
||||||
|
|
||||||
requested.delete(params.key);
|
|
||||||
return fallback(node, params);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
<script>
|
||||||
|
import { interpolateString as interpolate } from 'd3-interpolate';
|
||||||
|
import { tweened } from 'svelte/motion';
|
||||||
|
|
||||||
|
import Grid from './Grid.svelte';
|
||||||
|
import Controls from './Controls.svelte';
|
||||||
|
|
||||||
|
import { eases, types } from './eases.js';
|
||||||
|
|
||||||
|
let current_type = 'In';
|
||||||
|
let current_ease = 'sine';
|
||||||
|
let duration = 2000;
|
||||||
|
let current = eases.get(current_ease)[current_type];
|
||||||
|
let playing = false;
|
||||||
|
let width;
|
||||||
|
|
||||||
|
const ease_path = tweened(current.shape, { interpolate });
|
||||||
|
const time = tweened(0);
|
||||||
|
const value = tweened(1000);
|
||||||
|
|
||||||
|
async function runAnimations() {
|
||||||
|
playing = true;
|
||||||
|
|
||||||
|
value.set(1000, {duration: 0});
|
||||||
|
time.set(0, {duration: 0});
|
||||||
|
|
||||||
|
await ease_path.set(current.shape);
|
||||||
|
await Promise.all([
|
||||||
|
time.set(1000, {duration, easing: x => x}),
|
||||||
|
value.set(0, {duration, easing: current.fn})
|
||||||
|
]);
|
||||||
|
|
||||||
|
playing = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: current = eases.get(current_ease)[current_type];
|
||||||
|
$: current && runAnimations();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.easing-vis {
|
||||||
|
display: flex;
|
||||||
|
max-height: 95%;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 20px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph {
|
||||||
|
transform: translate(200px,400px)
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:600px) {
|
||||||
|
.easing-vis {
|
||||||
|
flex-direction: column;
|
||||||
|
max-height: calc(100% - 3rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div bind:offsetWidth={width} class="easing-vis">
|
||||||
|
<svg viewBox="0 0 1400 1802">
|
||||||
|
<g class="canvas">
|
||||||
|
<Grid x={$time} y={$value}/>
|
||||||
|
<g class="graph">
|
||||||
|
<path
|
||||||
|
d={$ease_path}
|
||||||
|
stroke="#333"
|
||||||
|
stroke-width="2"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
|
||||||
|
fill="#ff3e00"
|
||||||
|
style="transform: translate(1060px, {($value - 24)}px)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<circle
|
||||||
|
cx="{$time}"
|
||||||
|
cy="{$value}"
|
||||||
|
r="15"
|
||||||
|
fill="#ff3e00"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<Controls
|
||||||
|
{eases}
|
||||||
|
{types}
|
||||||
|
{playing}
|
||||||
|
{width}
|
||||||
|
bind:duration
|
||||||
|
bind:current_ease
|
||||||
|
bind:current_type
|
||||||
|
on:play={runAnimations}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,186 @@
|
|||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
||||||
|
export let current_ease;
|
||||||
|
export let current_type;
|
||||||
|
export let eases;
|
||||||
|
export let types;
|
||||||
|
export let duration;
|
||||||
|
export let playing;
|
||||||
|
export let width;
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
$: mobile = width && width < 600;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.easing-sidebar {
|
||||||
|
width: 11em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 3px 0;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
background: #676778;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background: #ff3e00;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
display: inline;
|
||||||
|
padding: 0.2em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration span {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration input {
|
||||||
|
width: 80px;
|
||||||
|
margin: 10px 10px 10px 0 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration button {
|
||||||
|
margin: 10px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration .number {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration .play {
|
||||||
|
margin: 0 5px 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:600px) {
|
||||||
|
.easing-types {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.easing-sidebar {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration .play {
|
||||||
|
margin-left: auto;
|
||||||
|
width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 0.9em;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3:nth-of-type(2) {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="easing-sidebar">
|
||||||
|
<div class="easing-types">
|
||||||
|
<h3>Ease</h3>
|
||||||
|
{#if mobile}
|
||||||
|
<select bind:value={current_ease}>
|
||||||
|
{#each [...eases] as [name]}
|
||||||
|
<option
|
||||||
|
value={name}
|
||||||
|
class:selected={name === current_ease}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
{:else}
|
||||||
|
<ul>
|
||||||
|
{#each [...eases] as [name]}
|
||||||
|
<li
|
||||||
|
class:selected={name === current_ease}
|
||||||
|
on:click={() => current_ease = name}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
|
<h3>Type</h3>
|
||||||
|
{#if mobile }
|
||||||
|
<select bind:value={current_type}>
|
||||||
|
{#each types as [name, type]}
|
||||||
|
<option
|
||||||
|
value={type}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
{:else}
|
||||||
|
<ul>
|
||||||
|
{#each types as [name, type]}
|
||||||
|
<li
|
||||||
|
class:selected={type === current_type}
|
||||||
|
on:click={() => current_type = type}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<h4>
|
||||||
|
Duration
|
||||||
|
</h4>
|
||||||
|
<div class="duration">
|
||||||
|
<span>
|
||||||
|
<input type="number" bind:value={duration} min="0" step="100"/>
|
||||||
|
<button class="number" on:click={() => duration -= 100}>-</button>
|
||||||
|
<button class="number" on:click={() => duration += 100}>+</button>
|
||||||
|
</span>
|
||||||
|
<button class="play" on:click={() => dispatch('play')}>
|
||||||
|
{playing ? 'Restart' : 'Play'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<script>
|
||||||
|
export let x, y;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.grid-line {
|
||||||
|
stroke:#ccc;
|
||||||
|
opacity: 0.5;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-line-xy {
|
||||||
|
stroke: tomato;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svelte:options namespace="svg" />
|
||||||
|
|
||||||
|
<rect
|
||||||
|
x=0
|
||||||
|
y=0
|
||||||
|
width=1400
|
||||||
|
height=1800
|
||||||
|
stroke=#ccc
|
||||||
|
style="opacity: 0.5"
|
||||||
|
fill=none
|
||||||
|
stroke-width=2
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#each { length: 8 } as _, i}
|
||||||
|
{#if i < 6}
|
||||||
|
<path
|
||||||
|
d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
|
||||||
|
class="grid-line"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<path
|
||||||
|
d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
|
||||||
|
class="grid-line"
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<path
|
||||||
|
style="transform: translateX({x+200}px)"
|
||||||
|
d="M0 0 L0 1800"
|
||||||
|
class="grid-line-xy"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style="transform: translateY({y}px)"
|
||||||
|
d="M0 400 L1400 400"
|
||||||
|
class="grid-line-xy"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x=200
|
||||||
|
y=400
|
||||||
|
width=1000
|
||||||
|
height=1000
|
||||||
|
stroke=#999
|
||||||
|
fill=none
|
||||||
|
stroke-width=2
|
||||||
|
/>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import * as eases from 'svelte/easing';
|
||||||
|
|
||||||
|
const processed_eases = {};
|
||||||
|
|
||||||
|
for (const ease in eases) {
|
||||||
|
if (ease === "linear") {
|
||||||
|
processed_eases.linear = eases.linear;
|
||||||
|
} else {
|
||||||
|
const name = ease.replace(/In$|InOut$|Out$/, '');
|
||||||
|
const type = ease.match(/In$|InOut$|Out$/)[0];
|
||||||
|
|
||||||
|
if (!(name in processed_eases)) processed_eases[name] = {};
|
||||||
|
processed_eases[name][type] = {};
|
||||||
|
processed_eases[name][type].fn = eases[ease];
|
||||||
|
|
||||||
|
let shape = 'M0 1000';
|
||||||
|
for (let i = 1; i <= 1000; i++) {
|
||||||
|
shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
|
||||||
|
processed_eases[name][type].shape = shape;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sorted_eases = new Map([
|
||||||
|
['sine', processed_eases.sine],
|
||||||
|
['quad', processed_eases.quad],
|
||||||
|
['cubic', processed_eases.cubic],
|
||||||
|
['quart', processed_eases.quart],
|
||||||
|
['quint', processed_eases.quint],
|
||||||
|
['expo', processed_eases.expo],
|
||||||
|
['circ', processed_eases.circ],
|
||||||
|
['back', processed_eases.back],
|
||||||
|
['elastic', processed_eases.elastic],
|
||||||
|
['bounce', processed_eases.bounce],
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const types = [
|
||||||
|
['Ease In', 'In'],
|
||||||
|
['Ease Out', 'Out'],
|
||||||
|
['Ease In Out', 'InOut']
|
||||||
|
];
|
||||||
|
|
||||||
|
export { sorted_eases as eases };
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Ease Visualiser"
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Easing"
|
||||||
|
}
|
||||||
@ -1,70 +0,0 @@
|
|||||||
<script>
|
|
||||||
let language = "english";
|
|
||||||
|
|
||||||
const translations = {
|
|
||||||
english: {
|
|
||||||
tooltip: "Switch Languages",
|
|
||||||
},
|
|
||||||
latin: {
|
|
||||||
tooltip: "Itchsway Anguageslay",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function tooltip(node, text) {
|
|
||||||
const tooltip = document.createElement('div');
|
|
||||||
tooltip.textContent = text;
|
|
||||||
|
|
||||||
Object.assign(tooltip.style, {
|
|
||||||
position: 'absolute',
|
|
||||||
background: 'black',
|
|
||||||
color: 'white',
|
|
||||||
padding: '0.5em 1em',
|
|
||||||
fontSize: '12px',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
transform: 'translate(5px, -50%)',
|
|
||||||
borderRadius: '2px',
|
|
||||||
transition: 'opacity 0.4s'
|
|
||||||
});
|
|
||||||
|
|
||||||
function position() {
|
|
||||||
const { top, right, bottom } = node.getBoundingClientRect();
|
|
||||||
tooltip.style.top = `${(top + bottom) / 2}px`;
|
|
||||||
tooltip.style.left = `${right}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function append() {
|
|
||||||
document.body.appendChild(tooltip);
|
|
||||||
tooltip.style.opacity = 0;
|
|
||||||
setTimeout(() => tooltip.style.opacity = 1);
|
|
||||||
position();
|
|
||||||
}
|
|
||||||
|
|
||||||
function remove() {
|
|
||||||
tooltip.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
node.addEventListener('mouseenter', append);
|
|
||||||
node.addEventListener('mouseleave', remove);
|
|
||||||
|
|
||||||
return {
|
|
||||||
update(text) {
|
|
||||||
tooltip.textContent = text;
|
|
||||||
position();
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
tooltip.remove();
|
|
||||||
node.removeEventListener('mouseenter', append);
|
|
||||||
node.removeEventListener('mouseleave', remove);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleLanguage() {
|
|
||||||
language = language === 'english' ? 'latin' : 'english'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
|
|
||||||
{language}
|
|
||||||
</button>
|
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
import { longpress } from './longpress.js';
|
||||||
|
|
||||||
|
let pressed = false;
|
||||||
|
let duration = 2000;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type=range bind:value={duration} max={2000} step={100}>
|
||||||
|
{duration}ms
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<button use:longpress={duration}
|
||||||
|
on:longpress="{() => pressed = true}"
|
||||||
|
on:mouseenter="{() => pressed = false}"
|
||||||
|
>press and hold</button>
|
||||||
|
|
||||||
|
{#if pressed}
|
||||||
|
<p>congratulations, you pressed and held for {duration}ms</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
export function longpress(node, duration) {
|
||||||
|
let timer;
|
||||||
|
|
||||||
|
const handleMousedown = () => {
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
node.dispatchEvent(
|
||||||
|
new CustomEvent('longpress')
|
||||||
|
);
|
||||||
|
}, duration);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseup = () => {
|
||||||
|
clearTimeout(timer)
|
||||||
|
};
|
||||||
|
|
||||||
|
node.addEventListener('mousedown', handleMousedown);
|
||||||
|
node.addEventListener('mouseup', handleMouseup);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(newDuration) {
|
||||||
|
duration = newDuration;
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mousedown', handleMousedown);
|
||||||
|
node.removeEventListener('mouseup', handleMouseup);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -1,45 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.modal-background {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
width: calc(100vw - 4em);
|
|
||||||
max-width: 32em;
|
|
||||||
max-height: calc(100vh - 4em);
|
|
||||||
overflow: auto;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
padding: 1em;
|
|
||||||
border-radius: 0.2em;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class='modal-background' on:click='{() => dispatch("close")}'></div>
|
|
||||||
|
|
||||||
<div class='modal'>
|
|
||||||
<slot name='header'></slot>
|
|
||||||
<hr>
|
|
||||||
<slot></slot>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<button on:click='{() => dispatch("close")}'>close modal</button>
|
|
||||||
</div>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue