├── examples
└── es5_safety
│ ├── samples
│ ├── gift
│ ├── gift.html
│ ├── this.html
│ ├── function.html
│ ├── cat.html
│ └── date.html
│ ├── wjb.jpg
│ ├── gaotie.jpg
│ └── index.html
├── src
├── common.css
├── play.css
├── projection.css
└── app.js
└── README.md
/examples/es5_safety/samples/gift:
--------------------------------------------------------------------------------
1 | 奖品是：兲朝开往天国的高铁单程票一套！亲！
--------------------------------------------------------------------------------
/examples/es5_safety/wjb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hax/Slides/HEAD/examples/es5_safety/wjb.jpg
--------------------------------------------------------------------------------
/examples/es5_safety/gaotie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hax/Slides/HEAD/examples/es5_safety/gaotie.jpg
--------------------------------------------------------------------------------
/examples/es5_safety/samples/gift.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hax/Slides/HEAD/examples/es5_safety/samples/gift.html
--------------------------------------------------------------------------------
/src/common.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Droid Sans', '文泉驿微米黑', '微软雅黑', 'Arial', sans-serif;
3 | line-height: 1.75;
4 | margin-bottom:
5 | }
6 |
7 | hgroup {
8 | text-align: center;
9 | }
10 | header dl {
11 | float: right;
12 | }
13 | header, footer, section {
14 | margin-bottom: 3em;
15 | }
16 |
17 | header::after, footer::after, section::after {
18 | display: block;
19 | content: '';
20 | clear: both;
21 | }
22 |
23 | .note {
24 | text-indent: 2.5em;
25 | }
26 |
27 |
--------------------------------------------------------------------------------
/examples/es5_safety/samples/this.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
24 |
25 |
--------------------------------------------------------------------------------
/src/play.css:
--------------------------------------------------------------------------------
1 |
2 | header, section, footer {
3 | position: fixed;
4 | left: 0; right: 0; top: 0; bottom: 0;
5 | margin: 0;
6 | border: none;
7 | padding: 0 2% 3em 2%;
8 | overflow: auto;
9 | visibility: hidden;
10 | }
11 | .current {
12 | visibility: visible;
13 |
14 | -webkit-animation-name: fade-in;
15 | -webkit-animation-duration: 0.5s;
16 | }
17 | .past {
18 | -webkit-animation-name: fade-out;
19 | -webkit-animation-duration: 0.25s;
20 | }
21 |
22 | @-webkit-keyframes fade-in {
23 | from {
24 | opacity: 0;
25 | } to {
26 | opacity: 1;
27 | }
28 | }
29 | @-webkit-keyframes fade-out {
30 | from {
31 | visibility: visible;
32 | opacity: 1;
33 | } to {
34 | opacity: 0;
35 | }
36 | }
--------------------------------------------------------------------------------
/src/projection.css:
--------------------------------------------------------------------------------
1 | html {
2 | margin: 8px auto 0 auto;
3 | padding: 0;
4 | width: 95%;
5 | }
6 |
7 | body {
8 | background: black;
9 | color: white;
10 | font-size: 28px;
11 | margin: 0;
12 | padding: 0;
13 | }
14 |
15 | header, footer, section {
16 | min-width: 640px;
17 | min-height: 480px;
18 | border: 1px dotted #ccc;
19 | margin: 0 auto 64px auto;
20 | padding: 0 32px;
21 | }
22 | section ul {
23 |
24 | }
25 |
26 | a {
27 | color: inherit;
28 | }
29 | figure img {
30 | max-width: 100%;
31 | }
32 |
33 | footer address {
34 | float: right;
35 | }
36 |
37 | footer dt {
38 | display: run-in;
39 | padding-right: 0.333em;
40 | }
41 | footer dt::after {
42 | content: ': '
43 | }
44 |
45 | @media (min-width: 1004px) {
46 | body {
47 | font-size: 32px;
48 | }
49 | }
50 |
51 | @media (min-width: 1260px) {
52 | body {
53 | font-size: 36px;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/examples/es5_safety/samples/function.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/examples/es5_safety/samples/cat.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
19 |
20 |
21 |
22 |
23 |
47 |
48 |
--------------------------------------------------------------------------------
/examples/es5_safety/samples/date.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
17 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML5 Slides framework #
2 |
3 | Just a simple slides framework built on HTML5 technologies
4 |
5 | ### How to apply this framework ###
6 |
7 | * Write your slides document
8 |
9 | * using HTML5 structure as usual
10 | * But remember each section/header/footer element will be treat as one slide
11 | * Currently nest sections are not support well, improvement in plan
12 |
13 | * Add these codes to your head of document:
14 |
15 | // change /Slides to your path
16 | // or http://raw.github.com/hax/Slides/master/src/ if you just want to use the latest version
17 |
18 |
19 |
20 |
21 |
22 | * Play slides
23 |
24 | * Press F11 (or any key which switch to fullscreen mode in your browser) to start/stop playing slides
25 | * In playing mode, press right arrow / pagedown to next slide and left arrow /pageup to previous slide
26 | * Browser back/forward button also works
27 |
28 | ### Browser Compatibility ###
29 |
30 | This is a very new framework which only be tested under recent Chrome/Firefox,
31 | but it should work on any HTML5 browser.
32 |
33 |
34 | HTML5 API this framework used:
35 |
36 | * document.querySelectorAll
37 |
38 | * Element.classList (compatibility patch in plan)
39 |
40 | * popstate event (I plan to add compatibility patch for old browsers which not support popstate event in near future)
41 |
42 | * window.fullScreen / fullscreenchange event (Mozilla-only API but a compatibility patch included)
43 |
44 | * document.enableStyleSheetsForSet (CSSOM API, compatibility patch included though the implementation is not correct as spec)
45 |
46 |
47 | CSS features this framework used:
48 |
49 | * media query (min-width)
50 |
51 | * css3 animation (WebKit extension, so u may not see animation in non-WebKit browsers)
52 |
53 |
54 | Note: In general, all compatibility patches will be factor out and move to another project https://github.com/hax/homemade-html5 in the future.
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | new function () {
4 |
5 | function fireSimpleEvent(type, target, option) {
6 | if (!target) target = document
7 | if (!option) option = {}
8 | var evt = document.createEvent('Event')
9 | evt.initEvent(type, !!option.bubbles, !!option.cancelable)
10 | return target.dispatchEvent(evt)
11 | }
12 |
13 | if (!('fullScreen' in window)) Object.defineProperty(window, 'fullScreen', {
14 | get: function() {
15 | /*console.debug(screen.width, screen.height,
16 | screen.availWidth, screen.availHeight,
17 | window.outerWidth, window.outerHeight,
18 | window.innerWidth, window.innerHeight)*/
19 | return (screen.width == window.outerWidth && screen.height == window.outerHeight)
20 | }
21 | })
22 | var _fullScreen = window.fullScreen
23 | if (!('onfullscreenchange' in window)) window.addEventListener('resize', function() {
24 | var f = window.fullScreen
25 | if (f != _fullScreen) {
26 | _fullScreen = f
27 | fireSimpleEvent('fullscreenchange', document, {bubbles:true})
28 | }
29 | }, false)
30 |
31 | if (!document.enableStyleSheetsForSet) document.enableStyleSheetsForSet = function(name) {
32 | if (name != null) {
33 | var meta = document.querySelector('meta[http-equiv="default-style"]')
34 | if (!meta) {
35 | meta = document.createElement('meta')
36 | meta.httpEquiv = 'default-style'
37 | document.head.appendChild(meta)
38 | }
39 | meta.content = name
40 | }
41 | }
42 |
43 | var current
44 |
45 | window.addEventListener('DOMContentLoaded', reset, false)
46 | window.addEventListener('fullscreenchange', reset, false)
47 | //window.addEventListener('hashchange', reset, false)
48 | window.addEventListener('popstate', function(evt) {
49 | console.log('popstate', evt.state)
50 | var index = evt.state ? evt.state.index : getSlideIndex()
51 | if (index && current != index) gotoSlide(index)
52 | }, false)
53 |
54 | function reset(evt) {
55 | console.debug(evt.type)
56 |
57 | if (window.fullScreen) {
58 | playSlides()
59 | } else {
60 | stopSlides()
61 | }
62 |
63 | }
64 |
65 | function getSlideIndex() {
66 | return parseInt(location.hash.slice(1))
67 | }
68 |
69 | function playSlides() {
70 | console.debug('play')
71 |
72 | document.enableStyleSheetsForSet('slides')
73 | window.addEventListener('keydown', keyboardHandler, false)
74 | window.addEventListener('click', mouseHandler, false)
75 |
76 | gotoSlide(current != null ? current : getSlideIndex() || 0)
77 | }
78 | function stopSlides() {
79 | console.debug('stop')
80 |
81 | var list, i
82 | list = document.querySelectorAll('.current')
83 | for (i = 0; i < list.length; i++) list[i].classList.remove('current')
84 | list = document.querySelectorAll('.past')
85 | for (i = 0; i < list.length; i++) list[i].classList.remove('past')
86 |
87 | document.enableStyleSheetsForSet('')
88 | window.removeEventListener('keydown', keyboardHandler, false)
89 | window.removeEventListener('click', mouseHandler, false)
90 | }
91 |
92 | function keyboardHandler(evt) {
93 | var key = evt.key || evt.keyIdentifier || keyCodeToName(evt.keyCode)
94 | switch (key) {
95 | case 'PageUp': case 'Left':
96 | prev()
97 | break
98 | case 'PageDown': case 'Right':
99 | next()
100 | break
101 | case 'Home':
102 | first()
103 | break
104 | case 'End':
105 | last()
106 | break
107 | }
108 |
109 | }
110 | function mouseHandler(evt) {
111 | next()
112 | }
113 |
114 | function prev() {
115 | if (current > 0) go(current - 1)
116 | }
117 | function next() {
118 | go(current + 1)
119 | }
120 | function first() {
121 | go(0)
122 | }
123 | function last() {
124 | go(-1)
125 | }
126 | function go(n) {
127 | var s = gotoSlide(n)
128 | if (s) {
129 | var title = s.title
130 | if (!title) {
131 | var h = s.getElementsByTagName('h1')[0]
132 | title = h.title || h.textContent
133 | }
134 | //console.debug('go', n, title)
135 | history.pushState({index:n}, title, '#' + n)
136 | }
137 | }
138 | function gotoSlide(n) {
139 | console.debug('slide', current, '->', n)
140 | var slides = getSlides()
141 | if (n < 0) n += slides.length
142 | if (n >= 0 && n < slides.length) {
143 | var s = document.querySelector('.current')
144 | if (s) {
145 | s.classList.add('past')
146 | s.classList.remove('current')
147 | console.debug(s.className)
148 | }
149 | s = slides[n]
150 | s.classList.add('current')
151 | s.classList.remove('past')
152 | current = n
153 | console.debug('current slide is', current)
154 | return slides[n]
155 | } else {
156 | console.debug('failed to goto slide', n)
157 | return null
158 | }
159 | }
160 |
161 | function getSlides() {
162 | return document.querySelectorAll('header, section, footer, .slide')
163 | }
164 |
165 | var KeyName = {
166 | 33: 'PageUp',
167 | 34: 'PageDown',
168 | 35: 'End',
169 | 36: 'Home',
170 | 37: 'Left',
171 | 38: 'Up',
172 | 39: 'Right',
173 | 40: 'Down',
174 | }
175 | function keyCodeToName(code) {
176 | console.debug('key code:', code)
177 | return KeyName[code] || 'Unknown'
178 | }
179 | }
--------------------------------------------------------------------------------
/examples/es5_safety/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ES5 —Improve the Safety of JavaScript
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | ECMAScript 5
26 | — Improve the Safety of JavaScript
27 |
28 |
29 | - 作者
30 |
- 贺师俊 (hax)
31 |
- 最后更新时间
32 |
-
33 |
34 |
35 |
36 |
37 | ECMAScript的发展方向
38 |
39 | - API扩展和标准化：JSON、Array.protoype.forEach/map/filter...
40 |
- 通用化，可实现平台对象：get/set accessor、Object.defineProperty、etc.
41 |
- 适应于PITL（programming-in-the-large）
42 |
43 | JavaScript的未来方向之观察
44 |
45 |
46 |
47 | 什么是 Programming in the Large
48 |
49 | - Wikipedia定义
50 |
- 不是一个人
51 |
- 不是一两天
52 |
- 需要多人的协作开发或较长时期的维护
53 |
54 |
55 |
56 |
57 | JavaScript传统上是PITS的语言
58 |
59 | - 设计为一门依赖于host环境的脚本语言
60 |
- 无内置module/namespace
61 |
- 缺少较全面的标准API库
62 |
- 缺乏各种invariants约束的能力
63 |
- 残缺的OO
64 |
65 |
66 |
67 |
71 |
72 |
82 |
83 |
86 |
87 |
96 |
97 |
98 |
99 | 对于PITL，开发不是越快越好。要把安全放在第一位。失掉了安全，就失掉了可信度。
100 |
101 |
102 |
103 | 对我们的其他启示
104 |
116 |
117 |
118 |
119 | 对我们的其他启示
120 |
131 |
132 |
133 |
134 | 对我们的其他启示
135 |
156 |
157 |
158 |
159 | 对我们的其他启示
160 |
161 | - Module system: CommonJS / AMD
162 |
- OO system: Traits.js
163 |
- Type system:
164 |
170 |
171 |
172 |
173 |
174 |
199 |
200 |
201 |
202 |
--------------------------------------------------------------------------------
