Skip to content

Commit e5a787b

Browse files
Initial presentation ideas
0 parents  commit e5a787b

36 files changed

+802
-0
lines changed

.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["es2015", "react", "stage-0"],
3+
"env": {
4+
"development": {
5+
"presets": ["react-hmre"]
6+
}
7+
}
8+
}

.editorconfig

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# editorconfig.org
4+
5+
root = true
6+
7+
8+
[*]
9+
10+
# Change these settings to your own preference
11+
indent_style = space
12+
indent_size = 2
13+
14+
# We recommend you to keep these unchanged
15+
end_of_line = lf
16+
charset = utf-8
17+
trim_trailing_whitespace = true
18+
insert_final_newline = true
19+
20+
[*.md]
21+
trim_trailing_whitespace = false

.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
node_modules
3+
npm-debug.log
4+
dist
5+
out
6+
.idea

LICENSE

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2013
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9+
the Software, and to permit persons to whom the Software is furnished to do so,
10+
subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Template
2+
3+
This is a presentation template.
4+
5+
## Reference
6+
7+
The Spectacle core API is available at [https://github.com/FormidableLabs/spectacle/blob/master/README.markdown](https://github.com/FormidableLabs/spectacle/blob/master/README.markdown).
8+
9+
## Development
10+
11+
To start up the local server, run `npm start`
12+
13+
Open a browser and hit [http://localhost:3000](http://localhost:3000), and we are ready to roll
14+
15+
## Building & Deployment
16+
17+
Building the dist version of the project is as easy as running `npm run build`
18+
19+
If you want to deploy the slideshow to gh-pages, run `npm run deploy`

deploy.sh

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#!/usr/bin/env bash
2+
git checkout master
3+
npm run build
4+
exists=`git show-ref refs/heads/gh-pages`
5+
if [ -n "$exists" ]; then
6+
git branch -D gh-pages
7+
fi
8+
git branch -D gh-pages
9+
10+
git checkout --orphan gh-pages
11+
git add dist/* -f
12+
git commit -m "build files"
13+
git push -f origin gh-pages
14+
git checkout master

examples/Hello.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from "react";
2+
3+
export interface HelloProps { compiler: string; framework: string; }
4+
5+
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

examples/HelloClassic.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from "react";
2+
3+
export interface HelloProps { compiler: string; framework: string; }
4+
5+
// 'HelloProps' describes the shape of props.
6+
// State is never set so we use the 'undefined' type.
7+
export class Hello extends React.Component<HelloProps, undefined> {
8+
render() {
9+
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
10+
}
11+
}

examples/IComponent.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface IComponent {
2+
destroy: ()=>void
3+
show: ()=>void
4+
}

examples/SolarPopup.ts

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import {ModalBackground} from './ModalBackground'
2+
import {IComponent} from "vanilla-typescript"
3+
import {constants} from "./constants"
4+
import './SolarPopup.pcss'
5+
6+
/**
7+
* A Popup that can take any content
8+
*
9+
* Features
10+
* Closes in response to [ESC] keypress, submit events.
11+
* Adds modal background that fades in with CSS3 transitions
12+
* Popup itself slides in with CSS3 transitions
13+
*
14+
* @constructor
15+
*/
16+
export default class SolarPopup implements IComponent {
17+
destroyBoundWithThis = this.destroy.bind(this)
18+
modalBackground = new ModalBackground()
19+
private hostElement: HTMLElement
20+
private child: HTMLElement
21+
22+
constructor(child: HTMLElement) {
23+
this.child = child
24+
}
25+
26+
27+
/**
28+
* Shows
29+
* @param {Element} child we need to keep the reference to keep custom functionality in the child
30+
*/
31+
show() {
32+
33+
const tempElement:HTMLElement = document.createElement('DIV')
34+
35+
tempElement.innerHTML =
36+
`<article class='solar-popup' data-is-initialising="true">
37+
<a class='close'><!--&#x274c;-->&#x2716;</a>
38+
<div class="childContainer"></div>
39+
</article>`
40+
tempElement.querySelector(".childContainer").appendChild(this.child)
41+
42+
this.hostElement = <HTMLElement>tempElement.firstChild
43+
document.body.appendChild(this.hostElement)
44+
let currentWidth = window.getComputedStyle(document.querySelector("p"))
45+
46+
this.modalBackground.render()
47+
48+
setTimeout(() => {
49+
//this triggers a css change
50+
//let currentWidth = window.getComputedStyle(document.querySelector("p")) }, 50)
51+
this.hostElement.dataset["isInitialising"] = "false"
52+
})
53+
this.addListeners()
54+
}
55+
56+
addListeners() {
57+
const closeElement = this.hostElement.querySelector('a')
58+
closeElement.addEventListener('click', this.destroyBoundWithThis)
59+
this.hostElement.classList.remove('offscreen')
60+
61+
document.addEventListener('keyup', function (event) {
62+
if (event.keyCode === constants.KEYS.ESC) {
63+
this.destroyBoundWithThis()
64+
}
65+
}.bind(this))
66+
67+
this.hostElement.addEventListener('submit', function (event) {
68+
this.destroyBoundWithThis()
69+
event.preventDefault()
70+
}.bind(this))
71+
72+
73+
// handle the first child submit button click, close popup by default
74+
// this is a convention that gets popup to behave in sensible way
75+
const submitBtn = this.hostElement.querySelector('button[type="submit"]')
76+
if (submitBtn) {
77+
submitBtn.addEventListener("click", this.destroyBoundWithThis)
78+
}
79+
}
80+
81+
destroy() {
82+
//vistual indicator for this element and delegate to the modal
83+
this.hostElement.dataset["isDestructing"] = "true"
84+
this.modalBackground.destroy()
85+
setTimeout(function () {
86+
this.hostElement.parentElement.removeChild(this.hostElement)
87+
}.bind(this), constants.TRANSITION_TIMES)
88+
}
89+
}
90+
91+

0 commit comments

Comments
 (0)