mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b14d264718 | |||
| 1a778922af | |||
| 79b97c6d24 | |||
| a8e919f382 | |||
| 20b33f50fa | |||
| 9170882010 | |||
| ae36cca2ef | |||
| f5ce05c81e | |||
| 2fbf4f2c22 | |||
| 8a4fd5015a | |||
| de04ed2339 | |||
| ae263730d9 | |||
| 85418043f4 | |||
| 4fb2733321 | |||
| d9d109c9a2 | |||
| 4ee39282ca | |||
| 3b3fd8a6c9 | |||
| 29111a5c10 | |||
| 4b30d0b412 | |||
| d07f396578 | |||
| 2c218c4463 | |||
| af83a8249e |
+2
-1
@@ -14,4 +14,5 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
package-lock.json
|
||||
.vscode
|
||||
.vscode
|
||||
node_modules
|
||||
|
||||
@@ -1,123 +1,73 @@
|
||||
<h1 align="center">🦉 Odoo Web Lab 🦉</h1>
|
||||
<h1 align="center">🦉 Odoo Web Library 🦉</h1>
|
||||
|
||||
## Project Overview
|
||||
|
||||
Odoo Web Lab (OWL) is a project to collect some useful, reusable, (hopefully)
|
||||
well designed building blocks for building web applications. However, since this is the basis for the Odoo web client, we will not hesitate
|
||||
to design the code here to better match the Odoo architecture/design principles.
|
||||
The Odoo Web Library (OWL) is a small
|
||||
UI framework intended to be the basis for the [Odoo](https://www.odoo.com/) Web Client, and hopefully many
|
||||
other Odoo related projects. OWL's two key features are:
|
||||
|
||||
The most important element of this repository is certainly the component system.
|
||||
It is designed to be:
|
||||
- a declarative component system, with QWeb as a template engine, asynchronous rendering, and an underlying virtual dom,
|
||||
- and a store (state management solution, loosely inspired by VueX and React/Redux).
|
||||
|
||||
1. **declarative:** the user interface should be described in term of the state
|
||||
of the application, not as a sequence of imperative steps.
|
||||
If you are interested, you can find a discussion on what makes OWL different
|
||||
from React and Vue [here](doc/comparison.md)
|
||||
|
||||
2. **composable:** each widget can seamlessly be created in a parent widget by
|
||||
a simple directive in its template.
|
||||
## Try it online!
|
||||
|
||||
3. **asynchronous rendering:** the framework will transparently wait for each
|
||||
subwidgets to be ready before applying the rendering. It uses native promises
|
||||
under the hood.
|
||||
An online playground is available at [https://odoo.github.io/owl/](https://odoo.github.io/owl/) to let you experiment with the OWL framework.
|
||||
|
||||
4. **uses QWeb as a template system:** the templates are described in XML
|
||||
and follow the QWeb specification. This is a requirement for Odoo.
|
||||
# Example
|
||||
|
||||
5. **with an imperative escape hatch:** if necessary, sub widgets can easily be
|
||||
manually created/destroyed.
|
||||
Here is a short example to illustrate interactive widgets:
|
||||
|
||||
Note: the code is written in typescript. This does not mean that the main web
|
||||
client will ever be converted to typescript (even though I would really like it).
|
||||
```javascript
|
||||
class ClickCounter extends owl.Component {
|
||||
inlineTemplate = `
|
||||
<button t-on-click="increment">
|
||||
Click Me! [<t t-esc="state.value"/>]
|
||||
</button>`;
|
||||
|
||||
## Try it online
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.state = { value: 0 };
|
||||
}
|
||||
|
||||
You can experiment with the OWL project online: [https://odoo.github.io/owl/](https://odoo.github.io/owl/)
|
||||
increment() {
|
||||
this.state.value++;
|
||||
}
|
||||
}
|
||||
|
||||
const qweb = new owl.QWeb();
|
||||
const counter = new ClickCounter({qweb});
|
||||
counter.mount(document.body);
|
||||
```
|
||||
|
||||
More interesting examples can be found on the [playground](https://odoo.github.io/owl/) application.
|
||||
|
||||
## Installing/Building
|
||||
|
||||
If you want to use a simple `<script>` tag, the last release can be downloaded here:
|
||||
|
||||
- [owl-0.8.0.js](https://odoo.github.io/owl/releases/owl-0.8.0.js)
|
||||
- [owl-0.8.0.min.js](https://odoo.github.io/owl/releases/owl-0.8.0.min.js)
|
||||
|
||||
Some npm scripts are available:
|
||||
|
||||
| Command | Description |
|
||||
| ------------------ | --------------------------------------------------------- |
|
||||
| npm install | install every dependency required for this project |
|
||||
| npm run build | build a bundle of _owl_ in the _/dist/_ folder |
|
||||
| npm run build:es5 | build a bundle of _owl_ in the _/dist/_ folder (ES5 code) |
|
||||
| npm run minify | minify the prebuilt owl.js file |
|
||||
| npm run test | run all tests |
|
||||
| npm run test:watch | run all tests, and keep a watcher |
|
||||
| Command | Description |
|
||||
| -------------------- | -------------------------------------------------- |
|
||||
| `npm install` | install every dependency required for this project |
|
||||
| `npm run build` | build a bundle of _owl_ in the _/dist/_ folder |
|
||||
| `npm run minify` | minify the prebuilt owl.js file |
|
||||
| `npm run test` | run all tests |
|
||||
| `npm run test:watch` | run all tests, and keep a watcher |
|
||||
|
||||
## Documentation
|
||||
|
||||
The complete documentation can be found [here](doc/readme.md). The most important sections are:
|
||||
|
||||
- [Quick Start](doc/quick_start.md)
|
||||
- [Tutorial](doc/tutorial.md)
|
||||
- [Component](doc/component.md)
|
||||
- [QWeb](doc/qweb.md)
|
||||
|
||||
# Examples
|
||||
|
||||
Here is a minimal Hello World example:
|
||||
|
||||
```javascript
|
||||
class HelloWorld extends owl.core.Component {
|
||||
inlineTemplate = `<div>Hello <t t-esc="props.name"/></div>`;
|
||||
}
|
||||
|
||||
const env = {
|
||||
qweb: new owl.core.QWeb()
|
||||
};
|
||||
|
||||
const hello = new HelloWorld(env, { name: "World" });
|
||||
hello.mount(document.body);
|
||||
```
|
||||
|
||||
The next example show how interactive widgets can be created and how widget
|
||||
composition works:
|
||||
|
||||
```javascript
|
||||
class Counter extends owl.core.Component {
|
||||
inlineTemplate = `
|
||||
<div>
|
||||
<button t-on-click="increment(-1)">-</button>
|
||||
<span style="font-weight:bold">Value: <t t-esc="state.value"/></span>
|
||||
<button t-on-click="increment(1)">+</button>
|
||||
</div>`;
|
||||
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.state = {
|
||||
value: props.initialState || 0
|
||||
};
|
||||
}
|
||||
|
||||
increment(delta) {
|
||||
this.updateState({ value: this.state.value + delta });
|
||||
}
|
||||
}
|
||||
|
||||
class App extends owl.core.Component {
|
||||
inlineTemplate = `
|
||||
<div>
|
||||
<t t-widget="Counter" t-props="{initialState: 1}"/>
|
||||
<t t-widget="Counter" t-props="{initialState: 42}"/>
|
||||
</div>`;
|
||||
|
||||
widgets = { Counter };
|
||||
}
|
||||
|
||||
const env = {
|
||||
qweb: new owl.core.QWeb()
|
||||
};
|
||||
|
||||
const app = new App(env);
|
||||
app.mount(document.body);
|
||||
```
|
||||
|
||||
More interesting examples on how to work with this web framework can be found in the _examples/_ folder:
|
||||
|
||||
- [Todo Application](examples/readme.md#todo-app)
|
||||
- [Web Client](examples/readme.md#web-client-example)
|
||||
- [Benchmarks](examples/readme.md#benchmarks)
|
||||
- [Store](doc/store.md)
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
# Comparison with Vue/React
|
||||
|
||||
OWL, React and Vue have the same main feature: they allow developers to build
|
||||
declarative user interfaces. To do that, all these frameworks uses a virtual dom. However, there are still obviously many differences.
|
||||
|
||||
In this page, we try to highlight some of these differences. Obviously, some
|
||||
effort was done to be fair. However, if you disagree with some of the points
|
||||
discussed, feel free to open an issue/submit a PR to correct this text.
|
||||
|
||||
- [Size](#size)
|
||||
- [Tooling/Build Step](#toolingbuild-step)
|
||||
- [Templating](#templating)
|
||||
- [Asynchronous rendering](#asynchronous-rendering)
|
||||
- [Reactiveness](#reactiveness)
|
||||
- [State Management](#state-management)
|
||||
|
||||
### Size
|
||||
|
||||
OWL is intended to be small and to work at a slightly lower level of abstraction
|
||||
than React and Vue. Also, jQuery is not the same kind of framework, but it is interesting to compare.
|
||||
|
||||
| Framework | Size (minified) | Size (minified, gzipped) |
|
||||
| ------------------------ | --------------- | ------------------------ |
|
||||
| OWL | 32kb | 11kb |
|
||||
| Vue + VueX | | 30kb |
|
||||
| React + ReactDOM + Redux | | 40kb |
|
||||
| jQuery | 86kb | 30kb |
|
||||
|
||||
### Tooling/Build step
|
||||
|
||||
OWL is designed to be easy to use in a standalone way. For various reasons,
|
||||
Odoo does not want to rely on standard web tools (such as webpack), and OWL can
|
||||
be used by simply adding a script tag to a page.
|
||||
|
||||
```html
|
||||
<script src="owl.min.js" />
|
||||
```
|
||||
|
||||
In comparison, React encourages using JSX,
|
||||
which necessitate a build step, and most Vue applications uses single file
|
||||
components, which also necessitate a build step.
|
||||
|
||||
On the flipside, external tooling may make it harder to use in some case, but it
|
||||
also brings a lot of benefits. And React/Vue have both a large ecosystem.
|
||||
|
||||
### Templating
|
||||
|
||||
OWL uses its own QWeb engine, which compiles templates on the
|
||||
frontend, as they are needed. This is extremely convenient for our use case, in
|
||||
particular because templates are described in XML files, and can be modified by
|
||||
XPaths. Since Odoo is at its heart a modular application, this is an important
|
||||
feature for us.
|
||||
|
||||
```xml
|
||||
<div>
|
||||
<button t-on-click="increment">Click Me! [<t t-esc="state.value"/>]</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
Vue is actually kind of similar. Its template language is kind of close to QWeb,
|
||||
with the `v` replaced by the `t`. However, it is also more fully featured. For
|
||||
example, Vue templates have slots, or event modifiers. A large difference is that
|
||||
most Vue applications will need to be built ahead of time, to compile the templates
|
||||
into javascript functions. Note that Vue has a separate build which includes the
|
||||
template compiler.
|
||||
|
||||
In contrast, most React applications do not use a templating language, but write
|
||||
some JSX code, which is precompiled into plain JavaScript by a build step.
|
||||
|
||||
```jsx
|
||||
class Clock extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Hello, world!</h1>
|
||||
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This has the advantage of having the full power of Javascript, but is less
|
||||
structured than a template language. Note that the tooling is quite impressive:
|
||||
there is a syntax highlighter for jsx here on github!
|
||||
|
||||
### Asynchronous rendering
|
||||
|
||||
This is actually a big difference between OWL and React/Vue: components in OWL
|
||||
are totally asynchronous. They have two asynchronous hooks in their lifecycle:
|
||||
|
||||
- `willStart` (before the widget starts rendering)
|
||||
- `willUpdateProps` (before new props are set)
|
||||
|
||||
Both these methods can be implemented and return a promise. The rendering will
|
||||
then wait for these promises to be completed before patching the DOM. This is
|
||||
useful for some use cases: for example, a widget may want to fetch an external
|
||||
library (a calendar widget may need a specialized calendar rendering library),
|
||||
in its willStart hook.
|
||||
|
||||
```javascript
|
||||
class MyCalendarWidget extends owl.Component {
|
||||
...
|
||||
|
||||
willStart() {
|
||||
return utils.lazyLoad('static/libs/fullcalendar/fullcalendar.js');
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This may be dangerous (to stop the rendering waiting for the network), but it is
|
||||
extremely powerful as well, as demonstrated by the Odoo Web Client.
|
||||
|
||||
Lazy loading static libraries can obviously be done with React/Vue, but it is
|
||||
more convoluted.
|
||||
|
||||
### Reactiveness
|
||||
|
||||
React has a simple model: whenever the state changes, it is
|
||||
replaced with a new state (via the setState method). Then, the DOM is patched.
|
||||
This is simple, efficient, and a little bit awkward to write.
|
||||
|
||||
Vue is a little bit different: it replace magically the properties in the state
|
||||
by getters/setters. With that, it can notify components whenever the state that
|
||||
they read was changed.
|
||||
|
||||
Owl is closer to vue: it also tracks magically the state properties, but it does
|
||||
only increment a counter whenever it changes (and a _deep_ counter for each of
|
||||
its parents). This assumes that the state is actually a tree.
|
||||
|
||||
### State Management
|
||||
|
||||
Managing the state of an application is a tricky issue. Many solutions have
|
||||
been proposed these last few years. It also depends on the kind of application we
|
||||
are talking about. A small application may not need much more than a simple
|
||||
object to contain its state.
|
||||
|
||||
However, there are some common solutions for React and Vue: redux and vuex.
|
||||
Both of them are a centralized store that own the state, and they dictate how
|
||||
the state can be mutated.
|
||||
|
||||
**Redux**
|
||||
|
||||
In Redux, the state is mutated by reducers. Reducers are functions
|
||||
that modify the state by returning a different object:
|
||||
|
||||
```javascript
|
||||
...
|
||||
switch (action.type) {
|
||||
case ADD_TODO: {
|
||||
const { id, content } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
allIds: [...state.allIds, id],
|
||||
byIds: {
|
||||
...state.byIds,
|
||||
[id]: {
|
||||
content,
|
||||
completed: false
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
This is a little bit awkward to write, but this allows the component system to
|
||||
check if a part of the state was changed. This is exactly what is done by the
|
||||
`connect` function: it create a _connected_ component, which is subscribed to
|
||||
the state and triggers a rerender if some part of the state was modified.
|
||||
|
||||
**VueX**
|
||||
|
||||
VueX is based on a different principle: the state is mutated through
|
||||
some special functions (the mutations), which modify the state in place:
|
||||
|
||||
```javascript
|
||||
function ({state}, payload) {
|
||||
const { id, content } = payload;
|
||||
const message = {id, content, completed: false};
|
||||
state.messages.push(message)
|
||||
}
|
||||
```
|
||||
|
||||
This is simpler, but there is a little bit more happening behind the scene:
|
||||
each key from the state is silently replaced by getters and setters, and VueX
|
||||
keeps track of who get data, and retrigger a render when it was changed.
|
||||
|
||||
**Owl**
|
||||
|
||||
Owl store is a little bit like a mix of redux and vuex: it has mutations and
|
||||
actions, like VueX, it keeps track of the state changes, but it does not notify
|
||||
a component when the state changes. Instead, components need to connect to the
|
||||
store like in redux, with a function that will listen to the relevant state.
|
||||
@@ -1,5 +1,20 @@
|
||||
# Component
|
||||
|
||||
The component system is designed to be:
|
||||
|
||||
1. **declarative:** the user interface should be described in term of the state
|
||||
of the application, not as a sequence of imperative steps.
|
||||
|
||||
2. **composable:** each widget can seamlessly be created in a parent widget by
|
||||
a simple directive in its template.
|
||||
|
||||
3. **asynchronous rendering:** the framework will transparently wait for each
|
||||
subwidgets to be ready before applying the rendering. It uses native promises
|
||||
under the hood.
|
||||
|
||||
4. **uses QWeb as a template system:** the templates are described in XML
|
||||
and follow the QWeb specification. This is a requirement for Odoo.
|
||||
|
||||
Components are the reusable, composable widgets. They are designed to be low
|
||||
level, to be declarative, and with asynchronous rendering.
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
# Observer
|
||||
|
||||
+9
-12
@@ -1,17 +1,14 @@
|
||||
# Odoo Web Lab Documentation
|
||||
# Odoo Web Library Documentation
|
||||
|
||||
Currently, this repository contains:
|
||||
|
||||
- an implementation/extension of the QWeb template engine that outputs a virtual
|
||||
dom (using the snabbdom library)
|
||||
- a Component class, which uses the QWeb engine as its underlying rendering
|
||||
mechanism. The component class is designed to be declarative, with
|
||||
asynchronous rendering. Also, it uses snabbdom as the virtual dom library.
|
||||
- some utility functions/classes
|
||||
- a Store class and a connect function, to help manage the state of an application (like react-redux)
|
||||
## Reference
|
||||
|
||||
- [Quick Start](quick_start.md)
|
||||
- [Tutorial](tutorial.md)
|
||||
- [Component](component.md)
|
||||
- [QWeb](qweb.md)
|
||||
- [State Management](state_management.md)
|
||||
- [Store](store.md)
|
||||
- [Observer](observer.md)
|
||||
- [Virtual DOM](vdom.md)
|
||||
|
||||
## Miscellaneous
|
||||
- [Quick Start](quick_start.md)
|
||||
- [Comparison with React/Vue](comparison.md)
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
# Tutorial
|
||||
|
||||
todo...
|
||||
@@ -0,0 +1,3 @@
|
||||
# VDom
|
||||
|
||||
todo
|
||||
@@ -1,45 +0,0 @@
|
||||
.main {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
}
|
||||
|
||||
.left-thing {
|
||||
background-color: gray;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.left-thing button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-thing .counter span {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.left-thing .counter button {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.right-thing {
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Message widget */
|
||||
.message .author {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 400px;
|
||||
background-color: lightblue;
|
||||
margin: 10px 5px;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Message } from "./message.js";
|
||||
import { messages } from "./data.js";
|
||||
|
||||
const template = `
|
||||
<div class="main">
|
||||
<div class="left-thing">
|
||||
<div class="counter">
|
||||
<button t-on-click="increment(-1)">-</button>
|
||||
<span style="font-weight:bold">Value: <t t-esc="state.messages.length"/></span>
|
||||
<button t-on-click="increment(1)">+</button>
|
||||
</div>
|
||||
<button t-on-click="setMessageCount(10)">10 messages</button>
|
||||
<button t-on-click="setMessageCount(20)">20 messages</button>
|
||||
<button t-on-click="setMessageCount(500)">500 messages</button>
|
||||
<button t-on-click="setMessageCount(1000)">1000 messages</button>
|
||||
<button t-on-click="setMessageCount(5000)">5000 messages</button>
|
||||
<button t-on-click="setMessageCount(15000)">15000 messages</button>
|
||||
</div>
|
||||
<div class="right-thing">
|
||||
<div class="content">
|
||||
<t t-foreach="state.messages" t-as="message">
|
||||
<t t-widget="Message" t-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export class App extends owl.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.inlineTemplate = template;
|
||||
this.widgets = { Message };
|
||||
this.state = {
|
||||
messages: messages.slice(0, 10)
|
||||
};
|
||||
}
|
||||
|
||||
setMessageCount(n) {
|
||||
this.state.messages = messages.slice(0, n);
|
||||
}
|
||||
|
||||
removeMessage(data) {
|
||||
const index = messages.findIndex(m => m.id === data.id);
|
||||
this.state.messages.splice(index, 1);
|
||||
}
|
||||
|
||||
increment(delta) {
|
||||
const n = this.state.messages.length + delta;
|
||||
this.setMessageCount(n);
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
export class Counter extends owl.Component {
|
||||
inlineTemplate = `
|
||||
<div>
|
||||
<button t-on-click="increment(-1)">-</button>
|
||||
<span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
|
||||
<button t-on-click="increment(1)">+</button>
|
||||
</div>`;
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.state = {
|
||||
counter: props.initialState || 0
|
||||
};
|
||||
}
|
||||
|
||||
increment(delta) {
|
||||
this.state.counter += delta;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
export const messages = [];
|
||||
|
||||
const authors = ["Aaron", "David", "Vincent"];
|
||||
const content = [
|
||||
"Lorem ipsum dolor sit amet",
|
||||
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
|
||||
"Excepteur sint occaecat cupidatat non proident"
|
||||
];
|
||||
|
||||
function chooseRandomly(array) {
|
||||
const index = Math.floor(Math.random() * array.length);
|
||||
return array[index];
|
||||
}
|
||||
|
||||
for (let i = 1; i < 16000; i++) {
|
||||
messages.push({
|
||||
id: i,
|
||||
author: chooseRandomly(authors),
|
||||
msg: `${i}: ${chooseRandomly(content)}`,
|
||||
likes: 0
|
||||
});
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Odoo WebCore Benchmarks App</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<script src="/owl.js"></script>
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
<script type="module" src="/main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +0,0 @@
|
||||
import { App } from "./app.js";
|
||||
|
||||
function createApp(el) {
|
||||
const env = {
|
||||
qweb: new owl.QWeb()
|
||||
};
|
||||
const app = new App(env, { initialState: 13 });
|
||||
app.mount(el);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
createApp(document.body);
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
import { Counter } from "./counter.js";
|
||||
|
||||
export class Message extends owl.Component {
|
||||
inlineTemplate = `
|
||||
<div class="message">
|
||||
<span class="author"><t t-esc="props.author"/></span>
|
||||
<span class="msg"><t t-esc="props.msg"/></span>
|
||||
<button class="remove" t-on-click="removeMessage">Remove</button>
|
||||
<t t-widget="Counter" t-props="{initialState: props.id}"/>
|
||||
</div>`;
|
||||
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.widgets = { Counter };
|
||||
}
|
||||
|
||||
removeMessage() {
|
||||
this.trigger("remove_message", {
|
||||
id: this.props.id
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
# Examples
|
||||
|
||||
This project features three example to illustrate how to work with the web-core framework:
|
||||
|
||||
- _benchmarks_ is a small application to test large number of widgets,
|
||||
- _todoapp_ is the classical todo application (from the todomvc project),
|
||||
|
||||
## Benchmarks
|
||||
|
||||
This example is just a playground to experiment/showcase some features of the framework, with large number of widgets.
|
||||
|
||||
```
|
||||
npm run example:benchmarks:build # make a build in dist/examples/
|
||||
npm run example:benchmarks:dev # make a build in dist/examples/, and make a live server to access it
|
||||
```
|
||||
|
||||
The benchmarks application generates a large number of demo messages, and display them in a list, with a few buttons that can
|
||||
be used to alter the number of visible widgets.
|
||||
|
||||
Note that each message is itself a widget, with a sub widget. This
|
||||
example could be made faster (by not using subwidgets), but the point is to observe/measure the overhead of the Component class.
|
||||
|
||||
## Todo App
|
||||
|
||||
The Todo App is the classical todo application from _http://todomvc.com/_. It is a good mini application with non trivial data structures and interface updates.
|
||||
|
||||
```
|
||||
npm run example:todoapp:build # make a build in dist/examples/
|
||||
npm run example:todoapp:dev # make a build in dist/examples/, and make a live server to access it
|
||||
```
|
||||
|
||||
It is implemented with the Store class (as in redux/vuex).
|
||||
@@ -1,63 +0,0 @@
|
||||
import { TodoItem } from "./TodoItem.js";
|
||||
|
||||
const { Component, connect } = owl;
|
||||
|
||||
const ENTER_KEY = 13;
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return { todos: state.todos };
|
||||
}
|
||||
|
||||
class TodoApp extends Component {
|
||||
template = "todoapp";
|
||||
widgets = { TodoItem };
|
||||
state = { filter: "all" };
|
||||
|
||||
get visibleTodos() {
|
||||
let todos = this.props.todos;
|
||||
if (this.state.filter === "active") {
|
||||
todos = todos.filter(t => !t.completed);
|
||||
}
|
||||
if (this.state.filter === "completed") {
|
||||
todos = todos.filter(t => t.completed);
|
||||
}
|
||||
return todos;
|
||||
}
|
||||
|
||||
get allChecked() {
|
||||
return this.props.todos.every(todo => todo.completed);
|
||||
}
|
||||
|
||||
get remaining() {
|
||||
return this.props.todos.filter(todo => !todo.completed).length;
|
||||
}
|
||||
|
||||
get remainingText() {
|
||||
const items = this.remaining < 2 ? "item" : "items";
|
||||
return ` ${items} left`;
|
||||
}
|
||||
|
||||
addTodo(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
const title = ev.target.value;
|
||||
if (title.trim()) {
|
||||
this.env.store.dispatch("addTodo", title);
|
||||
}
|
||||
ev.target.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
clearCompleted() {
|
||||
this.env.store.dispatch("clearCompleted");
|
||||
}
|
||||
|
||||
toggleAll() {
|
||||
this.env.store.dispatch("toggleAll", !this.allChecked);
|
||||
}
|
||||
|
||||
setFilter(filter) {
|
||||
this.state.filter = filter;
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(TodoApp);
|
||||
@@ -1,51 +0,0 @@
|
||||
const ENTER_KEY = 13;
|
||||
const ESC_KEY = 27;
|
||||
|
||||
export class TodoItem extends owl.Component {
|
||||
template = "todoitem";
|
||||
|
||||
state = { isEditing: false };
|
||||
|
||||
removeTodo() {
|
||||
this.env.store.dispatch("removeTodo", this.props.id);
|
||||
}
|
||||
|
||||
toggleTodo() {
|
||||
this.env.store.dispatch("toggleTodo", this.props.id);
|
||||
}
|
||||
|
||||
async editTodo() {
|
||||
this.state.isEditing = true;
|
||||
setTimeout(() => {
|
||||
this.refs.input.value = "";
|
||||
this.refs.input.focus();
|
||||
this.refs.input.value = this.props.title;
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyup(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
this.updateTitle(ev.target.value);
|
||||
}
|
||||
if (ev.keyCode === ESC_KEY) {
|
||||
ev.target.value = this.props.title;
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
handleBlur(ev) {
|
||||
this.updateTitle(ev.target.value);
|
||||
}
|
||||
updateTitle(title) {
|
||||
const value = title.trim();
|
||||
if (!value) {
|
||||
this.removeTodo(this.props.id);
|
||||
} else {
|
||||
this.env.store.dispatch("editTodo", {
|
||||
id: this.props.id,
|
||||
title: value
|
||||
});
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,376 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #f5f5f5;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border: none; /* Mobile Safari */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.toggle-all + label {
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: -52px;
|
||||
left: -13px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.toggle-all + label:before {
|
||||
content: "❯";
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
|
||||
.toggle-all:checked + label:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: calc(100% - 43px);
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.todo-list li .toggle + label {
|
||||
/*
|
||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||
*/
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked + label {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 60px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
margin-bottom: 11px;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:after {
|
||||
content: "×";
|
||||
}
|
||||
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #777;
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Odoo Demo App</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<script src="/owl.js"></script>
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
<script type="module" src="/main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,26 +0,0 @@
|
||||
import TodoApp from "./TodoApp.js";
|
||||
import { makeStore } from "./store.js";
|
||||
|
||||
async function makeEnv() {
|
||||
const result = await fetch("templates.xml");
|
||||
if (!result.ok) {
|
||||
throw new Error("Error while fetching xml templates");
|
||||
}
|
||||
let templates = await result.text();
|
||||
templates = templates.replace(/<!--[\s\S]*?-->/g, "");
|
||||
const qweb = new owl.QWeb();
|
||||
qweb.loadTemplates(templates);
|
||||
return {
|
||||
qweb,
|
||||
store: makeStore()
|
||||
};
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
const env = await makeEnv();
|
||||
const app = new TodoApp(env);
|
||||
|
||||
// for debugging purpose
|
||||
window.app = app;
|
||||
await app.mount(document.body);
|
||||
});
|
||||
@@ -1,75 +0,0 @@
|
||||
//------------------------------------------------------------------------------
|
||||
// ACTIONS
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
const actions = {
|
||||
addTodo({ commit }, title) {
|
||||
commit("addTodo", title);
|
||||
},
|
||||
removeTodo({ commit }, id) {
|
||||
commit("removeTodo", id);
|
||||
},
|
||||
toggleTodo({ state, commit }, id) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
commit("editTodo", { id, completed: !todo.completed });
|
||||
},
|
||||
clearCompleted({ state, commit }) {
|
||||
state.todos
|
||||
.filter(todo => todo.completed)
|
||||
.forEach(todo => {
|
||||
commit("removeTodo", todo.id);
|
||||
});
|
||||
},
|
||||
toggleAll({ state, commit }, completed) {
|
||||
state.todos.forEach(todo => {
|
||||
commit("editTodo", { id: todo.id, completed });
|
||||
});
|
||||
},
|
||||
editTodo({ commit }, { id, title }) {
|
||||
commit("editTodo", { id, title });
|
||||
}
|
||||
};
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// MUTATIONS
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
const mutations = {
|
||||
addTodo({ state }, title) {
|
||||
const id = state.nextId++;
|
||||
const todo = { id, title, completed: false };
|
||||
state.todos.push(todo);
|
||||
},
|
||||
removeTodo({ state }, id) {
|
||||
const index = state.todos.findIndex(t => t.id === id);
|
||||
state.todos.splice(index, 1);
|
||||
},
|
||||
editTodo({ state }, { id, title, completed }) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
if (title !== undefined) {
|
||||
todo.title = title;
|
||||
}
|
||||
if (completed !== undefined) {
|
||||
todo.completed = completed;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// STORE
|
||||
//------------------------------------------------------------------------------
|
||||
const LOCALSTORAGE_KEY = "todos-odoo";
|
||||
|
||||
export function makeStore() {
|
||||
const todos = JSON.parse(
|
||||
window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
|
||||
);
|
||||
const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
|
||||
const state = { todos, nextId };
|
||||
const store = new owl.Store({ state, actions, mutations });
|
||||
store.on("update", null, () => {
|
||||
const state = JSON.stringify(store.state.todos);
|
||||
window.localStorage.setItem(LOCALSTORAGE_KEY, state);
|
||||
});
|
||||
return store;
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<section t-name="todoapp" class="todoapp">
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
|
||||
</header>
|
||||
<!-- main section -->
|
||||
<section class="main" t-if="props.todos.length">
|
||||
<input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="toggleAll"/>
|
||||
<label for="toggle-all"></label>
|
||||
<ul class="todo-list">
|
||||
<t t-foreach="visibleTodos" t-as="todo">
|
||||
<t t-widget="TodoItem" t-key="todo.id" t-props="todo"/>
|
||||
</t>
|
||||
</ul>
|
||||
</section>
|
||||
<!-- footer -->
|
||||
<footer class="footer" t-if="props.todos.length">
|
||||
<span class="todo-count">
|
||||
<strong>
|
||||
<t t-esc="remaining"/>
|
||||
</strong>
|
||||
<t t-esc="remainingText"/>
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li>
|
||||
<a href="#/all" t-on-click="setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/active" t-on-click="setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/completed" t-on-click="setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="clear-completed" t-if="props.todos.length gt remaining" t-on-click="clearCompleted">
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<li t-name="todoitem" class="todo" t-att-class="{completed: props.completed, editing: state.isEditing}">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox" t-on-change="toggleTodo" t-att-checked="props.completed"/>
|
||||
<label t-on-dblclick="editTodo">
|
||||
<t t-esc="props.title"/>
|
||||
</label>
|
||||
<button class="destroy" t-on-click="removeTodo"></button>
|
||||
</div>
|
||||
<input class="edit" t-ref="'input'" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
|
||||
</li>
|
||||
|
||||
</templates>
|
||||
@@ -1,9 +0,0 @@
|
||||
module.exports = {
|
||||
roots: ["<rootDir>/src", "<rootDir>/tests"],
|
||||
transform: {
|
||||
"^.+\\.ts?$": "ts-jest"
|
||||
},
|
||||
verbose: false,
|
||||
testRegex: "(/tests/.*(test|spec))\\.ts?$",
|
||||
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
|
||||
# Vim
|
||||
*.swp
|
||||
|
||||
# Generated JavaScript
|
||||
/test/browserified.js
|
||||
/browserified.js
|
||||
/h.d.ts
|
||||
/h.js
|
||||
/h.js.map
|
||||
/hooks.d.ts
|
||||
/hooks.js
|
||||
/hooks.js.map
|
||||
/htmldomapi.d.ts
|
||||
/htmldomapi.js
|
||||
/htmldomapi.js.map
|
||||
/is.d.ts
|
||||
/is.js
|
||||
/is.js.map
|
||||
/snabbdom.bundle.d.ts
|
||||
/snabbdom.bundle.js
|
||||
/snabbdom.bundle.js.map
|
||||
/snabbdom.d.ts
|
||||
/snabbdom.js
|
||||
/snabbdom.js.map
|
||||
/thunk.d.ts
|
||||
/thunk.js
|
||||
/thunk.js.map
|
||||
/tovnode.d.ts
|
||||
/tovnode.js
|
||||
/tovnode.js.map
|
||||
/vnode.d.ts
|
||||
/vnode.js
|
||||
/vnode.js.map
|
||||
/modules
|
||||
/helpers
|
||||
/es
|
||||
@@ -1,33 +0,0 @@
|
||||
/test
|
||||
/perf
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
|
||||
# Vim
|
||||
*.swp
|
||||
@@ -1,17 +0,0 @@
|
||||
sudo: false
|
||||
language: node_js
|
||||
node_js:
|
||||
- '6.10.1'
|
||||
script:
|
||||
- export IP_ADDR=$(ip addr | grep eth -A 4 | grep 'inet ' | awk '{ print $2 }' | sed 's/\/..//')
|
||||
- npm test
|
||||
addons:
|
||||
browserstack:
|
||||
username:
|
||||
secure: <TODO>
|
||||
access_key:
|
||||
secure: <TODO>
|
||||
env:
|
||||
global:
|
||||
- secure: <TODO>
|
||||
- secure: <TODO>
|
||||
@@ -1,22 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Simon Friis Vindum
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
@@ -1,758 +0,0 @@
|
||||
# Snabbdom
|
||||
|
||||
A virtual DOM library with focus on simplicity, modularity, powerful features
|
||||
and performance.
|
||||
|
||||
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/snabbdom) [](https://www.npmjs.com/package/snabbdom)
|
||||
|
||||
[](https://gitter.im/paldepind/snabbdom?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
## Table of contents
|
||||
|
||||
* [Introduction](#introduction)
|
||||
* [Features](#features)
|
||||
* [Inline example](#inline-example)
|
||||
* [Examples](#examples)
|
||||
* [Core documentation](#core-documentation)
|
||||
* [Modules documentation](#modules-documentation)
|
||||
* [Helpers](#helpers)
|
||||
* [Virtual Node documentation](#virtual-node)
|
||||
* [Structuring applications](#structuring-applications)
|
||||
|
||||
## Why
|
||||
|
||||
Virtual DOM is awesome. It allows us to express our application's view
|
||||
as a function of its state. But existing solutions were way way too
|
||||
bloated, too slow, lacked features, had an API biased towards OOP
|
||||
and/or lacked features I needed.
|
||||
|
||||
## Introduction
|
||||
|
||||
Snabbdom consists of an extremely simple, performant and extensible
|
||||
core that is only ≈ 200 SLOC. It offers a modular architecture with
|
||||
rich functionality for extensions through custom modules. To keep the
|
||||
core simple, all non-essential functionality is delegated to modules.
|
||||
|
||||
You can mold Snabbdom into whatever you desire! Pick, choose and
|
||||
customize the functionality you want. Alternatively you can just use
|
||||
the default extensions and get a virtual DOM library with high
|
||||
performance, small size and all the features listed below.
|
||||
|
||||
## Features
|
||||
|
||||
* Core features
|
||||
* About 200 SLOC – you could easily read through the entire core and fully
|
||||
understand how it works.
|
||||
* Extendable through modules.
|
||||
* A rich set of hooks available, both per vnode and globally for modules,
|
||||
to hook into any part of the diff and patch process.
|
||||
* Splendid performance. Snabbdom is among the fastest virtual DOM libraries
|
||||
in the [Virtual DOM Benchmark](http://vdom-benchmark.github.io/vdom-benchmark/).
|
||||
* Patch function with a function signature equivalent to a reduce/scan
|
||||
function. Allows for easier integration with a FRP library.
|
||||
* Features in modules
|
||||
* `h` function for easily creating virtual DOM nodes.
|
||||
* [SVG _just works_ with the `h` helper](#svg).
|
||||
* Features for doing complex CSS animations.
|
||||
* Powerful event listener functionality.
|
||||
* [Thunks](#thunks) to optimize the diff and patch process even further.
|
||||
* Third party features
|
||||
* JSX support thanks to [snabbdom-pragma](https://github.com/Swizz/snabbdom-pragma).
|
||||
* Server-side HTML output provided by [snabbdom-to-html](https://github.com/acstll/snabbdom-to-html).
|
||||
* Compact virtual DOM creation with [snabbdom-helpers](https://github.com/krainboltgreene/snabbdom-helpers).
|
||||
* Template string support using [snabby](https://github.com/jamen/snabby).
|
||||
* Virtual DOM assertion with [snabbdom-looks-like](https://github.com/jvanbruegge/snabbdom-looks-like)
|
||||
|
||||
## Inline example
|
||||
|
||||
```javascript
|
||||
var snabbdom = require('snabbdom');
|
||||
var patch = snabbdom.init([ // Init patch function with chosen modules
|
||||
require('snabbdom/modules/class').default, // makes it easy to toggle classes
|
||||
require('snabbdom/modules/props').default, // for setting properties on DOM elements
|
||||
require('snabbdom/modules/style').default, // handles styling on elements with support for animations
|
||||
require('snabbdom/modules/eventlisteners').default, // attaches event listeners
|
||||
]);
|
||||
var h = require('snabbdom/h').default; // helper function for creating vnodes
|
||||
|
||||
var container = document.getElementById('container');
|
||||
|
||||
var vnode = h('div#container.two.classes', {on: {click: someFn}}, [
|
||||
h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),
|
||||
' and this is just normal text',
|
||||
h('a', {props: {href: '/foo'}}, 'I\'ll take you places!')
|
||||
]);
|
||||
// Patch into empty DOM element – this modifies the DOM as a side effect
|
||||
patch(container, vnode);
|
||||
|
||||
var newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [
|
||||
h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),
|
||||
' and this is still just normal text',
|
||||
h('a', {props: {href: '/bar'}}, 'I\'ll take you places!')
|
||||
]);
|
||||
// Second `patch` invocation
|
||||
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
* [Animated reordering of elements](http://snabbdom.github.io/snabbdom/examples/reorder-animation/)
|
||||
* [Hero transitions](http://snabbdom.github.io/snabbdom/examples/hero/)
|
||||
* [SVG Carousel](http://snabbdom.github.io/snabbdom/examples/carousel-svg/)
|
||||
|
||||
## Core documentation
|
||||
|
||||
The core of Snabbdom provides only the most essential functionality.
|
||||
It is designed to be as simple as possible while still being fast and
|
||||
extendable.
|
||||
|
||||
### `snabbdom.init`
|
||||
|
||||
The core exposes only one single function `snabbdom.init`. This `init`
|
||||
takes a list of modules and returns a `patch` function that uses the
|
||||
specified set of modules.
|
||||
|
||||
```javascript
|
||||
var patch = snabbdom.init([
|
||||
require('snabbdom/modules/class').default,
|
||||
require('snabbdom/modules/style').default,
|
||||
]);
|
||||
```
|
||||
|
||||
### `patch`
|
||||
|
||||
The `patch` function returned by `init` takes two arguments. The first
|
||||
is a DOM element or a vnode representing the current view. The second
|
||||
is a vnode representing the new, updated view.
|
||||
|
||||
If a DOM element with a parent is passed, `newVnode` will be turned
|
||||
into a DOM node, and the passed element will be replaced by the
|
||||
created DOM node. If an old vnode is passed, Snabbdom will efficiently
|
||||
modify it to match the description in the new vnode.
|
||||
|
||||
Any old vnode passed must be the resulting vnode from a previous call
|
||||
to `patch`. This is necessary since Snabbdom stores information in the
|
||||
vnode. This makes it possible to implement a simpler and more
|
||||
performant architecture. This also avoids the creation of a new old
|
||||
vnode tree.
|
||||
|
||||
```javascript
|
||||
patch(oldVnode, newVnode);
|
||||
```
|
||||
|
||||
### `snabbdom/h`
|
||||
|
||||
It is recommended that you use `snabbdom/h` to create vnodes. `h` accepts a
|
||||
tag/selector as a string, an optional data object and an optional string or
|
||||
array of children.
|
||||
|
||||
```javascript
|
||||
var h = require('snabbdom/h').default;
|
||||
var vnode = h('div', {style: {color: '#000'}}, [
|
||||
h('h1', 'Headline'),
|
||||
h('p', 'A paragraph'),
|
||||
]);
|
||||
```
|
||||
|
||||
### `snabbdom/tovnode`
|
||||
|
||||
Converts a DOM node into a virtual node. Especially good for patching over an pre-existing,
|
||||
server-side generated content.
|
||||
|
||||
```javascript
|
||||
var snabbdom = require('snabbdom')
|
||||
var patch = snabbdom.init([ // Init patch function with chosen modules
|
||||
require('snabbdom/modules/class').default, // makes it easy to toggle classes
|
||||
require('snabbdom/modules/props').default, // for setting properties on DOM elements
|
||||
require('snabbdom/modules/style').default, // handles styling on elements with support for animations
|
||||
require('snabbdom/modules/eventlisteners').default, // attaches event listeners
|
||||
]);
|
||||
var h = require('snabbdom/h').default; // helper function for creating vnodes
|
||||
var toVNode = require('snabbdom/tovnode').default;
|
||||
|
||||
var newVNode = h('div', {style: {color: '#000'}}, [
|
||||
h('h1', 'Headline'),
|
||||
h('p', 'A paragraph'),
|
||||
]);
|
||||
|
||||
patch(toVNode(document.querySelector('.container')), newVNode)
|
||||
|
||||
```
|
||||
|
||||
### Hooks
|
||||
|
||||
Hooks are a way to hook into the lifecycle of DOM nodes. Snabbdom
|
||||
offers a rich selection of hooks. Hooks are used both by modules to
|
||||
extend Snabbdom, and in normal code for executing arbitrary code at
|
||||
desired points in the life of a virtual node.
|
||||
|
||||
#### Overview
|
||||
|
||||
| Name | Triggered when | Arguments to callback |
|
||||
| ----------- | -------------- | ----------------------- |
|
||||
| `pre` | the patch process begins | none |
|
||||
| `init` | a vnode has been added | `vnode` |
|
||||
| `create` | a DOM element has been created based on a vnode | `emptyVnode, vnode` |
|
||||
| `insert` | an element has been inserted into the DOM | `vnode` |
|
||||
| `prepatch` | an element is about to be patched | `oldVnode, vnode` |
|
||||
| `update` | an element is being updated | `oldVnode, vnode` |
|
||||
| `postpatch` | an element has been patched | `oldVnode, vnode` |
|
||||
| `destroy` | an element is directly or indirectly being removed | `vnode` |
|
||||
| `remove` | an element is directly being removed from the DOM | `vnode, removeCallback` |
|
||||
| `post` | the patch process is done | none |
|
||||
|
||||
The following hooks are available for modules: `pre`, `create`,
|
||||
`update`, `destroy`, `remove`, `post`.
|
||||
|
||||
The following hooks are available in the `hook` property of individual
|
||||
elements: `init`, `create`, `insert`, `prepatch`, `update`,
|
||||
`postpatch`, `destroy`, `remove`.
|
||||
|
||||
#### Usage
|
||||
|
||||
To use hooks, pass them as an object to `hook` field of the data
|
||||
object argument.
|
||||
|
||||
```javascript
|
||||
h('div.row', {
|
||||
key: movie.rank,
|
||||
hook: {
|
||||
insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight; }
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### The `init` hook
|
||||
|
||||
This hook is invoked during the patch process when a new virtual node
|
||||
has been found. The hook is called before Snabbdom has processed the
|
||||
node in any way. I.e., before it has created a DOM node based on the
|
||||
vnode.
|
||||
|
||||
#### The `insert` hook
|
||||
|
||||
This hook is invoked once the DOM element for a vnode has been
|
||||
inserted into the document _and_ the rest of the patch cycle is done.
|
||||
This means that you can do DOM measurements (like using
|
||||
[getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
|
||||
in this hook safely, knowing that no elements will be changed
|
||||
afterwards that could affect the position of the inserted elements.
|
||||
|
||||
#### The `remove` hook
|
||||
|
||||
Allows you to hook into the removal of an element. The hook is called
|
||||
once a vnode is to be removed from the DOM. The handling function
|
||||
receives both the vnode and a callback. You can control and delay the
|
||||
removal with the callback. The callback should be invoked once the
|
||||
hook is done doing its business, and the element will only be removed
|
||||
once all `remove` hooks have invoked their callback.
|
||||
|
||||
The hook is only triggered when an element is to be removed from its
|
||||
parent – not if it is the child of an element that is removed. For
|
||||
that, see the `destroy` hook.
|
||||
|
||||
#### The `destroy` hook
|
||||
|
||||
This hook is invoked on a virtual node when its DOM element is removed
|
||||
from the DOM or if its parent is being removed from the DOM.
|
||||
|
||||
To see the difference between this hook and the `remove` hook,
|
||||
consider an example.
|
||||
|
||||
```js
|
||||
var vnode1 = h('div', [h('div', [h('span', 'Hello')])]);
|
||||
var vnode2 = h('div', []);
|
||||
patch(container, vnode1);
|
||||
patch(vnode1, vnode2);
|
||||
```
|
||||
|
||||
Here `destroy` is triggered for both the inner `div` element _and_ the
|
||||
`span` element it contains. `remove`, on the other hand, is only
|
||||
triggered on the `div` element because it is the only element being
|
||||
detached from its parent.
|
||||
|
||||
You can, for instance, use `remove` to trigger an animation when an
|
||||
element is being removed and use the `destroy` hook to additionally
|
||||
animate the disappearance of the removed element's children.
|
||||
|
||||
### Creating modules
|
||||
|
||||
Modules works by registering global listeners for [hooks](#hooks). A module is simply a dictionary mapping hook names to functions.
|
||||
|
||||
```javascript
|
||||
var myModule = {
|
||||
create: function(oldVnode, vnode) {
|
||||
// invoked whenever a new virtual node is created
|
||||
},
|
||||
update: function(oldVnode, vnode) {
|
||||
// invoked whenever a virtual node is updated
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
With this mechanism you can easily augment the behaviour of Snabbdom.
|
||||
For demonstration, take a look at the implementations of the default
|
||||
modules.
|
||||
|
||||
## Modules documentation
|
||||
|
||||
This describes the core modules. All modules are optional.
|
||||
|
||||
### The class module
|
||||
|
||||
The class module provides an easy way to dynamically toggle classes on
|
||||
elements. It expects an object in the `class` data property. The
|
||||
object should map class names to booleans that indicates whether or
|
||||
not the class should stay or go on the vnode.
|
||||
|
||||
```javascript
|
||||
h('a', {class: {active: true, selected: false}}, 'Toggle');
|
||||
```
|
||||
|
||||
### The props module
|
||||
|
||||
Allows you to set properties on DOM elements.
|
||||
|
||||
```javascript
|
||||
h('a', {props: {href: '/foo'}}, 'Go to Foo');
|
||||
```
|
||||
|
||||
### The attributes module
|
||||
|
||||
Same as props, but set attributes instead of properties on DOM elements.
|
||||
|
||||
```javascript
|
||||
h('a', {attrs: {href: '/foo'}}, 'Go to Foo');
|
||||
```
|
||||
|
||||
Attributes are added and updated using `setAttribute`. In case of an
|
||||
attribute that had been previously added/set and is no longer present
|
||||
in the `attrs` object, it is removed from the DOM element's attribute
|
||||
list using `removeAttribute`.
|
||||
|
||||
In the case of boolean attributes (e.g. `disabled`, `hidden`,
|
||||
`selected` ...), the meaning doesn't depend on the attribute value
|
||||
(`true` or `false`) but depends instead on the presence/absence of the
|
||||
attribute itself in the DOM element. Those attributes are handled
|
||||
differently by the module: if a boolean attribute is set to a
|
||||
[falsy value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
|
||||
(`0`, `-0`, `null`, `false`,`NaN`, `undefined`, or the empty string
|
||||
(`""`)), then the attribute will be removed from the attribute list of
|
||||
the DOM element.
|
||||
|
||||
### The dataset module
|
||||
|
||||
Allows you to set custom data attributes (`data-*`) on DOM elements. These can then be accessed with the [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) property.
|
||||
|
||||
```javascript
|
||||
h('button', {dataset: {action: 'reset'}}, 'Reset');
|
||||
```
|
||||
|
||||
### The style module
|
||||
|
||||
The style module is for making your HTML look slick and animate smoothly. At
|
||||
its core it allows you to set CSS properties on elements.
|
||||
|
||||
```javascript
|
||||
h('span', {
|
||||
style: {border: '1px solid #bada55', color: '#c0ffee', fontWeight: 'bold'}
|
||||
}, 'Say my name, and every colour illuminates');
|
||||
```
|
||||
|
||||
Note that the style module does not remove style attributes if they
|
||||
are removed as properties from the style object. To remove a style,
|
||||
you should instead set it to the empty string.
|
||||
|
||||
```javascript
|
||||
h('div', {
|
||||
style: {position: shouldFollow ? 'fixed' : ''}
|
||||
}, 'I, I follow, I follow you');
|
||||
```
|
||||
|
||||
#### Custom properties (CSS variables)
|
||||
|
||||
CSS custom properties (aka CSS variables) are supported, they must be prefixed
|
||||
with `--`
|
||||
|
||||
```javascript
|
||||
h('div', {
|
||||
style: {'--warnColor': 'yellow'}
|
||||
}, 'Warning');
|
||||
```
|
||||
|
||||
#### Delayed properties
|
||||
|
||||
You can specify properties as being delayed. Whenever these properties
|
||||
change, the change is not applied until after the next frame.
|
||||
|
||||
```javascript
|
||||
h('span', {
|
||||
style: {opacity: '0', transition: 'opacity 1s', delayed: {opacity: '1'}}
|
||||
}, 'Imma fade right in!');
|
||||
```
|
||||
|
||||
This makes it easy to declaratively animate the entry of elements.
|
||||
|
||||
#### Set properties on `remove`
|
||||
|
||||
Styles set in the `remove` property will take effect once the element
|
||||
is about to be removed from the DOM. The applied styles should be
|
||||
animated with CSS transitions. Only once all the styles are done
|
||||
animating will the element be removed from the DOM.
|
||||
|
||||
```javascript
|
||||
h('span', {
|
||||
style: {opacity: '1', transition: 'opacity 1s',
|
||||
remove: {opacity: '0'}}
|
||||
}, 'It\'s better to fade out than to burn away');
|
||||
```
|
||||
|
||||
This makes it easy to declaratively animate the removal of elements.
|
||||
|
||||
#### Set properties on `destroy`
|
||||
|
||||
```javascript
|
||||
h('span', {
|
||||
style: {opacity: '1', transition: 'opacity 1s',
|
||||
destroy: {opacity: '0'}}
|
||||
}, 'It\'s better to fade out than to burn away');
|
||||
```
|
||||
|
||||
### Eventlisteners module
|
||||
|
||||
The event listeners module gives powerful capabilities for attaching
|
||||
event listeners.
|
||||
|
||||
You can attach a function to an event on a vnode by supplying an
|
||||
object at `on` with a property corresponding to the name of the event
|
||||
you want to listen to. The function will be called when the event
|
||||
happens and will be passed the event object that belongs to it.
|
||||
|
||||
```javascript
|
||||
function clickHandler(ev) { console.log('got clicked'); }
|
||||
h('div', {on: {click: clickHandler}});
|
||||
```
|
||||
|
||||
Very often, however, you're not really interested in the event object
|
||||
itself. Often you have some data associated with the element that
|
||||
triggers an event and you want that data passed along instead.
|
||||
|
||||
Consider a counter application with three buttons, one to increment
|
||||
the counter by 1, one to increment the counter by 2 and one to
|
||||
increment the counter by 3. You don't really care exactly which button
|
||||
was pressed. Instead you're interested in what number was associated
|
||||
with the clicked button. The event listeners module allows one to
|
||||
express that by supplying an array at the named event property. The
|
||||
first element in the array should be a function that will be invoked
|
||||
with the value in the second element once the event occurs.
|
||||
|
||||
```javascript
|
||||
function clickHandler(number) { console.log('button ' + number + ' was clicked!'); }
|
||||
h('div', [
|
||||
h('a', {on: {click: [clickHandler, 1]}}),
|
||||
h('a', {on: {click: [clickHandler, 2]}}),
|
||||
h('a', {on: {click: [clickHandler, 3]}}),
|
||||
]);
|
||||
```
|
||||
|
||||
Each handler is called not only with the given arguments but also with the current event and vnode appended to the argument list. It also supports using multiple listeners per event by specifying an array of handlers:
|
||||
```javascript
|
||||
stopPropagation = function(ev) { ev.stopPropagation() }
|
||||
sendValue = function(func, ev, vnode) { func(vnode.elm.value) }
|
||||
|
||||
h('a', { on:{ click:[[sendValue, console.log], stopPropagation] } });
|
||||
```
|
||||
|
||||
Snabbdom allows swapping event handlers between renders. This happens without
|
||||
actually touching the event handlers attached to the DOM.
|
||||
|
||||
Note, however, that **you should be careful when sharing event
|
||||
handlers between vnodes**, because of the technique this module uses
|
||||
to avoid re-binding event handlers to the DOM. (And in general,
|
||||
sharing data between vnodes is not guaranteed to work, because modules
|
||||
are allowed to mutate the given data).
|
||||
|
||||
In particular, you should **not** do something like this:
|
||||
|
||||
```javascript
|
||||
// Does not work
|
||||
var sharedHandler = {
|
||||
change: function(e){ console.log('you chose: ' + e.target.value); }
|
||||
};
|
||||
h('div', [
|
||||
h('input', {props: {type: 'radio', name: 'test', value: '0'},
|
||||
on: sharedHandler}),
|
||||
h('input', {props: {type: 'radio', name: 'test', value: '1'},
|
||||
on: sharedHandler}),
|
||||
h('input', {props: {type: 'radio', name: 'test', value: '2'},
|
||||
on: sharedHandler})
|
||||
]);
|
||||
```
|
||||
|
||||
For many such cases, you can use array-based handlers instead (described above).
|
||||
Alternatively, simply make sure each node is passed unique `on` values:
|
||||
|
||||
```javascript
|
||||
// Works
|
||||
var sharedHandler = function(e){ console.log('you chose: ' + e.target.value); };
|
||||
h('div', [
|
||||
h('input', {props: {type: 'radio', name: 'test', value: '0'},
|
||||
on: {change: sharedHandler}}),
|
||||
h('input', {props: {type: 'radio', name: 'test', value: '1'},
|
||||
on: {change: sharedHandler}}),
|
||||
h('input', {props: {type: 'radio', name: 'test', value: '2'},
|
||||
on: {change: sharedHandler}})
|
||||
]);
|
||||
```
|
||||
|
||||
## Helpers
|
||||
|
||||
### SVG
|
||||
|
||||
SVG just works when using the `h` function for creating virtual
|
||||
nodes. SVG elements are automatically created with the appropriate
|
||||
namespaces.
|
||||
|
||||
```javascript
|
||||
var vnode = h('div', [
|
||||
h('svg', {attrs: {width: 100, height: 100}}, [
|
||||
h('circle', {attrs: {cx: 50, cy: 50, r: 40, stroke: 'green', 'stroke-width': 4, fill: 'yellow'}})
|
||||
])
|
||||
]);
|
||||
```
|
||||
|
||||
See also the [SVG example](./examples/svg) and the [SVG Carousel example](./examples/carousel-svg/).
|
||||
|
||||
#### Using Classes in SVG Elements
|
||||
|
||||
Certain browsers (like IE <=11) [do not support `classList` property in SVG elements](http://caniuse.com/#feat=classlist).
|
||||
Hence, the _class_ module (which uses `classList` property internally) will not work for these browsers.
|
||||
|
||||
The classes in selectors for SVG elements work fine from version 0.6.7.
|
||||
|
||||
You can add dynamic classes to SVG elements for these cases by using the _attributes_ module and an Array as shown below:
|
||||
|
||||
```js
|
||||
h('svg', [
|
||||
h('text.underline', { // 'underline' is a selector class, remain unchanged between renders.
|
||||
attrs: {
|
||||
// 'active' and 'red' are dynamic classes, they can change between renders
|
||||
// so we need to put them in the class attribute.
|
||||
// (Normally we'd use the classModule, but it doesn't work inside SVG)
|
||||
class: [isActive && "active", isColored && "red"].filter(Boolean).join(" ")
|
||||
}
|
||||
},
|
||||
'Hello World'
|
||||
)
|
||||
])
|
||||
```
|
||||
|
||||
### Thunks
|
||||
|
||||
The `thunk` function takes a selector, a key for identifying a thunk,
|
||||
a function that returns a vnode and a variable amount of state
|
||||
parameters. If invoked, the render function will receive the state
|
||||
arguments.
|
||||
|
||||
`thunk(selector, key, renderFn, [stateArguments])`
|
||||
|
||||
The `key` is optional. It should be supplied when the `selector` is
|
||||
not unique among the thunks siblings. This ensures that the thunk is
|
||||
always matched correctly when diffing.
|
||||
|
||||
Thunks are an optimization strategy that can be used when one is
|
||||
dealing with immutable data.
|
||||
|
||||
Consider a simple function for creating a virtual node based on a number.
|
||||
|
||||
```js
|
||||
function numberView(n) {
|
||||
return h('div', 'Number is: ' + n);
|
||||
}
|
||||
```
|
||||
|
||||
The view depends only on `n`. This means that if `n` is unchanged,
|
||||
then creating the virtual DOM node and patching it against the old
|
||||
vnode is wasteful. To avoid the overhead we can use the `thunk` helper
|
||||
function.
|
||||
|
||||
```js
|
||||
function render(state) {
|
||||
return thunk('num', numberView, [state.number]);
|
||||
}
|
||||
```
|
||||
|
||||
Instead of actually invoking the `numberView` function this will only
|
||||
place a dummy vnode in the virtual tree. When Snabbdom patches this
|
||||
dummy vnode against a previous vnode, it will compare the value of
|
||||
`n`. If `n` is unchanged it will simply reuse the old vnode. This
|
||||
avoids recreating the number view and the diff process altogether.
|
||||
|
||||
The view function here is only an example. In practice thunks are only
|
||||
relevant if you are rendering a complicated view that takes
|
||||
significant computational time to generate.
|
||||
|
||||
## Virtual Node
|
||||
**Properties**
|
||||
- [sel](#sel--string)
|
||||
- [data](#data--object)
|
||||
- [children](#children--array)
|
||||
- [text](#text--string)
|
||||
- [elm](#elm--element)
|
||||
- [key](#key--string--number)
|
||||
|
||||
#### sel : String
|
||||
|
||||
The `.sel` property of a virtual node is the CSS selector passed to
|
||||
[`h()`](#snabbdomh) during creation. For example: `h('div#container',
|
||||
{}, [...])` will create a a virtual node which has `div#container` as
|
||||
its `.sel` property.
|
||||
|
||||
#### data : Object
|
||||
|
||||
The `.data` property of a virtual node is the place to add information
|
||||
for [modules](#modules-documentation) to access and manipulate the
|
||||
real DOM element when it is created; Add styles, CSS classes,
|
||||
attributes, etc.
|
||||
|
||||
The data object is the (optional) second parameter to [`h()`](#snabbdomh)
|
||||
|
||||
For example `h('div', {props: {className: 'container'}}, [...])` will produce a virtual node with
|
||||
```js
|
||||
{
|
||||
"props": {
|
||||
className: "container"
|
||||
}
|
||||
}
|
||||
```
|
||||
as its `.data` object.
|
||||
|
||||
#### children : Array<vnode>
|
||||
|
||||
The `.children` property of a virtual node is the third (optional)
|
||||
parameter to [`h()`](#snabbdomh) during creation. `.children` is
|
||||
simply an Array of virtual nodes that should be added as children of
|
||||
the parent DOM node upon creation.
|
||||
|
||||
For example `h('div', {}, [ h('h1', {}, 'Hello, World') ])` will
|
||||
create a virtual node with
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
sel: 'h1',
|
||||
data: {},
|
||||
children: undefined,
|
||||
text: 'Hello, World',
|
||||
elm: Element,
|
||||
key: undefined,
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
as its `.children` property.
|
||||
|
||||
#### text : string
|
||||
|
||||
The `.text` property is created when a virtual node is created with
|
||||
only a single child that possesses text and only requires
|
||||
`document.createTextNode()` to be used.
|
||||
|
||||
For example: `h('h1', {}, 'Hello')` will create a virtual node with
|
||||
`Hello` as its `.text` property.
|
||||
|
||||
#### elm : Element
|
||||
|
||||
The `.elm` property of a virtual node is a pointer to the real DOM
|
||||
node created by snabbdom. This property is very useful to do
|
||||
calculations in [hooks](#hooks) as well as
|
||||
[modules](#modules-documentation).
|
||||
|
||||
#### key : string | number
|
||||
|
||||
The `.key` property is created when a key is provided inside of your
|
||||
[`.data`](#data--object) object. The `.key` property is used to keep
|
||||
pointers to DOM nodes that existed previously to avoid recreating them
|
||||
if it is unnecessary. This is very useful for things like list
|
||||
reordering. A key must be either a string or a number to allow for
|
||||
proper lookup as it is stored internally as a key/value pair inside of
|
||||
an object, where `.key` is the key and the value is the
|
||||
[`.elm`](#elm--element) property created.
|
||||
|
||||
For example: `h('div', {key: 1}, [])` will create a virtual node
|
||||
object with a `.key` property with the value of `1`.
|
||||
|
||||
|
||||
## Structuring applications
|
||||
|
||||
Snabbdom is a low-level virtual DOM library. It is unopinionated with
|
||||
regards to how you should structure your application.
|
||||
|
||||
Here are some approaches to building applications with Snabbdom.
|
||||
|
||||
* [functional-frontend-architecture](https://github.com/paldepind/functional-frontend-architecture) –
|
||||
a repository containing several example applications that
|
||||
demonstrates an architecture that uses Snabbdom.
|
||||
* [Cycle.js](https://cycle.js.org/) –
|
||||
"A functional and reactive JavaScript framework for cleaner code"
|
||||
uses Snabbdom
|
||||
* [Vue.js](http://vuejs.org/) use a fork of snabbdom.
|
||||
* [scheme-todomvc](https://github.com/amirouche/scheme-todomvc/) build
|
||||
redux-like architecture on top of snabbdom bindings.
|
||||
* [kaiju](https://github.com/AlexGalays/kaiju) -
|
||||
Stateful components and observables on top of snabbdom
|
||||
* [Tweed](https://tweedjs.github.io) –
|
||||
An Object Oriented approach to reactive interfaces.
|
||||
* [Cyclow](http://cyclow.js.org) -
|
||||
"A reactive frontend framework for JavaScript"
|
||||
uses Snabbdom
|
||||
* [Tung](https://github.com/Reon90/tung) –
|
||||
A JavaScript library for rendering html. Tung helps to divide html and JavaScript development.
|
||||
* [sprotty](https://github.com/theia-ide/sprotty) - "A web-based diagramming framework" uses Snabbdom.
|
||||
* [Mark Text](https://github.com/marktext/marktext) - "Realtime preview Markdown Editor" build on Snabbdom.
|
||||
* [puddles](https://github.com/flintinatux/puddles) -
|
||||
"Tiny vdom app framework. Pure Redux. No boilerplate." - Built with :heart: on Snabbdom.
|
||||
* [Backbone.VDOMView](https://github.com/jcbrand/backbone.vdomview) - A [Backbone](http://backbonejs.org/) View with VirtualDOM capability via Snabbdom.
|
||||
|
||||
Be sure to share it if you're building an application in another way
|
||||
using Snabbdom.
|
||||
|
||||
## Common errors
|
||||
|
||||
```
|
||||
Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':
|
||||
The node before which the new node is to be inserted is not a child of this node.
|
||||
```
|
||||
The reason for this error is reusing of vnodes between patches (see code example), snabbdom stores actual dom nodes inside the virtual dom nodes passed to it as performance improvement, so reusing nodes between patches is not supported.
|
||||
```js
|
||||
var sharedNode = h('div', {}, 'Selected');
|
||||
var vnode1 = h('div', [
|
||||
h('div', {}, ['One']),
|
||||
h('div', {}, ['Two']),
|
||||
h('div', {}, [sharedNode]),
|
||||
]);
|
||||
var vnode2 = h('div', [
|
||||
h('div', {}, ['One']),
|
||||
h('div', {}, [sharedNode]),
|
||||
h('div', {}, ['Three']),
|
||||
]);
|
||||
patch(container, vnode1);
|
||||
patch(vnode1, vnode2);
|
||||
```
|
||||
You can fix this issue by creating a shallow copy of the object (here with object spread syntax):
|
||||
```js
|
||||
var vnode2 = h('div', [
|
||||
h('div', {}, ['One']),
|
||||
h('div', {}, [{ ...sharedNode }]),
|
||||
h('div', {}, ['Three']),
|
||||
]);
|
||||
```
|
||||
Another solution would be to wrap shared vnodes in a factory function:
|
||||
```js
|
||||
var sharedNode = () => h('div', {}, 'Selected');
|
||||
var vnode1 = h('div', [
|
||||
h('div', {}, ['One']),
|
||||
h('div', {}, ['Two']),
|
||||
h('div', {}, [sharedNode()]),
|
||||
]);
|
||||
```
|
||||
@@ -1,95 +0,0 @@
|
||||
module.exports = {
|
||||
// Latest mainstream
|
||||
BS_Chrome_Current: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'chrome',
|
||||
browser_version: 'latest',
|
||||
os: 'Windows',
|
||||
os_version: '10',
|
||||
},
|
||||
BS_Firefox_Current: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'firefox',
|
||||
browser_version: 'latest',
|
||||
os: 'Windows',
|
||||
os_version: '10',
|
||||
},
|
||||
BS_Safari_Current: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'safari',
|
||||
browser_version: 'latest',
|
||||
os: 'OS X',
|
||||
os_version: 'High Sierra',
|
||||
},
|
||||
BS_Android_8: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'Android',
|
||||
device: 'Google Pixel 2',
|
||||
os: 'Android',
|
||||
os_version: '8.0',
|
||||
real_mobile: true,
|
||||
},
|
||||
|
||||
// Older mainstream
|
||||
BS_Chrome_49: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'chrome',
|
||||
browser_version: '49',
|
||||
os: 'Windows',
|
||||
os_version: '10',
|
||||
},
|
||||
BS_Firefox_52: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'firefox',
|
||||
browser_version: '52',
|
||||
os: 'Windows',
|
||||
os_version: '10',
|
||||
},
|
||||
BS_Safari_9: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'safari',
|
||||
browser_version: '9.1',
|
||||
os: 'OS X',
|
||||
os_version: 'El Capitan',
|
||||
},
|
||||
|
||||
// Misc
|
||||
BS_Android_4_4: {
|
||||
base: 'BrowserStack',
|
||||
device_browser: 'ucbrowser',
|
||||
device: 'Google Nexus 5',
|
||||
os: 'Android',
|
||||
os_version: '4.4',
|
||||
real_mobile: true,
|
||||
},
|
||||
BS_iphone_10: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'Mobile Safari',
|
||||
browser_version: null,
|
||||
device: 'iPhone 7',
|
||||
real_mobile: true,
|
||||
os: 'ios',
|
||||
os_version: '10.3',
|
||||
},
|
||||
BS_MS_Edge: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'edge',
|
||||
browser_version: 'latest',
|
||||
os: 'Windows',
|
||||
os_version: '10',
|
||||
},
|
||||
BS_IE_11: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'ie',
|
||||
browser_version: '11.0',
|
||||
os: 'Windows',
|
||||
os_version: '7',
|
||||
},
|
||||
BS_IE_10: {
|
||||
base: 'BrowserStack',
|
||||
browser: 'ie',
|
||||
browser_version: '10.0',
|
||||
os: 'Windows',
|
||||
os_version: '7',
|
||||
},
|
||||
};
|
||||
Vendored
-83
@@ -1,83 +0,0 @@
|
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.h = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var vnode_1 = require("./vnode");
|
||||
var is = require("./is");
|
||||
function addNS(data, children, sel) {
|
||||
data.ns = 'http://www.w3.org/2000/svg';
|
||||
if (sel !== 'foreignObject' && children !== undefined) {
|
||||
for (var i = 0; i < children.length; ++i) {
|
||||
var childData = children[i].data;
|
||||
if (childData !== undefined) {
|
||||
addNS(childData, children[i].children, children[i].sel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function h(sel, b, c) {
|
||||
var data = {}, children, text, i;
|
||||
if (c !== undefined) {
|
||||
data = b;
|
||||
if (is.array(c)) {
|
||||
children = c;
|
||||
}
|
||||
else if (is.primitive(c)) {
|
||||
text = c;
|
||||
}
|
||||
else if (c && c.sel) {
|
||||
children = [c];
|
||||
}
|
||||
}
|
||||
else if (b !== undefined) {
|
||||
if (is.array(b)) {
|
||||
children = b;
|
||||
}
|
||||
else if (is.primitive(b)) {
|
||||
text = b;
|
||||
}
|
||||
else if (b && b.sel) {
|
||||
children = [b];
|
||||
}
|
||||
else {
|
||||
data = b;
|
||||
}
|
||||
}
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
if (is.primitive(children[i]))
|
||||
children[i] = vnode_1.vnode(undefined, undefined, undefined, children[i]);
|
||||
}
|
||||
}
|
||||
if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' &&
|
||||
(sel.length === 3 || sel[3] === '.' || sel[3] === '#')) {
|
||||
addNS(data, children, sel);
|
||||
}
|
||||
return vnode_1.vnode(sel, data, children, text, undefined);
|
||||
}
|
||||
exports.h = h;
|
||||
;
|
||||
exports.default = h;
|
||||
|
||||
},{"./is":2,"./vnode":3}],2:[function(require,module,exports){
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.array = Array.isArray;
|
||||
function primitive(s) {
|
||||
return typeof s === 'string' || typeof s === 'number';
|
||||
}
|
||||
exports.primitive = primitive;
|
||||
|
||||
},{}],3:[function(require,module,exports){
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
function vnode(sel, data, children, text, elm) {
|
||||
var key = data === undefined ? undefined : data.key;
|
||||
return { sel: sel, data: data, children: children,
|
||||
text: text, elm: elm, key: key };
|
||||
}
|
||||
exports.vnode = vnode;
|
||||
exports.default = vnode;
|
||||
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy8ucmVnaXN0cnkubnBtanMub3JnL2Jyb3dzZXItcGFjay82LjAuMi9ub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIiwiaC5qcyIsImlzLmpzIiwidm5vZGUuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQzFEQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ1BBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsIlwidXNlIHN0cmljdFwiO1xuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFwiX19lc01vZHVsZVwiLCB7IHZhbHVlOiB0cnVlIH0pO1xudmFyIHZub2RlXzEgPSByZXF1aXJlKFwiLi92bm9kZVwiKTtcbnZhciBpcyA9IHJlcXVpcmUoXCIuL2lzXCIpO1xuZnVuY3Rpb24gYWRkTlMoZGF0YSwgY2hpbGRyZW4sIHNlbCkge1xuICAgIGRhdGEubnMgPSAnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnO1xuICAgIGlmIChzZWwgIT09ICdmb3JlaWduT2JqZWN0JyAmJiBjaGlsZHJlbiAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgIGZvciAodmFyIGkgPSAwOyBpIDwgY2hpbGRyZW4ubGVuZ3RoOyArK2kpIHtcbiAgICAgICAgICAgIHZhciBjaGlsZERhdGEgPSBjaGlsZHJlbltpXS5kYXRhO1xuICAgICAgICAgICAgaWYgKGNoaWxkRGF0YSAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgICAgICAgICAgYWRkTlMoY2hpbGREYXRhLCBjaGlsZHJlbltpXS5jaGlsZHJlbiwgY2hpbGRyZW5baV0uc2VsKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cbmZ1bmN0aW9uIGgoc2VsLCBiLCBjKSB7XG4gICAgdmFyIGRhdGEgPSB7fSwgY2hpbGRyZW4sIHRleHQsIGk7XG4gICAgaWYgKGMgIT09IHVuZGVmaW5lZCkge1xuICAgICAgICBkYXRhID0gYjtcbiAgICAgICAgaWYgKGlzLmFycmF5KGMpKSB7XG4gICAgICAgICAgICBjaGlsZHJlbiA9IGM7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSBpZiAoaXMucHJpbWl0aXZlKGMpKSB7XG4gICAgICAgICAgICB0ZXh0ID0gYztcbiAgICAgICAgfVxuICAgICAgICBlbHNlIGlmIChjICYmIGMuc2VsKSB7XG4gICAgICAgICAgICBjaGlsZHJlbiA9IFtjXTtcbiAgICAgICAgfVxuICAgIH1cbiAgICBlbHNlIGlmIChiICE9PSB1bmRlZmluZWQpIHtcbiAgICAgICAgaWYgKGlzLmFycmF5KGIpKSB7XG4gICAgICAgICAgICBjaGlsZHJlbiA9IGI7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSBpZiAoaXMucHJpbWl0aXZlKGIpKSB7XG4gICAgICAgICAgICB0ZXh0ID0gYjtcbiAgICAgICAgfVxuICAgICAgICBlbHNlIGlmIChiICYmIGIuc2VsKSB7XG4gICAgICAgICAgICBjaGlsZHJlbiA9IFtiXTtcbiAgICAgICAgfVxuICAgICAgICBlbHNlIHtcbiAgICAgICAgICAgIGRhdGEgPSBiO1xuICAgICAgICB9XG4gICAgfVxuICAgIGlmIChpcy5hcnJheShjaGlsZHJlbikpIHtcbiAgICAgICAgZm9yIChpID0gMDsgaSA8IGNoaWxkcmVuLmxlbmd0aDsgKytpKSB7XG4gICAgICAgICAgICBpZiAoaXMucHJpbWl0aXZlKGNoaWxkcmVuW2ldKSlcbiAgICAgICAgICAgICAgICBjaGlsZHJlbltpXSA9IHZub2RlXzEudm5vZGUodW5kZWZpbmVkLCB1bmRlZmluZWQsIHVuZGVmaW5lZCwgY2hpbGRyZW5baV0pO1xuICAgICAgICB9XG4gICAgfVxuICAgIGlmIChzZWxbMF0gPT09ICdzJyAmJiBzZWxbMV0gPT09ICd2JyAmJiBzZWxbMl0gPT09ICdnJyAmJlxuICAgICAgICAoc2VsLmxlbmd0aCA9PT0gMyB8fCBzZWxbM10gPT09ICcuJyB8fCBzZWxbM10gPT09ICcjJykpIHtcbiAgICAgICAgYWRkTlMoZGF0YSwgY2hpbGRyZW4sIHNlbCk7XG4gICAgfVxuICAgIHJldHVybiB2bm9kZV8xLnZub2RlKHNlbCwgZGF0YSwgY2hpbGRyZW4sIHRleHQsIHVuZGVmaW5lZCk7XG59XG5leHBvcnRzLmggPSBoO1xuO1xuZXhwb3J0cy5kZWZhdWx0ID0gaDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWguanMubWFwIiwiXCJ1c2Ugc3RyaWN0XCI7XG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgXCJfX2VzTW9kdWxlXCIsIHsgdmFsdWU6IHRydWUgfSk7XG5leHBvcnRzLmFycmF5ID0gQXJyYXkuaXNBcnJheTtcbmZ1bmN0aW9uIHByaW1pdGl2ZShzKSB7XG4gICAgcmV0dXJuIHR5cGVvZiBzID09PSAnc3RyaW5nJyB8fCB0eXBlb2YgcyA9PT0gJ251bWJlcic7XG59XG5leHBvcnRzLnByaW1pdGl2ZSA9IHByaW1pdGl2ZTtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWlzLmpzLm1hcCIsIlwidXNlIHN0cmljdFwiO1xuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFwiX19lc01vZHVsZVwiLCB7IHZhbHVlOiB0cnVlIH0pO1xuZnVuY3Rpb24gdm5vZGUoc2VsLCBkYXRhLCBjaGlsZHJlbiwgdGV4dCwgZWxtKSB7XG4gICAgdmFyIGtleSA9IGRhdGEgPT09IHVuZGVmaW5lZCA/IHVuZGVmaW5lZCA6IGRhdGEua2V5O1xuICAgIHJldHVybiB7IHNlbDogc2VsLCBkYXRhOiBkYXRhLCBjaGlsZHJlbjogY2hpbGRyZW4sXG4gICAgICAgIHRleHQ6IHRleHQsIGVsbTogZWxtLCBrZXk6IGtleSB9O1xufVxuZXhwb3J0cy52bm9kZSA9IHZub2RlO1xuZXhwb3J0cy5kZWZhdWx0ID0gdm5vZGU7XG4vLyMgc291cmNlTWFwcGluZ1VSTD12bm9kZS5qcy5tYXAiXX0=
|
||||
Vendored
-2
@@ -1,2 +0,0 @@
|
||||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var r;r="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,r.h=e()}}(function(){return function e(r,n,i){function t(f,u){if(!n[f]){if(!r[f]){var d="function"==typeof require&&require;if(!u&&d)return d(f,!0);if(o)return o(f,!0);var a=new Error("Cannot find module '"+f+"'");throw a.code="MODULE_NOT_FOUND",a}var v=n[f]={exports:{}};r[f][0].call(v.exports,function(e){var n=r[f][1][e];return t(n?n:e)},v,v.exports,e,r,n,i)}return n[f].exports}for(var o="function"==typeof require&&require,f=0;f<i.length;f++)t(i[f]);return t}({1:[function(e,r,n){"use strict";function i(e,r,n){if(e.ns="http://www.w3.org/2000/svg","foreignObject"!==n&&void 0!==r)for(var t=0;t<r.length;++t){var o=r[t].data;void 0!==o&&i(o,r[t].children,r[t].sel)}}function t(e,r,n){var t,u,d,a={};if(void 0!==n?(a=r,f.array(n)?t=n:f.primitive(n)?u=n:n&&n.sel&&(t=[n])):void 0!==r&&(f.array(r)?t=r:f.primitive(r)?u=r:r&&r.sel?t=[r]:a=r),f.array(t))for(d=0;d<t.length;++d)f.primitive(t[d])&&(t[d]=o.vnode(void 0,void 0,void 0,t[d]));return"s"!==e[0]||"v"!==e[1]||"g"!==e[2]||3!==e.length&&"."!==e[3]&&"#"!==e[3]||i(a,t,e),o.vnode(e,a,t,u,void 0)}var o=e("./vnode"),f=e("./is");n.h=t,Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=t},{"./is":2,"./vnode":3}],2:[function(e,r,n){"use strict";function i(e){return"string"==typeof e||"number"==typeof e}n.array=Array.isArray,n.primitive=i},{}],3:[function(e,r,n){"use strict";function i(e,r,n,i,t){var o=void 0===r?void 0:r.key;return{sel:e,data:r,children:n,text:i,elm:t,key:o}}n.vnode=i,Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i},{}]},{},[1])(1)});
|
||||
//# sourceMappingURL=h.min.js.map
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
-71
File diff suppressed because one or more lines are too long
@@ -1,2 +0,0 @@
|
||||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.snabbdom_attributes=e()}}(function(){return function e(t,r,n){function o(a,u){if(!r[a]){if(!t[a]){var d="function"==typeof require&&require;if(!u&&d)return d(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var f=r[a]={exports:{}};t[a][0].call(f.exports,function(e){var r=t[a][1][e];return o(r?r:e)},f,f.exports,e,t,r,n)}return r[a].exports}for(var i="function"==typeof require&&require,a=0;a<n.length;a++)o(n[a]);return o}({1:[function(e,t,r){"use strict";function n(e,t){var r,n,i,u,d=t.elm,l=e.data.attrs,f=t.data.attrs;if((l||f)&&l!==f){l=l||{},f=f||{};for(r in f)n=f[r],i=l[r],i!==n&&(!n&&a[r]?d.removeAttribute(r):(u=r.split(":"),u.length>1&&o.hasOwnProperty(u[0])?d.setAttributeNS(o[u[0]],r,n):d.setAttribute(r,n)));for(r in l)r in f||d.removeAttribute(r)}}for(var o={xlink:"http://www.w3.org/1999/xlink"},i=["allowfullscreen","async","autofocus","autoplay","checked","compact","controls","declare","default","defaultchecked","defaultmuted","defaultselected","defer","disabled","draggable","enabled","formnovalidate","hidden","indeterminate","inert","ismap","itemscope","loop","multiple","muted","nohref","noresize","noshade","novalidate","nowrap","open","pauseonexit","readonly","required","reversed","scoped","seamless","selected","sortable","spellcheck","translate","truespeed","typemustmatch","visible"],a=Object.create(null),u=0,d=i.length;u<d;u++)a[i[u]]=!0;r.attributesModule={create:n,update:n},Object.defineProperty(r,"__esModule",{value:!0}),r["default"]=r.attributesModule},{}]},{},[1])(1)});
|
||||
//# sourceMappingURL=snabbdom-attributes.min.js.map
|
||||
File diff suppressed because one or more lines are too long
Vendored
-29
@@ -1,29 +0,0 @@
|
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.snabbdom_class = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
function updateClass(oldVnode, vnode) {
|
||||
var cur, name, elm = vnode.elm, oldClass = oldVnode.data.class, klass = vnode.data.class;
|
||||
if (!oldClass && !klass)
|
||||
return;
|
||||
if (oldClass === klass)
|
||||
return;
|
||||
oldClass = oldClass || {};
|
||||
klass = klass || {};
|
||||
for (name in oldClass) {
|
||||
if (!klass[name]) {
|
||||
elm.classList.remove(name);
|
||||
}
|
||||
}
|
||||
for (name in klass) {
|
||||
cur = klass[name];
|
||||
if (cur !== oldClass[name]) {
|
||||
elm.classList[cur ? 'add' : 'remove'](name);
|
||||
}
|
||||
}
|
||||
}
|
||||
exports.classModule = { create: updateClass, update: updateClass };
|
||||
exports.default = exports.classModule;
|
||||
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy8ucmVnaXN0cnkubnBtanMub3JnL2Jyb3dzZXItcGFjay82LjAuMi9ub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIiwibW9kdWxlcy9jbGFzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQ0FBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsIlwidXNlIHN0cmljdFwiO1xuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFwiX19lc01vZHVsZVwiLCB7IHZhbHVlOiB0cnVlIH0pO1xuZnVuY3Rpb24gdXBkYXRlQ2xhc3Mob2xkVm5vZGUsIHZub2RlKSB7XG4gICAgdmFyIGN1ciwgbmFtZSwgZWxtID0gdm5vZGUuZWxtLCBvbGRDbGFzcyA9IG9sZFZub2RlLmRhdGEuY2xhc3MsIGtsYXNzID0gdm5vZGUuZGF0YS5jbGFzcztcbiAgICBpZiAoIW9sZENsYXNzICYmICFrbGFzcylcbiAgICAgICAgcmV0dXJuO1xuICAgIGlmIChvbGRDbGFzcyA9PT0ga2xhc3MpXG4gICAgICAgIHJldHVybjtcbiAgICBvbGRDbGFzcyA9IG9sZENsYXNzIHx8IHt9O1xuICAgIGtsYXNzID0ga2xhc3MgfHwge307XG4gICAgZm9yIChuYW1lIGluIG9sZENsYXNzKSB7XG4gICAgICAgIGlmICgha2xhc3NbbmFtZV0pIHtcbiAgICAgICAgICAgIGVsbS5jbGFzc0xpc3QucmVtb3ZlKG5hbWUpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGZvciAobmFtZSBpbiBrbGFzcykge1xuICAgICAgICBjdXIgPSBrbGFzc1tuYW1lXTtcbiAgICAgICAgaWYgKGN1ciAhPT0gb2xkQ2xhc3NbbmFtZV0pIHtcbiAgICAgICAgICAgIGVsbS5jbGFzc0xpc3RbY3VyID8gJ2FkZCcgOiAncmVtb3ZlJ10obmFtZSk7XG4gICAgICAgIH1cbiAgICB9XG59XG5leHBvcnRzLmNsYXNzTW9kdWxlID0geyBjcmVhdGU6IHVwZGF0ZUNsYXNzLCB1cGRhdGU6IHVwZGF0ZUNsYXNzIH07XG5leHBvcnRzLmRlZmF1bHQgPSBleHBvcnRzLmNsYXNzTW9kdWxlO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9Y2xhc3MuanMubWFwIl19
|
||||
-2
@@ -1,2 +0,0 @@
|
||||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,n.snabbdom_class=e()}}(function(){return function e(n,o,r){function t(i,u){if(!o[i]){if(!n[i]){var s="function"==typeof require&&require;if(!u&&s)return s(i,!0);if(f)return f(i,!0);var d=new Error("Cannot find module '"+i+"'");throw d.code="MODULE_NOT_FOUND",d}var a=o[i]={exports:{}};n[i][0].call(a.exports,function(e){var o=n[i][1][e];return t(o?o:e)},a,a.exports,e,n,o,r)}return o[i].exports}for(var f="function"==typeof require&&require,i=0;i<r.length;i++)t(r[i]);return t}({1:[function(e,n,o){"use strict";function r(e,n){var o,r,t=n.elm,f=e.data["class"],i=n.data["class"];if((f||i)&&f!==i){f=f||{},i=i||{};for(r in f)i[r]||t.classList.remove(r);for(r in i)o=i[r],o!==f[r]&&t.classList[o?"add":"remove"](r)}}o.classModule={create:r,update:r},Object.defineProperty(o,"__esModule",{value:!0}),o["default"]=o.classModule},{}]},{},[1])(1)});
|
||||
//# sourceMappingURL=snabbdom-class.min.js.map
|
||||
File diff suppressed because one or more lines are too long
-42
@@ -1,42 +0,0 @@
|
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.snabbdom_dataset = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var CAPS_REGEX = /[A-Z]/g;
|
||||
function updateDataset(oldVnode, vnode) {
|
||||
var elm = vnode.elm, oldDataset = oldVnode.data.dataset, dataset = vnode.data.dataset, key;
|
||||
if (!oldDataset && !dataset)
|
||||
return;
|
||||
if (oldDataset === dataset)
|
||||
return;
|
||||
oldDataset = oldDataset || {};
|
||||
dataset = dataset || {};
|
||||
var d = elm.dataset;
|
||||
for (key in oldDataset) {
|
||||
if (!dataset[key]) {
|
||||
if (d) {
|
||||
if (key in d) {
|
||||
delete d[key];
|
||||
}
|
||||
}
|
||||
else {
|
||||
elm.removeAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase());
|
||||
}
|
||||
}
|
||||
}
|
||||
for (key in dataset) {
|
||||
if (oldDataset[key] !== dataset[key]) {
|
||||
if (d) {
|
||||
d[key] = dataset[key];
|
||||
}
|
||||
else {
|
||||
elm.setAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase(), dataset[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
exports.datasetModule = { create: updateDataset, update: updateDataset };
|
||||
exports.default = exports.datasetModule;
|
||||
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJtb2R1bGVzL2RhdGFzZXQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsIlwidXNlIHN0cmljdFwiO1xuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFwiX19lc01vZHVsZVwiLCB7IHZhbHVlOiB0cnVlIH0pO1xudmFyIENBUFNfUkVHRVggPSAvW0EtWl0vZztcbmZ1bmN0aW9uIHVwZGF0ZURhdGFzZXQob2xkVm5vZGUsIHZub2RlKSB7XG4gICAgdmFyIGVsbSA9IHZub2RlLmVsbSwgb2xkRGF0YXNldCA9IG9sZFZub2RlLmRhdGEuZGF0YXNldCwgZGF0YXNldCA9IHZub2RlLmRhdGEuZGF0YXNldCwga2V5O1xuICAgIGlmICghb2xkRGF0YXNldCAmJiAhZGF0YXNldClcbiAgICAgICAgcmV0dXJuO1xuICAgIGlmIChvbGREYXRhc2V0ID09PSBkYXRhc2V0KVxuICAgICAgICByZXR1cm47XG4gICAgb2xkRGF0YXNldCA9IG9sZERhdGFzZXQgfHwge307XG4gICAgZGF0YXNldCA9IGRhdGFzZXQgfHwge307XG4gICAgdmFyIGQgPSBlbG0uZGF0YXNldDtcbiAgICBmb3IgKGtleSBpbiBvbGREYXRhc2V0KSB7XG4gICAgICAgIGlmICghZGF0YXNldFtrZXldKSB7XG4gICAgICAgICAgICBpZiAoZCkge1xuICAgICAgICAgICAgICAgIGlmIChrZXkgaW4gZCkge1xuICAgICAgICAgICAgICAgICAgICBkZWxldGUgZFtrZXldO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgICAgIGVsbS5yZW1vdmVBdHRyaWJ1dGUoJ2RhdGEtJyArIGtleS5yZXBsYWNlKENBUFNfUkVHRVgsICctJCYnKS50b0xvd2VyQ2FzZSgpKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbiAgICBmb3IgKGtleSBpbiBkYXRhc2V0KSB7XG4gICAgICAgIGlmIChvbGREYXRhc2V0W2tleV0gIT09IGRhdGFzZXRba2V5XSkge1xuICAgICAgICAgICAgaWYgKGQpIHtcbiAgICAgICAgICAgICAgICBkW2tleV0gPSBkYXRhc2V0W2tleV07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBlbHNlIHtcbiAgICAgICAgICAgICAgICBlbG0uc2V0QXR0cmlidXRlKCdkYXRhLScgKyBrZXkucmVwbGFjZShDQVBTX1JFR0VYLCAnLSQmJykudG9Mb3dlckNhc2UoKSwgZGF0YXNldFtrZXldKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cbmV4cG9ydHMuZGF0YXNldE1vZHVsZSA9IHsgY3JlYXRlOiB1cGRhdGVEYXRhc2V0LCB1cGRhdGU6IHVwZGF0ZURhdGFzZXQgfTtcbmV4cG9ydHMuZGVmYXVsdCA9IGV4cG9ydHMuZGF0YXNldE1vZHVsZTtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWRhdGFzZXQuanMubWFwIl19
|
||||
-99
File diff suppressed because one or more lines are too long
@@ -1,2 +0,0 @@
|
||||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,n.snabbdom_eventlisteners=e()}}(function(){return function e(n,t,r){function o(f,u){if(!t[f]){if(!n[f]){var l="function"==typeof require&&require;if(!u&&l)return l(f,!0);if(i)return i(f,!0);var s=new Error("Cannot find module '"+f+"'");throw s.code="MODULE_NOT_FOUND",s}var d=t[f]={exports:{}};n[f][0].call(d.exports,function(e){var t=n[f][1][e];return o(t?t:e)},d,d.exports,e,n,t,r)}return t[f].exports}for(var i="function"==typeof require&&require,f=0;f<r.length;f++)o(r[f]);return o}({1:[function(e,n,t){"use strict";function r(e,n,t){if("function"==typeof e)e.call(n,t,n);else if("object"==typeof e)if("function"==typeof e[0])if(2===e.length)e[0].call(n,e[1],t,n);else{var o=e.slice(1);o.push(t),o.push(n),e[0].apply(n,o)}else for(var i=0;i<e.length;i++)r(e[i])}function o(e,n){var t=e.type,o=n.data.on;o&&o[t]&&r(o[t],n,e)}function i(){return function e(n){o(n,e.vnode)}}function f(e,n){var t,r=e.data.on,o=e.listener,f=e.elm,u=n&&n.data.on,l=n&&n.elm;if(r!==u){if(r&&o)if(u)for(t in r)u[t]||f.removeEventListener(t,o,!1);else for(t in r)f.removeEventListener(t,o,!1);if(u){var s=n.listener=e.listener||i();if(s.vnode=n,r)for(t in u)r[t]||l.addEventListener(t,s,!1);else for(t in u)l.addEventListener(t,s,!1)}}}t.eventListenersModule={create:f,update:f,destroy:f},Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=t.eventListenersModule},{}]},{},[1])(1)});
|
||||
//# sourceMappingURL=snabbdom-eventlisteners.min.js.map
|
||||
File diff suppressed because one or more lines are too long
Vendored
-830
File diff suppressed because one or more lines are too long
-2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
-30
@@ -1,30 +0,0 @@
|
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.snabbdom_props = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
function updateProps(oldVnode, vnode) {
|
||||
var key, cur, old, elm = vnode.elm, oldProps = oldVnode.data.props, props = vnode.data.props;
|
||||
if (!oldProps && !props)
|
||||
return;
|
||||
if (oldProps === props)
|
||||
return;
|
||||
oldProps = oldProps || {};
|
||||
props = props || {};
|
||||
for (key in oldProps) {
|
||||
if (!props[key]) {
|
||||
delete elm[key];
|
||||
}
|
||||
}
|
||||
for (key in props) {
|
||||
cur = props[key];
|
||||
old = oldProps[key];
|
||||
if (old !== cur && (key !== 'value' || elm[key] !== cur)) {
|
||||
elm[key] = cur;
|
||||
}
|
||||
}
|
||||
}
|
||||
exports.propsModule = { create: updateProps, update: updateProps };
|
||||
exports.default = exports.propsModule;
|
||||
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy8ucmVnaXN0cnkubnBtanMub3JnL2Jyb3dzZXItcGFjay82LjAuMi9ub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIiwibW9kdWxlcy9wcm9wcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQ0FBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJmaWxlIjoiZ2VuZXJhdGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dmFyIGY9bmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKTt0aHJvdyBmLmNvZGU9XCJNT0RVTEVfTk9UX0ZPVU5EXCIsZn12YXIgbD1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwobC5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxsLGwuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIiwiXCJ1c2Ugc3RyaWN0XCI7XG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgXCJfX2VzTW9kdWxlXCIsIHsgdmFsdWU6IHRydWUgfSk7XG5mdW5jdGlvbiB1cGRhdGVQcm9wcyhvbGRWbm9kZSwgdm5vZGUpIHtcbiAgICB2YXIga2V5LCBjdXIsIG9sZCwgZWxtID0gdm5vZGUuZWxtLCBvbGRQcm9wcyA9IG9sZFZub2RlLmRhdGEucHJvcHMsIHByb3BzID0gdm5vZGUuZGF0YS5wcm9wcztcbiAgICBpZiAoIW9sZFByb3BzICYmICFwcm9wcylcbiAgICAgICAgcmV0dXJuO1xuICAgIGlmIChvbGRQcm9wcyA9PT0gcHJvcHMpXG4gICAgICAgIHJldHVybjtcbiAgICBvbGRQcm9wcyA9IG9sZFByb3BzIHx8IHt9O1xuICAgIHByb3BzID0gcHJvcHMgfHwge307XG4gICAgZm9yIChrZXkgaW4gb2xkUHJvcHMpIHtcbiAgICAgICAgaWYgKCFwcm9wc1trZXldKSB7XG4gICAgICAgICAgICBkZWxldGUgZWxtW2tleV07XG4gICAgICAgIH1cbiAgICB9XG4gICAgZm9yIChrZXkgaW4gcHJvcHMpIHtcbiAgICAgICAgY3VyID0gcHJvcHNba2V5XTtcbiAgICAgICAgb2xkID0gb2xkUHJvcHNba2V5XTtcbiAgICAgICAgaWYgKG9sZCAhPT0gY3VyICYmIChrZXkgIT09ICd2YWx1ZScgfHwgZWxtW2tleV0gIT09IGN1cikpIHtcbiAgICAgICAgICAgIGVsbVtrZXldID0gY3VyO1xuICAgICAgICB9XG4gICAgfVxufVxuZXhwb3J0cy5wcm9wc01vZHVsZSA9IHsgY3JlYXRlOiB1cGRhdGVQcm9wcywgdXBkYXRlOiB1cGRhdGVQcm9wcyB9O1xuZXhwb3J0cy5kZWZhdWx0ID0gZXhwb3J0cy5wcm9wc01vZHVsZTtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXByb3BzLmpzLm1hcCJdfQ==
|
||||
-2
@@ -1,2 +0,0 @@
|
||||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o;o="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,o.snabbdom_props=e()}}(function(){return function e(o,r,n){function t(i,u){if(!r[i]){if(!o[i]){var d="function"==typeof require&&require;if(!u&&d)return d(i,!0);if(f)return f(i,!0);var p=new Error("Cannot find module '"+i+"'");throw p.code="MODULE_NOT_FOUND",p}var a=r[i]={exports:{}};o[i][0].call(a.exports,function(e){var r=o[i][1][e];return t(r?r:e)},a,a.exports,e,o,r,n)}return r[i].exports}for(var f="function"==typeof require&&require,i=0;i<n.length;i++)t(n[i]);return t}({1:[function(e,o,r){"use strict";function n(e,o){var r,n,t,f=o.elm,i=e.data.props,u=o.data.props;if((i||u)&&i!==u){i=i||{},u=u||{};for(r in i)u[r]||delete f[r];for(r in u)n=u[r],t=i[r],t===n||"value"===r&&f[r]===n||(f[r]=n)}}r.propsModule={create:n,update:n},Object.defineProperty(r,"__esModule",{value:!0}),r["default"]=r.propsModule},{}]},{},[1])(1)});
|
||||
//# sourceMappingURL=snabbdom-props.min.js.map
|
||||
File diff suppressed because one or more lines are too long
Vendored
-90
File diff suppressed because one or more lines are too long
-2
@@ -1,2 +0,0 @@
|
||||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.snabbdom_style=e()}}(function(){return function e(t,n,r){function o(f,d){if(!n[f]){if(!t[f]){var u="function"==typeof require&&require;if(!d&&u)return u(f,!0);if(i)return i(f,!0);var l=new Error("Cannot find module '"+f+"'");throw l.code="MODULE_NOT_FOUND",l}var a=n[f]={exports:{}};t[f][0].call(a.exports,function(e){var n=t[f][1][e];return o(n?n:e)},a,a.exports,e,t,n,r)}return n[f].exports}for(var i="function"==typeof require&&require,f=0;f<r.length;f++)o(r[f]);return o}({1:[function(e,t,n){"use strict";function r(e,t,n){u(function(){e[t]=n})}function o(e,t){var n,o,i=t.elm,f=e.data.style,d=t.data.style;if((f||d)&&f!==d){f=f||{},d=d||{};var u="delayed"in f;for(o in f)d[o]||("-"===o[0]&&"-"===o[1]?i.style.removeProperty(o):i.style[o]="");for(o in d)if(n=d[o],"delayed"===o)for(o in d.delayed)n=d.delayed[o],u&&n===f.delayed[o]||r(i.style,o,n);else"remove"!==o&&n!==f[o]&&("-"===o[0]&&"-"===o[1]?i.style.setProperty(o,n):i.style[o]=n)}}function i(e){var t,n,r=e.elm,o=e.data.style;if(o&&(t=o.destroy))for(n in t)r.style[n]=t[n]}function f(e,t){var n=e.data.style;if(!n||!n.remove)return void t();var r,o,i=e.elm,f=0,d=n.remove,u=0,l=[];for(r in d)l.push(r),i.style[r]=d[r];o=getComputedStyle(i);for(var a=o["transition-property"].split(", ");f<a.length;++f)l.indexOf(a[f])!==-1&&u++;i.addEventListener("transitionend",function(e){e.target===i&&--u,0===u&&t()})}var d="undefined"!=typeof window&&window.requestAnimationFrame||setTimeout,u=function(e){d(function(){d(e)})};n.styleModule={create:o,update:o,destroy:i,remove:f},Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=n.styleModule},{}]},{},[1])(1)});
|
||||
//# sourceMappingURL=snabbdom-style.min.js.map
|
||||
File diff suppressed because one or more lines are too long
Vendored
-506
File diff suppressed because one or more lines are too long
Vendored
-2
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
Vendored
-126
File diff suppressed because one or more lines are too long
Vendored
-2
@@ -1,2 +0,0 @@
|
||||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.tovnode=e()}}(function(){return function e(t,n,o){function r(u,d){if(!n[u]){if(!t[u]){var f="function"==typeof require&&require;if(!d&&f)return f(u,!0);if(i)return i(u,!0);var a=new Error("Cannot find module '"+u+"'");throw a.code="MODULE_NOT_FOUND",a}var l=n[u]={exports:{}};t[u][0].call(l.exports,function(e){var n=t[u][1][e];return r(n?n:e)},l,l.exports,e,t,n,o)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<o.length;u++)r(o[u]);return r}({1:[function(e,t,n){"use strict";function o(e){return document.createElement(e)}function r(e,t){return document.createElementNS(e,t)}function i(e){return document.createTextNode(e)}function u(e){return document.createComment(e)}function d(e,t,n){e.insertBefore(t,n)}function f(e,t){e.removeChild(t)}function a(e,t){e.appendChild(t)}function l(e){return e.parentNode}function c(e){return e.nextSibling}function s(e){return e.tagName}function m(e,t){e.textContent=t}function v(e){return e.textContent}function p(e){return 1===e.nodeType}function x(e){return 3===e.nodeType}function h(e){return 8===e.nodeType}n.htmlDomApi={createElement:o,createElementNS:r,createTextNode:i,createComment:u,insertBefore:d,removeChild:f,appendChild:a,parentNode:l,nextSibling:c,tagName:s,setTextContent:m,getTextContent:v,isElement:p,isText:x,isComment:h},Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=n.htmlDomApi},{}],2:[function(e,t,n){"use strict";function o(e,t){var n,u=void 0!==t?t:i["default"];if(u.isElement(e)){var d,f=e.id?"#"+e.id:"",a=e.getAttribute("class"),l=a?"."+a.split(" ").join("."):"",c=u.tagName(e).toLowerCase()+f+l,s={},m=[],v=void 0,p=void 0,x=e.attributes,h=e.childNodes;for(v=0,p=x.length;v<p;v++)d=x[v].nodeName,"id"!==d&&"class"!==d&&(s[d]=x[v].nodeValue);for(v=0,p=h.length;v<p;v++)m.push(o(h[v]));return r["default"](c,{attrs:s},m,void 0,e)}return u.isText(e)?(n=u.getTextContent(e),r["default"](void 0,void 0,void 0,n,e)):u.isComment(e)?(n=u.getTextContent(e),r["default"]("!",void 0,void 0,n,void 0)):r["default"]("",{},[],void 0,void 0)}var r=e("./vnode"),i=e("./htmldomapi");n.toVNode=o,Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=o},{"./htmldomapi":1,"./vnode":3}],3:[function(e,t,n){"use strict";function o(e,t,n,o,r){var i=void 0===t?void 0:t.key;return{sel:e,data:t,children:n,text:o,elm:r,key:i}}n.vnode=o,Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=o},{}]},{},[2])(2)});
|
||||
//# sourceMappingURL=tovnode.min.js.map
|
||||
-1
File diff suppressed because one or more lines are too long
@@ -1,19 +0,0 @@
|
||||
This carousel example uses `style transform` and `transition` to rotate a group of SVG triangles.
|
||||
|
||||
Also, the color of each triangle changes when you hover or click/tap it.
|
||||
|
||||
I built the build.js using npm and browserify.
|
||||
|
||||
In my local copy of the snabbdom project root I did these preparations:
|
||||
```
|
||||
npm install --save-dev babelify
|
||||
npm install --save-dev babel-preset-es2015
|
||||
echo '{ "presets": ["es2015"] }' > .babelrc
|
||||
```
|
||||
|
||||
I then built like this:
|
||||
```
|
||||
browserify examples/carousel-svg/script.js -t babelify -o examples/carousel-svg/build.js
|
||||
```
|
||||
|
||||
-- *jk*
|
||||
@@ -1,566 +0,0 @@
|
||||
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
function addNS(data, children) {
|
||||
data.ns = 'http://www.w3.org/2000/svg';
|
||||
if (children !== undefined) {
|
||||
for (var i = 0; i < children.length; ++i) {
|
||||
addNS(children[i].data, children[i].children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function h(sel, b, c) {
|
||||
var data = {},
|
||||
children,
|
||||
text,
|
||||
i;
|
||||
if (arguments.length === 3) {
|
||||
data = b;
|
||||
if (is.array(c)) {
|
||||
children = c;
|
||||
} else if (is.primitive(c)) {
|
||||
text = c;
|
||||
}
|
||||
} else if (arguments.length === 2) {
|
||||
if (is.array(b)) {
|
||||
children = b;
|
||||
} else if (is.primitive(b)) {
|
||||
text = b;
|
||||
} else {
|
||||
data = b;
|
||||
}
|
||||
}
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
if (is.primitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
|
||||
}
|
||||
}
|
||||
if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g') {
|
||||
addNS(data, children);
|
||||
}
|
||||
return VNode(sel, data, children, text, undefined);
|
||||
};
|
||||
|
||||
},{"./is":2,"./vnode":7}],2:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
array: Array.isArray,
|
||||
primitive: function primitive(s) {
|
||||
return typeof s === 'string' || typeof s === 'number';
|
||||
}
|
||||
};
|
||||
|
||||
},{}],3:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
var booleanAttrs = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "compact", "controls", "declare", "default", "defaultchecked", "defaultmuted", "defaultselected", "defer", "disabled", "draggable", "enabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "itemscope", "loop", "multiple", "muted", "nohref", "noresize", "noshade", "novalidate", "nowrap", "open", "pauseonexit", "readonly", "required", "reversed", "scoped", "seamless", "selected", "sortable", "spellcheck", "translate", "truespeed", "typemustmatch", "visible"];
|
||||
|
||||
var booleanAttrsDict = {};
|
||||
for (var i = 0, len = booleanAttrs.length; i < len; i++) {
|
||||
booleanAttrsDict[booleanAttrs[i]] = true;
|
||||
}
|
||||
|
||||
function updateAttrs(oldVnode, vnode) {
|
||||
var key,
|
||||
cur,
|
||||
old,
|
||||
elm = vnode.elm,
|
||||
oldAttrs = oldVnode.data.attrs || {},
|
||||
attrs = vnode.data.attrs || {};
|
||||
|
||||
// update modified attributes, add new attributes
|
||||
for (key in attrs) {
|
||||
cur = attrs[key];
|
||||
old = oldAttrs[key];
|
||||
if (old !== cur) {
|
||||
// TODO: add support to namespaced attributes (setAttributeNS)
|
||||
if (!cur && booleanAttrsDict[key]) elm.removeAttribute(key);else elm.setAttribute(key, cur);
|
||||
}
|
||||
}
|
||||
//remove removed attributes
|
||||
// use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
|
||||
// the other option is to remove all attributes with value == undefined
|
||||
for (key in oldAttrs) {
|
||||
if (!(key in attrs)) {
|
||||
elm.removeAttribute(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateAttrs, update: updateAttrs };
|
||||
|
||||
},{}],4:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var is = require('../is');
|
||||
|
||||
function arrInvoker(arr) {
|
||||
return function () {
|
||||
// Special case when length is two, for performance
|
||||
arr.length === 2 ? arr[0](arr[1]) : arr[0].apply(undefined, arr.slice(1));
|
||||
};
|
||||
}
|
||||
|
||||
function fnInvoker(o) {
|
||||
return function (ev) {
|
||||
o.fn(ev);
|
||||
};
|
||||
}
|
||||
|
||||
function updateEventListeners(oldVnode, vnode) {
|
||||
var name,
|
||||
cur,
|
||||
old,
|
||||
elm = vnode.elm,
|
||||
oldOn = oldVnode.data.on || {},
|
||||
on = vnode.data.on;
|
||||
if (!on) return;
|
||||
for (name in on) {
|
||||
cur = on[name];
|
||||
old = oldOn[name];
|
||||
if (old === undefined) {
|
||||
if (is.array(cur)) {
|
||||
elm.addEventListener(name, arrInvoker(cur));
|
||||
} else {
|
||||
cur = { fn: cur };
|
||||
on[name] = cur;
|
||||
elm.addEventListener(name, fnInvoker(cur));
|
||||
}
|
||||
} else if (is.array(old)) {
|
||||
// Deliberately modify old array since it's captured in closure created with `arrInvoker`
|
||||
old.length = cur.length;
|
||||
for (var i = 0; i < old.length; ++i) {
|
||||
old[i] = cur[i];
|
||||
}on[name] = old;
|
||||
} else {
|
||||
old.fn = cur;
|
||||
on[name] = old;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateEventListeners, update: updateEventListeners };
|
||||
|
||||
},{"../is":2}],5:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var raf = window && window.requestAnimationFrame || setTimeout;
|
||||
var nextFrame = function nextFrame(fn) {
|
||||
raf(function () {
|
||||
raf(fn);
|
||||
});
|
||||
};
|
||||
|
||||
function setNextFrame(obj, prop, val) {
|
||||
nextFrame(function () {
|
||||
obj[prop] = val;
|
||||
});
|
||||
}
|
||||
|
||||
function updateStyle(oldVnode, vnode) {
|
||||
var cur,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
oldStyle = oldVnode.data.style || {},
|
||||
style = vnode.data.style || {},
|
||||
oldHasDel = 'delayed' in oldStyle;
|
||||
for (name in oldStyle) {
|
||||
if (!style[name]) {
|
||||
elm.style[name] = '';
|
||||
}
|
||||
}
|
||||
for (name in style) {
|
||||
cur = style[name];
|
||||
if (name === 'delayed') {
|
||||
for (name in style.delayed) {
|
||||
cur = style.delayed[name];
|
||||
if (!oldHasDel || cur !== oldStyle.delayed[name]) {
|
||||
setNextFrame(elm.style, name, cur);
|
||||
}
|
||||
}
|
||||
} else if (name !== 'remove' && cur !== oldStyle[name]) {
|
||||
elm.style[name] = cur;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyDestroyStyle(vnode) {
|
||||
var style,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
s = vnode.data.style;
|
||||
if (!s || !(style = s.destroy)) return;
|
||||
for (name in style) {
|
||||
elm.style[name] = style[name];
|
||||
}
|
||||
}
|
||||
|
||||
function applyRemoveStyle(vnode, rm) {
|
||||
var s = vnode.data.style;
|
||||
if (!s || !s.remove) {
|
||||
rm();
|
||||
return;
|
||||
}
|
||||
var name,
|
||||
elm = vnode.elm,
|
||||
idx,
|
||||
i = 0,
|
||||
maxDur = 0,
|
||||
compStyle,
|
||||
style = s.remove,
|
||||
amount = 0,
|
||||
applied = [];
|
||||
for (name in style) {
|
||||
applied.push(name);
|
||||
elm.style[name] = style[name];
|
||||
}
|
||||
compStyle = getComputedStyle(elm);
|
||||
var props = compStyle['transition-property'].split(', ');
|
||||
for (; i < props.length; ++i) {
|
||||
if (applied.indexOf(props[i]) !== -1) amount++;
|
||||
}
|
||||
elm.addEventListener('transitionend', function (ev) {
|
||||
if (ev.target === elm) --amount;
|
||||
if (amount === 0) rm();
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = { create: updateStyle, update: updateStyle, destroy: applyDestroyStyle, remove: applyRemoveStyle };
|
||||
|
||||
},{}],6:[function(require,module,exports){
|
||||
// jshint newcap: false
|
||||
/* global require, module, document, Element */
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
function isUndef(s) {
|
||||
return s === undefined;
|
||||
}
|
||||
function isDef(s) {
|
||||
return s !== undefined;
|
||||
}
|
||||
|
||||
function emptyNodeAt(elm) {
|
||||
return VNode(elm.tagName, {}, [], undefined, elm);
|
||||
}
|
||||
|
||||
var emptyNode = VNode('', {}, [], undefined, undefined);
|
||||
|
||||
function sameVnode(vnode1, vnode2) {
|
||||
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
|
||||
}
|
||||
|
||||
function createKeyToOldIdx(children, beginIdx, endIdx) {
|
||||
var i,
|
||||
map = {},
|
||||
key;
|
||||
for (i = beginIdx; i <= endIdx; ++i) {
|
||||
key = children[i].key;
|
||||
if (isDef(key)) map[key] = i;
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
function createRmCb(childElm, listeners) {
|
||||
return function () {
|
||||
if (--listeners === 0) childElm.parentElement.removeChild(childElm);
|
||||
};
|
||||
}
|
||||
|
||||
var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
|
||||
|
||||
function init(modules) {
|
||||
var i,
|
||||
j,
|
||||
cbs = {};
|
||||
for (i = 0; i < hooks.length; ++i) {
|
||||
cbs[hooks[i]] = [];
|
||||
for (j = 0; j < modules.length; ++j) {
|
||||
if (modules[j][hooks[i]] !== undefined) cbs[hooks[i]].push(modules[j][hooks[i]]);
|
||||
}
|
||||
}
|
||||
|
||||
function createElm(vnode, insertedVnodeQueue) {
|
||||
var i,
|
||||
data = vnode.data;
|
||||
if (isDef(data)) {
|
||||
if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode);
|
||||
if (isDef(i = data.vnode)) vnode = i;
|
||||
}
|
||||
var elm,
|
||||
children = vnode.children,
|
||||
sel = vnode.sel;
|
||||
if (isDef(sel)) {
|
||||
// Parse selector
|
||||
var hashIdx = sel.indexOf('#');
|
||||
var dotIdx = sel.indexOf('.', hashIdx);
|
||||
var hash = hashIdx > 0 ? hashIdx : sel.length;
|
||||
var dot = dotIdx > 0 ? dotIdx : sel.length;
|
||||
var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
|
||||
elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? document.createElementNS(i, tag) : document.createElement(tag);
|
||||
if (hash < dot) elm.id = sel.slice(hash + 1, dot);
|
||||
if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' ');
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
elm.appendChild(createElm(children[i], insertedVnodeQueue));
|
||||
}
|
||||
} else if (is.primitive(vnode.text)) {
|
||||
elm.appendChild(document.createTextNode(vnode.text));
|
||||
}
|
||||
for (i = 0; i < cbs.create.length; ++i) {
|
||||
cbs.create[i](emptyNode, vnode);
|
||||
}i = vnode.data.hook; // Reuse variable
|
||||
if (isDef(i)) {
|
||||
if (i.create) i.create(emptyNode, vnode);
|
||||
if (i.insert) insertedVnodeQueue.push(vnode);
|
||||
}
|
||||
} else {
|
||||
elm = vnode.elm = document.createTextNode(vnode.text);
|
||||
}
|
||||
return vnode.elm;
|
||||
}
|
||||
|
||||
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
parentElm.insertBefore(createElm(vnodes[startIdx], insertedVnodeQueue), before);
|
||||
}
|
||||
}
|
||||
|
||||
function invokeDestroyHook(vnode) {
|
||||
var i = vnode.data,
|
||||
j;
|
||||
if (isDef(i)) {
|
||||
if (isDef(i = i.hook) && isDef(i = i.destroy)) i(vnode);
|
||||
for (i = 0; i < cbs.destroy.length; ++i) {
|
||||
cbs.destroy[i](vnode);
|
||||
}if (isDef(i = vnode.children)) {
|
||||
for (j = 0; j < vnode.children.length; ++j) {
|
||||
invokeDestroyHook(vnode.children[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
var i,
|
||||
listeners,
|
||||
rm,
|
||||
ch = vnodes[startIdx];
|
||||
if (isDef(ch)) {
|
||||
if (isDef(ch.sel)) {
|
||||
invokeDestroyHook(ch);
|
||||
listeners = cbs.remove.length + 1;
|
||||
rm = createRmCb(ch.elm, listeners);
|
||||
for (i = 0; i < cbs.remove.length; ++i) {
|
||||
cbs.remove[i](ch, rm);
|
||||
}if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {
|
||||
i(ch, rm);
|
||||
} else {
|
||||
rm();
|
||||
}
|
||||
} else {
|
||||
// Text node
|
||||
parentElm.removeChild(ch.elm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
|
||||
var oldStartIdx = 0,
|
||||
newStartIdx = 0;
|
||||
var oldEndIdx = oldCh.length - 1;
|
||||
var oldStartVnode = oldCh[0];
|
||||
var oldEndVnode = oldCh[oldEndIdx];
|
||||
var newEndIdx = newCh.length - 1;
|
||||
var newStartVnode = newCh[0];
|
||||
var newEndVnode = newCh[newEndIdx];
|
||||
var oldKeyToIdx, idxInOld, elmToMove, before;
|
||||
|
||||
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
||||
if (isUndef(oldStartVnode)) {
|
||||
oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left
|
||||
} else if (isUndef(oldEndVnode)) {
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newStartVnode)) {
|
||||
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else if (sameVnode(oldEndVnode, newEndVnode)) {
|
||||
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newEndVnode)) {
|
||||
// Vnode moved right
|
||||
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
|
||||
parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldEndVnode, newStartVnode)) {
|
||||
// Vnode moved left
|
||||
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
|
||||
parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
|
||||
idxInOld = oldKeyToIdx[newStartVnode.key];
|
||||
if (isUndef(idxInOld)) {
|
||||
// New element
|
||||
parentElm.insertBefore(createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
elmToMove = oldCh[idxInOld];
|
||||
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
|
||||
oldCh[idxInOld] = undefined;
|
||||
parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (oldStartIdx > oldEndIdx) {
|
||||
before = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
|
||||
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
|
||||
} else if (newStartIdx > newEndIdx) {
|
||||
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
|
||||
}
|
||||
}
|
||||
|
||||
function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
|
||||
var i, hook;
|
||||
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
if (isDef(i = oldVnode.data) && isDef(i = i.vnode)) oldVnode = i;
|
||||
if (isDef(i = vnode.data) && isDef(i = i.vnode)) vnode = i;
|
||||
var elm = vnode.elm = oldVnode.elm,
|
||||
oldCh = oldVnode.children,
|
||||
ch = vnode.children;
|
||||
if (oldVnode === vnode) return;
|
||||
if (isDef(vnode.data)) {
|
||||
for (i = 0; i < cbs.update.length; ++i) {
|
||||
cbs.update[i](oldVnode, vnode);
|
||||
}i = vnode.data.hook;
|
||||
if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
|
||||
}
|
||||
if (isUndef(vnode.text)) {
|
||||
if (isDef(oldCh) && isDef(ch)) {
|
||||
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
|
||||
} else if (isDef(ch)) {
|
||||
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
|
||||
} else if (isDef(oldCh)) {
|
||||
removeVnodes(elm, oldCh, 0, oldCh.length - 1);
|
||||
}
|
||||
} else if (oldVnode.text !== vnode.text) {
|
||||
elm.textContent = vnode.text;
|
||||
}
|
||||
if (isDef(hook) && isDef(i = hook.postpatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
}
|
||||
|
||||
return function (oldVnode, vnode) {
|
||||
var i;
|
||||
var insertedVnodeQueue = [];
|
||||
for (i = 0; i < cbs.pre.length; ++i) {
|
||||
cbs.pre[i]();
|
||||
}if (oldVnode instanceof Element) {
|
||||
if (oldVnode.parentElement !== null) {
|
||||
createElm(vnode, insertedVnodeQueue);
|
||||
oldVnode.parentElement.replaceChild(vnode.elm, oldVnode);
|
||||
} else {
|
||||
oldVnode = emptyNodeAt(oldVnode);
|
||||
patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
||||
}
|
||||
} else {
|
||||
patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
||||
}
|
||||
for (i = 0; i < insertedVnodeQueue.length; ++i) {
|
||||
insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
|
||||
}
|
||||
for (i = 0; i < cbs.post.length; ++i) {
|
||||
cbs.post[i]();
|
||||
}return vnode;
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = { init: init };
|
||||
|
||||
},{"./is":2,"./vnode":7}],7:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
module.exports = function (sel, data, children, text, elm) {
|
||||
var key = data === undefined ? undefined : data.key;
|
||||
return { sel: sel, data: data, children: children,
|
||||
text: text, elm: elm, key: key };
|
||||
};
|
||||
|
||||
},{}],8:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([require('../../modules/attributes'), require('../../modules/style'), require('../../modules/eventlisteners')]);
|
||||
var h = require('../../h.js');
|
||||
|
||||
var vnode;
|
||||
|
||||
var data = {
|
||||
degRotation: 0
|
||||
};
|
||||
|
||||
function gRotation() {
|
||||
//console.log("gRotation: %s", data.degRotation);
|
||||
return "rotate(" + data.degRotation + "deg)";
|
||||
}
|
||||
|
||||
function triangleClick(id) {
|
||||
console.log("triangleClick: %s", id);
|
||||
render();
|
||||
}
|
||||
|
||||
function handleRotate(degs) {
|
||||
data.degRotation += degs;
|
||||
console.log("handleRotate: %s, %s", degs, data.degRotation);
|
||||
render();
|
||||
}
|
||||
|
||||
function handleReset(degs) {
|
||||
data.degRotation = degs;
|
||||
console.log("handleReset: %s", degs);
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
vnode = patch(vnode, view(data));
|
||||
}
|
||||
|
||||
var hTriangle = function hTriangle(id, degRotation) {
|
||||
return h("polygon#" + id, {
|
||||
attrs: {
|
||||
points: "-50,-88 0,-175 50,-88",
|
||||
transform: "rotate(" + degRotation + ")",
|
||||
"stroke-width": 3
|
||||
},
|
||||
on: { click: [triangleClick, id] }
|
||||
});
|
||||
};
|
||||
|
||||
var view = function view(data) {
|
||||
return h("div.view", [h("h1", "Snabbdom SVG Carousel"), h("svg", { attrs: { width: 380, height: 380, viewBox: [-190, -190, 380, 380] } }, [h("g#carousel", { style: { "-webkit-transform": gRotation(), transform: gRotation() } }, [hTriangle("yellow", 0), hTriangle("green", 60), hTriangle("magenta", 120), hTriangle("red", 180), hTriangle("cyan", 240), hTriangle("blue", 300)])]), h("button", { on: { click: [handleRotate, 60] } }, "Rotate Clockwise"), h("button", { on: { click: [handleRotate, -60] } }, "Rotate Anticlockwise"), h("button", { on: { click: [handleReset, 0] } }, "Reset")]);
|
||||
};
|
||||
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
var container = document.getElementById("container");
|
||||
vnode = patch(container, view(data));
|
||||
render();
|
||||
});
|
||||
|
||||
},{"../../h.js":1,"../../modules/attributes":3,"../../modules/eventlisteners":4,"../../modules/style":5,"../../snabbdom.js":6}]},{},[8]);
|
||||
@@ -1,74 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta charset="utf-8">
|
||||
<title>Carousel</title>
|
||||
<script type="text/javascript" src="build.js"></script>
|
||||
<style type="text/css">
|
||||
div.view {
|
||||
margin: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
color: #505000;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
g#carousel {
|
||||
-webkit-transition: -webkit-transform 1s ease;
|
||||
transition: transform 1s ease;
|
||||
}
|
||||
polygon {
|
||||
stroke: #808000;
|
||||
transition: fill 0.5s linear;
|
||||
}
|
||||
polygon#yellow {
|
||||
fill: rgba(255,255,0,0.4);
|
||||
}
|
||||
polygon#yellow:hover, polygon#yellow:active {
|
||||
fill: yellow;
|
||||
}
|
||||
polygon#green {
|
||||
fill: rgba(0,128,0,0.4);
|
||||
}
|
||||
polygon#green:hover, polygon#green:active {
|
||||
fill: green;
|
||||
}
|
||||
polygon#magenta {
|
||||
fill: rgba(255,0,255,0.4);
|
||||
}
|
||||
polygon#magenta:hover, polygon#magenta:active {
|
||||
fill: magenta;
|
||||
}
|
||||
polygon#red {
|
||||
fill: rgba(255,0,0,0.4);
|
||||
}
|
||||
polygon#red:hover, polygon#red:active {
|
||||
fill: red;
|
||||
}
|
||||
polygon#cyan {
|
||||
fill: rgba(0,255,255,0.4);
|
||||
}
|
||||
polygon#cyan:hover, polygon#cyan:active {
|
||||
fill: cyan;
|
||||
}
|
||||
polygon#blue {
|
||||
fill: rgba(0,0,255,0.4);
|
||||
}
|
||||
polygon#blue:hover, polygon#blue:active {
|
||||
fill: blue;
|
||||
}
|
||||
button {
|
||||
font-size: 15px;
|
||||
margin: 0 0.7em 0.7em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,74 +0,0 @@
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([
|
||||
require('../../modules/attributes').default,
|
||||
require('../../modules/style').default,
|
||||
require('../../modules/eventlisteners').default
|
||||
]);
|
||||
var h = require('../../h.js').default;
|
||||
|
||||
var vnode;
|
||||
|
||||
var data = {
|
||||
degRotation: 0
|
||||
};
|
||||
|
||||
function gRotation() {
|
||||
//console.log("gRotation: %s", data.degRotation);
|
||||
return "rotate(" + data.degRotation + "deg)";
|
||||
}
|
||||
|
||||
function triangleClick(id) {
|
||||
console.log("triangleClick: %s", id);
|
||||
render();
|
||||
}
|
||||
|
||||
function handleRotate(degs) {
|
||||
data.degRotation += degs;
|
||||
console.log("handleRotate: %s, %s", degs, data.degRotation);
|
||||
render();
|
||||
}
|
||||
|
||||
function handleReset(degs) {
|
||||
data.degRotation = degs;
|
||||
console.log("handleReset: %s", degs);
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
vnode = patch(vnode, view(data));
|
||||
}
|
||||
|
||||
const hTriangle = (id, degRotation) =>
|
||||
h("polygon#" + id, {
|
||||
attrs: {
|
||||
points: "-50,-88 0,-175 50,-88",
|
||||
transform: "rotate(" + degRotation + ")",
|
||||
"stroke-width": 3
|
||||
},
|
||||
on: {click: [triangleClick, id]}
|
||||
});
|
||||
|
||||
const view = (data) =>
|
||||
h("div.view", [
|
||||
h("h1", "Snabbdom SVG Carousel"),
|
||||
h("svg", {attrs: {width: 380, height: 380, viewBox: [-190, -190, 380, 380]}}, [
|
||||
h("g#carousel",
|
||||
{style: {"-webkit-transform": gRotation(), transform: gRotation()}}, [
|
||||
hTriangle("yellow", 0),
|
||||
hTriangle("green", 60),
|
||||
hTriangle("magenta", 120),
|
||||
hTriangle("red", 180),
|
||||
hTriangle("cyan", 240),
|
||||
hTriangle("blue", 300)
|
||||
])
|
||||
]),
|
||||
h("button", {on: {click: [handleRotate, 60]}}, "Rotate Clockwise"),
|
||||
h("button", {on: {click: [handleRotate, -60]}}, "Rotate Anticlockwise"),
|
||||
h("button", {on: {click: [handleReset, 0]}}, "Reset")
|
||||
]);
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
var container = document.getElementById("container");
|
||||
vnode = patch(container, view(data));
|
||||
render();
|
||||
});
|
||||
@@ -1,708 +0,0 @@
|
||||
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
/* jshint esnext: true */
|
||||
'use strict';
|
||||
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([require('../../modules/class'), require('../../modules/hero'), require('../../modules/style'), require('../../modules/eventlisteners')]);
|
||||
var h = require('../../h.js');
|
||||
|
||||
var vnode;
|
||||
|
||||
var data = {
|
||||
selected: undefined,
|
||||
movies: [{ rank: 1, title: 'This is an', desc: 'Lorem ipsum dolor sit amet, sed pede integer vitae bibendum, accumsan sit, vulputate aenean tempora ipsum. Lorem sed id et metus, eros posuere suspendisse nec nunc justo, fusce augue placerat nibh purus suspendisse. Aliquam aliquam, ut eget. Mollis a eget sed nibh tincidunt nec, mi integer, proin magna lacus iaculis tortor. Aliquam vel arcu arcu, vivamus a urna fames felis vel wisi, cursus tortor nec erat dignissim cras sem, mauris ac venenatis tellus elit.' }, { rank: 2, title: 'example of', desc: 'Consequuntur ipsum nulla, consequat curabitur in magnis risus. Taciti mattis bibendum tellus nibh, at dui neque eget, odio pede ut, sapien pede, ipsum ut. Sagittis dui, sodales sem, praesent ipsum conubia eget lorem lobortis wisi.' }, { rank: 3, title: 'Snabbdom', desc: 'Quam lorem aliquam fusce wisi, urna purus ipsum pharetra sed, at cras sodales enim vestibulum odio cras, luctus integer phasellus.' }, { rank: 4, title: 'doing hero transitions', desc: 'Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus.' }, { rank: 5, title: 'using the', desc: 'Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus.' }, { rank: 6, title: 'module for hero transitions', desc: 'Sapien laoreet, ligula elit tortor nulla pellentesque, maecenas enim turpis, quae duis venenatis vivamus ultricies, nunc imperdiet sollicitudin ipsum malesuada. Ut sem. Wisi fusce nullam nibh enim. Nisl hymenaeos id sed sed in. Proin leo et, pulvinar nunc pede laoreet.' }, { rank: 7, title: 'click on ar element in', desc: 'Accumsan quia, id nascetur dui et congue erat, id excepteur, primis ratione nec. At nulla et. Suspendisse lobortis, lobortis in tortor fringilla, duis adipiscing vestibulum voluptates sociosqu auctor.' }, { rank: 8, title: 'the list', desc: 'Ante tellus egestas vel hymenaeos, ut viverra nibh ut, ipsum nibh donec donec dolor. Eros ridiculus vel egestas convallis ipsum, commodo ut venenatis nullam porta iaculis, suspendisse ante proin leo, felis risus etiam.' }, { rank: 9, title: 'to witness', desc: 'Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst.' }, { rank: 10, title: 'the effect', desc: 'Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris' }]
|
||||
};
|
||||
|
||||
function select(m) {
|
||||
data.selected = m;
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
vnode = patch(vnode, view(data));
|
||||
}
|
||||
|
||||
var fadeInOutStyle = {
|
||||
opacity: '0', delayed: { opacity: '1' }, remove: { opacity: '0' }
|
||||
};
|
||||
|
||||
var detailView = function detailView(movie) {
|
||||
return h('div.page', { style: fadeInOutStyle }, [h('div.header', [h('div.header-content.detail', {
|
||||
style: { opacity: '1', remove: { opacity: '0' } }
|
||||
}, [h('div.rank', [h('span.header-rank.hero', { hero: { id: 'rank' + movie.rank } }, movie.rank), h('div.rank-circle', {
|
||||
style: { transform: 'scale(0)',
|
||||
delayed: { transform: 'scale(1)' },
|
||||
destroy: { transform: 'scale(0)' } }
|
||||
})]), h('div.hero.header-title', { hero: { id: movie.title } }, movie.title), h('div.spacer'), h('div.close', {
|
||||
on: { click: [select, undefined] },
|
||||
style: { transform: 'scale(0)',
|
||||
delayed: { transform: 'scale(1)' },
|
||||
destroy: { transform: 'scale(0)' } }
|
||||
}, 'x')])]), h('div.page-content', [h('div.desc', {
|
||||
style: { opacity: '0', transform: 'translateX(3em)',
|
||||
delayed: { opacity: '1', transform: 'translate(0)' },
|
||||
remove: { opacity: '0', position: 'absolute', top: '0', left: '0',
|
||||
transform: 'translateX(3em)' }
|
||||
}
|
||||
}, [h('h2', 'Description:'), h('span', movie.desc)])])]);
|
||||
};
|
||||
|
||||
var overviewView = function overviewView(movies) {
|
||||
return h('div.page', { style: fadeInOutStyle }, [h('div.header', [h('div.header-content.overview', {
|
||||
style: fadeInOutStyle
|
||||
}, [h('div.header-title', {
|
||||
style: { transform: 'translateY(-2em)',
|
||||
delayed: { transform: 'translate(0)' },
|
||||
destroy: { transform: 'translateY(-2em)' } }
|
||||
}, 'Top 10 movies'), h('div.spacer')])]), h('div.page-content', [h('div.list', {
|
||||
style: { opacity: '0', delayed: { opacity: '1' },
|
||||
remove: { opacity: '0', position: 'absolute', top: '0', left: '0' } }
|
||||
}, movies.map(function (movie) {
|
||||
return h('div.row', {
|
||||
on: { click: [select, movie] }
|
||||
}, [h('div.hero.rank', [h('span.hero', { hero: { id: 'rank' + movie.rank } }, movie.rank)]), h('div.hero', { hero: { id: movie.title } }, movie.title)]);
|
||||
}))])]);
|
||||
};
|
||||
|
||||
var view = function view(data) {
|
||||
return h('div.page-container', [data.selected ? detailView(data.selected) : overviewView(data.movies)]);
|
||||
};
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var container = document.getElementById('container');
|
||||
vnode = patch(container, view(data));
|
||||
render();
|
||||
});
|
||||
|
||||
},{"../../h.js":2,"../../modules/class":4,"../../modules/eventlisteners":5,"../../modules/hero":6,"../../modules/style":7,"../../snabbdom.js":8}],2:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
function addNS(data, children) {
|
||||
data.ns = 'http://www.w3.org/2000/svg';
|
||||
if (children !== undefined) {
|
||||
for (var i = 0; i < children.length; ++i) {
|
||||
addNS(children[i].data, children[i].children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function h(sel, b, c) {
|
||||
var data = {},
|
||||
children,
|
||||
text,
|
||||
i;
|
||||
if (arguments.length === 3) {
|
||||
data = b;
|
||||
if (is.array(c)) {
|
||||
children = c;
|
||||
} else if (is.primitive(c)) {
|
||||
text = c;
|
||||
}
|
||||
} else if (arguments.length === 2) {
|
||||
if (is.array(b)) {
|
||||
children = b;
|
||||
} else if (is.primitive(b)) {
|
||||
text = b;
|
||||
} else {
|
||||
data = b;
|
||||
}
|
||||
}
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
if (is.primitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
|
||||
}
|
||||
}
|
||||
if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g') {
|
||||
addNS(data, children);
|
||||
}
|
||||
return VNode(sel, data, children, text, undefined);
|
||||
};
|
||||
|
||||
},{"./is":3,"./vnode":9}],3:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
array: Array.isArray,
|
||||
primitive: function primitive(s) {
|
||||
return typeof s === 'string' || typeof s === 'number';
|
||||
}
|
||||
};
|
||||
|
||||
},{}],4:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
function updateClass(oldVnode, vnode) {
|
||||
var cur,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
oldClass = oldVnode.data['class'] || {},
|
||||
klass = vnode.data['class'] || {};
|
||||
for (name in klass) {
|
||||
cur = klass[name];
|
||||
if (cur !== oldClass[name]) {
|
||||
elm.classList[cur ? 'add' : 'remove'](name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateClass, update: updateClass };
|
||||
|
||||
},{}],5:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var is = require('../is');
|
||||
|
||||
function arrInvoker(arr) {
|
||||
return function () {
|
||||
// Special case when length is two, for performance
|
||||
arr.length === 2 ? arr[0](arr[1]) : arr[0].apply(undefined, arr.slice(1));
|
||||
};
|
||||
}
|
||||
|
||||
function fnInvoker(o) {
|
||||
return function (ev) {
|
||||
o.fn(ev);
|
||||
};
|
||||
}
|
||||
|
||||
function updateEventListeners(oldVnode, vnode) {
|
||||
var name,
|
||||
cur,
|
||||
old,
|
||||
elm = vnode.elm,
|
||||
oldOn = oldVnode.data.on || {},
|
||||
on = vnode.data.on;
|
||||
if (!on) return;
|
||||
for (name in on) {
|
||||
cur = on[name];
|
||||
old = oldOn[name];
|
||||
if (old === undefined) {
|
||||
if (is.array(cur)) {
|
||||
elm.addEventListener(name, arrInvoker(cur));
|
||||
} else {
|
||||
cur = { fn: cur };
|
||||
on[name] = cur;
|
||||
elm.addEventListener(name, fnInvoker(cur));
|
||||
}
|
||||
} else if (is.array(old)) {
|
||||
// Deliberately modify old array since it's captured in closure created with `arrInvoker`
|
||||
old.length = cur.length;
|
||||
for (var i = 0; i < old.length; ++i) old[i] = cur[i];
|
||||
on[name] = old;
|
||||
} else {
|
||||
old.fn = cur;
|
||||
on[name] = old;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateEventListeners, update: updateEventListeners };
|
||||
|
||||
},{"../is":3}],6:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var raf = window && window.requestAnimationFrame || setTimeout;
|
||||
var nextFrame = function nextFrame(fn) {
|
||||
raf(function () {
|
||||
raf(fn);
|
||||
});
|
||||
};
|
||||
|
||||
function setNextFrame(obj, prop, val) {
|
||||
nextFrame(function () {
|
||||
obj[prop] = val;
|
||||
});
|
||||
}
|
||||
|
||||
function getTextNodeRect(textNode) {
|
||||
var rect;
|
||||
if (document.createRange) {
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(textNode);
|
||||
if (range.getBoundingClientRect) {
|
||||
rect = range.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
return rect;
|
||||
}
|
||||
|
||||
function calcTransformOrigin(isTextNode, textRect, boundingRect) {
|
||||
if (isTextNode) {
|
||||
if (textRect) {
|
||||
//calculate pixels to center of text from left edge of bounding box
|
||||
var relativeCenterX = textRect.left + textRect.width / 2 - boundingRect.left;
|
||||
var relativeCenterY = textRect.top + textRect.height / 2 - boundingRect.top;
|
||||
return relativeCenterX + 'px ' + relativeCenterY + 'px';
|
||||
}
|
||||
}
|
||||
return '0 0'; //top left
|
||||
}
|
||||
|
||||
function getTextDx(oldTextRect, newTextRect) {
|
||||
if (oldTextRect && newTextRect) {
|
||||
return oldTextRect.left + oldTextRect.width / 2 - (newTextRect.left + newTextRect.width / 2);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
function getTextDy(oldTextRect, newTextRect) {
|
||||
if (oldTextRect && newTextRect) {
|
||||
return oldTextRect.top + oldTextRect.height / 2 - (newTextRect.top + newTextRect.height / 2);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function isTextElement(elm) {
|
||||
return elm.childNodes.length === 1 && elm.childNodes[0].nodeType === 3;
|
||||
}
|
||||
|
||||
var removed, created;
|
||||
|
||||
function pre(oldVnode, vnode) {
|
||||
removed = {};
|
||||
created = [];
|
||||
}
|
||||
|
||||
function create(oldVnode, vnode) {
|
||||
var hero = vnode.data.hero;
|
||||
if (hero && hero.id) {
|
||||
created.push(hero.id);
|
||||
created.push(vnode);
|
||||
}
|
||||
}
|
||||
|
||||
function destroy(vnode) {
|
||||
var hero = vnode.data.hero;
|
||||
if (hero && hero.id) {
|
||||
var elm = vnode.elm;
|
||||
vnode.isTextNode = isTextElement(elm); //is this a text node?
|
||||
vnode.boundingRect = elm.getBoundingClientRect(); //save the bounding rectangle to a new property on the vnode
|
||||
vnode.textRect = vnode.isTextNode ? getTextNodeRect(elm.childNodes[0]) : null; //save bounding rect of inner text node
|
||||
var computedStyle = window.getComputedStyle(elm, null); //get current styles (includes inherited properties)
|
||||
vnode.savedStyle = JSON.parse(JSON.stringify(computedStyle)); //save a copy of computed style values
|
||||
removed[hero.id] = vnode;
|
||||
}
|
||||
}
|
||||
|
||||
function post() {
|
||||
var i, id, newElm, oldVnode, oldElm, hRatio, wRatio, oldRect, newRect, dx, dy, origTransform, origTransition, newStyle, oldStyle, newComputedStyle, isTextNode, newTextRect, oldTextRect;
|
||||
for (i = 0; i < created.length; i += 2) {
|
||||
id = created[i];
|
||||
newElm = created[i + 1].elm;
|
||||
oldVnode = removed[id];
|
||||
if (oldVnode) {
|
||||
isTextNode = oldVnode.isTextNode && isTextElement(newElm); //Are old & new both text?
|
||||
newStyle = newElm.style;
|
||||
newComputedStyle = window.getComputedStyle(newElm, null); //get full computed style for new element
|
||||
oldElm = oldVnode.elm;
|
||||
oldStyle = oldElm.style;
|
||||
//Overall element bounding boxes
|
||||
newRect = newElm.getBoundingClientRect();
|
||||
oldRect = oldVnode.boundingRect; //previously saved bounding rect
|
||||
//Text node bounding boxes & distances
|
||||
if (isTextNode) {
|
||||
newTextRect = getTextNodeRect(newElm.childNodes[0]);
|
||||
oldTextRect = oldVnode.textRect;
|
||||
dx = getTextDx(oldTextRect, newTextRect);
|
||||
dy = getTextDy(oldTextRect, newTextRect);
|
||||
} else {
|
||||
//Calculate distances between old & new positions
|
||||
dx = oldRect.left - newRect.left;
|
||||
dy = oldRect.top - newRect.top;
|
||||
}
|
||||
hRatio = newRect.height / Math.max(oldRect.height, 1);
|
||||
wRatio = isTextNode ? hRatio : newRect.width / Math.max(oldRect.width, 1); //text scales based on hRatio
|
||||
// Animate new element
|
||||
origTransform = newStyle.transform;
|
||||
origTransition = newStyle.transition;
|
||||
if (newComputedStyle.display === 'inline') //inline elements cannot be transformed
|
||||
newStyle.display = 'inline-block'; //this does not appear to have any negative side effects
|
||||
newStyle.transition = origTransition + 'transform 0s';
|
||||
newStyle.transformOrigin = calcTransformOrigin(isTextNode, newTextRect, newRect);
|
||||
newStyle.opacity = '0';
|
||||
newStyle.transform = origTransform + 'translate(' + dx + 'px, ' + dy + 'px) ' + 'scale(' + 1 / wRatio + ', ' + 1 / hRatio + ')';
|
||||
setNextFrame(newStyle, 'transition', origTransition);
|
||||
setNextFrame(newStyle, 'transform', origTransform);
|
||||
setNextFrame(newStyle, 'opacity', '1');
|
||||
// Animate old element
|
||||
for (var key in oldVnode.savedStyle) {
|
||||
//re-apply saved inherited properties
|
||||
if (parseInt(key) != key) {
|
||||
var ms = key.substring(0, 2) === 'ms';
|
||||
var moz = key.substring(0, 3) === 'moz';
|
||||
var webkit = key.substring(0, 6) === 'webkit';
|
||||
if (!ms && !moz && !webkit) //ignore prefixed style properties
|
||||
oldStyle[key] = oldVnode.savedStyle[key];
|
||||
}
|
||||
}
|
||||
oldStyle.position = 'absolute';
|
||||
oldStyle.top = oldRect.top + 'px'; //start at existing position
|
||||
oldStyle.left = oldRect.left + 'px';
|
||||
oldStyle.width = oldRect.width + 'px'; //Needed for elements who were sized relative to their parents
|
||||
oldStyle.height = oldRect.height + 'px'; //Needed for elements who were sized relative to their parents
|
||||
oldStyle.margin = 0; //Margin on hero element leads to incorrect positioning
|
||||
oldStyle.transformOrigin = calcTransformOrigin(isTextNode, oldTextRect, oldRect);
|
||||
oldStyle.transform = '';
|
||||
oldStyle.opacity = '1';
|
||||
document.body.appendChild(oldElm);
|
||||
setNextFrame(oldStyle, 'transform', 'translate(' + -dx + 'px, ' + -dy + 'px) scale(' + wRatio + ', ' + hRatio + ')'); //scale must be on far right for translate to be correct
|
||||
setNextFrame(oldStyle, 'opacity', '0');
|
||||
oldElm.addEventListener('transitionend', function (ev) {
|
||||
if (ev.propertyName === 'transform') document.body.removeChild(ev.target);
|
||||
});
|
||||
}
|
||||
}
|
||||
removed = created = undefined;
|
||||
}
|
||||
|
||||
module.exports = { pre: pre, create: create, destroy: destroy, post: post };
|
||||
|
||||
},{}],7:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var raf = requestAnimationFrame || setTimeout;
|
||||
var nextFrame = function nextFrame(fn) {
|
||||
raf(function () {
|
||||
raf(fn);
|
||||
});
|
||||
};
|
||||
|
||||
function setNextFrame(obj, prop, val) {
|
||||
nextFrame(function () {
|
||||
obj[prop] = val;
|
||||
});
|
||||
}
|
||||
|
||||
function updateStyle(oldVnode, vnode) {
|
||||
var cur,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
oldStyle = oldVnode.data.style || {},
|
||||
style = vnode.data.style || {},
|
||||
oldHasDel = ('delayed' in oldStyle);
|
||||
for (name in style) {
|
||||
cur = style[name];
|
||||
if (name === 'delayed') {
|
||||
for (name in style.delayed) {
|
||||
cur = style.delayed[name];
|
||||
if (!oldHasDel || cur !== oldStyle.delayed[name]) {
|
||||
setNextFrame(elm.style, name, cur);
|
||||
}
|
||||
}
|
||||
} else if (name !== 'remove' && cur !== oldStyle[name]) {
|
||||
elm.style[name] = cur;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyDestroyStyle(vnode) {
|
||||
var style,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
s = vnode.data.style;
|
||||
if (!s || !(style = s.destroy)) return;
|
||||
for (name in style) {
|
||||
elm.style[name] = style[name];
|
||||
}
|
||||
}
|
||||
|
||||
function applyRemoveStyle(vnode, rm) {
|
||||
var s = vnode.data.style;
|
||||
if (!s || !s.remove) {
|
||||
rm();
|
||||
return;
|
||||
}
|
||||
var name,
|
||||
elm = vnode.elm,
|
||||
idx,
|
||||
i = 0,
|
||||
maxDur = 0,
|
||||
compStyle,
|
||||
style = s.remove,
|
||||
amount = 0,
|
||||
applied = [];
|
||||
for (name in style) {
|
||||
applied.push(name);
|
||||
elm.style[name] = style[name];
|
||||
}
|
||||
compStyle = getComputedStyle(elm);
|
||||
var props = compStyle['transition-property'].split(', ');
|
||||
for (; i < props.length; ++i) {
|
||||
if (applied.indexOf(props[i]) !== -1) amount++;
|
||||
}
|
||||
elm.addEventListener('transitionend', function (ev) {
|
||||
if (ev.target === elm) --amount;
|
||||
if (amount === 0) rm();
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = { create: updateStyle, update: updateStyle, destroy: applyDestroyStyle, remove: applyRemoveStyle };
|
||||
|
||||
},{}],8:[function(require,module,exports){
|
||||
// jshint newcap: false
|
||||
/* global require, module, document, Element */
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
function isUndef(s) {
|
||||
return s === undefined;
|
||||
}
|
||||
function isDef(s) {
|
||||
return s !== undefined;
|
||||
}
|
||||
|
||||
function emptyNodeAt(elm) {
|
||||
return VNode(elm.tagName, {}, [], undefined, elm);
|
||||
}
|
||||
|
||||
var emptyNode = VNode('', {}, [], undefined, undefined);
|
||||
|
||||
function sameVnode(vnode1, vnode2) {
|
||||
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
|
||||
}
|
||||
|
||||
function createKeyToOldIdx(children, beginIdx, endIdx) {
|
||||
var i,
|
||||
map = {},
|
||||
key;
|
||||
for (i = beginIdx; i <= endIdx; ++i) {
|
||||
key = children[i].key;
|
||||
if (isDef(key)) map[key] = i;
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
function createRmCb(childElm, listeners) {
|
||||
return function () {
|
||||
if (--listeners === 0) childElm.parentElement.removeChild(childElm);
|
||||
};
|
||||
}
|
||||
|
||||
var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
|
||||
|
||||
function init(modules) {
|
||||
var i,
|
||||
j,
|
||||
cbs = {};
|
||||
for (i = 0; i < hooks.length; ++i) {
|
||||
cbs[hooks[i]] = [];
|
||||
for (j = 0; j < modules.length; ++j) {
|
||||
if (modules[j][hooks[i]] !== undefined) cbs[hooks[i]].push(modules[j][hooks[i]]);
|
||||
}
|
||||
}
|
||||
|
||||
function createElm(vnode, insertedVnodeQueue) {
|
||||
var i,
|
||||
data = vnode.data;
|
||||
if (isDef(data)) {
|
||||
if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode);
|
||||
if (isDef(i = data.vnode)) vnode = i;
|
||||
}
|
||||
var elm,
|
||||
children = vnode.children,
|
||||
sel = vnode.sel;
|
||||
if (isDef(sel)) {
|
||||
// Parse selector
|
||||
var hashIdx = sel.indexOf('#');
|
||||
var dotIdx = sel.indexOf('.', hashIdx);
|
||||
var hash = hashIdx > 0 ? hashIdx : sel.length;
|
||||
var dot = dotIdx > 0 ? dotIdx : sel.length;
|
||||
var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
|
||||
elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? document.createElementNS(i, tag) : document.createElement(tag);
|
||||
if (hash < dot) elm.id = sel.slice(hash + 1, dot);
|
||||
if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' ');
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
elm.appendChild(createElm(children[i], insertedVnodeQueue));
|
||||
}
|
||||
} else if (is.primitive(vnode.text)) {
|
||||
elm.appendChild(document.createTextNode(vnode.text));
|
||||
}
|
||||
for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
|
||||
i = vnode.data.hook; // Reuse variable
|
||||
if (isDef(i)) {
|
||||
if (i.create) i.create(emptyNode, vnode);
|
||||
if (i.insert) insertedVnodeQueue.push(vnode);
|
||||
}
|
||||
} else {
|
||||
elm = vnode.elm = document.createTextNode(vnode.text);
|
||||
}
|
||||
return vnode.elm;
|
||||
}
|
||||
|
||||
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
parentElm.insertBefore(createElm(vnodes[startIdx], insertedVnodeQueue), before);
|
||||
}
|
||||
}
|
||||
|
||||
function invokeDestroyHook(vnode) {
|
||||
var i = vnode.data,
|
||||
j;
|
||||
if (isDef(i)) {
|
||||
if (isDef(i = i.hook) && isDef(i = i.destroy)) i(vnode);
|
||||
for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
|
||||
if (isDef(i = vnode.children)) {
|
||||
for (j = 0; j < vnode.children.length; ++j) {
|
||||
invokeDestroyHook(vnode.children[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
var i,
|
||||
listeners,
|
||||
rm,
|
||||
ch = vnodes[startIdx];
|
||||
if (isDef(ch)) {
|
||||
if (isDef(ch.sel)) {
|
||||
invokeDestroyHook(ch);
|
||||
listeners = cbs.remove.length + 1;
|
||||
rm = createRmCb(ch.elm, listeners);
|
||||
for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
|
||||
if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {
|
||||
i(ch, rm);
|
||||
} else {
|
||||
rm();
|
||||
}
|
||||
} else {
|
||||
// Text node
|
||||
parentElm.removeChild(ch.elm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
|
||||
var oldStartIdx = 0,
|
||||
newStartIdx = 0;
|
||||
var oldEndIdx = oldCh.length - 1;
|
||||
var oldStartVnode = oldCh[0];
|
||||
var oldEndVnode = oldCh[oldEndIdx];
|
||||
var newEndIdx = newCh.length - 1;
|
||||
var newStartVnode = newCh[0];
|
||||
var newEndVnode = newCh[newEndIdx];
|
||||
var oldKeyToIdx, idxInOld, elmToMove, before;
|
||||
|
||||
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
||||
if (isUndef(oldStartVnode)) {
|
||||
oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left
|
||||
} else if (isUndef(oldEndVnode)) {
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newStartVnode)) {
|
||||
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else if (sameVnode(oldEndVnode, newEndVnode)) {
|
||||
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newEndVnode)) {
|
||||
// Vnode moved right
|
||||
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
|
||||
parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldEndVnode, newStartVnode)) {
|
||||
// Vnode moved left
|
||||
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
|
||||
parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
|
||||
idxInOld = oldKeyToIdx[newStartVnode.key];
|
||||
if (isUndef(idxInOld)) {
|
||||
// New element
|
||||
parentElm.insertBefore(createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
elmToMove = oldCh[idxInOld];
|
||||
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
|
||||
oldCh[idxInOld] = undefined;
|
||||
parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (oldStartIdx > oldEndIdx) {
|
||||
before = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
|
||||
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
|
||||
} else if (newStartIdx > newEndIdx) {
|
||||
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
|
||||
}
|
||||
}
|
||||
|
||||
function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
|
||||
var i, hook;
|
||||
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
if (isDef(i = oldVnode.data) && isDef(i = i.vnode)) oldVnode = i;
|
||||
if (isDef(i = vnode.data) && isDef(i = i.vnode)) vnode = i;
|
||||
var elm = vnode.elm = oldVnode.elm,
|
||||
oldCh = oldVnode.children,
|
||||
ch = vnode.children;
|
||||
if (oldVnode === vnode) return;
|
||||
if (isDef(vnode.data)) {
|
||||
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
|
||||
i = vnode.data.hook;
|
||||
if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
|
||||
}
|
||||
if (isUndef(vnode.text)) {
|
||||
if (isDef(oldCh) && isDef(ch)) {
|
||||
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
|
||||
} else if (isDef(ch)) {
|
||||
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
|
||||
} else if (isDef(oldCh)) {
|
||||
removeVnodes(elm, oldCh, 0, oldCh.length - 1);
|
||||
}
|
||||
} else if (oldVnode.text !== vnode.text) {
|
||||
elm.textContent = vnode.text;
|
||||
}
|
||||
if (isDef(hook) && isDef(i = hook.postpatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
}
|
||||
|
||||
return function (oldVnode, vnode) {
|
||||
var i;
|
||||
var insertedVnodeQueue = [];
|
||||
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
|
||||
if (oldVnode instanceof Element) {
|
||||
if (oldVnode.parentElement !== null) {
|
||||
createElm(vnode, insertedVnodeQueue);
|
||||
oldVnode.parentElement.replaceChild(vnode.elm, oldVnode);
|
||||
} else {
|
||||
oldVnode = emptyNodeAt(oldVnode);
|
||||
patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
||||
}
|
||||
} else {
|
||||
patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
||||
}
|
||||
for (i = 0; i < insertedVnodeQueue.length; ++i) {
|
||||
insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
|
||||
}
|
||||
for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
|
||||
return vnode;
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = { init: init };
|
||||
|
||||
},{"./is":3,"./vnode":9}],9:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
module.exports = function (sel, data, children, text, elm) {
|
||||
var key = data === undefined ? undefined : data.key;
|
||||
return { sel: sel, data: data, children: children,
|
||||
text: text, elm: elm, key: key };
|
||||
};
|
||||
|
||||
},{}]},{},[1]);
|
||||
@@ -1,166 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>Hero animation</title>
|
||||
<script type="text/javascript" src="build.js"></script>
|
||||
<style>
|
||||
{
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.page-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
@media (min-width: 28em),
|
||||
@media (min-height: 38em) {
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #aaaaaa;
|
||||
position: relative;
|
||||
}
|
||||
.page-container {
|
||||
box-shadow: 0 0 1em rgba(0, 0, 0, .5);
|
||||
width: 28em;
|
||||
min-height: 38em;
|
||||
height: 38em;
|
||||
}
|
||||
}
|
||||
.page {
|
||||
background: #fff;
|
||||
transition: opacity 0.4s ease-in-out,
|
||||
transform 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
margin: .2em 0;
|
||||
}
|
||||
.header {
|
||||
height: 3.5em;
|
||||
background: #1293ea;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header-content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: .4em .8em;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
transition: opacity 0.4s ease-in-out,
|
||||
transform 0.4s ease-in-out;
|
||||
}
|
||||
.header h1 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
.header-title {
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.8em;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.header .rank {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.7em;
|
||||
height: 2.7em;
|
||||
margin-right: .5em;
|
||||
position: relative;
|
||||
}
|
||||
.header .rank-circle {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
width: 2.7em;
|
||||
height: 2.7em;
|
||||
border-radius: 1.35em;
|
||||
margin-right: .5em;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.header-rank {
|
||||
z-index: 2;
|
||||
color: #1293ea;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.header .close {
|
||||
line-height: 1.8em;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
border-radius: .9em;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
.hero {
|
||||
transition: transform 0.4s ease-in-out,
|
||||
opacity 0.4s ease-in-out;
|
||||
}
|
||||
.page-content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: calc(100% - 3.5em);
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transition: transform 0.4s ease-in-out,
|
||||
opacity 0.4s ease-in-out;
|
||||
}
|
||||
.desc {
|
||||
position: absolute;
|
||||
transition: transform 0.4s ease-in-out,
|
||||
opacity 0.4s ease-in-out;
|
||||
padding: 1em;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.row {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
}
|
||||
.row:not(:first-child) {
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
.row div {
|
||||
display: inline-block;
|
||||
}
|
||||
.row > div:nth-child(1) {
|
||||
text-align: center;
|
||||
margin-right: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,120 +0,0 @@
|
||||
/* jshint esnext: true */
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([
|
||||
require('../../modules/class').default,
|
||||
require('../../modules/hero').default,
|
||||
require('../../modules/style').default,
|
||||
require('../../modules/eventlisteners').default,
|
||||
]);
|
||||
var h = require('../../h.js').default;
|
||||
|
||||
var vnode;
|
||||
|
||||
var data = {
|
||||
selected: undefined,
|
||||
movies: [
|
||||
{rank: 1, title: 'This is an', desc: 'Lorem ipsum dolor sit amet, sed pede integer vitae bibendum, accumsan sit, vulputate aenean tempora ipsum. Lorem sed id et metus, eros posuere suspendisse nec nunc justo, fusce augue placerat nibh purus suspendisse. Aliquam aliquam, ut eget. Mollis a eget sed nibh tincidunt nec, mi integer, proin magna lacus iaculis tortor. Aliquam vel arcu arcu, vivamus a urna fames felis vel wisi, cursus tortor nec erat dignissim cras sem, mauris ac venenatis tellus elit.'},
|
||||
{rank: 2, title: 'example of', desc: 'Consequuntur ipsum nulla, consequat curabitur in magnis risus. Taciti mattis bibendum tellus nibh, at dui neque eget, odio pede ut, sapien pede, ipsum ut. Sagittis dui, sodales sem, praesent ipsum conubia eget lorem lobortis wisi.'},
|
||||
{rank: 3, title: 'Snabbdom', desc: 'Quam lorem aliquam fusce wisi, urna purus ipsum pharetra sed, at cras sodales enim vestibulum odio cras, luctus integer phasellus.'},
|
||||
{rank: 4, title: 'doing hero transitions', desc: 'Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus.'},
|
||||
{rank: 5, title: 'using the', desc: 'Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus.'},
|
||||
{rank: 6, title: 'module for hero transitions', desc: 'Sapien laoreet, ligula elit tortor nulla pellentesque, maecenas enim turpis, quae duis venenatis vivamus ultricies, nunc imperdiet sollicitudin ipsum malesuada. Ut sem. Wisi fusce nullam nibh enim. Nisl hymenaeos id sed sed in. Proin leo et, pulvinar nunc pede laoreet.'},
|
||||
{rank: 7, title: 'click on ar element in', desc: 'Accumsan quia, id nascetur dui et congue erat, id excepteur, primis ratione nec. At nulla et. Suspendisse lobortis, lobortis in tortor fringilla, duis adipiscing vestibulum voluptates sociosqu auctor.'},
|
||||
{rank: 8, title: 'the list', desc: 'Ante tellus egestas vel hymenaeos, ut viverra nibh ut, ipsum nibh donec donec dolor. Eros ridiculus vel egestas convallis ipsum, commodo ut venenatis nullam porta iaculis, suspendisse ante proin leo, felis risus etiam.'},
|
||||
{rank: 9, title: 'to witness', desc: 'Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst.'},
|
||||
{rank: 10, title: 'the effect', desc: 'Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris'},
|
||||
]
|
||||
};
|
||||
|
||||
function select(m) {
|
||||
data.selected = m;
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
vnode = patch(vnode, view(data));
|
||||
}
|
||||
|
||||
const fadeInOutStyle = {
|
||||
opacity: '0', delayed: {opacity: '1'}, remove: {opacity: '0'}
|
||||
};
|
||||
|
||||
const detailView = (movie) =>
|
||||
h('div.page', {style: fadeInOutStyle}, [
|
||||
h('div.header', [
|
||||
h('div.header-content.detail', {
|
||||
style: {opacity: '1', remove: {opacity: '0'}},
|
||||
}, [
|
||||
h('div.rank', [
|
||||
h('span.header-rank.hero', {hero: {id: 'rank'+movie.rank}}, movie.rank),
|
||||
h('div.rank-circle', {
|
||||
style: {transform: 'scale(0)',
|
||||
delayed: {transform: 'scale(1)'},
|
||||
destroy: {transform: 'scale(0)'}},
|
||||
}),
|
||||
]),
|
||||
h('div.hero.header-title', {hero: {id: movie.title}}, movie.title),
|
||||
h('div.spacer'),
|
||||
h('div.close', {
|
||||
on: {click: [select, undefined]},
|
||||
style: {transform: 'scale(0)',
|
||||
delayed: {transform: 'scale(1)'},
|
||||
destroy: {transform: 'scale(0)'}},
|
||||
}, 'x'),
|
||||
]),
|
||||
]),
|
||||
h('div.page-content', [
|
||||
h('div.desc', {
|
||||
style: {opacity: '0', transform: 'translateX(3em)',
|
||||
delayed: {opacity: '1', transform: 'translate(0)'},
|
||||
remove: {opacity: '0', position: 'absolute', top: '0', left: '0',
|
||||
transform: 'translateX(3em)'}
|
||||
}
|
||||
}, [
|
||||
h('h2', 'Description:'),
|
||||
h('span', movie.desc),
|
||||
]),
|
||||
]),
|
||||
]);
|
||||
|
||||
const overviewView = (movies) =>
|
||||
h('div.page', {style: fadeInOutStyle}, [
|
||||
h('div.header', [
|
||||
h('div.header-content.overview', {
|
||||
style: fadeInOutStyle,
|
||||
}, [
|
||||
h('div.header-title', {
|
||||
style: {transform: 'translateY(-2em)',
|
||||
delayed: {transform: 'translate(0)'},
|
||||
destroy: {transform: 'translateY(-2em)'}}
|
||||
}, 'Top 10 movies'),
|
||||
h('div.spacer'),
|
||||
]),
|
||||
]),
|
||||
h('div.page-content', [
|
||||
h('div.list', {
|
||||
style: {opacity: '0', delayed: {opacity: '1'},
|
||||
remove: {opacity: '0', position: 'absolute', top: '0', left: '0'}}
|
||||
}, movies.map((movie) =>
|
||||
h('div.row', {
|
||||
on: {click: [select, movie]},
|
||||
}, [
|
||||
h('div.hero.rank', [
|
||||
h('span.hero', {hero: {id: 'rank'+movie.rank}}, movie.rank)
|
||||
]),
|
||||
h('div.hero', {hero: {id: movie.title}}, movie.title)
|
||||
])
|
||||
)),
|
||||
]),
|
||||
]);
|
||||
|
||||
const view = (data) =>
|
||||
h('div.page-container', [
|
||||
data.selected ? detailView(data.selected) : overviewView(data.movies),
|
||||
]);
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
var container = document.getElementById('container');
|
||||
vnode = patch(container, view(data));
|
||||
render();
|
||||
});
|
||||
@@ -1,523 +0,0 @@
|
||||
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([require('../../modules/class'), require('../../modules/props'), require('../../modules/style'), require('../../modules/eventlisteners')]);
|
||||
var h = require('../../h.js');
|
||||
|
||||
var vnode;
|
||||
|
||||
var nextKey = 11;
|
||||
var margin = 8;
|
||||
var sortBy = 'rank';
|
||||
var totalHeight = 0;
|
||||
var originalData = [{ rank: 1, title: 'The Shawshank Redemption', desc: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.', elmHeight: 0 }, { rank: 2, title: 'The Godfather', desc: 'The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.', elmHeight: 0 }, { rank: 3, title: 'The Godfather: Part II', desc: 'The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.', elmHeight: 0 }, { rank: 4, title: 'The Dark Knight', desc: 'When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.', elmHeight: 0 }, { rank: 5, title: 'Pulp Fiction', desc: 'The lives of two mob hit men, a boxer, a gangster\'s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.', elmHeight: 0 }, { rank: 6, title: 'Schindler\'s List', desc: 'In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.', elmHeight: 0 }, { rank: 7, title: '12 Angry Men', desc: 'A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.', elmHeight: 0 }, { rank: 8, title: 'The Good, the Bad and the Ugly', desc: 'A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.', elmHeight: 0 }, { rank: 9, title: 'The Lord of the Rings: The Return of the King', desc: 'Gandalf and Aragorn lead the World of Men against Sauron\'s army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.', elmHeight: 0 }, { rank: 10, title: 'Fight Club', desc: 'An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...', elmHeight: 0 }];
|
||||
var data = [originalData[0], originalData[1], originalData[2], originalData[3], originalData[4], originalData[5], originalData[6], originalData[7], originalData[8], originalData[9]];
|
||||
|
||||
function changeSort(prop) {
|
||||
sortBy = prop;
|
||||
data.sort(function (a, b) {
|
||||
if (a[prop] > b[prop]) {
|
||||
return 1;
|
||||
}
|
||||
if (a[prop] < b[prop]) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
render();
|
||||
}
|
||||
|
||||
function add() {
|
||||
var n = originalData[Math.floor(Math.random() * 10)];
|
||||
data = [{ rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data);
|
||||
render();
|
||||
render();
|
||||
}
|
||||
|
||||
function remove(movie) {
|
||||
data = data.filter(function (m) {
|
||||
return m !== movie;
|
||||
});
|
||||
render();
|
||||
}
|
||||
|
||||
function movieView(movie) {
|
||||
return h('div.row', {
|
||||
key: movie.rank,
|
||||
style: { opacity: '0', transform: 'translate(-200px)',
|
||||
delayed: { transform: 'translateY(' + movie.offset + 'px)', opacity: '1' },
|
||||
remove: { opacity: '0', transform: 'translateY(' + movie.offset + 'px) translateX(200px)' } },
|
||||
hook: { insert: function insert(vnode) {
|
||||
movie.elmHeight = vnode.elm.offsetHeight;
|
||||
} } }, [h('div', { style: { fontWeight: 'bold' } }, movie.rank), h('div', movie.title), h('div', movie.desc), h('div.btn.rm-btn', { on: { click: [remove, movie] } }, 'x')]);
|
||||
}
|
||||
|
||||
function render() {
|
||||
data = data.reduce(function (acc, m) {
|
||||
var last = acc[acc.length - 1];
|
||||
m.offset = last ? last.offset + last.elmHeight + margin : margin;
|
||||
return acc.concat(m);
|
||||
}, []);
|
||||
totalHeight = data[data.length - 1].offset + data[data.length - 1].elmHeight;
|
||||
vnode = patch(vnode, view(data));
|
||||
}
|
||||
|
||||
function view(data) {
|
||||
return h('div', [h('h1', 'Top 10 movies'), h('div', [h('a.btn.add', { on: { click: add } }, 'Add'), 'Sort by: ', h('span.btn-group', [h('a.btn.rank', { 'class': { active: sortBy === 'rank' }, on: { click: [changeSort, 'rank'] } }, 'Rank'), h('a.btn.title', { 'class': { active: sortBy === 'title' }, on: { click: [changeSort, 'title'] } }, 'Title'), h('a.btn.desc', { 'class': { active: sortBy === 'desc' }, on: { click: [changeSort, 'desc'] } }, 'Description')])]), h('div.list', { style: { height: totalHeight + 'px' } }, data.map(movieView))]);
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var container = document.getElementById('container');
|
||||
vnode = patch(container, view(data));
|
||||
render();
|
||||
});
|
||||
|
||||
},{"../../h.js":2,"../../modules/class":4,"../../modules/eventlisteners":5,"../../modules/props":6,"../../modules/style":7,"../../snabbdom.js":8}],2:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
module.exports = function h(sel, b, c) {
|
||||
var data = {},
|
||||
children,
|
||||
text,
|
||||
i;
|
||||
if (arguments.length === 3) {
|
||||
data = b;
|
||||
if (is.array(c)) {
|
||||
children = c;
|
||||
} else if (is.primitive(c)) {
|
||||
text = c;
|
||||
}
|
||||
} else if (arguments.length === 2) {
|
||||
if (is.array(b)) {
|
||||
children = b;
|
||||
} else if (is.primitive(b)) {
|
||||
text = b;
|
||||
} else {
|
||||
data = b;
|
||||
}
|
||||
}
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
if (is.primitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
|
||||
}
|
||||
}
|
||||
return VNode(sel, data, children, text, undefined);
|
||||
};
|
||||
|
||||
},{"./is":3,"./vnode":9}],3:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
array: Array.isArray,
|
||||
primitive: function primitive(s) {
|
||||
return typeof s === 'string' || typeof s === 'number';
|
||||
} };
|
||||
|
||||
},{}],4:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
function updateClass(oldVnode, vnode) {
|
||||
var cur,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
oldClass = oldVnode.data['class'] || {},
|
||||
klass = vnode.data['class'] || {};
|
||||
for (name in klass) {
|
||||
cur = klass[name];
|
||||
if (cur !== oldClass[name]) {
|
||||
elm.classList[cur ? 'add' : 'remove'](name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateClass, update: updateClass };
|
||||
|
||||
},{}],5:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var is = require('../is');
|
||||
|
||||
function arrInvoker(arr) {
|
||||
return function () {
|
||||
arr[0](arr[1]);
|
||||
};
|
||||
}
|
||||
|
||||
function updateEventListeners(oldVnode, vnode) {
|
||||
var name,
|
||||
cur,
|
||||
old,
|
||||
elm = vnode.elm,
|
||||
oldOn = oldVnode.data.on || {},
|
||||
on = vnode.data.on;
|
||||
if (!on) return;
|
||||
for (name in on) {
|
||||
cur = on[name];
|
||||
old = oldOn[name];
|
||||
if (old === undefined) {
|
||||
elm.addEventListener(name, is.array(cur) ? arrInvoker(cur) : cur);
|
||||
} else if (is.array(old)) {
|
||||
old[0] = cur[0]; // Deliberately modify old array since it's
|
||||
old[1] = cur[1]; // captured in closure created with `arrInvoker`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateEventListeners, update: updateEventListeners };
|
||||
|
||||
},{"../is":3}],6:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
function updateProps(oldVnode, vnode) {
|
||||
var key,
|
||||
cur,
|
||||
old,
|
||||
elm = vnode.elm,
|
||||
oldProps = oldVnode.data.props || {},
|
||||
props = vnode.data.props || {};
|
||||
for (key in props) {
|
||||
cur = props[key];
|
||||
old = oldProps[key];
|
||||
if (old !== cur) {
|
||||
elm[key] = cur;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateProps, update: updateProps };
|
||||
|
||||
},{}],7:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var raf = requestAnimationFrame || setTimeout;
|
||||
var nextFrame = function nextFrame(fn) {
|
||||
raf(function () {
|
||||
raf(fn);
|
||||
});
|
||||
};
|
||||
|
||||
function setNextFrame(obj, prop, val) {
|
||||
nextFrame(function () {
|
||||
obj[prop] = val;
|
||||
});
|
||||
}
|
||||
|
||||
function updateStyle(oldVnode, vnode) {
|
||||
var cur,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
oldStyle = oldVnode.data.style || {},
|
||||
style = vnode.data.style || {},
|
||||
oldHasDel = ('delayed' in oldStyle);
|
||||
for (name in style) {
|
||||
cur = style[name];
|
||||
if (name === 'delayed') {
|
||||
for (name in style.delayed) {
|
||||
cur = style.delayed[name];
|
||||
if (!oldHasDel || cur !== oldStyle.delayed[name]) {
|
||||
setNextFrame(elm.style, name, cur);
|
||||
}
|
||||
}
|
||||
} else if (name !== 'remove' && cur !== oldStyle[name]) {
|
||||
elm.style[name] = cur;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyDestroyStyle(vnode) {
|
||||
var style,
|
||||
name,
|
||||
elm = vnode.elm,
|
||||
s = vnode.data.style;
|
||||
if (!s || !(style = s.destroy)) return;
|
||||
for (name in style) {
|
||||
elm.style[name] = style[name];
|
||||
}
|
||||
}
|
||||
|
||||
function applyRemoveStyle(vnode, rm) {
|
||||
var s = vnode.data.style;
|
||||
if (!s || !s.remove) {
|
||||
rm();
|
||||
return;
|
||||
}
|
||||
var name,
|
||||
elm = vnode.elm,
|
||||
idx,
|
||||
i = 0,
|
||||
maxDur = 0,
|
||||
compStyle,
|
||||
style = s.remove,
|
||||
amount = 0;
|
||||
var applied = [];
|
||||
for (name in style) {
|
||||
applied.push(name);
|
||||
elm.style[name] = style[name];
|
||||
}
|
||||
compStyle = getComputedStyle(elm);
|
||||
var props = compStyle['transition-property'].split(', ');
|
||||
for (; i < props.length; ++i) {
|
||||
if (applied.indexOf(props[i]) !== -1) amount++;
|
||||
}
|
||||
elm.addEventListener('transitionend', function (ev) {
|
||||
if (ev.target === elm) --amount;
|
||||
if (amount === 0) rm();
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = { create: updateStyle, update: updateStyle, destroy: applyDestroyStyle, remove: applyRemoveStyle };
|
||||
|
||||
},{}],8:[function(require,module,exports){
|
||||
// jshint newcap: false
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
function isUndef(s) {
|
||||
return s === undefined;
|
||||
}
|
||||
|
||||
function emptyNodeAt(elm) {
|
||||
return VNode(elm.tagName, {}, [], undefined, elm);
|
||||
}
|
||||
|
||||
var emptyNode = VNode('', {}, [], undefined, undefined);
|
||||
|
||||
var insertedVnodeQueue;
|
||||
|
||||
function sameVnode(vnode1, vnode2) {
|
||||
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
|
||||
}
|
||||
|
||||
function createKeyToOldIdx(children, beginIdx, endIdx) {
|
||||
var i,
|
||||
map = {},
|
||||
key;
|
||||
for (i = beginIdx; i <= endIdx; ++i) {
|
||||
key = children[i].key;
|
||||
if (!isUndef(key)) map[key] = i;
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
function createRmCb(parentElm, childElm, listeners) {
|
||||
return function () {
|
||||
if (--listeners === 0) parentElm.removeChild(childElm);
|
||||
};
|
||||
}
|
||||
|
||||
var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
|
||||
|
||||
function init(modules) {
|
||||
var i,
|
||||
j,
|
||||
cbs = {};
|
||||
for (i = 0; i < hooks.length; ++i) {
|
||||
cbs[hooks[i]] = [];
|
||||
for (j = 0; j < modules.length; ++j) {
|
||||
if (modules[j][hooks[i]] !== undefined) cbs[hooks[i]].push(modules[j][hooks[i]]);
|
||||
}
|
||||
}
|
||||
|
||||
function createElm(vnode) {
|
||||
var i;
|
||||
if (!isUndef(i = vnode.data) && !isUndef(i = i.hook) && !isUndef(i = i.init)) {
|
||||
i(vnode);
|
||||
}
|
||||
if (!isUndef(i = vnode.data) && !isUndef(i = i.vnode)) vnode = i;
|
||||
var elm,
|
||||
children = vnode.children,
|
||||
sel = vnode.sel;
|
||||
if (!isUndef(sel)) {
|
||||
// Parse selector
|
||||
var hashIdx = sel.indexOf('#');
|
||||
var dotIdx = sel.indexOf('.', hashIdx);
|
||||
var hash = hashIdx > 0 ? hashIdx : sel.length;
|
||||
var dot = dotIdx > 0 ? dotIdx : sel.length;
|
||||
var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
|
||||
elm = vnode.elm = document.createElement(tag);
|
||||
if (hash < dot) elm.id = sel.slice(hash + 1, dot);
|
||||
if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' ');
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
elm.appendChild(createElm(children[i]));
|
||||
}
|
||||
} else if (is.primitive(vnode.text)) {
|
||||
elm.appendChild(document.createTextNode(vnode.text));
|
||||
}
|
||||
for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
|
||||
i = vnode.data.hook; // Reuse variable
|
||||
if (!isUndef(i)) {
|
||||
if (i.create) i.create(vnode);
|
||||
if (i.insert) insertedVnodeQueue.push(vnode);
|
||||
}
|
||||
} else {
|
||||
elm = vnode.elm = document.createTextNode(vnode.text);
|
||||
}
|
||||
return elm;
|
||||
}
|
||||
|
||||
function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
|
||||
if (isUndef(before)) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
parentElm.appendChild(createElm(vnodes[startIdx]));
|
||||
}
|
||||
} else {
|
||||
var elm = before.elm;
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
parentElm.insertBefore(createElm(vnodes[startIdx]), elm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function invokeDestroyHook(vnode) {
|
||||
var i = vnode.data.hook,
|
||||
j;
|
||||
if (!isUndef(i) && !isUndef(j = i.destroy)) j(vnode);
|
||||
for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
|
||||
if (!isUndef(vnode.children)) {
|
||||
for (j = 0; j < vnode.children.length; ++j) {
|
||||
invokeDestroyHook(vnode.children[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
var i,
|
||||
listeners,
|
||||
rm,
|
||||
ch = vnodes[startIdx];
|
||||
if (!isUndef(ch)) {
|
||||
listeners = cbs.remove.length + 1;
|
||||
rm = createRmCb(parentElm, ch.elm, listeners);
|
||||
for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
|
||||
invokeDestroyHook(ch);
|
||||
if (ch.data.hook && ch.data.hook.remove) {
|
||||
ch.data.hook.remove(ch, rm);
|
||||
} else {
|
||||
rm();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateChildren(parentElm, oldCh, newCh) {
|
||||
var oldStartIdx = 0,
|
||||
newStartIdx = 0;
|
||||
var oldEndIdx = oldCh.length - 1;
|
||||
var oldStartVnode = oldCh[0];
|
||||
var oldEndVnode = oldCh[oldEndIdx];
|
||||
var newEndIdx = newCh.length - 1;
|
||||
var newStartVnode = newCh[0];
|
||||
var newEndVnode = newCh[newEndIdx];
|
||||
var oldKeyToIdx, idxInOld, elmToMove;
|
||||
|
||||
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
||||
if (isUndef(oldStartVnode)) {
|
||||
oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left
|
||||
} else if (isUndef(oldEndVnode)) {
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newStartVnode)) {
|
||||
patchVnode(oldStartVnode, newStartVnode);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else if (sameVnode(oldEndVnode, newEndVnode)) {
|
||||
patchVnode(oldEndVnode, newEndVnode);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newEndVnode)) {
|
||||
// Vnode moved right
|
||||
patchVnode(oldStartVnode, newEndVnode);
|
||||
parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldEndVnode, newStartVnode)) {
|
||||
// Vnode moved left
|
||||
patchVnode(oldEndVnode, newStartVnode);
|
||||
parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
|
||||
idxInOld = oldKeyToIdx[newStartVnode.key];
|
||||
if (isUndef(idxInOld)) {
|
||||
// New element
|
||||
parentElm.insertBefore(createElm(newStartVnode), oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
elmToMove = oldCh[idxInOld];
|
||||
patchVnode(elmToMove, newStartVnode);
|
||||
oldCh[idxInOld] = undefined;
|
||||
parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (oldStartIdx > oldEndIdx) addVnodes(parentElm, oldStartVnode, newCh, newStartIdx, newEndIdx);else if (newStartIdx > newEndIdx) removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
|
||||
}
|
||||
|
||||
function patchVnode(oldVnode, vnode) {
|
||||
var i;
|
||||
if (!isUndef(i = vnode.data) && !isUndef(i = i.hook) && !isUndef(i = i.patch)) {
|
||||
i = i(oldVnode, vnode);
|
||||
}
|
||||
if (!isUndef(i = oldVnode.data) && !isUndef(i = i.vnode)) oldVnode = i;
|
||||
if (!isUndef(i = vnode.data) && !isUndef(i = i.vnode)) vnode = i;
|
||||
var elm = vnode.elm = oldVnode.elm,
|
||||
oldCh = oldVnode.children,
|
||||
ch = vnode.children;
|
||||
if (oldVnode === vnode) return;
|
||||
if (!isUndef(vnode.data)) {
|
||||
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
|
||||
i = vnode.data.hook;
|
||||
if (!isUndef(i) && !isUndef(i = i.update)) i(vnode);
|
||||
}
|
||||
if (isUndef(vnode.text)) {
|
||||
if (!isUndef(oldCh) && !isUndef(ch)) {
|
||||
if (oldCh !== ch) updateChildren(elm, oldCh, ch);
|
||||
} else if (!isUndef(ch)) {
|
||||
addVnodes(elm, undefined, ch, 0, ch.length - 1);
|
||||
} else if (!isUndef(oldCh)) {
|
||||
removeVnodes(elm, oldCh, 0, oldCh.length - 1);
|
||||
}
|
||||
} else if (oldVnode.text !== vnode.text) {
|
||||
elm.childNodes[0].nodeValue = vnode.text;
|
||||
}
|
||||
return vnode;
|
||||
}
|
||||
|
||||
return function (oldVnode, vnode) {
|
||||
var i;
|
||||
insertedVnodeQueue = [];
|
||||
if (oldVnode instanceof Element) {
|
||||
oldVnode = emptyNodeAt(oldVnode);
|
||||
}
|
||||
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
|
||||
patchVnode(oldVnode, vnode);
|
||||
for (i = 0; i < insertedVnodeQueue.length; ++i) {
|
||||
insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
|
||||
}
|
||||
insertedVnodeQueue = undefined;
|
||||
for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
|
||||
return vnode;
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = { init: init };
|
||||
|
||||
},{"./is":3,"./vnode":9}],9:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
module.exports = function (sel, data, children, text, elm) {
|
||||
var key = data === undefined ? undefined : data.key;
|
||||
return { sel: sel, data: data, children: children,
|
||||
text: text, elm: elm, key: key };
|
||||
};
|
||||
|
||||
},{}]},{},[1]);
|
||||
@@ -1,84 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Reorder animation</title>
|
||||
<script type="text/javascript" src="build.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background: #fafafa;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
|
||||
padding: .5em .8em;
|
||||
transition: box-shadow .05s ease-in-out;
|
||||
-webkit-transition: box-shadow .05s ease-in-out;
|
||||
}
|
||||
.btn:hover {
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.btn:active, .active, .active:hover {
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .2),
|
||||
inset 0 0 4px rgba(0, 0, 0, .1);
|
||||
}
|
||||
.add {
|
||||
float: right;
|
||||
}
|
||||
#container {
|
||||
max-width: 42em;
|
||||
margin: 0 auto 2em auto;
|
||||
}
|
||||
.list {
|
||||
position: relative;
|
||||
}
|
||||
.row {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
margin: .5em 0;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
|
||||
transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
|
||||
-webkit-transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
|
||||
}
|
||||
.row div {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.row > div:nth-child(1) {
|
||||
width: 5%;
|
||||
}
|
||||
.row > div:nth-child(2) {
|
||||
width: 30%;
|
||||
}
|
||||
.row > div:nth-child(3) {
|
||||
width: 65%;
|
||||
}
|
||||
.rm-btn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #C25151;
|
||||
width: 1.4em;
|
||||
height: 1.4em;
|
||||
text-align: center;
|
||||
line-height: 1.4em;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,112 +0,0 @@
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([
|
||||
require('../../modules/class').default,
|
||||
require('../../modules/props').default,
|
||||
require('../../modules/style').default,
|
||||
require('../../modules/eventlisteners').default,
|
||||
]);
|
||||
var h = require('../../h.js').default;
|
||||
|
||||
var vnode;
|
||||
|
||||
var nextKey = 11;
|
||||
var margin = 8;
|
||||
var sortBy = 'rank';
|
||||
var totalHeight = 0;
|
||||
var originalData = [
|
||||
{rank: 1, title: 'The Shawshank Redemption', desc: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.', elmHeight: 0},
|
||||
{rank: 2, title: 'The Godfather', desc: 'The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.', elmHeight: 0},
|
||||
{rank: 3, title: 'The Godfather: Part II', desc: 'The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.', elmHeight: 0},
|
||||
{rank: 4, title: 'The Dark Knight', desc: 'When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.', elmHeight: 0},
|
||||
{rank: 5, title: 'Pulp Fiction', desc: 'The lives of two mob hit men, a boxer, a gangster\'s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.', elmHeight: 0},
|
||||
{rank: 6, title: 'Schindler\'s List', desc: 'In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.', elmHeight: 0},
|
||||
{rank: 7, title: '12 Angry Men', desc: 'A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.', elmHeight: 0},
|
||||
{rank: 8, title: 'The Good, the Bad and the Ugly', desc: 'A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.', elmHeight: 0},
|
||||
{rank: 9, title: 'The Lord of the Rings: The Return of the King', desc: 'Gandalf and Aragorn lead the World of Men against Sauron\'s army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.', elmHeight: 0},
|
||||
{rank: 10, title: 'Fight Club', desc: 'An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...', elmHeight: 0},
|
||||
];
|
||||
var data = [
|
||||
originalData[0],
|
||||
originalData[1],
|
||||
originalData[2],
|
||||
originalData[3],
|
||||
originalData[4],
|
||||
originalData[5],
|
||||
originalData[6],
|
||||
originalData[7],
|
||||
originalData[8],
|
||||
originalData[9],
|
||||
];
|
||||
|
||||
function changeSort(prop) {
|
||||
sortBy = prop;
|
||||
data.sort((a, b) => {
|
||||
if (a[prop] > b[prop]) {
|
||||
return 1;
|
||||
}
|
||||
if (a[prop] < b[prop]) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
render();
|
||||
}
|
||||
|
||||
function add() {
|
||||
var n = originalData[Math.floor(Math.random() * 10)];
|
||||
data = [{rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0}].concat(data);
|
||||
render();
|
||||
render();
|
||||
}
|
||||
|
||||
function remove(movie) {
|
||||
data = data.filter((m) => { return m !== movie; });
|
||||
render();
|
||||
}
|
||||
|
||||
function movieView(movie) {
|
||||
return h('div.row', {
|
||||
key: movie.rank,
|
||||
style: {opacity: '0', transform: 'translate(-200px)',
|
||||
delayed: {transform: `translateY(${movie.offset}px)`, opacity: '1'},
|
||||
remove: {opacity: '0', transform: `translateY(${movie.offset}px) translateX(200px)`}},
|
||||
hook: {insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight; }},
|
||||
}, [
|
||||
h('div', {style: {fontWeight: 'bold'}}, movie.rank),
|
||||
h('div', movie.title),
|
||||
h('div', movie.desc),
|
||||
h('div.btn.rm-btn', {on: {click: [remove, movie]}}, 'x'),
|
||||
]);
|
||||
}
|
||||
|
||||
function render() {
|
||||
data = data.reduce((acc, m) => {
|
||||
var last = acc[acc.length - 1];
|
||||
m.offset = last ? last.offset + last.elmHeight + margin : margin;
|
||||
return acc.concat(m);
|
||||
}, []);
|
||||
totalHeight = data[data.length - 1].offset + data[data.length - 1].elmHeight;
|
||||
vnode = patch(vnode, view(data));
|
||||
}
|
||||
|
||||
function view(data) {
|
||||
return h('div', [
|
||||
h('h1', 'Top 10 movies'),
|
||||
h('div', [
|
||||
h('a.btn.add', {on: {click: add}}, 'Add'),
|
||||
'Sort by: ',
|
||||
h('span.btn-group', [
|
||||
h('a.btn.rank', {class: {active: sortBy === 'rank'}, on: {click: [changeSort, 'rank']}}, 'Rank'),
|
||||
h('a.btn.title', {class: {active: sortBy === 'title'}, on: {click: [changeSort, 'title']}}, 'Title'),
|
||||
h('a.btn.desc', {class: {active: sortBy === 'desc'}, on: {click: [changeSort, 'desc']}}, 'Description'),
|
||||
]),
|
||||
]),
|
||||
h('div.list', {style: {height: totalHeight+'px'}}, data.map(movieView)),
|
||||
]);
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
var container = document.getElementById('container');
|
||||
vnode = patch(container, view(data));
|
||||
render();
|
||||
});
|
||||
@@ -1,376 +0,0 @@
|
||||
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([require('../../modules/attributes')]);
|
||||
var h = require('../../h.js');
|
||||
|
||||
var vnode;
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var container = document.getElementById('container');
|
||||
var vnode = h('div', [h('svg', { attrs: { width: 100, height: 100 } }, [h('circle', { attrs: { cx: 50, cy: 50, r: 40, stroke: 'green', 'stroke-width': 4, fill: 'yellow' } })])]);
|
||||
vnode = patch(container, vnode);
|
||||
});
|
||||
|
||||
},{"../../h.js":2,"../../modules/attributes":4,"../../snabbdom.js":5}],2:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
function addNS(data, children) {
|
||||
data.ns = 'http://www.w3.org/2000/svg';
|
||||
if (children !== undefined) {
|
||||
for (var i = 0; i < children.length; ++i) {
|
||||
addNS(children[i].data, children[i].children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function h(sel, b, c) {
|
||||
var data = {},
|
||||
children,
|
||||
text,
|
||||
i;
|
||||
if (arguments.length === 3) {
|
||||
data = b;
|
||||
if (is.array(c)) {
|
||||
children = c;
|
||||
} else if (is.primitive(c)) {
|
||||
text = c;
|
||||
}
|
||||
} else if (arguments.length === 2) {
|
||||
if (is.array(b)) {
|
||||
children = b;
|
||||
} else if (is.primitive(b)) {
|
||||
text = b;
|
||||
} else {
|
||||
data = b;
|
||||
}
|
||||
}
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
if (is.primitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
|
||||
}
|
||||
}
|
||||
if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g') {
|
||||
addNS(data, children);
|
||||
}
|
||||
return VNode(sel, data, children, text, undefined);
|
||||
};
|
||||
|
||||
},{"./is":3,"./vnode":6}],3:[function(require,module,exports){
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
array: Array.isArray,
|
||||
primitive: function primitive(s) {
|
||||
return typeof s === 'string' || typeof s === 'number';
|
||||
} };
|
||||
|
||||
},{}],4:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
var booleanAttrs = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "compact", "controls", "declare", "default", "defaultchecked", "defaultmuted", "defaultselected", "defer", "disabled", "draggable", "enabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "itemscope", "loop", "multiple", "muted", "nohref", "noresize", "noshade", "novalidate", "nowrap", "open", "pauseonexit", "readonly", "required", "reversed", "scoped", "seamless", "selected", "sortable", "spellcheck", "translate", "truespeed", "typemustmatch", "visible"];
|
||||
|
||||
var booleanAttrsDict = {};
|
||||
for (var i = 0, len = booleanAttrs.length; i < len; i++) {
|
||||
booleanAttrsDict[booleanAttrs[i]] = true;
|
||||
}
|
||||
|
||||
function updateAttrs(oldVnode, vnode) {
|
||||
var key,
|
||||
cur,
|
||||
old,
|
||||
elm = vnode.elm,
|
||||
oldAttrs = oldVnode.data.attrs || {},
|
||||
attrs = vnode.data.attrs || {};
|
||||
|
||||
// update modified attributes, add new attributes
|
||||
for (key in attrs) {
|
||||
cur = attrs[key];
|
||||
old = oldAttrs[key];
|
||||
if (old !== cur) {
|
||||
// TODO: add support to namespaced attributes (setAttributeNS)
|
||||
if (!cur && booleanAttrsDict[key]) elm.removeAttribute(key);else elm.setAttribute(key, cur);
|
||||
}
|
||||
}
|
||||
//remove removed attributes
|
||||
// use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
|
||||
// the other option is to remove all attributes with value == undefined
|
||||
for (key in oldAttrs) {
|
||||
if (!(key in attrs)) {
|
||||
elm.removeAttribute(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { create: updateAttrs, update: updateAttrs };
|
||||
|
||||
},{}],5:[function(require,module,exports){
|
||||
// jshint newcap: false
|
||||
/* global require, module, document, Element */
|
||||
'use strict';
|
||||
|
||||
var VNode = require('./vnode');
|
||||
var is = require('./is');
|
||||
|
||||
function isUndef(s) {
|
||||
return s === undefined;
|
||||
}
|
||||
function isDef(s) {
|
||||
return s !== undefined;
|
||||
}
|
||||
|
||||
function emptyNodeAt(elm) {
|
||||
return VNode(elm.tagName, {}, [], undefined, elm);
|
||||
}
|
||||
|
||||
var emptyNode = VNode('', {}, [], undefined, undefined);
|
||||
|
||||
function sameVnode(vnode1, vnode2) {
|
||||
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
|
||||
}
|
||||
|
||||
function createKeyToOldIdx(children, beginIdx, endIdx) {
|
||||
var i,
|
||||
map = {},
|
||||
key;
|
||||
for (i = beginIdx; i <= endIdx; ++i) {
|
||||
key = children[i].key;
|
||||
if (isDef(key)) map[key] = i;
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
function createRmCb(childElm, listeners) {
|
||||
return function () {
|
||||
if (--listeners === 0) childElm.parentElement.removeChild(childElm);
|
||||
};
|
||||
}
|
||||
|
||||
var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
|
||||
|
||||
function init(modules) {
|
||||
var i,
|
||||
j,
|
||||
cbs = {};
|
||||
for (i = 0; i < hooks.length; ++i) {
|
||||
cbs[hooks[i]] = [];
|
||||
for (j = 0; j < modules.length; ++j) {
|
||||
if (modules[j][hooks[i]] !== undefined) cbs[hooks[i]].push(modules[j][hooks[i]]);
|
||||
}
|
||||
}
|
||||
|
||||
function createElm(vnode, insertedVnodeQueue) {
|
||||
var i,
|
||||
data = vnode.data;
|
||||
if (isDef(data)) {
|
||||
if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode);
|
||||
if (isDef(i = data.vnode)) vnode = i;
|
||||
}
|
||||
var elm,
|
||||
children = vnode.children,
|
||||
sel = vnode.sel;
|
||||
if (isDef(sel)) {
|
||||
// Parse selector
|
||||
var hashIdx = sel.indexOf('#');
|
||||
var dotIdx = sel.indexOf('.', hashIdx);
|
||||
var hash = hashIdx > 0 ? hashIdx : sel.length;
|
||||
var dot = dotIdx > 0 ? dotIdx : sel.length;
|
||||
var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
|
||||
elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? document.createElementNS(i, tag) : document.createElement(tag);
|
||||
if (hash < dot) elm.id = sel.slice(hash + 1, dot);
|
||||
if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' ');
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
elm.appendChild(createElm(children[i], insertedVnodeQueue));
|
||||
}
|
||||
} else if (is.primitive(vnode.text)) {
|
||||
elm.appendChild(document.createTextNode(vnode.text));
|
||||
}
|
||||
for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
|
||||
i = vnode.data.hook; // Reuse variable
|
||||
if (isDef(i)) {
|
||||
if (i.create) i.create(emptyNode, vnode);
|
||||
if (i.insert) insertedVnodeQueue.push(vnode);
|
||||
}
|
||||
} else {
|
||||
elm = vnode.elm = document.createTextNode(vnode.text);
|
||||
}
|
||||
return vnode.elm;
|
||||
}
|
||||
|
||||
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
parentElm.insertBefore(createElm(vnodes[startIdx], insertedVnodeQueue), before);
|
||||
}
|
||||
}
|
||||
|
||||
function invokeDestroyHook(vnode) {
|
||||
var i = vnode.data,
|
||||
j;
|
||||
if (isDef(i)) {
|
||||
if (isDef(i = i.hook) && isDef(i = i.destroy)) i(vnode);
|
||||
for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
|
||||
if (isDef(i = vnode.children)) {
|
||||
for (j = 0; j < vnode.children.length; ++j) {
|
||||
invokeDestroyHook(vnode.children[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
var i,
|
||||
listeners,
|
||||
rm,
|
||||
ch = vnodes[startIdx];
|
||||
if (isDef(ch)) {
|
||||
if (isDef(ch.sel)) {
|
||||
invokeDestroyHook(ch);
|
||||
listeners = cbs.remove.length + 1;
|
||||
rm = createRmCb(ch.elm, listeners);
|
||||
for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
|
||||
if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {
|
||||
i(ch, rm);
|
||||
} else {
|
||||
rm();
|
||||
}
|
||||
} else {
|
||||
// Text node
|
||||
parentElm.removeChild(ch.elm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
|
||||
var oldStartIdx = 0,
|
||||
newStartIdx = 0;
|
||||
var oldEndIdx = oldCh.length - 1;
|
||||
var oldStartVnode = oldCh[0];
|
||||
var oldEndVnode = oldCh[oldEndIdx];
|
||||
var newEndIdx = newCh.length - 1;
|
||||
var newStartVnode = newCh[0];
|
||||
var newEndVnode = newCh[newEndIdx];
|
||||
var oldKeyToIdx, idxInOld, elmToMove, before;
|
||||
|
||||
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
||||
if (isUndef(oldStartVnode)) {
|
||||
oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left
|
||||
} else if (isUndef(oldEndVnode)) {
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newStartVnode)) {
|
||||
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else if (sameVnode(oldEndVnode, newEndVnode)) {
|
||||
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newEndVnode)) {
|
||||
// Vnode moved right
|
||||
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
|
||||
parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldEndVnode, newStartVnode)) {
|
||||
// Vnode moved left
|
||||
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
|
||||
parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
|
||||
idxInOld = oldKeyToIdx[newStartVnode.key];
|
||||
if (isUndef(idxInOld)) {
|
||||
// New element
|
||||
parentElm.insertBefore(createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
elmToMove = oldCh[idxInOld];
|
||||
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
|
||||
oldCh[idxInOld] = undefined;
|
||||
parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (oldStartIdx > oldEndIdx) {
|
||||
before = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
|
||||
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
|
||||
} else if (newStartIdx > newEndIdx) {
|
||||
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
|
||||
}
|
||||
}
|
||||
|
||||
function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
|
||||
var i, hook;
|
||||
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
if (isDef(i = oldVnode.data) && isDef(i = i.vnode)) oldVnode = i;
|
||||
if (isDef(i = vnode.data) && isDef(i = i.vnode)) vnode = i;
|
||||
var elm = vnode.elm = oldVnode.elm,
|
||||
oldCh = oldVnode.children,
|
||||
ch = vnode.children;
|
||||
if (oldVnode === vnode) return;
|
||||
if (isDef(vnode.data)) {
|
||||
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
|
||||
i = vnode.data.hook;
|
||||
if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
|
||||
}
|
||||
if (isUndef(vnode.text)) {
|
||||
if (isDef(oldCh) && isDef(ch)) {
|
||||
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
|
||||
} else if (isDef(ch)) {
|
||||
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
|
||||
} else if (isDef(oldCh)) {
|
||||
removeVnodes(elm, oldCh, 0, oldCh.length - 1);
|
||||
}
|
||||
} else if (oldVnode.text !== vnode.text) {
|
||||
elm.textContent = vnode.text;
|
||||
}
|
||||
if (isDef(hook) && isDef(i = hook.postpatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
}
|
||||
|
||||
return function (oldVnode, vnode) {
|
||||
var i;
|
||||
var insertedVnodeQueue = [];
|
||||
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
|
||||
if (oldVnode instanceof Element) {
|
||||
if (oldVnode.parentElement !== null) {
|
||||
createElm(vnode, insertedVnodeQueue);
|
||||
oldVnode.parentElement.replaceChild(vnode.elm, oldVnode);
|
||||
} else {
|
||||
oldVnode = emptyNodeAt(oldVnode);
|
||||
patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
||||
}
|
||||
} else {
|
||||
patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
||||
}
|
||||
for (i = 0; i < insertedVnodeQueue.length; ++i) {
|
||||
insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
|
||||
}
|
||||
for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
|
||||
return vnode;
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = { init: init };
|
||||
|
||||
},{"./is":3,"./vnode":6}],6:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
module.exports = function (sel, data, children, text, elm) {
|
||||
var key = data === undefined ? undefined : data.key;
|
||||
return { sel: sel, data: data, children: children,
|
||||
text: text, elm: elm, key: key };
|
||||
};
|
||||
|
||||
},{}]},{},[1]);
|
||||
@@ -1,84 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>SVG</title>
|
||||
<script type="text/javascript" src="build.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background: #fafafa;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
|
||||
padding: .5em .8em;
|
||||
transition: box-shadow .05s ease-in-out;
|
||||
-webkit-transition: box-shadow .05s ease-in-out;
|
||||
}
|
||||
.btn:hover {
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.btn:active, .active, .active:hover {
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .2),
|
||||
inset 0 0 4px rgba(0, 0, 0, .1);
|
||||
}
|
||||
.add {
|
||||
float: right;
|
||||
}
|
||||
#container {
|
||||
max-width: 42em;
|
||||
margin: 0 auto 2em auto;
|
||||
}
|
||||
.list {
|
||||
position: relative;
|
||||
}
|
||||
.row {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
margin: .5em 0;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
|
||||
transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
|
||||
-webkit-transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
|
||||
}
|
||||
.row div {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.row > div:nth-child(1) {
|
||||
width: 5%;
|
||||
}
|
||||
.row > div:nth-child(2) {
|
||||
width: 30%;
|
||||
}
|
||||
.row > div:nth-child(3) {
|
||||
width: 65%;
|
||||
}
|
||||
.rm-btn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #C25151;
|
||||
width: 1.4em;
|
||||
height: 1.4em;
|
||||
text-align: center;
|
||||
line-height: 1.4em;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,17 +0,0 @@
|
||||
var snabbdom = require('../../snabbdom.js');
|
||||
var patch = snabbdom.init([
|
||||
require('../../modules/attributes').default,
|
||||
]);
|
||||
var h = require('../../h.js').default;
|
||||
|
||||
var vnode;
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
var container = document.getElementById('container');
|
||||
var vnode = h('div', [
|
||||
h('svg', {attrs: {width: 100, height: 100}}, [
|
||||
h('circle', {attrs: {cx: 50, cy: 50, r: 40, stroke: 'green', 'stroke-width': 4, fill: 'yellow'}})
|
||||
])
|
||||
]);
|
||||
vnode = patch(container, vnode);
|
||||
});
|
||||
@@ -1,82 +0,0 @@
|
||||
var gulp = require('gulp')
|
||||
var clean = require('gulp-clean')
|
||||
var uglify = require('gulp-uglify')
|
||||
var rename = require('gulp-rename')
|
||||
var sourcemaps = require('gulp-sourcemaps')
|
||||
var browserify = require('browserify')
|
||||
var fs = require('fs')
|
||||
|
||||
function standalone(name, entry, exportName) {
|
||||
return browserify(entry, { debug: true, standalone: exportName || name })
|
||||
.bundle()
|
||||
.pipe(fs.createWriteStream('./dist/'+ name.replace(/_/g, '-') +'.js'))
|
||||
}
|
||||
|
||||
gulp.task('bundle:snabbdom', function() {
|
||||
return standalone('snabbdom_patch', './snabbdom.bundle.js', 'snabbdom')
|
||||
})
|
||||
|
||||
gulp.task('bundle:snabbdom:init', function() {
|
||||
return standalone('snabbdom', './snabbdom.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:snabbdom:h', function() {
|
||||
return standalone('h', './h.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:snabbdom:tovnode', function() {
|
||||
return standalone('tovnode', './tovnode.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:module:class', function() {
|
||||
return standalone('snabbdom_class', './modules/class.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:module:dataset', function() {
|
||||
return standalone('snabbdom_dataset', './modules/dataset.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:module:props', function() {
|
||||
return standalone('snabbdom_props', './modules/props.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:module:attributes', function() {
|
||||
return standalone('snabbdom_attributes', './modules/attributes.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:module:style', function() {
|
||||
return standalone('snabbdom_style', './modules/style.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle:module:eventlisteners', function() {
|
||||
return standalone('snabbdom_eventlisteners', './modules/eventlisteners.js')
|
||||
})
|
||||
|
||||
gulp.task('bundle', [
|
||||
'bundle:snabbdom',
|
||||
'bundle:snabbdom:init',
|
||||
'bundle:snabbdom:h',
|
||||
'bundle:snabbdom:tovnode',
|
||||
'bundle:module:attributes',
|
||||
'bundle:module:class',
|
||||
'bundle:module:dataset',
|
||||
'bundle:module:props',
|
||||
'bundle:module:style',
|
||||
'bundle:module:eventlisteners'
|
||||
])
|
||||
|
||||
gulp.task('compress', ['bundle'], function() {
|
||||
return gulp.src(['dist/*.js', '!dist/*.min.js'])
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(uglify())
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
})
|
||||
|
||||
gulp.task('clean', function() {
|
||||
return gulp.src('dist/*.*', {read: false})
|
||||
.pipe(clean())
|
||||
})
|
||||
|
||||
gulp.task('default', ['bundle'])
|
||||
@@ -1,66 +0,0 @@
|
||||
const ci = !!process.env.CI;
|
||||
const watch = !!process.env.WATCH;
|
||||
const live = !!process.env.LIVE;
|
||||
|
||||
const identifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER;
|
||||
const ip = process.env.IP_ADDR;
|
||||
|
||||
const browserstack = require('./browserstack-karma.js');
|
||||
|
||||
const browsers = ci
|
||||
? Object.keys(browserstack)
|
||||
: live
|
||||
? undefined
|
||||
: watch
|
||||
? ['Chrome']
|
||||
: ['Chrome', 'Firefox'];
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
basePath: '.',
|
||||
frameworks: ['mocha', 'karma-typescript'],
|
||||
// list of files / patterns to load in the browser
|
||||
files: [{pattern: 'src/**/*.ts'}, {pattern: 'test/**/*'}],
|
||||
plugins: [
|
||||
'karma-mocha',
|
||||
'karma-chrome-launcher',
|
||||
'karma-firefox-launcher',
|
||||
'karma-browserstack-launcher',
|
||||
'karma-typescript',
|
||||
],
|
||||
hostname: ci ? ip : 'localhost',
|
||||
preprocessors: {
|
||||
'src/**/*.ts': ['karma-typescript'],
|
||||
'test/**/*.js': ['karma-typescript'],
|
||||
},
|
||||
browserStack: {
|
||||
name: 'Snabbdom',
|
||||
startTunnel: false,
|
||||
retryLimit: 3,
|
||||
tunnelIdentifier: identifier,
|
||||
},
|
||||
browserNoActivityTimeout: 1000000,
|
||||
customLaunchers: browserstack,
|
||||
karmaTypescriptConfig: {
|
||||
coverageOptions: {
|
||||
exclude: /test\//,
|
||||
},
|
||||
compilerOptions: {
|
||||
allowJs: true,
|
||||
declaration: false
|
||||
},
|
||||
tsconfig: './tsconfig.json',
|
||||
include: {
|
||||
mode: 'merge',
|
||||
values: ['test/**/*'],
|
||||
},
|
||||
},
|
||||
reporters: ['dots', 'karma-typescript', 'BrowserStack'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
autoWatch: true,
|
||||
browsers: browsers,
|
||||
singleRun: !watch && !live,
|
||||
concurrency: ci ? 1 : Infinity,
|
||||
});
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
{
|
||||
"name": "snabbdom",
|
||||
"version": "0.7.3",
|
||||
"description": "A virtual DOM library with focus on simplicity, modularity, powerful features and performance.",
|
||||
"main": "snabbdom.js",
|
||||
"module": "es/snabbdom.js",
|
||||
"typings": "snabbdom.d.ts",
|
||||
"directories": {
|
||||
"example": "examples",
|
||||
"test": "test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"benchmark": "^2.1.4",
|
||||
"browserify": "^14.4.0",
|
||||
"fake-raf": "1.0.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-clean": "^0.3.2",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sourcemaps": "^2.6.0",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"karma": "^3.0.0",
|
||||
"karma-browserstack-launcher": "^1.3.0",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-firefox-launcher": "^1.1.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-typescript": "^3.0.13",
|
||||
"knuth-shuffle": "^1.0.1",
|
||||
"mocha": "^5.2.0",
|
||||
"typescript": "^3.0.3",
|
||||
"xyz": "2.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"pretest": "npm run compile",
|
||||
"test": "testem",
|
||||
"compile": "npm run compile-es && npm run compile-commonjs",
|
||||
"compile-es": "tsc --outDir es --module es6 --moduleResolution node",
|
||||
"compile-commonjs": "tsc --outDir ./",
|
||||
"prepublish": "npm run compile",
|
||||
"release-major": "xyz --repo git@github.com:paldepind/snabbdom.git --increment major",
|
||||
"release-minor": "xyz --repo git@github.com:paldepind/snabbdom.git --increment minor",
|
||||
"release-patch": "xyz --repo git@github.com:paldepind/snabbdom.git --increment patch"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/paldepind/snabbdom.git"
|
||||
},
|
||||
"keywords": [
|
||||
"virtual",
|
||||
"dom",
|
||||
"light",
|
||||
"kiss",
|
||||
"performance"
|
||||
],
|
||||
"author": "Simon Friis Vindum",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/paldepind/snabbdom/issues"
|
||||
},
|
||||
"homepage": "https://github.com/paldepind/snabbdom#readme"
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
var Benchmark = require('benchmark');
|
||||
var a = require('../snabbdom.js');
|
||||
var b = require('../oldsnabbdom.js');
|
||||
|
||||
global.a = a;
|
||||
global.b = b;
|
||||
|
||||
var suite = new Benchmark.Suite();
|
||||
|
||||
a.spanNum = function spanNum(n) {
|
||||
return a.h('span', {key: n}, n.toString());
|
||||
};
|
||||
|
||||
b.spanNum = function spanNum(n) {
|
||||
return b.h('span', {key: n}, n.toString());
|
||||
};
|
||||
|
||||
var elms = global.elms = 10;
|
||||
var arr = global.arr = [];
|
||||
for (var n = 0; n < elms; ++n) { arr[n] = n; }
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var elm = global.elm = document.getElementById('container');
|
||||
// add tests
|
||||
suite.add('a/ insert first', {
|
||||
setup: function() {
|
||||
var vnode1 = a.h('div', arr.map(a.spanNum));
|
||||
var vnode2 = a.h('div', ['new'].concat(arr).map(a.spanNum));
|
||||
},
|
||||
fn: function() {
|
||||
var emptyNode = a.emptyNodeAt(elm);
|
||||
a.patch(emptyNode, vnode1);
|
||||
a.patch(vnode1, vnode2);
|
||||
a.patch(vnode2, a.emptyNode);
|
||||
},
|
||||
})
|
||||
.add('b/ insert first', {
|
||||
setup: function() {
|
||||
var vnode1 = b.h('div', arr.map(b.spanNum));
|
||||
var vnode2 = b.h('div', ['new'].concat(arr).map(b.spanNum));
|
||||
},
|
||||
fn: function() {
|
||||
var emptyNode = b.emptyNodeAt(elm);
|
||||
b.patch(emptyNode, vnode1);
|
||||
b.patch(vnode1, vnode2);
|
||||
b.patch(vnode2, b.emptyNode);
|
||||
},
|
||||
})
|
||||
// add listeners
|
||||
.on('cycle', function(event) {
|
||||
console.log(String(event.target));
|
||||
})
|
||||
.on('complete', function() {
|
||||
console.log('Fastest is ' + this.filter('fastest').pluck('name'));
|
||||
})
|
||||
// run async
|
||||
.run({async: true});
|
||||
});
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Snabbdom benchmarks</title>
|
||||
<script type="text/javascript" src="build.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>See console</p>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,50 +0,0 @@
|
||||
import {vnode, VNode, VNodeData} from './vnode';
|
||||
export type VNodes = Array<VNode>;
|
||||
export type VNodeChildElement = VNode | string | number | undefined | null;
|
||||
export type ArrayOrElement<T> = T | T[];
|
||||
export type VNodeChildren = ArrayOrElement<VNodeChildElement>
|
||||
import * as is from './is';
|
||||
|
||||
function addNS(data: any, children: VNodes | undefined, sel: string | undefined): void {
|
||||
data.ns = 'http://www.w3.org/2000/svg';
|
||||
if (sel !== 'foreignObject' && children !== undefined) {
|
||||
for (let i = 0; i < children.length; ++i) {
|
||||
let childData = children[i].data;
|
||||
if (childData !== undefined) {
|
||||
addNS(childData, (children[i] as VNode).children as VNodes, children[i].sel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function h(sel: string): VNode;
|
||||
export function h(sel: string, data: VNodeData): VNode;
|
||||
export function h(sel: string, children: VNodeChildren): VNode;
|
||||
export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
|
||||
export function h(sel: any, b?: any, c?: any): VNode {
|
||||
var data: VNodeData = {}, children: any, text: any, i: number;
|
||||
if (c !== undefined) {
|
||||
data = b;
|
||||
if (is.array(c)) { children = c; }
|
||||
else if (is.primitive(c)) { text = c; }
|
||||
else if (c && c.sel) { children = [c]; }
|
||||
} else if (b !== undefined) {
|
||||
if (is.array(b)) { children = b; }
|
||||
else if (is.primitive(b)) { text = b; }
|
||||
else if (b && b.sel) { children = [b]; }
|
||||
else { data = b; }
|
||||
}
|
||||
if (children !== undefined) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
|
||||
}
|
||||
}
|
||||
if (
|
||||
sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' &&
|
||||
(sel.length === 3 || sel[3] === '.' || sel[3] === '#')
|
||||
) {
|
||||
addNS(data, children, sel);
|
||||
}
|
||||
return vnode(sel, data, children, text, undefined);
|
||||
};
|
||||
export default h;
|
||||
@@ -1,64 +0,0 @@
|
||||
import {VNode, VNodeData} from '../vnode';
|
||||
|
||||
export interface AttachData {
|
||||
[key: string]: any
|
||||
[i: number]: any
|
||||
placeholder?: any
|
||||
real?: Node
|
||||
}
|
||||
|
||||
interface VNodeDataWithAttach extends VNodeData {
|
||||
attachData: AttachData
|
||||
}
|
||||
|
||||
interface VNodeWithAttachData extends VNode {
|
||||
data: VNodeDataWithAttach
|
||||
}
|
||||
|
||||
function pre(vnode: VNodeWithAttachData, newVnode: VNodeWithAttachData): void {
|
||||
const attachData = vnode.data.attachData;
|
||||
// Copy created placeholder and real element from old vnode
|
||||
newVnode.data.attachData.placeholder = attachData.placeholder;
|
||||
newVnode.data.attachData.real = attachData.real;
|
||||
// Mount real element in vnode so the patch process operates on it
|
||||
vnode.elm = vnode.data.attachData.real;
|
||||
}
|
||||
|
||||
function post(_: any, vnode: VNodeWithAttachData): void {
|
||||
// Mount dummy placeholder in vnode so potential reorders use it
|
||||
vnode.elm = vnode.data.attachData.placeholder;
|
||||
}
|
||||
|
||||
function destroy(vnode: VNodeWithAttachData): void {
|
||||
// Remove placeholder
|
||||
if (vnode.elm !== undefined) {
|
||||
(vnode.elm.parentNode as HTMLElement).removeChild(vnode.elm);
|
||||
}
|
||||
// Remove real element from where it was inserted
|
||||
vnode.elm = vnode.data.attachData.real;
|
||||
}
|
||||
|
||||
function create(_: any, vnode: VNodeWithAttachData): void {
|
||||
const real = vnode.elm, attachData = vnode.data.attachData;
|
||||
const placeholder = document.createElement('span');
|
||||
// Replace actual element with dummy placeholder
|
||||
// Snabbdom will then insert placeholder instead
|
||||
vnode.elm = placeholder;
|
||||
attachData.target.appendChild(real);
|
||||
attachData.real = real;
|
||||
attachData.placeholder = placeholder;
|
||||
}
|
||||
|
||||
export function attachTo(target: Element, vnode: VNode): VNode {
|
||||
if (vnode.data === undefined) vnode.data = {};
|
||||
if (vnode.data.hook === undefined) vnode.data.hook = {};
|
||||
const data = vnode.data;
|
||||
const hook = vnode.data.hook;
|
||||
data.attachData = {target: target, placeholder: undefined, real: undefined};
|
||||
hook.create = create;
|
||||
hook.prepatch = pre;
|
||||
hook.postpatch = post;
|
||||
hook.destroy = destroy;
|
||||
return vnode;
|
||||
};
|
||||
export default attachTo;
|
||||
@@ -1,25 +0,0 @@
|
||||
import {VNode} from './vnode';
|
||||
|
||||
export type PreHook = () => any;
|
||||
export type InitHook = (vNode: VNode) => any;
|
||||
export type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
|
||||
export type InsertHook = (vNode: VNode) => any;
|
||||
export type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
|
||||
export type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
|
||||
export type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
|
||||
export type DestroyHook = (vNode: VNode) => any;
|
||||
export type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
|
||||
export type PostHook = () => any;
|
||||
|
||||
export interface Hooks {
|
||||
pre?: PreHook;
|
||||
init?: InitHook;
|
||||
create?: CreateHook;
|
||||
insert?: InsertHook;
|
||||
prepatch?: PrePatchHook;
|
||||
update?: UpdateHook;
|
||||
postpatch?: PostPatchHook;
|
||||
destroy?: DestroyHook;
|
||||
remove?: RemoveHook;
|
||||
post?: PostHook;
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
export interface DOMAPI {
|
||||
createElement: (tagName: any) => HTMLElement;
|
||||
createElementNS: (namespaceURI: string, qualifiedName: string) => Element;
|
||||
createTextNode: (text: string) => Text;
|
||||
createComment: (text: string) => Comment;
|
||||
insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void;
|
||||
removeChild: (node: Node, child: Node) => void;
|
||||
appendChild: (node: Node, child: Node) => void;
|
||||
parentNode: (node: Node) => Node;
|
||||
nextSibling: (node: Node) => Node;
|
||||
tagName: (elm: Element) => string;
|
||||
setTextContent: (node: Node, text: string | null) => void;
|
||||
getTextContent: (node: Node) => string | null;
|
||||
isElement: (node: Node) => node is Element;
|
||||
isText: (node: Node) => node is Text;
|
||||
isComment: (node: Node) => node is Comment;
|
||||
}
|
||||
|
||||
function createElement(tagName: any): HTMLElement {
|
||||
return document.createElement(tagName);
|
||||
}
|
||||
|
||||
function createElementNS(namespaceURI: string, qualifiedName: string): Element {
|
||||
return document.createElementNS(namespaceURI, qualifiedName);
|
||||
}
|
||||
|
||||
function createTextNode(text: string): Text {
|
||||
return document.createTextNode(text);
|
||||
}
|
||||
|
||||
function createComment(text: string): Comment {
|
||||
return document.createComment(text);
|
||||
}
|
||||
|
||||
function insertBefore(parentNode: Node, newNode: Node, referenceNode: Node | null): void {
|
||||
parentNode.insertBefore(newNode, referenceNode);
|
||||
}
|
||||
|
||||
function removeChild(node: Node, child: Node): void {
|
||||
node.removeChild(child);
|
||||
}
|
||||
|
||||
function appendChild(node: Node, child: Node): void {
|
||||
node.appendChild(child);
|
||||
}
|
||||
|
||||
function parentNode(node: Node): Node | null {
|
||||
return node.parentNode;
|
||||
}
|
||||
|
||||
function nextSibling(node: Node): Node | null {
|
||||
return node.nextSibling;
|
||||
}
|
||||
|
||||
function tagName(elm: Element): string {
|
||||
return elm.tagName;
|
||||
}
|
||||
|
||||
function setTextContent(node: Node, text: string | null): void {
|
||||
node.textContent = text;
|
||||
}
|
||||
|
||||
function getTextContent(node: Node): string | null {
|
||||
return node.textContent;
|
||||
}
|
||||
|
||||
function isElement(node: Node): node is Element {
|
||||
return node.nodeType === 1;
|
||||
}
|
||||
|
||||
function isText(node: Node): node is Text {
|
||||
return node.nodeType === 3;
|
||||
}
|
||||
|
||||
function isComment(node: Node): node is Comment {
|
||||
return node.nodeType === 8;
|
||||
}
|
||||
|
||||
export const htmlDomApi = {
|
||||
createElement,
|
||||
createElementNS,
|
||||
createTextNode,
|
||||
createComment,
|
||||
insertBefore,
|
||||
removeChild,
|
||||
appendChild,
|
||||
parentNode,
|
||||
nextSibling,
|
||||
tagName,
|
||||
setTextContent,
|
||||
getTextContent,
|
||||
isElement,
|
||||
isText,
|
||||
isComment,
|
||||
} as DOMAPI;
|
||||
|
||||
export default htmlDomApi;
|
||||
@@ -1,4 +0,0 @@
|
||||
export const array = Array.isArray;
|
||||
export function primitive(s: any): s is (string | number) {
|
||||
return typeof s === 'string' || typeof s === 'number';
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { VNode, VNodeData } from "../vnode";
|
||||
import { Module } from "./module";
|
||||
|
||||
// because those in TypeScript are too restrictive: https://github.com/Microsoft/TSJS-lib-generator/pull/237
|
||||
declare global {
|
||||
interface Element {
|
||||
setAttribute(name: string, value: string | number | boolean): void;
|
||||
setAttributeNS(
|
||||
namespaceURI: string,
|
||||
qualifiedName: string,
|
||||
value: string | number | boolean
|
||||
): void;
|
||||
}
|
||||
}
|
||||
|
||||
export type Attrs = Record<string, string | number | boolean>;
|
||||
|
||||
const xlinkNS = "http://www.w3.org/1999/xlink";
|
||||
const xmlNS = "http://www.w3.org/XML/1998/namespace";
|
||||
const colonChar = 58;
|
||||
const xChar = 120;
|
||||
|
||||
function updateAttrs(oldVnode: VNode, vnode: VNode): void {
|
||||
var key: string,
|
||||
elm: Element = vnode.elm as Element,
|
||||
oldAttrs = (oldVnode.data as VNodeData).attrs,
|
||||
attrs = (vnode.data as VNodeData).attrs;
|
||||
|
||||
if (!oldAttrs && !attrs) return;
|
||||
if (oldAttrs === attrs) return;
|
||||
oldAttrs = oldAttrs || {};
|
||||
attrs = attrs || {};
|
||||
|
||||
// update modified attributes, add new attributes
|
||||
for (key in attrs) {
|
||||
const cur = attrs[key];
|
||||
const old = oldAttrs[key];
|
||||
if (old !== cur) {
|
||||
if (cur === true) {
|
||||
elm.setAttribute(key, "");
|
||||
} else if (cur === false) {
|
||||
elm.removeAttribute(key);
|
||||
} else {
|
||||
if (key.charCodeAt(0) !== xChar) {
|
||||
elm.setAttribute(key, cur);
|
||||
} else if (key.charCodeAt(3) === colonChar) {
|
||||
// Assume xml namespace
|
||||
elm.setAttributeNS(xmlNS, key, cur);
|
||||
} else if (key.charCodeAt(5) === colonChar) {
|
||||
// Assume xlink namespace
|
||||
elm.setAttributeNS(xlinkNS, key, cur);
|
||||
} else {
|
||||
elm.setAttribute(key, cur);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// remove removed attributes
|
||||
// use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
|
||||
// the other option is to remove all attributes with value == undefined
|
||||
for (key in oldAttrs) {
|
||||
if (!(key in attrs)) {
|
||||
elm.removeAttribute(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const attributesModule = {
|
||||
create: updateAttrs,
|
||||
update: updateAttrs
|
||||
} as Module;
|
||||
export default attributesModule;
|
||||
@@ -1,30 +0,0 @@
|
||||
import {VNode, VNodeData} from '../vnode';
|
||||
import {Module} from './module';
|
||||
|
||||
export type Classes = Record<string, boolean>
|
||||
|
||||
function updateClass(oldVnode: VNode, vnode: VNode): void {
|
||||
var cur: any, name: string, elm: Element = vnode.elm as Element,
|
||||
oldClass = (oldVnode.data as VNodeData).class,
|
||||
klass = (vnode.data as VNodeData).class;
|
||||
|
||||
if (!oldClass && !klass) return;
|
||||
if (oldClass === klass) return;
|
||||
oldClass = oldClass || {};
|
||||
klass = klass || {};
|
||||
|
||||
for (name in oldClass) {
|
||||
if (!klass[name]) {
|
||||
elm.classList.remove(name);
|
||||
}
|
||||
}
|
||||
for (name in klass) {
|
||||
cur = klass[name];
|
||||
if (cur !== oldClass[name]) {
|
||||
(elm.classList as any)[cur ? 'add' : 'remove'](name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const classModule = {create: updateClass, update: updateClass} as Module;
|
||||
export default classModule;
|
||||
@@ -1,43 +0,0 @@
|
||||
import {VNode, VNodeData} from '../vnode';
|
||||
import {Module} from './module';
|
||||
|
||||
export type Dataset = Record<string, string>;
|
||||
|
||||
const CAPS_REGEX = /[A-Z]/g;
|
||||
|
||||
function updateDataset(oldVnode: VNode, vnode: VNode): void {
|
||||
let elm: HTMLElement = vnode.elm as HTMLElement,
|
||||
oldDataset = (oldVnode.data as VNodeData).dataset,
|
||||
dataset = (vnode.data as VNodeData).dataset,
|
||||
key: string;
|
||||
|
||||
if (!oldDataset && !dataset) return;
|
||||
if (oldDataset === dataset) return;
|
||||
oldDataset = oldDataset || {};
|
||||
dataset = dataset || {};
|
||||
const d = elm.dataset;
|
||||
|
||||
for (key in oldDataset) {
|
||||
if (!dataset[key]) {
|
||||
if (d) {
|
||||
if (key in d) {
|
||||
delete d[key];
|
||||
}
|
||||
} else {
|
||||
elm.removeAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase());
|
||||
}
|
||||
}
|
||||
}
|
||||
for (key in dataset) {
|
||||
if (oldDataset[key] !== dataset[key]) {
|
||||
if (d) {
|
||||
d[key] = dataset[key];
|
||||
} else {
|
||||
elm.setAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase(), dataset[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const datasetModule = {create: updateDataset, update: updateDataset} as Module;
|
||||
export default datasetModule;
|
||||
@@ -1,111 +0,0 @@
|
||||
import {VNode, VNodeData} from '../vnode';
|
||||
import {Module} from './module';
|
||||
|
||||
export type On = {
|
||||
[N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void
|
||||
} & {
|
||||
[event: string]: EventListener
|
||||
};
|
||||
|
||||
function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
|
||||
if (typeof handler === "function") {
|
||||
// call function handler
|
||||
handler.call(vnode, event, vnode);
|
||||
} else if (typeof handler === "object") {
|
||||
// call handler with arguments
|
||||
if (typeof handler[0] === "function") {
|
||||
// special case for single argument for performance
|
||||
if (handler.length === 2) {
|
||||
handler[0].call(vnode, handler[1], event, vnode);
|
||||
} else {
|
||||
var args = handler.slice(1);
|
||||
args.push(event);
|
||||
args.push(vnode);
|
||||
handler[0].apply(vnode, args);
|
||||
}
|
||||
} else {
|
||||
// call multiple handlers
|
||||
for (var i = 0; i < handler.length; i++) {
|
||||
invokeHandler(handler[i], vnode, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleEvent(event: Event, vnode: VNode) {
|
||||
var name = event.type,
|
||||
on = (vnode.data as VNodeData).on;
|
||||
|
||||
// call event handler(s) if exists
|
||||
if (on && on[name]) {
|
||||
invokeHandler(on[name], vnode, event);
|
||||
}
|
||||
}
|
||||
|
||||
function createListener() {
|
||||
return function handler(event: Event) {
|
||||
handleEvent(event, (handler as any).vnode);
|
||||
}
|
||||
}
|
||||
|
||||
function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
|
||||
var oldOn = (oldVnode.data as VNodeData).on,
|
||||
oldListener = (oldVnode as any).listener,
|
||||
oldElm: Element = oldVnode.elm as Element,
|
||||
on = vnode && (vnode.data as VNodeData).on,
|
||||
elm: Element = (vnode && vnode.elm) as Element,
|
||||
name: string;
|
||||
|
||||
// optimization for reused immutable handlers
|
||||
if (oldOn === on) {
|
||||
return;
|
||||
}
|
||||
|
||||
// remove existing listeners which no longer used
|
||||
if (oldOn && oldListener) {
|
||||
// if element changed or deleted we remove all existing listeners unconditionally
|
||||
if (!on) {
|
||||
for (name in oldOn) {
|
||||
// remove listener if element was changed or existing listeners removed
|
||||
oldElm.removeEventListener(name, oldListener, false);
|
||||
}
|
||||
} else {
|
||||
for (name in oldOn) {
|
||||
// remove listener if existing listener removed
|
||||
if (!on[name]) {
|
||||
oldElm.removeEventListener(name, oldListener, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add new listeners which has not already attached
|
||||
if (on) {
|
||||
// reuse existing listener or create new
|
||||
var listener = (vnode as any).listener = (oldVnode as any).listener || createListener();
|
||||
// update vnode for listener
|
||||
listener.vnode = vnode;
|
||||
|
||||
// if element changed or added we add all needed listeners unconditionally
|
||||
if (!oldOn) {
|
||||
for (name in on) {
|
||||
// add listener if element was changed or new listeners added
|
||||
elm.addEventListener(name, listener, false);
|
||||
}
|
||||
} else {
|
||||
for (name in on) {
|
||||
// add listener if new listener added
|
||||
if (!oldOn[name]) {
|
||||
elm.addEventListener(name, listener, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const eventListenersModule = {
|
||||
create: updateEventListeners,
|
||||
update: updateEventListeners,
|
||||
destroy: updateEventListeners
|
||||
} as Module;
|
||||
export default eventListenersModule;
|
||||
@@ -1,165 +0,0 @@
|
||||
import {VNode, VNodeData} from '../vnode';
|
||||
import {Module} from './module';
|
||||
|
||||
export type Hero = { id: string }
|
||||
|
||||
var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout;
|
||||
var nextFrame = function(fn: any) { raf(function() { raf(fn); }); };
|
||||
|
||||
function setNextFrame(obj: any, prop: string, val: any): void {
|
||||
nextFrame(function() { obj[prop] = val; });
|
||||
}
|
||||
|
||||
function getTextNodeRect(textNode: Text): ClientRect | undefined {
|
||||
var rect: ClientRect | undefined;
|
||||
if (document.createRange) {
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(textNode);
|
||||
if (range.getBoundingClientRect) {
|
||||
rect = range.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
return rect;
|
||||
}
|
||||
|
||||
function calcTransformOrigin(isTextNode: boolean,
|
||||
textRect: ClientRect | undefined,
|
||||
boundingRect: ClientRect): string {
|
||||
if (isTextNode) {
|
||||
if (textRect) {
|
||||
//calculate pixels to center of text from left edge of bounding box
|
||||
var relativeCenterX = textRect.left + textRect.width/2 - boundingRect.left;
|
||||
var relativeCenterY = textRect.top + textRect.height/2 - boundingRect.top;
|
||||
return relativeCenterX + 'px ' + relativeCenterY + 'px';
|
||||
}
|
||||
}
|
||||
return '0 0'; //top left
|
||||
}
|
||||
|
||||
function getTextDx(oldTextRect: ClientRect | undefined,
|
||||
newTextRect: ClientRect | undefined): number {
|
||||
if (oldTextRect && newTextRect) {
|
||||
return ((oldTextRect.left + oldTextRect.width/2) - (newTextRect.left + newTextRect.width/2));
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
function getTextDy(oldTextRect: ClientRect | undefined,
|
||||
newTextRect: ClientRect | undefined): number {
|
||||
if (oldTextRect && newTextRect) {
|
||||
return ((oldTextRect.top + oldTextRect.height/2) - (newTextRect.top + newTextRect.height/2));
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function isTextElement(elm: Element | Text): elm is Text {
|
||||
return elm.childNodes.length === 1 && elm.childNodes[0].nodeType === 3;
|
||||
}
|
||||
|
||||
var removed: any, created: any;
|
||||
|
||||
function pre() {
|
||||
removed = {};
|
||||
created = [];
|
||||
}
|
||||
|
||||
function create(oldVnode: VNode, vnode: VNode): void {
|
||||
var hero = (vnode.data as VNodeData).hero;
|
||||
if (hero && hero.id) {
|
||||
created.push(hero.id);
|
||||
created.push(vnode);
|
||||
}
|
||||
}
|
||||
|
||||
function destroy(vnode: VNode): void {
|
||||
var hero = (vnode.data as VNodeData).hero;
|
||||
if (hero && hero.id) {
|
||||
var elm = vnode.elm;
|
||||
(vnode as any).isTextNode = isTextElement(elm as Element | Text); //is this a text node?
|
||||
(vnode as any).boundingRect = (elm as Element).getBoundingClientRect(); //save the bounding rectangle to a new property on the vnode
|
||||
(vnode as any).textRect = (vnode as any).isTextNode ? getTextNodeRect((elm as Element).childNodes[0] as Text) : null; //save bounding rect of inner text node
|
||||
var computedStyle = window.getComputedStyle(elm as Element, void 0); //get current styles (includes inherited properties)
|
||||
(vnode as any).savedStyle = JSON.parse(JSON.stringify(computedStyle)); //save a copy of computed style values
|
||||
removed[hero.id] = vnode;
|
||||
}
|
||||
}
|
||||
|
||||
function post() {
|
||||
var i: number, id: any, newElm: Element, oldVnode: VNode, oldElm: Element,
|
||||
hRatio: number, wRatio: number,
|
||||
oldRect: ClientRect, newRect: ClientRect, dx: number, dy: number,
|
||||
origTransform: string | null, origTransition: string | null,
|
||||
newStyle: CSSStyleDeclaration, oldStyle: CSSStyleDeclaration,
|
||||
newComputedStyle: CSSStyleDeclaration, isTextNode: boolean,
|
||||
newTextRect: ClientRect | undefined, oldTextRect: ClientRect | undefined;
|
||||
for (i = 0; i < created.length; i += 2) {
|
||||
id = created[i];
|
||||
newElm = created[i+1].elm;
|
||||
oldVnode = removed[id];
|
||||
if (oldVnode) {
|
||||
isTextNode = (oldVnode as any).isTextNode && isTextElement(newElm); //Are old & new both text?
|
||||
newStyle = (newElm as HTMLElement).style;
|
||||
newComputedStyle = window.getComputedStyle(newElm, void 0); //get full computed style for new element
|
||||
oldElm = oldVnode.elm as Element;
|
||||
oldStyle = (oldElm as HTMLElement).style;
|
||||
//Overall element bounding boxes
|
||||
newRect = newElm.getBoundingClientRect();
|
||||
oldRect = (oldVnode as any).boundingRect; //previously saved bounding rect
|
||||
//Text node bounding boxes & distances
|
||||
if (isTextNode) {
|
||||
newTextRect = getTextNodeRect(newElm.childNodes[0] as Text);
|
||||
oldTextRect = (oldVnode as any).textRect;
|
||||
dx = getTextDx(oldTextRect, newTextRect);
|
||||
dy = getTextDy(oldTextRect, newTextRect);
|
||||
} else {
|
||||
//Calculate distances between old & new positions
|
||||
dx = oldRect.left - newRect.left;
|
||||
dy = oldRect.top - newRect.top;
|
||||
}
|
||||
hRatio = newRect.height / (Math.max(oldRect.height, 1));
|
||||
wRatio = isTextNode ? hRatio : newRect.width / (Math.max(oldRect.width, 1)); //text scales based on hRatio
|
||||
// Animate new element
|
||||
origTransform = newStyle.transform;
|
||||
origTransition = newStyle.transition;
|
||||
if (newComputedStyle.display === 'inline') //inline elements cannot be transformed
|
||||
newStyle.display = 'inline-block'; //this does not appear to have any negative side effects
|
||||
newStyle.transition = origTransition + 'transform 0s';
|
||||
newStyle.transformOrigin = calcTransformOrigin(isTextNode, newTextRect, newRect);
|
||||
newStyle.opacity = '0';
|
||||
newStyle.transform = origTransform + 'translate('+dx+'px, '+dy+'px) ' +
|
||||
'scale('+1/wRatio+', '+1/hRatio+')';
|
||||
setNextFrame(newStyle, 'transition', origTransition);
|
||||
setNextFrame(newStyle, 'transform', origTransform);
|
||||
setNextFrame(newStyle, 'opacity', '1');
|
||||
// Animate old element
|
||||
for (var key in (oldVnode as any).savedStyle) { //re-apply saved inherited properties
|
||||
if (parseInt(key) != key as any as number) {
|
||||
var ms = key.substring(0,2) === 'ms';
|
||||
var moz = key.substring(0,3) === 'moz';
|
||||
var webkit = key.substring(0,6) === 'webkit';
|
||||
if (!ms && !moz && !webkit) //ignore prefixed style properties
|
||||
(oldStyle as any)[key] = (oldVnode as any).savedStyle[key];
|
||||
}
|
||||
}
|
||||
oldStyle.position = 'absolute';
|
||||
oldStyle.top = oldRect.top + 'px'; //start at existing position
|
||||
oldStyle.left = oldRect.left + 'px';
|
||||
oldStyle.width = oldRect.width + 'px'; //Needed for elements who were sized relative to their parents
|
||||
oldStyle.height = oldRect.height + 'px'; //Needed for elements who were sized relative to their parents
|
||||
oldStyle.margin = '0'; //Margin on hero element leads to incorrect positioning
|
||||
oldStyle.transformOrigin = calcTransformOrigin(isTextNode, oldTextRect, oldRect);
|
||||
oldStyle.transform = '';
|
||||
oldStyle.opacity = '1';
|
||||
document.body.appendChild(oldElm);
|
||||
setNextFrame(oldStyle, 'transform', 'translate('+ -dx +'px, '+ -dy +'px) scale('+wRatio+', '+hRatio+')'); //scale must be on far right for translate to be correct
|
||||
setNextFrame(oldStyle, 'opacity', '0');
|
||||
oldElm.addEventListener('transitionend', function (ev: TransitionEvent) {
|
||||
if (ev.propertyName === 'transform')
|
||||
document.body.removeChild(ev.target as Node);
|
||||
});
|
||||
}
|
||||
}
|
||||
removed = created = undefined;
|
||||
}
|
||||
|
||||
export const heroModule = {pre, create, destroy, post} as Module;
|
||||
export default heroModule;
|
||||
@@ -1,10 +0,0 @@
|
||||
import {PreHook, CreateHook, UpdateHook, DestroyHook, RemoveHook, PostHook} from '../hooks';
|
||||
|
||||
export interface Module {
|
||||
pre: PreHook;
|
||||
create: CreateHook;
|
||||
update: UpdateHook;
|
||||
destroy: DestroyHook;
|
||||
remove: RemoveHook;
|
||||
post: PostHook;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import {VNode, VNodeData} from '../vnode';
|
||||
import {Module} from './module';
|
||||
|
||||
export type Props = Record<string, any>;
|
||||
|
||||
function updateProps(oldVnode: VNode, vnode: VNode): void {
|
||||
var key: string, cur: any, old: any, elm = vnode.elm,
|
||||
oldProps = (oldVnode.data as VNodeData).props,
|
||||
props = (vnode.data as VNodeData).props;
|
||||
|
||||
if (!oldProps && !props) return;
|
||||
if (oldProps === props) return;
|
||||
oldProps = oldProps || {};
|
||||
props = props || {};
|
||||
|
||||
for (key in oldProps) {
|
||||
if (!props[key]) {
|
||||
delete (elm as any)[key];
|
||||
}
|
||||
}
|
||||
for (key in props) {
|
||||
cur = props[key];
|
||||
old = oldProps[key];
|
||||
if (old !== cur && (key !== 'value' || (elm as any)[key] !== cur)) {
|
||||
(elm as any)[key] = cur;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const propsModule = {create: updateProps, update: updateProps} as Module;
|
||||
export default propsModule;
|
||||
@@ -1,103 +0,0 @@
|
||||
import {VNode, VNodeData} from '../vnode';
|
||||
import {Module} from './module';
|
||||
|
||||
export type VNodeStyle = Record<string, string> & {
|
||||
delayed?: Record<string, string>
|
||||
remove?: Record<string, string>
|
||||
}
|
||||
|
||||
// Bindig `requestAnimationFrame` like this fixes a bug in IE/Edge. See #360 and #409.
|
||||
var raf = (typeof window !== 'undefined' && (window.requestAnimationFrame).bind(window)) || setTimeout;
|
||||
var nextFrame = function(fn: any) { raf(function() { raf(fn); }); };
|
||||
var reflowForced = false;
|
||||
|
||||
function setNextFrame(obj: any, prop: string, val: any): void {
|
||||
nextFrame(function() { obj[prop] = val; });
|
||||
}
|
||||
|
||||
function updateStyle(oldVnode: VNode, vnode: VNode): void {
|
||||
var cur: any, name: string, elm = vnode.elm,
|
||||
oldStyle = (oldVnode.data as VNodeData).style,
|
||||
style = (vnode.data as VNodeData).style;
|
||||
|
||||
if (!oldStyle && !style) return;
|
||||
if (oldStyle === style) return;
|
||||
oldStyle = oldStyle || {} as VNodeStyle;
|
||||
style = style || {} as VNodeStyle;
|
||||
var oldHasDel = 'delayed' in oldStyle;
|
||||
|
||||
for (name in oldStyle) {
|
||||
if (!style[name]) {
|
||||
if (name[0] === '-' && name[1] === '-') {
|
||||
(elm as any).style.removeProperty(name);
|
||||
} else {
|
||||
(elm as any).style[name] = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
for (name in style) {
|
||||
cur = style[name];
|
||||
if (name === 'delayed' && style.delayed) {
|
||||
for (let name2 in style.delayed) {
|
||||
cur = style.delayed[name2];
|
||||
if (!oldHasDel || cur !== (oldStyle.delayed as any)[name2]) {
|
||||
setNextFrame((elm as any).style, name2, cur);
|
||||
}
|
||||
}
|
||||
} else if (name !== 'remove' && cur !== oldStyle[name]) {
|
||||
if (name[0] === '-' && name[1] === '-') {
|
||||
(elm as any).style.setProperty(name, cur);
|
||||
} else {
|
||||
(elm as any).style[name] = cur;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyDestroyStyle(vnode: VNode): void {
|
||||
var style: any, name: string, elm = vnode.elm, s = (vnode.data as VNodeData).style;
|
||||
if (!s || !(style = s.destroy)) return;
|
||||
for (name in style) {
|
||||
(elm as any).style[name] = style[name];
|
||||
}
|
||||
}
|
||||
|
||||
function applyRemoveStyle(vnode: VNode, rm: () => void): void {
|
||||
var s = (vnode.data as VNodeData).style;
|
||||
if (!s || !s.remove) {
|
||||
rm();
|
||||
return;
|
||||
}
|
||||
if(!reflowForced) {
|
||||
getComputedStyle(document.body).transform;
|
||||
reflowForced = true;
|
||||
}
|
||||
var name: string, elm = vnode.elm, i = 0, compStyle: CSSStyleDeclaration,
|
||||
style = s.remove, amount = 0, applied: Array<string> = [];
|
||||
for (name in style) {
|
||||
applied.push(name);
|
||||
(elm as any).style[name] = style[name];
|
||||
}
|
||||
compStyle = getComputedStyle(elm as Element);
|
||||
var props = (compStyle as any)['transition-property'].split(', ');
|
||||
for (; i < props.length; ++i) {
|
||||
if(applied.indexOf(props[i]) !== -1) amount++;
|
||||
}
|
||||
(elm as Element).addEventListener('transitionend', function (ev: TransitionEvent) {
|
||||
if (ev.target === elm) --amount;
|
||||
if (amount === 0) rm();
|
||||
});
|
||||
}
|
||||
|
||||
function forceReflow() {
|
||||
reflowForced = false;
|
||||
}
|
||||
|
||||
export const styleModule = {
|
||||
pre: forceReflow,
|
||||
create: updateStyle,
|
||||
update: updateStyle,
|
||||
destroy: applyDestroyStyle,
|
||||
remove: applyRemoveStyle
|
||||
} as Module;
|
||||
export default styleModule;
|
||||
@@ -1,16 +0,0 @@
|
||||
import {init} from './snabbdom';
|
||||
import {attributesModule} from './modules/attributes'; // for setting attributes on DOM elements
|
||||
import {classModule} from './modules/class'; // makes it easy to toggle classes
|
||||
import {propsModule} from './modules/props'; // for setting properties on DOM elements
|
||||
import {styleModule} from './modules/style'; // handles styling on elements with support for animations
|
||||
import {eventListenersModule} from './modules/eventlisteners'; // attaches event listeners
|
||||
import {h} from './h'; // helper function for creating vnodes
|
||||
var patch = init([ // Init patch function with choosen modules
|
||||
attributesModule,
|
||||
classModule,
|
||||
propsModule,
|
||||
styleModule,
|
||||
eventListenersModule
|
||||
]) as (oldVNode: any, vnode: any) => any;
|
||||
export const snabbdomBundle = { patch, h: h as any };
|
||||
export default snabbdomBundle;
|
||||
@@ -1,318 +0,0 @@
|
||||
/* global module, document, Node */
|
||||
import {Module} from './modules/module';
|
||||
import {Hooks} from './hooks';
|
||||
import vnode, {VNode, VNodeData, Key} from './vnode';
|
||||
import * as is from './is';
|
||||
import htmlDomApi, {DOMAPI} from './htmldomapi';
|
||||
|
||||
function isUndef(s: any): boolean { return s === undefined; }
|
||||
function isDef(s: any): boolean { return s !== undefined; }
|
||||
|
||||
type VNodeQueue = Array<VNode>;
|
||||
|
||||
const emptyNode = vnode('', {}, [], undefined, undefined);
|
||||
|
||||
function sameVnode(vnode1: VNode, vnode2: VNode): boolean {
|
||||
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
|
||||
}
|
||||
|
||||
function isVnode(vnode: any): vnode is VNode {
|
||||
return vnode.sel !== undefined;
|
||||
}
|
||||
|
||||
type KeyToIndexMap = {[key: string]: number};
|
||||
|
||||
type ArraysOf<T> = {
|
||||
[K in keyof T]: (T[K])[];
|
||||
}
|
||||
|
||||
type ModuleHooks = ArraysOf<Module>;
|
||||
|
||||
function createKeyToOldIdx(children: Array<VNode>, beginIdx: number, endIdx: number): KeyToIndexMap {
|
||||
let i: number, map: KeyToIndexMap = {}, key: Key | undefined, ch;
|
||||
for (i = beginIdx; i <= endIdx; ++i) {
|
||||
ch = children[i];
|
||||
if (ch != null) {
|
||||
key = ch.key;
|
||||
if (key !== undefined) map[key] = i;
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
const hooks: (keyof Module)[] = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
|
||||
|
||||
export {h} from './h';
|
||||
export {thunk} from './thunk';
|
||||
|
||||
export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
|
||||
let i: number, j: number, cbs = ({} as ModuleHooks);
|
||||
|
||||
const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
|
||||
|
||||
for (i = 0; i < hooks.length; ++i) {
|
||||
cbs[hooks[i]] = [];
|
||||
for (j = 0; j < modules.length; ++j) {
|
||||
const hook = modules[j][hooks[i]];
|
||||
if (hook !== undefined) {
|
||||
(cbs[hooks[i]] as Array<any>).push(hook);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function emptyNodeAt(elm: Element) {
|
||||
const id = elm.id ? '#' + elm.id : '';
|
||||
const c = elm.className ? '.' + elm.className.split(' ').join('.') : '';
|
||||
return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm);
|
||||
}
|
||||
|
||||
function createRmCb(childElm: Node, listeners: number) {
|
||||
return function rmCb() {
|
||||
if (--listeners === 0) {
|
||||
const parent = api.parentNode(childElm);
|
||||
api.removeChild(parent, childElm);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
|
||||
let i: any, data = vnode.data;
|
||||
if (data !== undefined) {
|
||||
if (isDef(i = data.hook) && isDef(i = i.init)) {
|
||||
i(vnode);
|
||||
data = vnode.data;
|
||||
}
|
||||
}
|
||||
let children = vnode.children, sel = vnode.sel;
|
||||
if (sel === '!') {
|
||||
if (isUndef(vnode.text)) {
|
||||
vnode.text = '';
|
||||
}
|
||||
vnode.elm = api.createComment(vnode.text as string);
|
||||
} else if (sel !== undefined) {
|
||||
// Parse selector
|
||||
const hashIdx = sel.indexOf('#');
|
||||
const dotIdx = sel.indexOf('.', hashIdx);
|
||||
const hash = hashIdx > 0 ? hashIdx : sel.length;
|
||||
const dot = dotIdx > 0 ? dotIdx : sel.length;
|
||||
const tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
|
||||
const elm = vnode.elm = isDef(data) && isDef(i = (data as VNodeData).ns) ? api.createElementNS(i, tag)
|
||||
: api.createElement(tag);
|
||||
if (hash < dot) elm.setAttribute('id', sel.slice(hash + 1, dot));
|
||||
if (dotIdx > 0) elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' '));
|
||||
for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
|
||||
if (is.array(children)) {
|
||||
for (i = 0; i < children.length; ++i) {
|
||||
const ch = children[i];
|
||||
if (ch != null) {
|
||||
api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue));
|
||||
}
|
||||
}
|
||||
} else if (is.primitive(vnode.text)) {
|
||||
api.appendChild(elm, api.createTextNode(vnode.text));
|
||||
}
|
||||
i = (vnode.data as VNodeData).hook; // Reuse variable
|
||||
if (isDef(i)) {
|
||||
if (i.create) i.create(emptyNode, vnode);
|
||||
if (i.insert) insertedVnodeQueue.push(vnode);
|
||||
}
|
||||
} else {
|
||||
vnode.elm = api.createTextNode(vnode.text as string);
|
||||
}
|
||||
return vnode.elm;
|
||||
}
|
||||
|
||||
function addVnodes(parentElm: Node,
|
||||
before: Node | null,
|
||||
vnodes: Array<VNode>,
|
||||
startIdx: number,
|
||||
endIdx: number,
|
||||
insertedVnodeQueue: VNodeQueue) {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
const ch = vnodes[startIdx];
|
||||
if (ch != null) {
|
||||
api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function invokeDestroyHook(vnode: VNode) {
|
||||
let i: any, j: number, data = vnode.data;
|
||||
if (data !== undefined) {
|
||||
if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode);
|
||||
for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
|
||||
if (vnode.children !== undefined) {
|
||||
for (j = 0; j < vnode.children.length; ++j) {
|
||||
i = vnode.children[j];
|
||||
if (i != null && typeof i !== "string") {
|
||||
invokeDestroyHook(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeVnodes(parentElm: Node,
|
||||
vnodes: Array<VNode>,
|
||||
startIdx: number,
|
||||
endIdx: number): void {
|
||||
for (; startIdx <= endIdx; ++startIdx) {
|
||||
let i: any, listeners: number, rm: () => void, ch = vnodes[startIdx];
|
||||
if (ch != null) {
|
||||
if (isDef(ch.sel)) {
|
||||
invokeDestroyHook(ch);
|
||||
listeners = cbs.remove.length + 1;
|
||||
rm = createRmCb(ch.elm as Node, listeners);
|
||||
for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
|
||||
if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {
|
||||
i(ch, rm);
|
||||
} else {
|
||||
rm();
|
||||
}
|
||||
} else { // Text node
|
||||
api.removeChild(parentElm, ch.elm as Node);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateChildren(parentElm: Node,
|
||||
oldCh: Array<VNode>,
|
||||
newCh: Array<VNode>,
|
||||
insertedVnodeQueue: VNodeQueue) {
|
||||
let oldStartIdx = 0, newStartIdx = 0;
|
||||
let oldEndIdx = oldCh.length - 1;
|
||||
let oldStartVnode = oldCh[0];
|
||||
let oldEndVnode = oldCh[oldEndIdx];
|
||||
let newEndIdx = newCh.length - 1;
|
||||
let newStartVnode = newCh[0];
|
||||
let newEndVnode = newCh[newEndIdx];
|
||||
let oldKeyToIdx: any;
|
||||
let idxInOld: number;
|
||||
let elmToMove: VNode;
|
||||
let before: any;
|
||||
|
||||
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
||||
if (oldStartVnode == null) {
|
||||
oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
|
||||
} else if (oldEndVnode == null) {
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
} else if (newStartVnode == null) {
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else if (newEndVnode == null) {
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newStartVnode)) {
|
||||
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else if (sameVnode(oldEndVnode, newEndVnode)) {
|
||||
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
|
||||
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
|
||||
api.insertBefore(parentElm, oldStartVnode.elm as Node, api.nextSibling(oldEndVnode.elm as Node));
|
||||
oldStartVnode = oldCh[++oldStartIdx];
|
||||
newEndVnode = newCh[--newEndIdx];
|
||||
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
|
||||
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
|
||||
api.insertBefore(parentElm, oldEndVnode.elm as Node, oldStartVnode.elm as Node);
|
||||
oldEndVnode = oldCh[--oldEndIdx];
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
if (oldKeyToIdx === undefined) {
|
||||
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
|
||||
}
|
||||
idxInOld = oldKeyToIdx[newStartVnode.key as string];
|
||||
if (isUndef(idxInOld)) { // New element
|
||||
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm as Node);
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
} else {
|
||||
elmToMove = oldCh[idxInOld];
|
||||
if (elmToMove.sel !== newStartVnode.sel) {
|
||||
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm as Node);
|
||||
} else {
|
||||
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
|
||||
oldCh[idxInOld] = undefined as any;
|
||||
api.insertBefore(parentElm, (elmToMove.elm as Node), oldStartVnode.elm as Node);
|
||||
}
|
||||
newStartVnode = newCh[++newStartIdx];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
|
||||
if (oldStartIdx > oldEndIdx) {
|
||||
before = newCh[newEndIdx+1] == null ? null : newCh[newEndIdx+1].elm;
|
||||
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
|
||||
} else {
|
||||
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
|
||||
let i: any, hook: any;
|
||||
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
const elm = vnode.elm = (oldVnode.elm as Node);
|
||||
let oldCh = oldVnode.children;
|
||||
let ch = vnode.children;
|
||||
if (oldVnode === vnode) return;
|
||||
if (vnode.data !== undefined) {
|
||||
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
|
||||
i = vnode.data.hook;
|
||||
if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
|
||||
}
|
||||
if (isUndef(vnode.text)) {
|
||||
if (isDef(oldCh) && isDef(ch)) {
|
||||
if (oldCh !== ch) updateChildren(elm, oldCh as Array<VNode>, ch as Array<VNode>, insertedVnodeQueue);
|
||||
} else if (isDef(ch)) {
|
||||
if (isDef(oldVnode.text)) api.setTextContent(elm, '');
|
||||
addVnodes(elm, null, ch as Array<VNode>, 0, (ch as Array<VNode>).length - 1, insertedVnodeQueue);
|
||||
} else if (isDef(oldCh)) {
|
||||
removeVnodes(elm, oldCh as Array<VNode>, 0, (oldCh as Array<VNode>).length - 1);
|
||||
} else if (isDef(oldVnode.text)) {
|
||||
api.setTextContent(elm, '');
|
||||
}
|
||||
} else if (oldVnode.text !== vnode.text) {
|
||||
if (isDef(oldCh)) {
|
||||
removeVnodes(elm, oldCh as Array<VNode>, 0, (oldCh as Array<VNode>).length - 1);
|
||||
}
|
||||
api.setTextContent(elm, vnode.text as string);
|
||||
}
|
||||
if (isDef(hook) && isDef(i = hook.postpatch)) {
|
||||
i(oldVnode, vnode);
|
||||
}
|
||||
}
|
||||
|
||||
return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
|
||||
let i: number, elm: Node, parent: Node;
|
||||
const insertedVnodeQueue: VNodeQueue = [];
|
||||
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
|
||||
|
||||
if (!isVnode(oldVnode)) {
|
||||
oldVnode = emptyNodeAt(oldVnode);
|
||||
}
|
||||
|
||||
if (sameVnode(oldVnode, vnode)) {
|
||||
patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
||||
} else {
|
||||
elm = oldVnode.elm as Node;
|
||||
parent = api.parentNode(elm);
|
||||
|
||||
createElm(vnode, insertedVnodeQueue);
|
||||
|
||||
if (parent !== null) {
|
||||
api.insertBefore(parent, vnode.elm as Node, api.nextSibling(elm));
|
||||
removeVnodes(parent, [oldVnode], 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
for (i = 0; i < insertedVnodeQueue.length; ++i) {
|
||||
(((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(insertedVnodeQueue[i]);
|
||||
}
|
||||
for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
|
||||
return vnode;
|
||||
};
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import {VNode, VNodeData} from './vnode';
|
||||
import {h} from './h';
|
||||
|
||||
export interface ThunkData extends VNodeData {
|
||||
fn: () => VNode;
|
||||
args: Array<any>;
|
||||
}
|
||||
|
||||
export interface Thunk extends VNode {
|
||||
data: ThunkData;
|
||||
}
|
||||
|
||||
export interface ThunkFn {
|
||||
(sel: string, fn: Function, args: Array<any>): Thunk;
|
||||
(sel: string, key: any, fn: Function, args: Array<any>): Thunk;
|
||||
}
|
||||
|
||||
function copyToThunk(vnode: VNode, thunk: VNode): void {
|
||||
thunk.elm = vnode.elm;
|
||||
(vnode.data as VNodeData).fn = (thunk.data as VNodeData).fn;
|
||||
(vnode.data as VNodeData).args = (thunk.data as VNodeData).args;
|
||||
thunk.data = vnode.data;
|
||||
thunk.children = vnode.children;
|
||||
thunk.text = vnode.text;
|
||||
thunk.elm = vnode.elm;
|
||||
}
|
||||
|
||||
function init(thunk: VNode): void {
|
||||
const cur = thunk.data as VNodeData;
|
||||
const vnode = (cur.fn as any).apply(undefined, cur.args);
|
||||
copyToThunk(vnode, thunk);
|
||||
}
|
||||
|
||||
function prepatch(oldVnode: VNode, thunk: VNode): void {
|
||||
let i: number, old = oldVnode.data as VNodeData, cur = thunk.data as VNodeData;
|
||||
const oldArgs = old.args, args = cur.args;
|
||||
if (old.fn !== cur.fn || (oldArgs as any).length !== (args as any).length) {
|
||||
copyToThunk((cur.fn as any).apply(undefined, args), thunk);
|
||||
return;
|
||||
}
|
||||
for (i = 0; i < (args as any).length; ++i) {
|
||||
if ((oldArgs as any)[i] !== (args as any)[i]) {
|
||||
copyToThunk((cur.fn as any).apply(undefined, args), thunk);
|
||||
return;
|
||||
}
|
||||
}
|
||||
copyToThunk(oldVnode, thunk);
|
||||
}
|
||||
|
||||
export const thunk = function thunk(sel: string, key?: any, fn?: any, args?: any): VNode {
|
||||
if (args === undefined) {
|
||||
args = fn;
|
||||
fn = key;
|
||||
key = undefined;
|
||||
}
|
||||
return h(sel, {
|
||||
key: key,
|
||||
hook: {init: init, prepatch: prepatch},
|
||||
fn: fn,
|
||||
args: args
|
||||
});
|
||||
} as ThunkFn;
|
||||
|
||||
export default thunk;
|
||||
@@ -1,39 +0,0 @@
|
||||
import vnode, {VNode} from './vnode';
|
||||
import htmlDomApi, {DOMAPI} from './htmldomapi';
|
||||
|
||||
export function toVNode(node: Node, domApi?: DOMAPI): VNode {
|
||||
const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
|
||||
let text: string;
|
||||
if (api.isElement(node)) {
|
||||
const id = node.id ? '#' + node.id : '';
|
||||
const cn = node.getAttribute('class');
|
||||
const c = cn ? '.' + cn.split(' ').join('.') : '';
|
||||
const sel = api.tagName(node).toLowerCase() + id + c;
|
||||
const attrs: any = {};
|
||||
const children: Array<VNode> = [];
|
||||
let name: string;
|
||||
let i: number, n: number;
|
||||
const elmAttrs = node.attributes;
|
||||
const elmChildren = node.childNodes;
|
||||
for (i = 0, n = elmAttrs.length; i < n; i++) {
|
||||
name = elmAttrs[i].nodeName;
|
||||
if (name !== 'id' && name !== 'class') {
|
||||
attrs[name] = elmAttrs[i].nodeValue;
|
||||
}
|
||||
}
|
||||
for (i = 0, n = elmChildren.length; i < n; i++) {
|
||||
children.push(toVNode(elmChildren[i], domApi));
|
||||
}
|
||||
return vnode(sel, {attrs}, children, undefined, node);
|
||||
} else if (api.isText(node)) {
|
||||
text = api.getTextContent(node) as string;
|
||||
return vnode(undefined, undefined, undefined, text, node);
|
||||
} else if (api.isComment(node)) {
|
||||
text = api.getTextContent(node) as string;
|
||||
return vnode('!', {}, [], text, node as any);
|
||||
} else {
|
||||
return vnode('', {}, [], undefined, node as any);
|
||||
}
|
||||
}
|
||||
|
||||
export default toVNode;
|
||||
@@ -1,49 +0,0 @@
|
||||
import {Hooks} from './hooks';
|
||||
import {AttachData} from './helpers/attachto'
|
||||
import {VNodeStyle} from './modules/style'
|
||||
import {On} from './modules/eventlisteners'
|
||||
import {Attrs} from './modules/attributes'
|
||||
import {Classes} from './modules/class'
|
||||
import {Props} from './modules/props'
|
||||
import {Dataset} from './modules/dataset'
|
||||
import {Hero} from './modules/hero'
|
||||
|
||||
export type Key = string | number;
|
||||
|
||||
export interface VNode {
|
||||
sel: string | undefined;
|
||||
data: VNodeData | undefined;
|
||||
children: Array<VNode | string> | undefined;
|
||||
elm: Node | undefined;
|
||||
text: string | undefined;
|
||||
key: Key | undefined;
|
||||
}
|
||||
|
||||
export interface VNodeData {
|
||||
props?: Props;
|
||||
attrs?: Attrs;
|
||||
class?: Classes;
|
||||
style?: VNodeStyle;
|
||||
dataset?: Dataset;
|
||||
on?: On;
|
||||
hero?: Hero;
|
||||
attachData?: AttachData;
|
||||
hook?: Hooks;
|
||||
key?: Key;
|
||||
ns?: string; // for SVGs
|
||||
fn?: () => VNode; // for thunks
|
||||
args?: Array<any>; // for thunks
|
||||
[key: string]: any; // for any other 3rd party module
|
||||
}
|
||||
|
||||
export function vnode(sel: string | undefined,
|
||||
data: any | undefined,
|
||||
children: Array<VNode | string> | undefined,
|
||||
text: string | undefined,
|
||||
elm: Element | Text | undefined): VNode {
|
||||
let key = data === undefined ? undefined : data.key;
|
||||
return {sel: sel, data: data, children: children,
|
||||
text: text, elm: elm, key: key};
|
||||
}
|
||||
|
||||
export default vnode;
|
||||
@@ -1,98 +0,0 @@
|
||||
var assert = require('assert');
|
||||
var snabbdom = require('../snabbdom');
|
||||
|
||||
var patch = snabbdom.init([]);
|
||||
var attachTo = require('../helpers/attachto').default;
|
||||
var h = require('../h').default;
|
||||
|
||||
describe('attachTo', function() {
|
||||
var elm, vnode0;
|
||||
beforeEach(function() {
|
||||
elm = document.createElement('div');
|
||||
vnode0 = elm;
|
||||
});
|
||||
it('adds element to target', function() {
|
||||
var vnode1 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
attachTo(elm, h('div#attached', 'Test')),
|
||||
]),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.equal(elm.children.length, 2);
|
||||
});
|
||||
it('updates element at target', function() {
|
||||
var vnode1 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
attachTo(elm, h('div#attached', 'First text')),
|
||||
]),
|
||||
]);
|
||||
var vnode2 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
attachTo(elm, h('div#attached', 'New text')),
|
||||
]),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.equal(elm.children[0].innerHTML, 'First text');
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
assert.equal(elm.children[0].innerHTML, 'New text');
|
||||
});
|
||||
it('element can be inserted before modal', function() {
|
||||
var vnode1 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
attachTo(elm, h('div#attached', 'Text')),
|
||||
]),
|
||||
]);
|
||||
var vnode2 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
h('div', 'A new element'),
|
||||
attachTo(elm, h('div#attached', 'Text')),
|
||||
]),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.equal(elm.children[0].innerHTML, 'Text');
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
assert.equal(elm.children[0].innerHTML, 'Text');
|
||||
});
|
||||
it('removes element at target', function() {
|
||||
var vnode1 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
attachTo(elm, h('div#attached', 'First text')),
|
||||
]),
|
||||
]);
|
||||
var vnode2 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
]),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.equal(elm.children[0].innerHTML, 'First text');
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
assert.equal(elm.children.length, 1);
|
||||
});
|
||||
it('remove hook receives real element', function() {
|
||||
function rm(vnode, cb) {
|
||||
assert.equal(vnode.elm.tagName, 'DIV');
|
||||
assert.equal(vnode.elm.innerHTML, 'First text');
|
||||
cb();
|
||||
}
|
||||
var vnode1 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
attachTo(elm, h('div#attached', {hook: {remove: rm}}, 'First text')),
|
||||
]),
|
||||
]);
|
||||
var vnode2 = h('div', [
|
||||
h('div#wrapper', [
|
||||
h('div', 'Some element'),
|
||||
]),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
});
|
||||
});
|
||||
@@ -1,97 +0,0 @@
|
||||
var assert = require('assert');
|
||||
|
||||
var snabbdom = require('../snabbdom');
|
||||
var patch = snabbdom.init([
|
||||
require('../modules/attributes').default,
|
||||
]);
|
||||
var h = require('../h').default;
|
||||
|
||||
describe('attributes', function() {
|
||||
var elm, vnode0;
|
||||
beforeEach(function() {
|
||||
elm = document.createElement('div');
|
||||
vnode0 = elm;
|
||||
});
|
||||
it('have their provided values', function() {
|
||||
var vnode1 = h('div', {attrs: {href: '/foo', minlength: 1, selected: true, disabled: false}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.getAttribute('href'), '/foo');
|
||||
assert.strictEqual(elm.getAttribute('minlength'), '1');
|
||||
assert.strictEqual(elm.hasAttribute('selected'), true);
|
||||
assert.strictEqual(elm.getAttribute('selected'), '');
|
||||
assert.strictEqual(elm.hasAttribute('disabled'), false);
|
||||
});
|
||||
it('can be memoized', function() {
|
||||
var cachedAttrs = {href: '/foo', minlength: 1, selected: true};
|
||||
var vnode1 = h('div', {attrs: cachedAttrs});
|
||||
var vnode2 = h('div', {attrs: cachedAttrs});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.getAttribute('href'), '/foo');
|
||||
assert.strictEqual(elm.getAttribute('minlength'), '1');
|
||||
assert.strictEqual(elm.getAttribute('selected'), '');
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
assert.strictEqual(elm.getAttribute('href'), '/foo');
|
||||
assert.strictEqual(elm.getAttribute('minlength'), '1');
|
||||
assert.strictEqual(elm.getAttribute('selected'), '');
|
||||
});
|
||||
it('are not omitted when falsy values are provided', function() {
|
||||
var vnode1 = h('div', {attrs: {href: null, minlength: 0, value: '', title:'undefined'}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.getAttribute('href'), 'null');
|
||||
assert.strictEqual(elm.getAttribute('minlength'), '0');
|
||||
assert.strictEqual(elm.getAttribute('value'), '');
|
||||
assert.strictEqual(elm.getAttribute('title'), 'undefined');
|
||||
});
|
||||
it('are set correctly when namespaced', function() {
|
||||
var vnode1 = h('div', {attrs: {'xlink:href': '#foo'}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.getAttributeNS('http://www.w3.org/1999/xlink', 'href'), '#foo');
|
||||
});
|
||||
it('should not touch class nor id fields', function() {
|
||||
elm = document.createElement('div');
|
||||
elm.id = 'myId';
|
||||
elm.className = 'myClass';
|
||||
vnode0 = elm;
|
||||
var vnode1 = h('div#myId.myClass', {attrs: {}}, ['Hello']);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.tagName, 'DIV');
|
||||
assert.strictEqual(elm.id, 'myId');
|
||||
assert.strictEqual(elm.className, 'myClass');
|
||||
assert.strictEqual(elm.textContent, 'Hello');
|
||||
});
|
||||
describe('boolean attribute', function() {
|
||||
it('is present and empty string if the value is truthy', function() {
|
||||
var vnode1 = h('div', {attrs: {required: true, readonly: 1, noresize: 'truthy'}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.hasAttribute('required'), true);
|
||||
assert.strictEqual(elm.getAttribute('required'), '');
|
||||
assert.strictEqual(elm.hasAttribute('readonly'), true);
|
||||
assert.strictEqual(elm.getAttribute('readonly'), '1');
|
||||
assert.strictEqual(elm.hasAttribute('noresize'), true);
|
||||
assert.strictEqual(elm.getAttribute('noresize'), 'truthy');
|
||||
});
|
||||
it('is omitted if the value is false', function() {
|
||||
var vnode1 = h('div', {attrs: {required: false}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.hasAttribute('required'), false);
|
||||
assert.strictEqual(elm.getAttribute('required'), null);
|
||||
});
|
||||
it('is not omitted if the value is falsy but casted to string', function() {
|
||||
var vnode1 = h('div', {attrs: {readonly: 0, noresize: null}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.getAttribute('readonly'), '0');
|
||||
assert.strictEqual(elm.getAttribute('noresize'), 'null');
|
||||
});
|
||||
});
|
||||
describe('Object.prototype property', function() {
|
||||
it('is not considered as a boolean attribute and shouldn\'t be omitted', function() {
|
||||
var vnode1 = h('div', {attrs: {constructor: true}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.strictEqual(elm.hasAttribute('constructor'), true);
|
||||
assert.strictEqual(elm.getAttribute('constructor'), '');
|
||||
var vnode2 = h('div', {attrs: {constructor: false}});
|
||||
elm = patch(vnode0, vnode2).elm;
|
||||
assert.strictEqual(elm.hasAttribute('constructor'), false);
|
||||
});
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,56 +0,0 @@
|
||||
var assert = require('assert');
|
||||
var fakeRaf = require('fake-raf');
|
||||
|
||||
var snabbdom = require('../snabbdom');
|
||||
fakeRaf.use();
|
||||
var patch = snabbdom.init([
|
||||
require('../modules/dataset').default,
|
||||
]);
|
||||
var h = require('../h').default;
|
||||
|
||||
describe('dataset', function() {
|
||||
var elm, vnode0;
|
||||
beforeEach(function() {
|
||||
elm = document.createElement('div');
|
||||
vnode0 = elm;
|
||||
});
|
||||
it('is set on initial element creation', function() {
|
||||
elm = patch(vnode0, h('div', {dataset: {foo: 'foo'}})).elm;
|
||||
assert.equal(elm.dataset.foo, 'foo');
|
||||
});
|
||||
it('updates dataset', function() {
|
||||
var vnode1 = h('i', {dataset: {foo: 'foo', bar: 'bar'}});
|
||||
var vnode2 = h('i', {dataset: {baz: 'baz'}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.equal(elm.dataset.foo, 'foo');
|
||||
assert.equal(elm.dataset.bar, 'bar');
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
assert.equal(elm.dataset.baz, 'baz');
|
||||
assert.equal(elm.dataset.foo, undefined);
|
||||
});
|
||||
it('can be memoized', function() {
|
||||
var cachedDataset = {foo: 'foo', bar: 'bar'};
|
||||
var vnode1 = h('i', {dataset: cachedDataset});
|
||||
var vnode2 = h('i', {dataset: cachedDataset});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
assert.equal(elm.dataset.foo, 'foo');
|
||||
assert.equal(elm.dataset.bar, 'bar');
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
assert.equal(elm.dataset.foo, 'foo');
|
||||
assert.equal(elm.dataset.bar, 'bar');
|
||||
});
|
||||
it('handles string conversions', function() {
|
||||
var vnode1 = h('i', {dataset: {empty: '', dash: '-', dashed:'foo-bar', camel: 'fooBar', integer:0, float:0.1}});
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
|
||||
assert.equal(elm.dataset.empty, '');
|
||||
assert.equal(elm.dataset.dash, '-');
|
||||
assert.equal(elm.dataset.dashed, 'foo-bar');
|
||||
assert.equal(elm.dataset.camel, 'fooBar');
|
||||
assert.equal(elm.dataset.integer, '0');
|
||||
assert.equal(elm.dataset.float, '0.1');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
fakeRaf.restore();
|
||||
@@ -1,178 +0,0 @@
|
||||
var assert = require('assert');
|
||||
|
||||
var snabbdom = require('../snabbdom');
|
||||
var patch = snabbdom.init([
|
||||
require('../modules/eventlisteners.js').default,
|
||||
]);
|
||||
var h = require('../h').default;
|
||||
|
||||
describe('event listeners', function() {
|
||||
var elm, vnode0;
|
||||
beforeEach(function() {
|
||||
elm = document.createElement('div');
|
||||
vnode0 = elm;
|
||||
});
|
||||
it('attaches click event handler to element', function() {
|
||||
var result = [];
|
||||
function clicked(ev) { result.push(ev); }
|
||||
var vnode = h('div', {on: {click: clicked}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode).elm;
|
||||
elm.click();
|
||||
assert.equal(1, result.length);
|
||||
});
|
||||
it('does not attach new listener', function() {
|
||||
var result = [];
|
||||
//function clicked(ev) { result.push(ev); }
|
||||
var vnode1 = h('div', {on: {click: function(ev) { result.push(1); }}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
var vnode2 = h('div', {on: {click: function(ev) { result.push(2); }}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
elm.click();
|
||||
assert.deepEqual(result, [1, 2]);
|
||||
});
|
||||
it('does calls handler for function in array', function() {
|
||||
var result = [];
|
||||
function clicked(ev) { result.push(ev); }
|
||||
var vnode = h('div', {on: {click: [clicked, 1]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode).elm;
|
||||
elm.click();
|
||||
assert.deepEqual(result, [1]);
|
||||
});
|
||||
it('handles changed value in array', function() {
|
||||
var result = [];
|
||||
function clicked(ev) { result.push(ev); }
|
||||
var vnode1 = h('div', {on: {click: [clicked, 1]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
var vnode2 = h('div', {on: {click: [clicked, 2]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
var vnode3 = h('div', {on: {click: [clicked, 3]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
elm.click();
|
||||
elm = patch(vnode2, vnode3).elm;
|
||||
elm.click();
|
||||
assert.deepEqual(result, [1, 2, 3]);
|
||||
});
|
||||
it('handles changed several values in array', function() {
|
||||
var result = [];
|
||||
function clicked() { result.push([].slice.call(arguments, 0, arguments.length-2)); }
|
||||
var vnode1 = h('div', {on: {click: [clicked, 1, 2, 3]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
var vnode2 = h('div', {on: {click: [clicked, 1, 2]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
var vnode3 = h('div', {on: {click: [clicked, 2, 3]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
elm.click();
|
||||
elm = patch(vnode2, vnode3).elm;
|
||||
elm.click();
|
||||
assert.deepEqual(result, [[1, 2, 3], [1, 2], [2, 3]]);
|
||||
});
|
||||
it('detach attached click event handler to element', function() {
|
||||
var result = [];
|
||||
function clicked(ev) { result.push(ev); }
|
||||
var vnode1 = h('div', {on: {click: clicked}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
assert.equal(1, result.length);
|
||||
var vnode2 = h('div', {on: {}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
elm.click();
|
||||
assert.equal(1, result.length);
|
||||
});
|
||||
it('multiple event handlers for same event on same element', function() {
|
||||
var called = 0;
|
||||
function clicked(ev, vnode) {
|
||||
++called;
|
||||
// Check that the first argument is an event
|
||||
assert.equal(true, 'target' in ev);
|
||||
// Check that the second argument was a vnode
|
||||
assert.equal(vnode.sel, 'div');
|
||||
}
|
||||
var vnode1 = h('div', {on: {click: [[clicked], [clicked], [clicked]]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
assert.equal(3, called);
|
||||
var vnode2 = h('div', {on: {click: [[clicked], [clicked]]}}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode1, vnode2).elm;
|
||||
elm.click();
|
||||
assert.equal(5, called);
|
||||
});
|
||||
it('access to virtual node in event handler', function() {
|
||||
var result = [];
|
||||
function clicked(ev, vnode) { result.push(this); result.push(vnode); }
|
||||
var vnode1 = h('div', {on: {click: clicked }}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
assert.equal(2, result.length);
|
||||
assert.equal(vnode1, result[0]);
|
||||
assert.equal(vnode1, result[1]);
|
||||
}),
|
||||
it('access to virtual node in event handler with argument', function() {
|
||||
var result = [];
|
||||
function clicked(arg, ev, vnode) { result.push(this); result.push(vnode); }
|
||||
var vnode1 = h('div', {on: {click: [clicked, 1] }}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
assert.equal(2, result.length);
|
||||
assert.equal(vnode1, result[0]);
|
||||
assert.equal(vnode1, result[1]);
|
||||
}),
|
||||
it('access to virtual node in event handler with arguments', function() {
|
||||
var result = [];
|
||||
function clicked(arg1, arg2, ev, vnode) { result.push(this); result.push(vnode); }
|
||||
var vnode1 = h('div', {on: {click: [clicked, 1, "2"] }}, [
|
||||
h('a', 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
assert.equal(2, result.length);
|
||||
assert.equal(vnode1, result[0]);
|
||||
assert.equal(vnode1, result[1]);
|
||||
});
|
||||
it('shared handlers in parent and child nodes', function() {
|
||||
var result = [];
|
||||
var sharedHandlers = {
|
||||
click: function(ev) { result.push(ev); }
|
||||
};
|
||||
var vnode1 = h('div', {on: sharedHandlers}, [
|
||||
h('a', {on: sharedHandlers}, 'Click my parent'),
|
||||
]);
|
||||
elm = patch(vnode0, vnode1).elm;
|
||||
elm.click();
|
||||
assert.equal(1, result.length);
|
||||
elm.firstChild.click();
|
||||
assert.equal(3, result.length);
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user