├── .gitignore ├── LICENSE ├── README.md ├── TODO ├── appcache.manifest ├── build ├── build.sh ├── config.js ├── deploy.sh └── r.js ├── css ├── ctrl.css ├── design │ ├── default.css │ └── revert.css ├── editor.css ├── main.css ├── player.css ├── responsive-editor.css ├── responsive-player.css ├── sidebar.css ├── stage.css └── transitions.css ├── docs ├── demo │ ├── appcache.manifest │ ├── build.txt │ ├── css │ │ ├── ctrl.css │ │ ├── design │ │ │ ├── default.css │ │ │ └── revert.css │ │ ├── editor.css │ │ ├── main.css │ │ ├── player.css │ │ ├── responsive-editor.css │ │ ├── responsive-player.css │ │ ├── sidebar.css │ │ ├── stage.css │ │ └── transitions.css │ ├── docs │ │ ├── images │ │ │ ├── code.png │ │ │ ├── pattern.png │ │ │ ├── tar.png │ │ │ ├── top.png │ │ │ └── zip.png │ │ ├── index.html │ │ ├── javascripts │ │ │ └── script.js │ │ ├── params.json │ │ └── stylesheets │ │ │ ├── pygment_trac.css │ │ │ └── stylesheet.css │ ├── images │ │ ├── design │ │ │ ├── default.png │ │ │ └── revert.png │ │ ├── layout │ │ │ ├── double-subtitle.png │ │ │ ├── double.png │ │ │ ├── imax.png │ │ │ ├── normal.png │ │ │ ├── subtitle.png │ │ │ └── title.png │ │ ├── template │ │ │ ├── double-subtitle.png │ │ │ ├── double.png │ │ │ ├── normal.png │ │ │ ├── picture-left.png │ │ │ ├── picture-right.png │ │ │ ├── picture.png │ │ │ ├── subtitle.png │ │ │ ├── title.png │ │ │ └── video.png │ │ └── widget │ │ │ └── video │ │ │ └── youkulogo.png │ ├── index.html │ ├── js │ │ ├── main.js │ │ └── require.js │ └── lib │ │ ├── css │ │ ├── bootstrap.css │ │ └── default.min.css │ │ ├── img │ │ ├── glyphicons-halflings-white.png │ │ └── glyphicons-halflings.png │ │ └── js │ │ ├── bootstrap.js │ │ ├── bootstrap.min.js │ │ ├── highlight.min.js │ │ ├── jquery.js │ │ ├── jquery.min.js │ │ ├── jquery.min.map │ │ └── knockout-2.2.1.js ├── images │ ├── code.png │ ├── pattern.png │ ├── tar.png │ ├── top.png │ └── zip.png ├── index.html ├── javascripts │ └── script.js ├── params.json └── stylesheets │ ├── pygment_trac.css │ └── stylesheet.css ├── images ├── design │ ├── default.png │ └── revert.png ├── layout │ ├── double-subtitle.png │ ├── double.png │ ├── imax.png │ ├── normal.png │ ├── subtitle.png │ └── title.png ├── template │ ├── double-subtitle.png │ ├── double.png │ ├── normal.png │ ├── picture-left.png │ ├── picture-right.png │ ├── picture.png │ ├── subtitle.png │ ├── title.png │ └── video.png └── widget │ └── video │ └── youkulogo.png ├── index.html ├── js ├── ctrl.js ├── data.js ├── design.js ├── editor.js ├── fullscreen.js ├── main.js ├── page.js ├── player.js ├── require.js ├── stage.js ├── status.js ├── storage.js ├── title.js ├── transition.js ├── types.js ├── types │ ├── code.js │ ├── img-helper.js │ ├── img.js │ ├── text.js │ └── video.js └── vm.js └── lib ├── css ├── bootstrap.css └── default.min.css ├── img ├── glyphicons-halflings-white.png └── glyphicons-halflings.png └── js ├── bootstrap.js ├── bootstrap.min.js ├── highlight.min.js ├── jquery.js ├── jquery.min.js ├── jquery.min.map └── knockout-2.2.1.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | css/theme 3 | output -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # H5Slides 2 | 3 | 注意：该项目以不再维护，同时欢迎继续关注 [v-mark-display](https://github.com/Jinjiang/v-mark-display) —— 一个新的可以利用 Markdown 文本展示幻灯片的 Vue 组件。 4 | 5 | ---- 6 | 7 | `H5Slides`希望通过HTML5的技术，成为用户编辑、播放、控制幻灯片这一系列行为的全套方案的提供者。幻灯演示将会变得更自如，更轻便，更开放，更易于分享。 8 | 9 | ## 特点 10 | 11 | 1. 它是HTML5的！ 12 | 2. 我们不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片 13 | 3. 我们可以自由的在各种设备上进行幻灯演示 14 | 4. 我们可以自由扩展幻灯片的制作工具和播放环境 15 | 5. 它可以很自由很方便的传播 16 | 17 | ### 它不是…… 18 | 19 | * 它不是个重量级选手 20 | * 它不是个全能型选手 21 | * 它不是PPT，而是`H5Slides`！ 22 | 23 | ---- 24 | 25 | ## 运行方式 26 | 27 | ### 运行环境 28 | 29 | `H5Slides`目前仅支持webkit内核浏览器，PC、Mac端经过本人测试的包括最新版的Safari/Chrome/Maxthon，iOS端仅支持iOS6以上版本(因为可以导入相册图片或相机拍照)。 30 | 兼容更多的浏览器和操作系统需要一个过程，也希望大家可以踊跃参与，贡献代码 :-) 31 | 32 | ### 运行步骤 33 | 34 | 1. 用浏览器打开源代码中的`index.html`即可运行； 35 | 2. 在新打开的界面中，我们可以自由编辑幻灯片的内容和样式； 36 | 3. 点击右上角的“Preview”(预览)按钮，可以进入播放器模式，播放我们之前编辑好的幻灯片； 37 | 4. 如果想重新编写一个全新的幻灯片，可以点击右上角的“Reset”(重做)按钮。 38 | 39 | ---- 40 | 41 | ## 我们的计划 42 | 43 | `H5Slides`还是个很初级的WebApp，我们希望大家可以一同参与其中，共同打造我们自己的幻灯演示平台！ 44 | 同时，`H5Slides`也是一块HTML5的试验台，很多新的特性、规范、库和框架都可以在这个平台上得以实践，比如： 45 | 46 | * css 3 transformation 47 | * css 3 flexbox 48 | * fullscreen api 49 | * web storage 50 | * knockout.js 51 | * bootstrap 52 | * require.js 53 | 54 | 欢迎为我们push代码，如果希望更深入的交流，可以随时与我们[取得联系](#我们的联系方式)。 55 | 56 | ### 我们的联系方式 57 | 58 | 我们的github页面：[https://github.com/Jinjiang/h5slides](https://github.com/Jinjiang/h5slides) 59 | 我们的邮箱：[h5slides@gmail.com](mailto:h5slides@gmail.com) 60 | 我的个人微博：[@勾三股四](http://weibo.com/mx006) 61 | -------------------------------------------------------------------------------- /TODO: -------------------------------------------------------------------------------- 1 | -- milestone 0.3.1 -- 2 | -- milestone 0.3.2 -- 3 | 4 | added code highlight 0.5d 5 | gist online 3d 6 | gist service 7 | save data online 8 | load data online 9 | init with data online 10 | page manager 1d 11 | manage-button/sort/multi-select 12 | -- milestone 0.3.3 -- 13 | 14 | plugins 1d 15 | picture viewer 1d 16 | pagenav 1d 17 | draw sth. 1d 18 | mobile player 3d 19 | guideline 2d 20 | notifications 1d 21 | -- milestone 0.3.4 -- 22 | 23 | documantation 1d 24 | h5slides-packages ide 3d 25 | type: map 1d 26 | parser web service 27 | type: video rebuild 1d 28 | rich text editor 2d 29 | toolbar 1d 30 | build config 1d 31 | types (js helper/css/editor html) 32 | create new item 33 | text animations when playing 34 | undo system 3d 35 | 36 | total: 4.5d / 9d / ... 37 | -------------------------------------------------------------------------------- /appcache.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | #version 20150714 3 | 4 | CACHE: 5 | lib/css/bootstrap.css 6 | lib/css/default.min.css 7 | lib/js/bootstrap.js 8 | lib/js/bootstrap.min.js 9 | lib/js/highlight.min.js 10 | lib/js/jquery.js 11 | lib/js/jquery.min.js 12 | lib/js/jquery.min.map 13 | lib/js/knockout-2.2.1.js 14 | lib/img/glyphicons-halflings.png 15 | lib/img/glyphicons-halflings-white.png 16 | css/design/default.css 17 | css/design/revert.css 18 | css/main.css 19 | js/main.js 20 | js/require.js 21 | images/design/default.png 22 | images/design/revert.png 23 | images/layout/normal.png 24 | images/layout/title.png 25 | images/layout/subtitle.png 26 | images/layout/double.png 27 | images/layout/double-subtitle.png 28 | images/layout/imax.png 29 | images/template/normal.png 30 | images/template/title.png 31 | images/template/subtitle.png 32 | images/template/double.png 33 | images/template/double-subtitle.png 34 | images/template/picture.png 35 | images/template/picture-left.png 36 | images/template/picture-right.png 37 | images/template/video.png 38 | images/widget/video/youkulogo.png 39 | 40 | NETWORK: 41 | * 42 | -------------------------------------------------------------------------------- /build/build.sh: -------------------------------------------------------------------------------- 1 | node r.js -o config.js -------------------------------------------------------------------------------- /build/config.js: -------------------------------------------------------------------------------- 1 | ({ 2 | appDir: "../", 3 | baseUrl: "./js", 4 | dir: "../docs/demo", 5 | 6 | //As of RequireJS 2.0.2, the dir above will be deleted before the 7 | //build starts again. If you have a big build and are not doing 8 | //source transforms with onBuildRead/onBuildWrite, then you can 9 | //set keepBuildDir to true to keep the previous dir. This allows for 10 | //faster rebuilds, but it could lead to unexpected errors if the 11 | //built code is transformed in some way. 12 | keepBuildDir: true, 13 | 14 | //How to optimize all the JS files in the build output directory. 15 | //Right now only the following values 16 | //are supported: 17 | //- "uglify": (default) uses UglifyJS to minify the code. 18 | //- "closure": uses Google's Closure Compiler in simple optimization 19 | //mode to minify the code. Only available if running the optimizer using 20 | //Java. 21 | //- "closure.keepLines": Same as closure option, but keeps line returns 22 | //in the minified files. 23 | //- "none": no minification will be done. 24 | optimize: "none", 25 | 26 | //Allow CSS optimizations. Allowed values: 27 | //- "standard": @import inlining, comment removal and line returns. 28 | //Removing line returns may have problems in IE, depending on the type 29 | //of CSS. 30 | //- "standard.keepLines": like "standard" but keeps line returns. 31 | //- "none": skip CSS optimizations. 32 | //- "standard.keepComments": keeps the file comments, but removes line 33 | //returns. (r.js 1.0.8+) 34 | //- "standard.keepComments.keepLines": keeps the file comments and line 35 | //returns. (r.js 1.0.8+) 36 | optimizeCss: "standard.keepLines", 37 | 38 | //cssIn is typically used as a command line option. It can be used 39 | //along with out to optimize a single CSS file. 40 | // cssIn: "path/to/main.css", 41 | // out: "path/to/css-optimized.css", 42 | 43 | //If set to true, any files that were combined into a build layer will be 44 | //removed from the output folder. 45 | removeCombined: true, 46 | 47 | //List the modules that will be optimized. All their immediate and deep 48 | //dependencies will be included in the module's file when the build is 49 | //done. If that module or any of its dependencies includes i18n bundles, 50 | //only the root bundles will be included unless the locale: section is set above. 51 | modules: [ 52 | //Just specifying a module name means that module will be converted into 53 | //a built file that contains all of its dependencies. If that module or any 54 | //of its dependencies includes i18n bundles, they may not be included in the 55 | //built file unless the locale: section is set above. 56 | { 57 | name: "main" 58 | } 59 | ], 60 | 61 | fileExclusionRegExp: /^(test|r\.js|build|output|TODO|\.|[A-Z])/, 62 | }) 63 | -------------------------------------------------------------------------------- /build/deploy.sh: -------------------------------------------------------------------------------- 1 | cd .. 2 | rm -Rf output/ 3 | cp -Rf docs output 4 | cd output/ 5 | git init 6 | git add -A 7 | git commit -m "First commit" 8 | git push -u git@github.com:Jinjiang/h5slides.git HEAD:gh-pages --force 9 | -------------------------------------------------------------------------------- /css/ctrl.css: -------------------------------------------------------------------------------- 1 | .slide [data-key].active { 2 | z-index: 7; 3 | } 4 | 5 | .ctrl { 6 | font-size: 14px; 7 | font-weight: normal; 8 | } 9 | 10 | .ctrl-start { 11 | position: absolute; 12 | z-index: 9; 13 | top: -2px; 14 | left: -2px; 15 | width: 30px; 16 | height: 30px; 17 | padding: 0; 18 | margin: -15px; 19 | border-radius: 15px; 20 | background: rgba(127, 127, 255, 0.5); 21 | -webkit-transition: background-color 0.5s; 22 | -moz-transition: background-color 0.5s; 23 | -ms-transition: background-color 0.5s; 24 | transition: background-color 0.5s; 25 | } 26 | .ctrl-start::before { 27 | position: absolute; 28 | top: 15px; 29 | left: 15px; 30 | width: 40px; 31 | height: 40px; 32 | margin: -20px; 33 | background: transparent; 34 | border: 2px rgba(127, 127, 255, 0.5) solid; 35 | border-radius: 20px; 36 | box-sizing: border-box; 37 | content: " "; 38 | -webkit-transition: border-color 1s; 39 | -moz-transition: border-color 1s; 40 | -ms-transition: border-color 1s; 41 | transition: border-color 1s; 42 | } 43 | .ctrl-start:active::before { 44 | border-color: gray; 45 | } 46 | 47 | .ctrl-menu { 48 | position: absolute; 49 | z-index: 8; 50 | top: -45px; 51 | left: 0; 52 | list-style: none; 53 | margin: 0; 54 | padding: 0; 55 | display: -webkit-box; 56 | display: -moz-box; 57 | display: -ms-box; 58 | display: box; 59 | } 60 | .ctrl-menu li { 61 | margin: 0; 62 | padding: 0; 63 | opacity: 0; 64 | display: none; 65 | -webkit-transition: opacity 0.5s; 66 | -moz-transition: opacity 0.5s; 67 | -ms-transition: opacity 0.5s; 68 | transition: opacity 0.5s; 69 | } 70 | .ctrl-menu[data-show] li { 71 | display: block; 72 | } 73 | .ctrl-menu[data-shown] li { 74 | opacity: 1; 75 | } 76 | 77 | .ctrl-menu li:nth-child(1) { 78 | position: absolute; 79 | top: 45px; 80 | left: -45px; 81 | } 82 | .ctrl-menu li:nth-child(2) { 83 | position: absolute; 84 | top: 0px; 85 | left: -45px; 86 | } 87 | .ctrl-menu li.ctrl-menu-more { 88 | /*position: absolute; 89 | top: 0px; 90 | left: 0px;*/ 91 | white-space: nowrap; 92 | } 93 | 94 | .ctrl-menu li:nth-child(1) a { 95 | border-bottom-left-radius: 40px; 96 | } 97 | .ctrl-menu li:nth-child(2) a { 98 | border-top-left-radius: 40px; 99 | } 100 | 101 | .ctrl-menu li a { 102 | display: block; 103 | margin: 0 5px 0 0; 104 | width: 40px; 105 | padding: 0; 106 | height: 40px; 107 | line-height: 40px; 108 | text-align: center; 109 | background-color: rgba(127, 127, 127, 0.1); 110 | -webkit-transition: border-radius 0.5s; 111 | -moz-transition: border-radius 0.5s; 112 | -ms-transition: border-radius 0.5s; 113 | transition: border-radius 0.5s; 114 | } 115 | .ctrl-menu li.ctrl-menu-more a { 116 | display: inline-block; 117 | } 118 | .ctrl-menu li.ctrl-menu-more a.active { 119 | background-color: silver; 120 | } 121 | .ctrl-menu li a:active { 122 | background-color: gray; 123 | } 124 | 125 | -------------------------------------------------------------------------------- /css/design/default.css: -------------------------------------------------------------------------------- 1 | [data-design="default"] { 2 | background-color: rgba(192, 192, 192, 0.1); 3 | } 4 | 5 | [data-design="default"] .slide { 6 | background-color: white; 7 | color: black; 8 | } 9 | -------------------------------------------------------------------------------- /css/design/revert.css: -------------------------------------------------------------------------------- 1 | [data-design="revert"] { 2 | background-color: silver; 3 | } 4 | 5 | [data-design="revert"] .slide { 6 | background-color: gray; 7 | color: white; 8 | } 9 | -------------------------------------------------------------------------------- /css/editor.css: -------------------------------------------------------------------------------- 1 | .window { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | } 8 | 9 | .layer { 10 | position: absolute; 11 | left: 0; 12 | top: 0; 13 | width: 0; 14 | height: 0; 15 | } 16 | 17 | #editor { 18 | z-index: 1; 19 | display: -webkit-box; 20 | display: -moz-box; 21 | display: -ms-box; 22 | display: box; 23 | -webkit-box-orient: vertical; 24 | -moz-box-orient: vertical; 25 | -ms-box-orient: vertical; 26 | box-orient: vertical; 27 | } 28 | 29 | #topbar { 30 | position: static; 31 | } 32 | 33 | #topbar .navbar-inner { 34 | padding: 0 20px; 35 | z-index: 1; 36 | } 37 | 38 | #toolbar { 39 | position: static; 40 | } 41 | 42 | #toolbar .navbar-inner { 43 | padding: 0 20px; 44 | } 45 | 46 | #content { 47 | display: -webkit-box; 48 | display: -moz-box; 49 | display: -ms-box; 50 | display: -ms-flexbox; 51 | display: box; 52 | -webkit-box-flex: 1; 53 | -moz-box-flex: 1; 54 | -ms-box-flex: 1; 55 | box-flex: 1; 56 | min-height: 500px; 57 | width: 100%; 58 | } 59 | 60 | #sidebar { 61 | padding: 10px 0 20px; 62 | float: none; 63 | display: -webkit-box; 64 | display: -moz-box; 65 | display: -ms-box; 66 | display: box; 67 | -webkit-box-orient: vertical; 68 | -moz-box-orient: vertical; 69 | -ms-box-orient: vertical; 70 | box-orient: vertical; 71 | } 72 | 73 | #page-nav { 74 | display: -webkit-box; 75 | display: -moz-box; 76 | display: -ms-box; 77 | display: box; 78 | -webkit-box-orient: vertical; 79 | -moz-box-orient: vertical; 80 | -ms-box-orient: vertical; 81 | box-orient: vertical; 82 | -webkit-box-flex: 1; 83 | -moz-box-flex: 1; 84 | -ms-box-flex: 1; 85 | box-flex: 1; 86 | 87 | } 88 | 89 | #page-list-wrapper { 90 | -webkit-box-flex: 1; 91 | -moz-box-flex: 1; 92 | -ms-box-flex: 1; 93 | box-flex: 1; 94 | overflow: auto; 95 | margin-bottom: 10px; 96 | word-break: break-all; 97 | } 98 | 99 | #content .vr { 100 | width: 1px; 101 | background-color: silver; 102 | margin: 20px; 103 | margin-right: 0px; 104 | } 105 | 106 | #editor-stage { 107 | width:100%; 108 | -webkit-box-flex: 1; 109 | -moz-box-flex: 1; 110 | -ms-box-flex: 1; 111 | box-flex: 1; 112 | display: -webkit-box; 113 | display: -moz-box; 114 | display: -ms-box; 115 | display: -ms-flexbox; 116 | display: box; 117 | -webkit-box-align: center; 118 | -moz-box-align: center; 119 | -ms-box-align: center; 120 | -ms-flex-align:center; 121 | box-align: center; 122 | -webkit-box-pack: center; 123 | -moz-box-pack: center; 124 | -ms-box-pack: center; 125 | -ms-flex-pack:center; 126 | box-pack: center; 127 | overflow: inherit; 128 | padding: 0 10px; 129 | } 130 | 131 | #editor-slide { 132 | border: 1px silver solid; 133 | border-radius: 5px; 134 | position: relative; 135 | } 136 | 137 | #editor-slide [data-key] .output { 138 | border-radius: 5px; 139 | background-color: rgba(127, 127, 127, 0.05); 140 | } 141 | 142 | #editor-slide [data-key] .output:hover { 143 | background-color: rgba(127, 127, 127, 0.1); 144 | } 145 | 146 | #item-editor-layer { 147 | z-index: 10; 148 | display: none; 149 | } 150 | 151 | #item-editor-layer textarea { 152 | box-sizing: border-box; 153 | } 154 | 155 | #img-manager .thumbnail { 156 | min-height: 120px; 157 | } 158 | 159 | #my-img-list .thumbnail { 160 | min-height: 80px; 161 | height: 80px; 162 | overflow: hidden; 163 | margin-bottom: 1em; 164 | } 165 | 166 | #code-dialog .code { 167 | font-family: Monaco, Menlo, Consolas, "Courier New", monospace; 168 | } 169 | 170 | #code-dialog a[target="_blank"] { 171 | padding-right: 1em; 172 | background-repeat: no-repeat; 173 | background-position: right center; 174 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); 175 | } 176 | 177 | #modals { 178 | } 179 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @import url(stage.css); 2 | @import url(editor.css); 3 | @import url(ctrl.css); 4 | @import url(sidebar.css); 5 | @import url(transitions.css); 6 | @import url(player.css); 7 | 8 | @import url(responsive-editor.css); 9 | @import url(responsive-player.css); 10 | -------------------------------------------------------------------------------- /css/player.css: -------------------------------------------------------------------------------- 1 | #player { 2 | z-index: 2; 3 | display: none; 4 | background-color: gray; 5 | } 6 | 7 | #player-stage { 8 | width: 100%; 9 | height: 100%; 10 | -webkit-box-flex: 1; 11 | -moz-box-flex: 1; 12 | -ms-box-flex: 1; 13 | box-flex: 1; 14 | display: -webkit-box; 15 | display: -moz-box; 16 | display: -ms-box; 17 | display: -ms-flexbox; 18 | display: box; 19 | -webkit-box-align: center; 20 | -moz-box-align: center; 21 | -ms-box-align: center; 22 | -ms-flex-align: center; 23 | box-align: center; 24 | -webkit-box-pack: center; 25 | -moz-box-pack: center; 26 | -ms-box-pack: center; 27 | -ms-flex-pack: center; 28 | box-pack: center; 29 | overflow: inherit; 30 | } 31 | 32 | #player-status { 33 | position: absolute; 34 | bottom: 0.5em; 35 | left: 1em; 36 | } 37 | 38 | #player-nav { 39 | position: absolute; 40 | bottom: 0.5em; 41 | right: 1em; 42 | } 43 | 44 | #player-slides-container { 45 | position: relative; 46 | width: 640px; 47 | height: 480px; 48 | } 49 | 50 | #player-stage .slide { 51 | position: absolute; 52 | display: none; 53 | opacity: 0; 54 | z-index: 1; 55 | -webkit-transition: all 0.5s; 56 | -moz-transition: all 0.5s; 57 | -ms-transition: all 0.5s; 58 | transition: all 0.5s; 59 | } 60 | 61 | #player-stage .slide-next, 62 | #player-stage .slide-prev { 63 | display: block; 64 | opacity: 0; 65 | z-index: 2; 66 | } 67 | 68 | #player-stage .slide-current { 69 | display: block; 70 | opacity: 1; 71 | z-index: 3; 72 | } 73 | -------------------------------------------------------------------------------- /css/responsive-player.css: -------------------------------------------------------------------------------- 1 | /* margin 280 * 60 */ 2 | 3 | @media all and (min-width: 1240px) and (min-height: 780px) { 4 | #player-slides-container { 5 | width: 960px; 6 | height: 720px; 7 | } 8 | } 9 | @media all and (min-width: 1560px) and (min-height: 1020px) { 10 | #player-slides-container { 11 | width: 1280px; 12 | height: 960px; 13 | } 14 | } 15 | @media all and (min-width: 1880px) and (min-height: 1260px) { 16 | #player-slides-container { 17 | width: 1600px; 18 | height: 1200px; 19 | } 20 | } 21 | @media all and (min-width: 2200px) and (min-height: 1500px) { 22 | #player-slides-container { 23 | width: 1920px; 24 | height: 1440px; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /css/sidebar.css: -------------------------------------------------------------------------------- 1 | #layout-list .active a, 2 | #my-img-list .active a, 3 | #design-list .active a { 4 | border-color: #960; 5 | -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 6 | -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 7 | -ms-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 8 | box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 9 | } 10 | 11 | #page-list .active a { 12 | color: #ffffff; 13 | background-color: #0088cc; 14 | } 15 | 16 | #design-list li, 17 | #template-list li { 18 | position: relative; 19 | } 20 | #design-list li .title, 21 | #template-list li .title { 22 | position: absolute; 23 | left: 4px; 24 | right: 4px; 25 | bottom: 4px; 26 | background-color: rgba(127, 127, 127, 0.5); 27 | color: white; 28 | line-height: 2; 29 | text-align: center; 30 | } 31 | 32 | #theme-manager .modal-body { 33 | min-height: 160px; 34 | max-height: 360px; 35 | overflow: auto; 36 | } 37 | 38 | #transition-list { 39 | width: 140px; 40 | height: 280px; 41 | overflow: auto; 42 | padding: 5px 10px; 43 | border: 1px silver solid; 44 | border-radius: 3px; 45 | margin-bottom: 0; 46 | } 47 | #transition-preview { 48 | width: 280px; 49 | height: 280px; 50 | overflow: hidden; 51 | } 52 | #transition-stage { 53 | width: 100px; 54 | height: 100px; 55 | background-color: rgba(127, 127, 127, 0.2); 56 | margin: 80px auto; 57 | border: 10px rgba(127, 127, 127, 0.2) solid; 58 | border-radius: 5px; 59 | position: relative; 60 | -webkit-perspective: 200px; 61 | -moz-perspective: 200px; 62 | -ms-perspective: 200px; 63 | perspective: 200px; 64 | } 65 | 66 | .transition-slide { 67 | position: absolute; 68 | width: 100px; 69 | height: 100px; 70 | -webkit-box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 71 | -moz-box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 72 | -ms-box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 73 | box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 74 | background-color: white; 75 | display: none; 76 | left: 0px; 77 | right: 0px; 78 | -webkit-transition: all 0.5s; 79 | -moz-transition: all 0.5s; 80 | -ms-transition: all 0.5s; 81 | transition: all 0.5s; 82 | line-height: 100px; 83 | font-size: 60px; 84 | text-align: center; 85 | opacity: 0; 86 | } 87 | 88 | .slide-current, 89 | .slide-next, 90 | .slide-prev { 91 | display: block; 92 | } 93 | .slide-next { 94 | z-index: 3; 95 | } 96 | .slide-prev { 97 | z-index: 1; 98 | } 99 | .slide-current { 100 | opacity: 1; 101 | z-index: 2; 102 | } 103 | -------------------------------------------------------------------------------- /css/stage.css: -------------------------------------------------------------------------------- 1 | .slide ul.unstyled { 2 | padding: 0.25em 0.5em; 3 | margin-bottom: 0; 4 | } 5 | .slide ul.unstyled li { 6 | line-height: inherit; 7 | } 8 | .slide pre { 9 | font-size: 16px; 10 | line-height: 1.5; 11 | overflow: auto; 12 | box-sizing: border-box; 13 | } 14 | .slide iframe { 15 | border: 1px silver solid; 16 | padding: 2px; 17 | box-sizing: border-box; 18 | } 19 | 20 | 21 | 22 | 23 | .stage { 24 | -webkit-transform-origin: 50% 50%; 25 | -moz-transform-origin: 50% 50%; 26 | -ms-transform-origin: 50% 50%; 27 | transform-origin: 50% 50%; 28 | } 29 | 30 | .slide { 31 | position: relative; 32 | font-size: 20px; 33 | line-height: 1.5; 34 | width: 640px; 35 | height: 480px; 36 | } 37 | 38 | 39 | 40 | 41 | .slide [data-key] { 42 | position: absolute; 43 | display: none; 44 | box-sizing: border-box; 45 | z-index: 6; 46 | } 47 | .output { 48 | width: 100%; 49 | height: 100%; 50 | box-sizing: border-box; 51 | word-break: break-all; 52 | } 53 | 54 | 55 | 56 | 57 | .slide[data-layout="normal"] [data-key="title"], 58 | .slide[data-layout="double"] [data-key="title"], 59 | .slide[data-layout="double-subtitle"] [data-key="title"] { 60 | display: block; 61 | left: 60px; 62 | bottom: 360px; 63 | width: 520px; 64 | height: 2em; 65 | font-size: 40px; 66 | text-align: center; 67 | font-weight: bold; 68 | z-index: 5; 69 | } 70 | .slide[data-layout="imax"] [data-key="title"] { 71 | display: block; 72 | left: 20px; 73 | top: 10px; 74 | width: 600px; 75 | height: 2em; 76 | font-size: 24px; 77 | font-weight: bold; 78 | z-index: 5; 79 | } 80 | .slide[data-layout="title"] [data-key="title"] { 81 | display: block; 82 | left: 80px; 83 | bottom: 240px; 84 | width: 480px; 85 | height: 2em; 86 | font-size: 48px; 87 | text-align: center; 88 | font-weight: bold; 89 | z-index: 5; 90 | } 91 | .slide[data-layout="subtitle"] [data-key="title"] { 92 | display: block; 93 | left: 80px; 94 | bottom: 240px; 95 | width: 420px; 96 | height: 2em; 97 | font-size: 40px; 98 | font-weight: bold; 99 | z-index: 5; 100 | } 101 | 102 | 103 | .slide[data-layout="normal"] [data-key="content"] { 104 | display: block; 105 | left: 60px; 106 | top: 140px; 107 | width: 520px; 108 | height: 300px; 109 | z-index: 2; 110 | } 111 | .slide[data-layout="imax"] [data-key="content"] { 112 | display: block; 113 | left: 20px; 114 | top: 60px; 115 | width: 600px; 116 | height: 400px; 117 | z-index: 2; 118 | } 119 | .slide[data-layout="double"] [data-key="content"] { 120 | display: block; 121 | left: 60px; 122 | top: 140px; 123 | width: 250px; 124 | height: 300px; 125 | z-index: 2; 126 | } 127 | .slide[data-layout="double-subtitle"] [data-key="content"] { 128 | display: block; 129 | left: 60px; 130 | top: 210px; 131 | width: 250px; 132 | height: 230px; 133 | z-index: 2; 134 | } 135 | .slide[data-layout="title"] [data-key="content"] { 136 | display: block; 137 | left: 120px; 138 | top: 260px; 139 | width: 400px; 140 | height: 5em; 141 | text-align: center; 142 | z-index: 2; 143 | } 144 | .slide[data-layout="subtitle"] [data-key="content"] { 145 | display: block; 146 | left: 100px; 147 | top: 260px; 148 | width: 420px; 149 | height: 5em; 150 | z-index: 2; 151 | } 152 | 153 | 154 | .slide[data-layout="double"] [data-key="content2"] { 155 | display: block; 156 | left: 330px; 157 | top: 140px; 158 | width: 250px; 159 | height: 300px; 160 | z-index: 1; 161 | } 162 | .slide[data-layout="double-subtitle"] [data-key="content2"] { 163 | display: block; 164 | left: 330px; 165 | top: 210px; 166 | width: 250px; 167 | height: 230px; 168 | z-index: 1; 169 | } 170 | 171 | 172 | .slide[data-layout="double-subtitle"] [data-key="subtitle"] { 173 | display: block; 174 | left: 60px; 175 | top: 140px; 176 | width: 250px; 177 | height: 50px; 178 | font-size: 24px; 179 | font-weight: bold; 180 | z-index: 4; 181 | } 182 | 183 | 184 | .slide[data-layout="double-subtitle"] [data-key="subtitle2"] { 185 | display: block; 186 | left: 330px; 187 | top: 140px; 188 | width: 250px; 189 | height: 50px; 190 | font-size: 24px; 191 | font-weight: bold; 192 | z-index: 3; 193 | } 194 | 195 | 196 | 197 | -------------------------------------------------------------------------------- /css/transitions.css: -------------------------------------------------------------------------------- 1 | [data-transition="cubic-horizontal"], 2 | [data-transition="cubic-horizontal-inner"], 3 | [data-transition="cubic-vertical"], 4 | [data-transition="cubic-vertical-inner"], 5 | [data-transition="doors"], 6 | [data-transition="sublime"], 7 | [data-transition="rotate-y"], 8 | [data-transition="fly"] { 9 | -webkit-perspective: 600px; 10 | -moz-perspective: 600px; 11 | -ms-perspective: 600px; 12 | perspective: 600px; 13 | } 14 | 15 | [data-transition="horizontal"] .slide-next { 16 | left: 120%; 17 | } 18 | [data-transition="horizontal"] .slide-prev { 19 | left: -120%; 20 | } 21 | 22 | [data-transition="vertical"] .slide-next { 23 | top: -120%; 24 | } 25 | [data-transition="vertical"] .slide-prev { 26 | top: 120%; 27 | } 28 | 29 | [data-transition="cubic-horizontal"] .slide-next { 30 | -webkit-transform: translateX(50%) rotateY(90deg) translateX(50%); 31 | -moz-transform: translateX(50%) rotateY(90deg) translateX(50%); 32 | -ms-transform: translateX(50%) rotateY(90deg) translateX(50%); 33 | transform: translateX(50%) rotateY(90deg) translateX(50%); 34 | } 35 | [data-transition="cubic-horizontal"] .slide-prev { 36 | -webkit-transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 37 | -moz-transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 38 | -ms-transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 39 | transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 40 | } 41 | 42 | [data-transition="cubic-horizontal-inner"] .slide-next { 43 | -webkit-transform: translateX(50%) rotateY(-90deg) translateX(50%); 44 | -moz-transform: translateX(50%) rotateY(-90deg) translateX(50%); 45 | -ms-transform: translateX(50%) rotateY(-90deg) translateX(50%); 46 | transform: translateX(50%) rotateY(-90deg) translateX(50%); 47 | } 48 | [data-transition="cubic-horizontal-inner"] .slide-prev { 49 | -webkit-transform: translateX(-50%) rotateY(90deg) translateX(-50%); 50 | -moz-transform: translateX(-50%) rotateY(90deg) translateX(-50%); 51 | -ms-transform: translateX(-50%) rotateY(90deg) translateX(-50%); 52 | transform: translateX(-50%) rotateY(90deg) translateX(-50%); 53 | } 54 | 55 | [data-transition="cubic-vertical"] .slide-next { 56 | -webkit-transform: translateY(-50%) rotateX(90deg) translateY(-50%); 57 | -moz-transform: translateY(-50%) rotateX(90deg) translateY(-50%); 58 | -ms-transform: translateY(-50%) rotateX(90deg) translateY(-50%); 59 | transform: translateY(-50%) rotateX(90deg) translateY(-50%); 60 | } 61 | [data-transition="cubic-vertical"] .slide-prev { 62 | -webkit-transform: translateY(50%) rotateX(-90deg) translateY(50%); 63 | -moz-transform: translateY(50%) rotateX(-90deg) translateY(50%); 64 | -ms-transform: translateY(50%) rotateX(-90deg) translateY(50%); 65 | transform: translateY(50%) rotateX(-90deg) translateY(50%); 66 | } 67 | 68 | [data-transition="cubic-vertical-inner"] .slide-next { 69 | -webkit-transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 70 | -moz-transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 71 | -ms-transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 72 | transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 73 | } 74 | [data-transition="cubic-vertical-inner"] .slide-prev { 75 | -webkit-transform: translateY(50%) rotateX(90deg) translateY(50%); 76 | -moz-transform: translateY(50%) rotateX(90deg) translateY(50%); 77 | -ms-transform: translateY(50%) rotateX(90deg) translateY(50%); 78 | transform: translateY(50%) rotateX(90deg) translateY(50%); 79 | } 80 | 81 | [data-transition="doors"] .slide-next { 82 | -webkit-transform: translateX(-50%) rotateY(-90deg) translateX(50%); 83 | -moz-transform: translateX(-50%) rotateY(-90deg) translateX(50%); 84 | -ms-transform: translateX(-50%) rotateY(-90deg) translateX(50%); 85 | transform: translateX(-50%) rotateY(-90deg) translateX(50%); 86 | } 87 | [data-transition="doors"] .slide-prev { 88 | -webkit-transform: translateX(-50%) rotateY(90deg) translateX(50%); 89 | -moz-transform: translateX(-50%) rotateY(90deg) translateX(50%); 90 | -ms-transform: translateX(-50%) rotateY(90deg) translateX(50%); 91 | transform: translateX(-50%) rotateY(90deg) translateX(50%); 92 | } 93 | 94 | [data-transition="zoom-in"] .slide-next { 95 | -webkit-transform: scale(0.9); 96 | -moz-transform: scale(0.9); 97 | -ms-transform: scale(0.9); 98 | transform: scale(0.9); 99 | opacity: 0; 100 | } 101 | [data-transition="zoom-in"] .slide-prev { 102 | -webkit-transform: scale(1.2); 103 | -moz-transform: scale(1.2); 104 | -ms-transform: scale(1.2); 105 | transform: scale(1.2); 106 | opacity: 0; 107 | } 108 | 109 | [data-transition="zoom-out"] .slide-next { 110 | -webkit-transform: scale(1.2); 111 | -moz-transform: scale(1.2); 112 | -ms-transform: scale(1.2); 113 | transform: scale(1.2); 114 | opacity: 0; 115 | } 116 | [data-transition="zoom-out"] .slide-prev { 117 | -webkit-transform: scale(0.9); 118 | -moz-transform: scale(0.9); 119 | -ms-transform: scale(0.9); 120 | transform: scale(0.9); 121 | opacity: 0; 122 | } 123 | 124 | [data-transition="sublime"] .slide-prev { 125 | -webkit-transform: skewY(30deg) scale(0.1, 3); 126 | -moz-transform: skewY(30deg) scale(0.1, 3); 127 | -ms-transform: skewY(30deg) scale(0.1, 3); 128 | transform: skewY(30deg) scale(0.1, 3); 129 | } 130 | 131 | [data-transition="rotate-y"] .slide-next { 132 | -webkit-transform: rotateY(180deg); 133 | -moz-transform: rotateY(180deg); 134 | -ms-transform: rotateY(180deg); 135 | transform: rotateY(180deg); 136 | opacity: 0; 137 | } 138 | 139 | [data-transition="rotate-z"] .slide-next { 140 | -webkit-transform: rotateZ(180deg); 141 | -moz-transform: rotateZ(180deg); 142 | -ms-transform: rotateZ(180deg); 143 | transform: rotateZ(180deg); 144 | opacity: 0; 145 | } 146 | 147 | [data-transition="fly"] .slide-next { 148 | -webkit-transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 149 | -moz-transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 150 | -ms-transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 151 | transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 152 | } 153 | 154 | [data-transition="fall"] .transition-slide { 155 | -webkit-transition-duration: 0.3s; 156 | -moz-transition-duration: 0.3s; 157 | -ms-transition-duration: 0.3s; 158 | transition-duration: 0.3s; 159 | -webkit-transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 160 | -moz-transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 161 | -ms-transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 162 | transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 163 | } 164 | [data-transition="fall"] .slide-next { 165 | -webkit-transform: translateY(-120%); 166 | -moz-transform: translateY(-120%); 167 | -ms-transform: translateY(-120%); 168 | transform: translateY(-120%); 169 | } 170 | [data-transition="fall"] .slide-prev { 171 | -webkit-box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 172 | -moz-box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 173 | -ms-box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 174 | box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 175 | -webkit-transition-delay: 0.3s; 176 | -moz-transition-delay: 0.3s; 177 | -ms-transition-delay: 0.3s; 178 | transition-delay: 0.3s; 179 | } 180 | -------------------------------------------------------------------------------- /docs/demo/appcache.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | #version 20150714 3 | 4 | CACHE: 5 | lib/css/bootstrap.css 6 | lib/css/default.min.css 7 | lib/js/bootstrap.js 8 | lib/js/bootstrap.min.js 9 | lib/js/highlight.min.js 10 | lib/js/jquery.js 11 | lib/js/jquery.min.js 12 | lib/js/jquery.min.map 13 | lib/js/knockout-2.2.1.js 14 | lib/img/glyphicons-halflings.png 15 | lib/img/glyphicons-halflings-white.png 16 | css/design/default.css 17 | css/design/revert.css 18 | css/main.css 19 | js/main.js 20 | js/require.js 21 | images/design/default.png 22 | images/design/revert.png 23 | images/layout/normal.png 24 | images/layout/title.png 25 | images/layout/subtitle.png 26 | images/layout/double.png 27 | images/layout/double-subtitle.png 28 | images/layout/imax.png 29 | images/template/normal.png 30 | images/template/title.png 31 | images/template/subtitle.png 32 | images/template/double.png 33 | images/template/double-subtitle.png 34 | images/template/picture.png 35 | images/template/picture-left.png 36 | images/template/picture-right.png 37 | images/template/video.png 38 | images/widget/video/youkulogo.png 39 | 40 | NETWORK: 41 | * 42 | -------------------------------------------------------------------------------- /docs/demo/build.txt: -------------------------------------------------------------------------------- 1 | 2 | css/ctrl.css 3 | ---------------- 4 | css/ctrl.css 5 | 6 | css/design/default.css 7 | ---------------- 8 | css/design/default.css 9 | 10 | css/design/revert.css 11 | ---------------- 12 | css/design/revert.css 13 | 14 | css/editor.css 15 | ---------------- 16 | css/editor.css 17 | 18 | css/main.css 19 | ---------------- 20 | css/stage.css 21 | css/editor.css 22 | css/ctrl.css 23 | css/sidebar.css 24 | css/transitions.css 25 | css/player.css 26 | css/responsive-editor.css 27 | css/responsive-player.css 28 | css/main.css 29 | 30 | css/player.css 31 | ---------------- 32 | css/player.css 33 | 34 | css/responsive-editor.css 35 | ---------------- 36 | css/responsive-editor.css 37 | 38 | css/responsive-player.css 39 | ---------------- 40 | css/responsive-player.css 41 | 42 | css/sidebar.css 43 | ---------------- 44 | css/sidebar.css 45 | 46 | css/stage.css 47 | ---------------- 48 | css/stage.css 49 | 50 | css/transitions.css 51 | ---------------- 52 | css/transitions.css 53 | 54 | docs/stylesheets/pygment_trac.css 55 | ---------------- 56 | docs/stylesheets/pygment_trac.css 57 | 58 | docs/stylesheets/stylesheet.css 59 | ---------------- 60 | docs/stylesheets/stylesheet.css 61 | 62 | lib/css/bootstrap.css 63 | ---------------- 64 | lib/css/bootstrap.css 65 | 66 | lib/css/default.min.css 67 | ---------------- 68 | lib/css/default.min.css 69 | 70 | js/main.js 71 | ---------------- 72 | js/storage.js 73 | js/data.js 74 | js/vm.js 75 | js/title.js 76 | js/page.js 77 | js/design.js 78 | js/transition.js 79 | js/status.js 80 | js/types/text.js 81 | js/types/img-helper.js 82 | js/types/img.js 83 | js/types/video.js 84 | js/types/code.js 85 | js/types.js 86 | js/ctrl.js 87 | js/stage.js 88 | js/editor.js 89 | js/fullscreen.js 90 | js/player.js 91 | js/main.js 92 | -------------------------------------------------------------------------------- /docs/demo/css/ctrl.css: -------------------------------------------------------------------------------- 1 | .slide [data-key].active { 2 | z-index: 7; 3 | } 4 | .ctrl { 5 | font-size: 14px; 6 | font-weight: normal; 7 | } 8 | .ctrl-start { 9 | position: absolute; 10 | z-index: 9; 11 | top: -2px; 12 | left: -2px; 13 | width: 30px; 14 | height: 30px; 15 | padding: 0; 16 | margin: -15px; 17 | border-radius: 15px; 18 | background: rgba(127, 127, 255, 0.5); 19 | -webkit-transition: background-color 0.5s; 20 | -moz-transition: background-color 0.5s; 21 | -ms-transition: background-color 0.5s; 22 | transition: background-color 0.5s; 23 | } 24 | .ctrl-start::before { 25 | position: absolute; 26 | top: 15px; 27 | left: 15px; 28 | width: 40px; 29 | height: 40px; 30 | margin: -20px; 31 | background: transparent; 32 | border: 2px rgba(127, 127, 255, 0.5) solid; 33 | border-radius: 20px; 34 | box-sizing: border-box; 35 | content: " "; 36 | -webkit-transition: border-color 1s; 37 | -moz-transition: border-color 1s; 38 | -ms-transition: border-color 1s; 39 | transition: border-color 1s; 40 | } 41 | .ctrl-start:active::before { 42 | border-color: gray; 43 | } 44 | .ctrl-menu { 45 | position: absolute; 46 | z-index: 8; 47 | top: -45px; 48 | left: 0; 49 | list-style: none; 50 | margin: 0; 51 | padding: 0; 52 | display: -webkit-box; 53 | display: -moz-box; 54 | display: -ms-box; 55 | display: box; 56 | } 57 | .ctrl-menu li { 58 | margin: 0; 59 | padding: 0; 60 | opacity: 0; 61 | display: none; 62 | -webkit-transition: opacity 0.5s; 63 | -moz-transition: opacity 0.5s; 64 | -ms-transition: opacity 0.5s; 65 | transition: opacity 0.5s; 66 | } 67 | .ctrl-menu[data-show] li { 68 | display: block; 69 | } 70 | .ctrl-menu[data-shown] li { 71 | opacity: 1; 72 | } 73 | .ctrl-menu li:nth-child(1) { 74 | position: absolute; 75 | top: 45px; 76 | left: -45px; 77 | } 78 | .ctrl-menu li:nth-child(2) { 79 | position: absolute; 80 | top: 0px; 81 | left: -45px; 82 | } 83 | .ctrl-menu li.ctrl-menu-more { 84 | 85 | white-space: nowrap; 86 | } 87 | .ctrl-menu li:nth-child(1) a { 88 | border-bottom-left-radius: 40px; 89 | } 90 | .ctrl-menu li:nth-child(2) a { 91 | border-top-left-radius: 40px; 92 | } 93 | .ctrl-menu li a { 94 | display: block; 95 | margin: 0 5px 0 0; 96 | width: 40px; 97 | padding: 0; 98 | height: 40px; 99 | line-height: 40px; 100 | text-align: center; 101 | background-color: rgba(127, 127, 127, 0.1); 102 | -webkit-transition: border-radius 0.5s; 103 | -moz-transition: border-radius 0.5s; 104 | -ms-transition: border-radius 0.5s; 105 | transition: border-radius 0.5s; 106 | } 107 | .ctrl-menu li.ctrl-menu-more a { 108 | display: inline-block; 109 | } 110 | .ctrl-menu li.ctrl-menu-more a.active { 111 | background-color: silver; 112 | } 113 | .ctrl-menu li a:active { 114 | background-color: gray; 115 | } 116 | -------------------------------------------------------------------------------- /docs/demo/css/design/default.css: -------------------------------------------------------------------------------- 1 | [data-design="default"] { 2 | background-color: rgba(192, 192, 192, 0.1); 3 | } 4 | [data-design="default"] .slide { 5 | background-color: white; 6 | color: black; 7 | } 8 | -------------------------------------------------------------------------------- /docs/demo/css/design/revert.css: -------------------------------------------------------------------------------- 1 | [data-design="revert"] { 2 | background-color: silver; 3 | } 4 | [data-design="revert"] .slide { 5 | background-color: gray; 6 | color: white; 7 | } 8 | -------------------------------------------------------------------------------- /docs/demo/css/editor.css: -------------------------------------------------------------------------------- 1 | .window { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | } 8 | .layer { 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | width: 0; 13 | height: 0; 14 | } 15 | #editor { 16 | z-index: 1; 17 | display: -webkit-box; 18 | display: -moz-box; 19 | display: -ms-box; 20 | display: box; 21 | -webkit-box-orient: vertical; 22 | -moz-box-orient: vertical; 23 | -ms-box-orient: vertical; 24 | box-orient: vertical; 25 | } 26 | #topbar { 27 | position: static; 28 | } 29 | #topbar .navbar-inner { 30 | padding: 0 20px; 31 | z-index: 1; 32 | } 33 | #toolbar { 34 | position: static; 35 | } 36 | #toolbar .navbar-inner { 37 | padding: 0 20px; 38 | } 39 | #content { 40 | display: -webkit-box; 41 | display: -moz-box; 42 | display: -ms-box; 43 | display: box; 44 | -webkit-box-flex: 1; 45 | -moz-box-flex: 1; 46 | -ms-box-flex: 1; 47 | box-flex: 1; 48 | min-height: 500px; 49 | width: 100%; 50 | } 51 | #sidebar { 52 | padding: 10px 0 20px; 53 | float: none; 54 | display: -webkit-box; 55 | display: -moz-box; 56 | display: -ms-box; 57 | display: box; 58 | -webkit-box-orient: vertical; 59 | -moz-box-orient: vertical; 60 | -ms-box-orient: vertical; 61 | box-orient: vertical; 62 | } 63 | #page-nav { 64 | display: -webkit-box; 65 | display: -moz-box; 66 | display: -ms-box; 67 | display: box; 68 | -webkit-box-orient: vertical; 69 | -moz-box-orient: vertical; 70 | -ms-box-orient: vertical; 71 | box-orient: vertical; 72 | -webkit-box-flex: 1; 73 | -moz-box-flex: 1; 74 | -ms-box-flex: 1; 75 | box-flex: 1; 76 | } 77 | #page-list-wrapper { 78 | -webkit-box-flex: 1; 79 | -moz-box-flex: 1; 80 | -ms-box-flex: 1; 81 | box-flex: 1; 82 | overflow: auto; 83 | margin-bottom: 10px; 84 | word-break: break-all; 85 | } 86 | #content .vr { 87 | width: 1px; 88 | background-color: silver; 89 | margin: 20px; 90 | margin-right: 0px; 91 | } 92 | #editor-stage { 93 | -webkit-box-flex: 1; 94 | -moz-box-flex: 1; 95 | -ms-box-flex: 1; 96 | box-flex: 1; 97 | display: -webkit-box; 98 | display: -moz-box; 99 | display: -ms-box; 100 | display: box; 101 | -webkit-box-align: center; 102 | -moz-box-align: center; 103 | -ms-box-align: center; 104 | box-align: center; 105 | -webkit-box-pack: center; 106 | -moz-box-pack: center; 107 | -ms-box-pack: center; 108 | box-pack: center; 109 | overflow: inherit; 110 | padding: 0 10px; 111 | } 112 | #editor-slide { 113 | border: 1px silver solid; 114 | border-radius: 5px; 115 | position: relative; 116 | } 117 | #editor-slide [data-key] .output { 118 | border-radius: 5px; 119 | background-color: rgba(127, 127, 127, 0.05); 120 | } 121 | #editor-slide [data-key] .output:hover { 122 | background-color: rgba(127, 127, 127, 0.1); 123 | } 124 | #item-editor-layer { 125 | z-index: 10; 126 | display: none; 127 | } 128 | #item-editor-layer textarea { 129 | box-sizing: border-box; 130 | } 131 | #img-manager .thumbnail { 132 | min-height: 120px; 133 | } 134 | #my-img-list .thumbnail { 135 | min-height: 80px; 136 | height: 80px; 137 | overflow: hidden; 138 | margin-bottom: 1em; 139 | } 140 | #code-dialog .code { 141 | font-family: Monaco, Menlo, Consolas, "Courier New", monospace; 142 | } 143 | #code-dialog a[target="_blank"] { 144 | padding-right: 1em; 145 | background-repeat: no-repeat; 146 | background-position: right center; 147 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); 148 | } 149 | #modals { 150 | } 151 | -------------------------------------------------------------------------------- /docs/demo/css/player.css: -------------------------------------------------------------------------------- 1 | #player { 2 | z-index: 2; 3 | display: none; 4 | background-color: gray; 5 | } 6 | #player-stage { 7 | width: 100%; 8 | height: 100%; 9 | -webkit-box-flex: 1; 10 | -moz-box-flex: 1; 11 | -ms-box-flex: 1; 12 | box-flex: 1; 13 | display: -webkit-box; 14 | display: -moz-box; 15 | display: -ms-box; 16 | display: box; 17 | -webkit-box-align: center; 18 | -moz-box-align: center; 19 | -ms-box-align: center; 20 | box-align: center; 21 | -webkit-box-pack: center; 22 | -moz-box-pack: center; 23 | -ms-box-pack: center; 24 | box-pack: center; 25 | overflow: inherit; 26 | } 27 | #player-status { 28 | position: absolute; 29 | bottom: 0.5em; 30 | left: 1em; 31 | } 32 | #player-nav { 33 | position: absolute; 34 | bottom: 0.5em; 35 | right: 1em; 36 | } 37 | #player-slides-container { 38 | position: relative; 39 | width: 640px; 40 | height: 480px; 41 | } 42 | #player-stage .slide { 43 | position: absolute; 44 | display: none; 45 | opacity: 0; 46 | z-index: 1; 47 | -webkit-transition: all 0.5s; 48 | -moz-transition: all 0.5s; 49 | -ms-transition: all 0.5s; 50 | transition: all 0.5s; 51 | } 52 | #player-stage .slide-next, 53 | #player-stage .slide-prev { 54 | display: block; 55 | opacity: 0; 56 | z-index: 2; 57 | } 58 | #player-stage .slide-current { 59 | display: block; 60 | opacity: 1; 61 | z-index: 3; 62 | } 63 | -------------------------------------------------------------------------------- /docs/demo/css/responsive-player.css: -------------------------------------------------------------------------------- 1 | 2 | @media all and (min-width: 1240px) and (min-height: 780px) { 3 | #player-slides-container { 4 | width: 960px; 5 | height: 720px; 6 | } 7 | } 8 | @media all and (min-width: 1560px) and (min-height: 1020px) { 9 | #player-slides-container { 10 | width: 1280px; 11 | height: 960px; 12 | } 13 | } 14 | @media all and (min-width: 1880px) and (min-height: 1260px) { 15 | #player-slides-container { 16 | width: 1600px; 17 | height: 1200px; 18 | } 19 | } 20 | @media all and (min-width: 2200px) and (min-height: 1500px) { 21 | #player-slides-container { 22 | width: 1920px; 23 | height: 1440px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /docs/demo/css/sidebar.css: -------------------------------------------------------------------------------- 1 | #layout-list .active a, 2 | #my-img-list .active a, 3 | #design-list .active a { 4 | border-color: #960; 5 | -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 6 | -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 7 | -ms-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 8 | box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); 9 | } 10 | #page-list .active a { 11 | color: #ffffff; 12 | background-color: #0088cc; 13 | } 14 | #design-list li, 15 | #template-list li { 16 | position: relative; 17 | } 18 | #design-list li .title, 19 | #template-list li .title { 20 | position: absolute; 21 | left: 4px; 22 | right: 4px; 23 | bottom: 4px; 24 | background-color: rgba(127, 127, 127, 0.5); 25 | color: white; 26 | line-height: 2; 27 | text-align: center; 28 | } 29 | #theme-manager .modal-body { 30 | min-height: 160px; 31 | max-height: 360px; 32 | overflow: auto; 33 | } 34 | #transition-list { 35 | width: 140px; 36 | height: 280px; 37 | overflow: auto; 38 | padding: 5px 10px; 39 | border: 1px silver solid; 40 | border-radius: 3px; 41 | margin-bottom: 0; 42 | } 43 | #transition-preview { 44 | width: 280px; 45 | height: 280px; 46 | overflow: hidden; 47 | } 48 | #transition-stage { 49 | width: 100px; 50 | height: 100px; 51 | background-color: rgba(127, 127, 127, 0.2); 52 | margin: 80px auto; 53 | border: 10px rgba(127, 127, 127, 0.2) solid; 54 | border-radius: 5px; 55 | position: relative; 56 | -webkit-perspective: 200px; 57 | -moz-perspective: 200px; 58 | -ms-perspective: 200px; 59 | perspective: 200px; 60 | } 61 | .transition-slide { 62 | position: absolute; 63 | width: 100px; 64 | height: 100px; 65 | -webkit-box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 66 | -moz-box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 67 | -ms-box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 68 | box-shadow: 0 0 2px 1px blue, 0 0 1px 2px blue inset; 69 | background-color: white; 70 | display: none; 71 | left: 0px; 72 | right: 0px; 73 | -webkit-transition: all 0.5s; 74 | -moz-transition: all 0.5s; 75 | -ms-transition: all 0.5s; 76 | transition: all 0.5s; 77 | line-height: 100px; 78 | font-size: 60px; 79 | text-align: center; 80 | opacity: 0; 81 | } 82 | .slide-current, 83 | .slide-next, 84 | .slide-prev { 85 | display: block; 86 | } 87 | .slide-next { 88 | z-index: 3; 89 | } 90 | .slide-prev { 91 | z-index: 1; 92 | } 93 | .slide-current { 94 | opacity: 1; 95 | z-index: 2; 96 | } 97 | -------------------------------------------------------------------------------- /docs/demo/css/stage.css: -------------------------------------------------------------------------------- 1 | .slide ul.unstyled { 2 | padding: 0.25em 0.5em; 3 | margin-bottom: 0; 4 | } 5 | .slide ul.unstyled li { 6 | line-height: inherit; 7 | } 8 | .slide pre { 9 | font-size: 16px; 10 | line-height: 1.5; 11 | overflow: auto; 12 | box-sizing: border-box; 13 | } 14 | .slide iframe { 15 | border: 1px silver solid; 16 | padding: 2px; 17 | box-sizing: border-box; 18 | } 19 | .stage { 20 | -webkit-transform-origin: 50% 50%; 21 | -moz-transform-origin: 50% 50%; 22 | -ms-transform-origin: 50% 50%; 23 | transform-origin: 50% 50%; 24 | } 25 | .slide { 26 | position: relative; 27 | font-size: 20px; 28 | line-height: 1.5; 29 | width: 640px; 30 | height: 480px; 31 | } 32 | .slide [data-key] { 33 | position: absolute; 34 | display: none; 35 | box-sizing: border-box; 36 | z-index: 6; 37 | } 38 | .output { 39 | width: 100%; 40 | height: 100%; 41 | box-sizing: border-box; 42 | word-break: break-all; 43 | } 44 | .slide[data-layout="normal"] [data-key="title"], 45 | .slide[data-layout="double"] [data-key="title"], 46 | .slide[data-layout="double-subtitle"] [data-key="title"] { 47 | display: block; 48 | left: 60px; 49 | bottom: 360px; 50 | width: 520px; 51 | height: 2em; 52 | font-size: 40px; 53 | text-align: center; 54 | font-weight: bold; 55 | z-index: 5; 56 | } 57 | .slide[data-layout="imax"] [data-key="title"] { 58 | display: block; 59 | left: 20px; 60 | top: 10px; 61 | width: 600px; 62 | height: 2em; 63 | font-size: 24px; 64 | font-weight: bold; 65 | z-index: 5; 66 | } 67 | .slide[data-layout="title"] [data-key="title"] { 68 | display: block; 69 | left: 80px; 70 | bottom: 240px; 71 | width: 480px; 72 | height: 2em; 73 | font-size: 48px; 74 | text-align: center; 75 | font-weight: bold; 76 | z-index: 5; 77 | } 78 | .slide[data-layout="subtitle"] [data-key="title"] { 79 | display: block; 80 | left: 80px; 81 | bottom: 240px; 82 | width: 420px; 83 | height: 2em; 84 | font-size: 40px; 85 | font-weight: bold; 86 | z-index: 5; 87 | } 88 | .slide[data-layout="normal"] [data-key="content"] { 89 | display: block; 90 | left: 60px; 91 | top: 140px; 92 | width: 520px; 93 | height: 300px; 94 | z-index: 2; 95 | } 96 | .slide[data-layout="imax"] [data-key="content"] { 97 | display: block; 98 | left: 20px; 99 | top: 60px; 100 | width: 600px; 101 | height: 400px; 102 | z-index: 2; 103 | } 104 | .slide[data-layout="double"] [data-key="content"] { 105 | display: block; 106 | left: 60px; 107 | top: 140px; 108 | width: 250px; 109 | height: 300px; 110 | z-index: 2; 111 | } 112 | .slide[data-layout="double-subtitle"] [data-key="content"] { 113 | display: block; 114 | left: 60px; 115 | top: 210px; 116 | width: 250px; 117 | height: 230px; 118 | z-index: 2; 119 | } 120 | .slide[data-layout="title"] [data-key="content"] { 121 | display: block; 122 | left: 120px; 123 | top: 260px; 124 | width: 400px; 125 | height: 5em; 126 | text-align: center; 127 | z-index: 2; 128 | } 129 | .slide[data-layout="subtitle"] [data-key="content"] { 130 | display: block; 131 | left: 100px; 132 | top: 260px; 133 | width: 420px; 134 | height: 5em; 135 | z-index: 2; 136 | } 137 | .slide[data-layout="double"] [data-key="content2"] { 138 | display: block; 139 | left: 330px; 140 | top: 140px; 141 | width: 250px; 142 | height: 300px; 143 | z-index: 1; 144 | } 145 | .slide[data-layout="double-subtitle"] [data-key="content2"] { 146 | display: block; 147 | left: 330px; 148 | top: 210px; 149 | width: 250px; 150 | height: 230px; 151 | z-index: 1; 152 | } 153 | .slide[data-layout="double-subtitle"] [data-key="subtitle"] { 154 | display: block; 155 | left: 60px; 156 | top: 140px; 157 | width: 250px; 158 | height: 50px; 159 | font-size: 24px; 160 | font-weight: bold; 161 | z-index: 4; 162 | } 163 | .slide[data-layout="double-subtitle"] [data-key="subtitle2"] { 164 | display: block; 165 | left: 330px; 166 | top: 140px; 167 | width: 250px; 168 | height: 50px; 169 | font-size: 24px; 170 | font-weight: bold; 171 | z-index: 3; 172 | } 173 | -------------------------------------------------------------------------------- /docs/demo/css/transitions.css: -------------------------------------------------------------------------------- 1 | [data-transition="cubic-horizontal"], 2 | [data-transition="cubic-horizontal-inner"], 3 | [data-transition="cubic-vertical"], 4 | [data-transition="cubic-vertical-inner"], 5 | [data-transition="doors"], 6 | [data-transition="sublime"], 7 | [data-transition="rotate-y"], 8 | [data-transition="fly"] { 9 | -webkit-perspective: 600px; 10 | -moz-perspective: 600px; 11 | -ms-perspective: 600px; 12 | perspective: 600px; 13 | } 14 | [data-transition="horizontal"] .slide-next { 15 | left: 120%; 16 | } 17 | [data-transition="horizontal"] .slide-prev { 18 | left: -120%; 19 | } 20 | [data-transition="vertical"] .slide-next { 21 | top: -120%; 22 | } 23 | [data-transition="vertical"] .slide-prev { 24 | top: 120%; 25 | } 26 | [data-transition="cubic-horizontal"] .slide-next { 27 | -webkit-transform: translateX(50%) rotateY(90deg) translateX(50%); 28 | -moz-transform: translateX(50%) rotateY(90deg) translateX(50%); 29 | -ms-transform: translateX(50%) rotateY(90deg) translateX(50%); 30 | transform: translateX(50%) rotateY(90deg) translateX(50%); 31 | } 32 | [data-transition="cubic-horizontal"] .slide-prev { 33 | -webkit-transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 34 | -moz-transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 35 | -ms-transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 36 | transform: translateX(-50%) rotateY(-90deg) translateX(-50%); 37 | } 38 | [data-transition="cubic-horizontal-inner"] .slide-next { 39 | -webkit-transform: translateX(50%) rotateY(-90deg) translateX(50%); 40 | -moz-transform: translateX(50%) rotateY(-90deg) translateX(50%); 41 | -ms-transform: translateX(50%) rotateY(-90deg) translateX(50%); 42 | transform: translateX(50%) rotateY(-90deg) translateX(50%); 43 | } 44 | [data-transition="cubic-horizontal-inner"] .slide-prev { 45 | -webkit-transform: translateX(-50%) rotateY(90deg) translateX(-50%); 46 | -moz-transform: translateX(-50%) rotateY(90deg) translateX(-50%); 47 | -ms-transform: translateX(-50%) rotateY(90deg) translateX(-50%); 48 | transform: translateX(-50%) rotateY(90deg) translateX(-50%); 49 | } 50 | [data-transition="cubic-vertical"] .slide-next { 51 | -webkit-transform: translateY(-50%) rotateX(90deg) translateY(-50%); 52 | -moz-transform: translateY(-50%) rotateX(90deg) translateY(-50%); 53 | -ms-transform: translateY(-50%) rotateX(90deg) translateY(-50%); 54 | transform: translateY(-50%) rotateX(90deg) translateY(-50%); 55 | } 56 | [data-transition="cubic-vertical"] .slide-prev { 57 | -webkit-transform: translateY(50%) rotateX(-90deg) translateY(50%); 58 | -moz-transform: translateY(50%) rotateX(-90deg) translateY(50%); 59 | -ms-transform: translateY(50%) rotateX(-90deg) translateY(50%); 60 | transform: translateY(50%) rotateX(-90deg) translateY(50%); 61 | } 62 | [data-transition="cubic-vertical-inner"] .slide-next { 63 | -webkit-transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 64 | -moz-transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 65 | -ms-transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 66 | transform: translateY(-50%) rotateX(-90deg) translateY(-50%); 67 | } 68 | [data-transition="cubic-vertical-inner"] .slide-prev { 69 | -webkit-transform: translateY(50%) rotateX(90deg) translateY(50%); 70 | -moz-transform: translateY(50%) rotateX(90deg) translateY(50%); 71 | -ms-transform: translateY(50%) rotateX(90deg) translateY(50%); 72 | transform: translateY(50%) rotateX(90deg) translateY(50%); 73 | } 74 | [data-transition="doors"] .slide-next { 75 | -webkit-transform: translateX(-50%) rotateY(-90deg) translateX(50%); 76 | -moz-transform: translateX(-50%) rotateY(-90deg) translateX(50%); 77 | -ms-transform: translateX(-50%) rotateY(-90deg) translateX(50%); 78 | transform: translateX(-50%) rotateY(-90deg) translateX(50%); 79 | } 80 | [data-transition="doors"] .slide-prev { 81 | -webkit-transform: translateX(-50%) rotateY(90deg) translateX(50%); 82 | -moz-transform: translateX(-50%) rotateY(90deg) translateX(50%); 83 | -ms-transform: translateX(-50%) rotateY(90deg) translateX(50%); 84 | transform: translateX(-50%) rotateY(90deg) translateX(50%); 85 | } 86 | [data-transition="zoom-in"] .slide-next { 87 | -webkit-transform: scale(0.9); 88 | -moz-transform: scale(0.9); 89 | -ms-transform: scale(0.9); 90 | transform: scale(0.9); 91 | opacity: 0; 92 | } 93 | [data-transition="zoom-in"] .slide-prev { 94 | -webkit-transform: scale(1.2); 95 | -moz-transform: scale(1.2); 96 | -ms-transform: scale(1.2); 97 | transform: scale(1.2); 98 | opacity: 0; 99 | } 100 | [data-transition="zoom-out"] .slide-next { 101 | -webkit-transform: scale(1.2); 102 | -moz-transform: scale(1.2); 103 | -ms-transform: scale(1.2); 104 | transform: scale(1.2); 105 | opacity: 0; 106 | } 107 | [data-transition="zoom-out"] .slide-prev { 108 | -webkit-transform: scale(0.9); 109 | -moz-transform: scale(0.9); 110 | -ms-transform: scale(0.9); 111 | transform: scale(0.9); 112 | opacity: 0; 113 | } 114 | [data-transition="sublime"] .slide-prev { 115 | -webkit-transform: skewY(30deg) scale(0.1, 3); 116 | -moz-transform: skewY(30deg) scale(0.1, 3); 117 | -ms-transform: skewY(30deg) scale(0.1, 3); 118 | transform: skewY(30deg) scale(0.1, 3); 119 | } 120 | [data-transition="rotate-y"] .slide-next { 121 | -webkit-transform: rotateY(180deg); 122 | -moz-transform: rotateY(180deg); 123 | -ms-transform: rotateY(180deg); 124 | transform: rotateY(180deg); 125 | opacity: 0; 126 | } 127 | [data-transition="rotate-z"] .slide-next { 128 | -webkit-transform: rotateZ(180deg); 129 | -moz-transform: rotateZ(180deg); 130 | -ms-transform: rotateZ(180deg); 131 | transform: rotateZ(180deg); 132 | opacity: 0; 133 | } 134 | [data-transition="fly"] .slide-next { 135 | -webkit-transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 136 | -moz-transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 137 | -ms-transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 138 | transform: translate(100%, -80%) scale(0.1) rotateX(720deg) rotateY(-720deg); 139 | } 140 | [data-transition="fall"] .transition-slide { 141 | -webkit-transition-duration: 0.3s; 142 | -moz-transition-duration: 0.3s; 143 | -ms-transition-duration: 0.3s; 144 | transition-duration: 0.3s; 145 | -webkit-transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 146 | -moz-transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 147 | -ms-transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 148 | transition-timing-function: cubic-bezier(0.57, 1.16, 0.735, 1.22); 149 | } 150 | [data-transition="fall"] .slide-next { 151 | -webkit-transform: translateY(-120%); 152 | -moz-transform: translateY(-120%); 153 | -ms-transform: translateY(-120%); 154 | transform: translateY(-120%); 155 | } 156 | [data-transition="fall"] .slide-prev { 157 | -webkit-box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 158 | -moz-box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 159 | -ms-box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 160 | box-shadow: 0 0 20px 10px blue, 0 0 1px 2px blue inset; 161 | -webkit-transition-delay: 0.3s; 162 | -moz-transition-delay: 0.3s; 163 | -ms-transition-delay: 0.3s; 164 | transition-delay: 0.3s; 165 | } 166 | -------------------------------------------------------------------------------- /docs/demo/docs/images/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/docs/images/code.png -------------------------------------------------------------------------------- /docs/demo/docs/images/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/docs/images/pattern.png -------------------------------------------------------------------------------- /docs/demo/docs/images/tar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/docs/images/tar.png -------------------------------------------------------------------------------- /docs/demo/docs/images/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/docs/images/top.png -------------------------------------------------------------------------------- /docs/demo/docs/images/zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/docs/images/zip.png -------------------------------------------------------------------------------- /docs/demo/docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | H5Slides 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |

H5Slides

26 |
27 |
28 |

29 |
30 |
31 |
32 | Download 33 | Download 34 | View H5Slides on GitHub 35 | DEMO 36 |
37 | 38 |
39 |
40 |

H5Slides

41 | 42 |

H5Slides希望通过HTML5的技术，成为用户编辑、播放、控制幻灯片这一系列行为的全套方案的提供者。幻灯演示将会变得更自如，更轻便，更开放，更易于分享。

43 | 44 |

特点

45 | 46 |
    47 |
  1. 它是HTML5的！
    2. 48 |
  2. 我们不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片
    3. 49 |
  3. 我们可以自由的在各种设备上进行幻灯演示
    4. 50 |
  4. 我们可以自由扩展幻灯片的制作工具和播放环境
    5. 51 |
  5. 它可以很自由很方便的传播
    6. 52 |
53 | 54 |

它不是……

55 | 56 |
    57 |
  • 它不是个重量级选手
    • 58 |
  • 它不是个全能型选手
    • 59 |
  • 它不是PPT，而是H5Slides！
    • 60 |
61 | 62 |
63 | 64 |

运行方式

65 | 66 |

运行环境

67 | 68 |

H5Slides目前仅支持webkit内核浏览器，PC、Mac端经过本人测试的包括最新版的Safari/Chrome/Maxthon，iOS端仅支持iOS6以上版本(因为可以导入相册图片或相机拍照)。
69 | 兼容更多的浏览器和操作系统需要一个过程，也希望大家可以踊跃参与，贡献代码 :-)

70 | 71 |

运行步骤

72 | 73 |
    74 |
  1. 用浏览器打开源代码中的index.html即可运行；
    2. 75 |
  2. 在新打开的界面中，我们可以自由编辑幻灯片的内容和样式；
    3. 76 |
  3. 点击右上角的“Preview”(预览)按钮，可以进入播放器模式，播放我们之前编辑好的幻灯片；
    4. 77 |
  4. 如果想重新编写一个全新的幻灯片，可以点击右上角的“Reset”(重做)按钮。
    5. 78 |
79 | 80 |
81 | 82 |

我们的计划

83 | 84 |

H5Slides还是个很初级的WebApp，我们希望大家可以一同参与其中，共同打造我们自己的幻灯演示平台！
85 | 同时，H5Slides也是一块HTML5的试验台，很多新的特性、规范、库和框架都可以在这个平台上得以实践，比如：

86 | 87 |
    88 |
  • css 3 transformation
    • 89 |
  • css 3 flexbox
    • 90 |
  • fullscreen api
    • 91 |
  • web storage
    • 92 |
  • knockout.js
    • 93 |
  • bootstrap
    • 94 |
  • require.js
    • 95 |
96 | 97 |

欢迎为我们push代码，如果希望更深入的交流，可以随时与我们取得联系。

98 | 99 |

我们的联系方式

100 | 101 |

我们的github页面：https://github.com/Jinjiang/h5slides
102 | 我们的邮箱：h5slides@gmail.com
103 | 我的个人微博：@勾三股四

104 |
105 |
106 |
107 | 115 |
116 |
117 | Scroll to top 118 | tarzipsource code 119 |

120 |
121 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /docs/demo/docs/javascripts/script.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $(document).ready(function(){ 3 | 4 | // putting lines by the pre blocks 5 | $("pre").each(function(){ 6 | var pre = $(this).text().split("\n"); 7 | var lines = new Array(pre.length+1); 8 | for(var i = 0; i < pre.length; i++) { 9 | var wrap = Math.floor(pre[i].split("").length / 70) 10 | if (pre[i]==""&&i==pre.length-1) { 11 | lines.splice(i, 1); 12 | } else { 13 | lines[i] = i+1; 14 | for(var j = 0; j < wrap; j++) { 15 | lines[i] += "\n"; 16 | } 17 | } 18 | } 19 | $(this).before("
" + lines.join("\n") + "
"); 20 | }); 21 | 22 | var headings = []; 23 | 24 | var collectHeaders = function(){ 25 | headings.push({"top":$(this).offset().top - 15,"text":$(this).text()}); 26 | } 27 | 28 | if($(".markdown-body h1").length > 1) $(".markdown-body h1").each(collectHeaders) 29 | else if($(".markdown-body h2").length > 1) $(".markdown-body h2").each(collectHeaders) 30 | else if($(".markdown-body h3").length > 1) $(".markdown-body h3").each(collectHeaders) 31 | 32 | $(window).scroll(function(){ 33 | if(headings.length==0) return true; 34 | var scrolltop = $(window).scrollTop() || 0; 35 | if(headings[0] && scrolltop < headings[0].top) { 36 | $(".current-section").css({"opacity":0,"visibility":"hidden"}); 37 | return false; 38 | } 39 | $(".current-section").css({"opacity":1,"visibility":"visible"}); 40 | for(var i in headings) { 41 | if(scrolltop >= headings[i].top) { 42 | $(".current-section .name").text(headings[i].text); 43 | } 44 | } 45 | }); 46 | 47 | $(".current-section a").click(function(){ 48 | $(window).scrollTop(0); 49 | return false; 50 | }) 51 | }); 52 | })(jQuery) -------------------------------------------------------------------------------- /docs/demo/docs/params.json: -------------------------------------------------------------------------------- 1 | {"google":"","body":"# H5Slides\r\n\r\n`H5Slides`希望通过HTML5的技术，成为用户编辑、播放、控制幻灯片这一系列行为的全套方案的提供者。幻灯演示将会变得更自如，更轻便，更开放，更易于分享。\r\n\r\n## 特点\r\n\r\n1. 它是HTML5的！\r\n2. 我们不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片\r\n3. 我们可以自由的在各种设备上进行幻灯演示\r\n4. 我们可以自由扩展幻灯片的制作工具和播放环境\r\n5. 它可以很自由很方便的传播\r\n\r\n### 它不是……\r\n\r\n* 它不是个重量级选手\r\n* 它不是个全能型选手\r\n* 它不是PPT，而是`H5Slides`！\r\n\r\n## 运行方式\r\n\r\n### 运行环境\r\n\r\n`H5Slides`支持所有的webkit内核浏览器(safari/maxthon/chrome)，这包括Safari for iPad版本的触摸操作。在支持`FileSystemAPI`的新版webkit内核下(chrome 17+/maxthon 3.3.7+)，还允许用户上传图片，并设置为幻灯片背景等。\r\n\r\n我们对于非webkit内核的浏览器也非常尊重，我们接下来会有一些[兼容其他内核](#兼容更多的环境)的打算。感兴趣的朋友可以移步到项目进展和规划的章节了解情况或参与其中。\r\n\r\n目前，在非webkit内核浏览器下，`H5Slides`会给用户一个较为友好的提示界面，推荐用户通过webkit内核浏览器进行使用。\r\n\r\n### 运行步骤\r\n\r\n* 用webkit内核浏览器打开源代码中的`index.html`即可运行；\r\n* 在新打开的界面中，我们可以自由编辑幻灯片的内容和样式；\r\n* 点击右上角的“播放”按钮，可以进入播放器模式，播放我们之前编辑好的幻灯片；\r\n* 如果想重新编写一个全新的幻灯片，可以点击右上角的“重做”按钮。\r\n\r\n----\r\n\r\n## 我们的计划\r\n\r\n`H5Slides`还是个很初级的WebApp，我们希望大家可以一同参与其中，共同打造我们自己的幻灯演示平台！欢迎为我们push代码，如果希望更深入的交流，可以随时与我们[取得联系](#我们的联系方式)。\r\n\r\n我们看得到的可完善的空间(2012.04.23更新)会放在下面；而同时，这里有一些多多益善的事情可以让大家都参与进来：\r\n\r\n### 幻灯素材\r\n\r\n* 制作更多皮肤 —— 我们会提供[皮肤开发文档](#皮肤开发文档)\r\n* 制作更多动画 —— 我们会提供[动画开发文档](#动画开发文档)\r\n* 更多插件 *1\r\n\r\n### 数据处理\r\n\r\n* 数据结构的扩展 —— 我们会提供[数据格式说明文档](#数据格式说明文档)\r\n* 附件管理(如图片等)\r\n* 数据导入导出\r\n\r\n### 完善编辑器功能\r\n\r\n* 美化编辑器的界面\r\n* 调整布局位置\r\n* 修改字体\r\n* 选择动画\r\n* 幻灯片排序\r\n* 撤销&恢复\r\n* 配置插件 *1\r\n* 插入widget *2\r\n* 设置页面内的动画 *3\r\n\r\n### widget机制 *2\r\n\r\n* 富文本编辑器\r\n* 图片\r\n* 流程图\r\n* 报表\r\n* 视频\r\n* 地图\r\n* 问卷\r\n\r\n### 兼容更多的环境\r\n\r\n* 兼容平板\r\n* 兼容其它浏览器\r\n\r\n\r\n#### 注\r\n\r\n1. 插件是指播放器在播放幻灯演示时的附加功能(如允许演示者在幻灯片上涂鸦等)，插件系统目前还在设计之中\r\n2. widget是指可以插入幻灯片中的多媒体内容或复杂内容，以widget的形式插入其中，widget系统目前还在设计之中\r\n3. 页面内的动画是指幻灯片内容的分步骤呈现的效果，目前还在设计之中\r\n\r\n#### 我们的联系方式\r\n\r\n我们的github页面：[https://github.com/Jinjiang/h5slides](https://github.com/Jinjiang/h5slides) \r\n我们的邮箱：[h5slides@gmail.com](mailto:h5slides@gmail.com) \r\n我的个人微博：[@勾三股四](http://weibo.com/mx006) \r\n\r\n----\r\n\r\n## 皮肤开发文档\r\n\r\n皮肤是基于幻灯片布局和幻灯片内部元素的样式和尺寸的设计。每款皮肤应该拥有一个唯一的名称，在展示时，幻灯片的根结点会被赋予`[data-design=\"*\"]`特性。比如`[data-design=\"blue-summer\"]`。\r\n\r\n### 皮肤文件格式\r\n\r\n每一款皮肤都是由一个css文件作为起点，存放在`/css/theme/`目录下的和皮肤名称同名的css文件中。该css文件的内容应该是一系列主题特性、布局特性、内部元素特性及其样式的集合。比如：\r\n\r\n [data-design=\"blue-summer\"] [data-layout=\"title\"] [data-item=\"content\"] {\r\n color: blue;\r\n width: 480px;\r\n }\r\n [data-design=\"blue-summer\"] [data-layout=\"subtitle\"] [data-item=\"content\"] {\r\n color: navy;\r\n width: 420px;\r\n }\r\n ......\r\n\r\n其中，布局是基于`[data-layout=\"*\"]`的，默认的布局情况一共有5个：\r\n\r\n* `title`: 大标题页面\r\n* `subtitle`: 小标题页面\r\n* `normal`: 正文页面\r\n* `double`: 两列正文页面\r\n* `double-subtitle`: 两列正文且每列正文带子标题的页面\r\n\r\n内部元素是基于`[data-item=\"*\"]`的，默认的内部元素一共有5个：\r\n\r\n* `title`: 标题元素\r\n* `subtitle`: 第一子标题元素\r\n* `subtitle2`: 第二子标题元素\r\n* `content`: 正文元素\r\n* `content2`: 第二正文元素\r\n\r\n幻灯片布局和内部元素的对应关系如下：\r\n\r\n* 每个大标题页面都包含一个标题元素和一个正文元素\r\n* 每个小标题页面都包含一个标题元素和一个正文元素\r\n* 每个正文页面都包含一个标题元素和一个正文元素\r\n* 每个两列正文页面都包含一个标题元素和两个正文元素(正文元素和第二正文元素)\r\n* 每个两列正文带子标题的页面都包含一个标题元素、两个子标题元素(第一子标题元素和第二子标题元素)和两个正文元素(正文元素和第二正文元素)\r\n\r\n默认的主题样式可参考`/css/theme.css`\r\n\r\n另外，我们针对显示区域不是默认比例(4:3)的情况，提供了简单的屏幕背景的样式匹配方式，其依赖于`[data-design]`更上层的元素，所以css选择器处于更上层，命名有两个`[data-background-design]`和`[data-background-layout]`，分别匹配默认情况下的大背景样式和当前幻灯片处于某种布局时的大背景样式。代码示例如下(强烈建议只对其`background(-*)`属性进行修改)：\r\n\r\n [data-background-design=\"summer\"] {\r\n background: white;\r\n }\r\n [data-background-layout=\"subtitle\"] {\r\n background: blue;\r\n }\r\n\r\n### 使用定义好的皮肤\r\n\r\n打开`/data/themes.js`，加入一行数据，比如：`{\"key\": \"blue-summer\", \"title\": \"蓝色夏天\"}`，同时，在`/css/theme/`下新建一个该皮肤的同名目录，并放入`logo.png`作为皮肤展示时的缩略图。然后在编辑器左侧边栏的“主题”面板下会看到这个主题的缩略图。点击该缩略图，即可应用主题。\r\n\r\n----\r\n\r\n## 动画开发文档\r\n\r\n### 播放器的dom结构\r\n\r\n幻灯片在播放时的根结点是`#player`，每张幻灯片是一个`section`结点。默认情况下幻灯片都是隐藏起来的(`display: none;`)，只有正在播放的那张幻灯片是显示出来的(`display: block;`)。\r\n\r\n### 动画的实现原理\r\n\r\n由于`display`的属性值在`none`和`block`之间切换是没有动画效果支持的，我们做了一点改进：把当前幻灯片、前一张幻灯片和后一张幻灯片，分别赋予特殊的className：`.current`、`.prev`、`.next`。他们三个的`display`属性值均为`block`，同时`.prev`和`.next`的`opacity`属性值为`0`，`.current`的`opacity`属性值为`1`。这样幻灯片的切换就会有渐变效果。基本的css样式如下：\r\n\r\n #player section {\r\n display: none;\r\n transition: all 0.3s ease-out;\r\n }\r\n #player section.current {\r\n display: block;\r\n opacity: 1;\r\n }\r\n #player section.next,\r\n #player section.prev {\r\n display: block;\r\n opacity: 0;\r\n }\r\n\r\n### 动画文件格式\r\n\r\n我们可以在此基础上，通过css代码加入更酷炫的幻灯片切换动画。和皮肤开发相同的，我们需要为每种动画效果起一个名字。比如：`horizontal`。然后，我们可以在`/css/transition/`目录下创建一个同名的css文件。\r\n\r\n这个css文件中，我们为幻灯片中的`section`元素增加一个`data-transition`属性：`section[data-transition=\"transition_horizontal\"]`(注意，属性值前需要加入`transition_`前缀)。然后将`.current`、`.prev`、`.next`下的不同样式写入即可。比如：\r\n\r\n [data-transition=\"transition_horizontal\"].next {\r\n left: 450px;\r\n }\r\n [data-transition=\"transition_horizontal\"].current {\r\n left: 0;\r\n }\r\n [data-transition=\"transition_horizontal\"].prev {\r\n left: -450px;\r\n }\r\n\r\n### 使用定义好的动画\r\n\r\n目前使用动画的方法是：打开`/js/app.js`，把其中的变量`defaultTransition`改为带`transition_`前缀的动画名即可。比如：\r\n\r\n var defaultTransition = 'transition_horizontal';\r\n\r\n再使用播放器，就可以看到效果了。\r\n\r\n----\r\n\r\n## 文件/目录结构说明\r\n\r\n* `/css/`: 基本样式文件\r\n* `/css/theme/`: 主题样式集合，每个主题是一个同名css文件，可以伴随同名文件夹包含更多内容\r\n* `/css/transition/`: 切换动画集合，每个动画是一个同名css文件\r\n* `/js/`: 脚本文件\r\n* `/js/lib/`: 基础函数库\r\n* `/js/ui/`: 界面相关的脚本\r\n* `/data/`: 脚本数据，包括可用布局列表、可选主题列表、初始化数据信息等\r\n\r\n----\r\n\r\n## 数据格式说明文档\r\n\r\n默认数据保存在`/data/default.js`中，变量名为`defaultData`。\r\n\r\n var defaultData = {\r\n \"theme\": \"blank\",\r\n \"slides\": [\r\n {\r\n \"layout\": \"title\",\r\n \"content\": {\r\n \"title\": \"幻灯片标题\",\r\n \"content\": \"你的名字\"\r\n }\r\n },\r\n {\r\n \"layout\": \"normal\",\r\n \"content\": {\r\n \"title\": \"正文标题\",\r\n \"content\": \"正文内容\\n是可以多行显示的\"\r\n }\r\n },\r\n {\r\n \"layout\": \"subtitle\",\r\n \"content\": {\r\n \"title\": \"THE END\",\r\n \"content\": \"谢谢大家\"\r\n }\r\n }\r\n ]\r\n };\r\n\r\n### 字段解释\r\n\r\n#### `theme`\r\n\r\n默认主题名称\r\n\r\n#### `slides`\r\n\r\n以数组形式存放所有幻灯片的详细内容\r\n\r\n#### `slides[i].layout`\r\n\r\n某张幻灯片的布局类型，有效的值有：`title`、`subtitle`、`normal`、`double`、`double-subtitle`\r\n\r\n#### `slides[i].content[key]`\r\n\r\n某张幻灯片的所有内部元素的文字内容，有效的key值有：`title`、`subtitle`、`subtitle2`、`content`、`content2`\r\n\r\n#### `slides[i].position[key][cssName]`\r\n\r\n某张幻灯片的自定义元素尺寸和位置，有效的key值同上，有效的cssName值有：`left`、`top`、`width`、`height`。\r\n\r\n目前我们的编辑器暂不支持编辑尺寸和位置，使用时可以通过直接修改`defaultData`的值来应用这一规则。\r\n\r\n#### `slides[i].style[key][cssName]`\r\n\r\n某张幻灯片的自定义元素尺寸和位置，有效的key值在同上的基础上外加一个`slide`，表示该幻灯片整体的样式，有效的cssName值除了上一条提到的属性值外，还不支持：`right`、`bottom`；另外支持形如`-ppt-*`的属性值，以备扩展。\r\n\r\n目前已有的扩展只有一个，就是`-ppt-size`，用来控制文字大小，可选的`-ppt-size`属性值有：`small`、`normal`、`large`。\r\n\r\n目前我们的编辑器暂支持编辑`color`、`-ppt-size`和`slide`下的`background-image`这几个css属性。若想使用其它css属性，可以通过直接修改`defaultData`的值来应用这一规则。\r\n\r\n","note":"Don't delete this file! It's used internally to help with page regeneration.","tagline":"","name":"H5Slides"} -------------------------------------------------------------------------------- /docs/demo/docs/stylesheets/pygment_trac.css: -------------------------------------------------------------------------------- 1 | .highlight { background: #ffffff; } 2 | .highlight .c { color: #999988; font-style: italic } 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } 4 | .highlight .k { font-weight: bold } 5 | .highlight .o { font-weight: bold } 6 | .highlight .cm { color: #999988; font-style: italic } 7 | .highlight .cp { color: #999999; font-weight: bold } 8 | .highlight .c1 { color: #999988; font-style: italic } 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } 10 | .highlight .gd { color: #000000; background-color: #ffdddd } 11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } 12 | .highlight .ge { font-style: italic } 13 | .highlight .gr { color: #aa0000 } 14 | .highlight .gh { color: #999999 } 15 | .highlight .gi { color: #000000; background-color: #ddffdd } 16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } 17 | .highlight .go { color: #888888 } 18 | .highlight .gp { color: #555555 } 19 | .highlight .gs { font-weight: bold } 20 | .highlight .gu { color: #800080; font-weight: bold; } 21 | .highlight .gt { color: #aa0000 } 22 | .highlight .kc { font-weight: bold } 23 | .highlight .kd { font-weight: bold } 24 | .highlight .kn { font-weight: bold } 25 | .highlight .kp { font-weight: bold } 26 | .highlight .kr { font-weight: bold } 27 | .highlight .kt { color: #445588; font-weight: bold } 28 | .highlight .m { color: #009999 } 29 | .highlight .s { color: #d14 } 30 | .highlight .na { color: #008080 } 31 | .highlight .nb { color: #0086B3 } 32 | .highlight .nc { color: #445588; font-weight: bold } 33 | .highlight .no { color: #008080 } 34 | .highlight .ni { color: #800080 } 35 | .highlight .ne { color: #990000; font-weight: bold } 36 | .highlight .nf { color: #990000; font-weight: bold } 37 | .highlight .nn { color: #555555 } 38 | .highlight .nt { color: #000080 } 39 | .highlight .nv { color: #008080 } 40 | .highlight .ow { font-weight: bold } 41 | .highlight .w { color: #bbbbbb } 42 | .highlight .mf { color: #009999 } 43 | .highlight .mh { color: #009999 } 44 | .highlight .mi { color: #009999 } 45 | .highlight .mo { color: #009999 } 46 | .highlight .sb { color: #d14 } 47 | .highlight .sc { color: #d14 } 48 | .highlight .sd { color: #d14 } 49 | .highlight .s2 { color: #d14 } 50 | .highlight .se { color: #d14 } 51 | .highlight .sh { color: #d14 } 52 | .highlight .si { color: #d14 } 53 | .highlight .sx { color: #d14 } 54 | .highlight .sr { color: #009926 } 55 | .highlight .s1 { color: #d14 } 56 | .highlight .ss { color: #990073 } 57 | .highlight .bp { color: #999999 } 58 | .highlight .vc { color: #008080 } 59 | .highlight .vg { color: #008080 } 60 | .highlight .vi { color: #008080 } 61 | .highlight .il { color: #009999 } 62 | .type-csharp .highlight .k { color: #0000FF } 63 | .type-csharp .highlight .kt { color: #0000FF } 64 | .type-csharp .highlight .nf { color: #000000; font-weight: normal } 65 | .type-csharp .highlight .nc { color: #2B91AF } 66 | .type-csharp .highlight .nn { color: #000000 } 67 | .type-csharp .highlight .s { color: #A31515 } 68 | .type-csharp .highlight .sc { color: #A31515 } 69 | -------------------------------------------------------------------------------- /docs/demo/docs/stylesheets/stylesheet.css: -------------------------------------------------------------------------------- 1 | 2 | html, body, div, span, applet, object, iframe, 3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 4 | a, abbr, acronym, address, big, cite, code, 5 | del, dfn, em, img, ins, kbd, q, s, samp, 6 | small, strike, strong, sub, sup, tt, var, 7 | b, u, i, center, 8 | dl, dt, dd, ol, ul, li, 9 | fieldset, form, label, legend, 10 | table, caption, tbody, tfoot, thead, tr, th, td, 11 | article, aside, canvas, details, embed, 12 | figure, figcaption, footer, header, hgroup, 13 | menu, nav, output, ruby, section, summary, 14 | time, mark, audio, video { 15 | margin: 0; 16 | padding: 0; 17 | border: 0; 18 | font-size: 100%; 19 | font: inherit; 20 | vertical-align: baseline; 21 | } 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } 44 | body { 45 | font-size: 15px; 46 | font-family: Arial, Arial, Helvetica, sans-serif; 47 | line-height: 1.5; 48 | background: #D1D1D1; 49 | } 50 | a { 51 | color: #63a52a; 52 | text-decoration: none; 53 | -webkit-transition: color ease-in-out 0.3s; 54 | } 55 | a:hover { 56 | text-decoration: underline; 57 | color: #90D355; 58 | } 59 | h1.title { 60 | margin: 30px 20px 10px; 61 | font-size: 60px; 62 | font-weight: bold; 63 | font-style: italic; 64 | font-family:Georgia, serif; 65 | text-align: center; 66 | } 67 | .wrapper { 68 | width: 675px; 69 | margin: 0 auto; 70 | } 71 | #container { 72 | border: 1px solid #2a2a2a; 73 | background: #ddd url(../images/pattern.png); 74 | box-shadow: 0 0 5px #b1b1b1; 75 | } 76 | p.tagline { 77 | padding: 20px 20px 0; 78 | color: #fff; 79 | font-size: 17px; 80 | } 81 | #main { 82 | margin-top: 20px; 83 | padding: 0 20px 90px; 84 | background-color: #fff; 85 | } 86 | .download-bar { 87 | background: #222; 88 | border: 5px solid #444; 89 | padding: 10px; 90 | margin: 0 -35px 20px; 91 | position: relative; 92 | } 93 | .download-bar .inner { 94 | overflow: hidden; 95 | } 96 | .download-bar .watch-fork iframe { 97 | display: block; 98 | float: left; 99 | border-right: 1px solid #ddd; 100 | padding-right: 5px; 101 | } 102 | .download-bar .watch-fork iframe.last { 103 | border-right: 0 none; 104 | padding-right: 0; 105 | padding-left: 5px; 106 | border-left: 1px solid #fff; 107 | } 108 | .download-bar .watch-fork { 109 | overflow: hidden; 110 | float: right; 111 | background-color: #eee; 112 | padding: 5px; 113 | border-radius: 3px; 114 | } 115 | .download-bar .blc { 116 | border: 10px solid black; 117 | border-color: transparent transparent black; 118 | width: 0; 119 | height: 0; 120 | display: block; 121 | position: absolute; 122 | bottom: -15px; 123 | left: 0; 124 | -moz-transform: rotate(45deg); 125 | -webkit-transform: rotate(45deg); 126 | } 127 | .download-bar .trc { 128 | border: 10px solid black; 129 | border-color: black transparent transparent; 130 | width: 0; 131 | height: 0; 132 | display: block; 133 | position: absolute; 134 | top: -15px; 135 | right: 0; 136 | -moz-transform: rotate(45deg); 137 | -webkit-transform: rotate(45deg); 138 | } 139 | .download-bar .avatar { 140 | border: 1px solid black; 141 | display: block; 142 | padding: 4px; 143 | float: left; 144 | } 145 | .download-bar .avatar img { 146 | display: block; 147 | } 148 | .download-bar a.code { 149 | background: transparent url(../images/code.png) no-repeat 0 2px; 150 | padding-left: 35px; 151 | margin-top: 8px; 152 | display: block; 153 | float: left; 154 | text-indent: 0; 155 | width: auto; 156 | height: auto; 157 | opacity: 1; 158 | -moz-opacity: 1; 159 | filter:alpha(opacity=1); 160 | } 161 | .download-bar a.demo { 162 | padding-left: 1em; 163 | margin-top: 8px; 164 | display: block; 165 | float: left; 166 | text-indent: 0; 167 | width: auto; 168 | height: auto; 169 | opacity: 1; 170 | -moz-opacity: 1; 171 | filter:alpha(opacity=1); 172 | } 173 | .current-section { 174 | position: fixed; 175 | top: 0; 176 | left: 50%; 177 | width: 693px; 178 | margin-left: -352px; 179 | background: #222; 180 | border: 5px solid #444; 181 | color: #fff; 182 | opacity: 0; 183 | visibility: hidden; 184 | -webkit-transition: opacity ease-in-out 0.3s; 185 | } 186 | .current-section p { 187 | padding: 5px 27px; 188 | font-size: 24px; 189 | font-weight: bold; 190 | } 191 | .current-section a { 192 | float: right; 193 | text-indent: -10000px; 194 | background: transparent url(../images/top.png) no-repeat 0 0; 195 | width: 20px; 196 | height: 20px; 197 | opacity: 0.8; 198 | margin-right: 12px; 199 | margin-top: 12px; 200 | -moz-opacity: 0.8; 201 | filter:alpha(opacity=8); 202 | -webkit-transition: opacity ease-in-out 0.3s; 203 | } 204 | .current-section a:hover { 205 | opacity: 1; 206 | -moz-opacity: 1; 207 | filter:alpha(opacity=1); 208 | } 209 | .current-section a.zip { 210 | margin-right: 8px; 211 | } 212 | a.zip, 213 | a.zip span { 214 | background: transparent url(../images/zip.png) no-repeat 0 0; 215 | width: 30px; 216 | height: 21px; 217 | opacity: 0.8; 218 | display: inline-block; 219 | text-indent: -10000px; 220 | -moz-opacity: 0.8; 221 | filter:alpha(opacity=8); 222 | -webkit-transition: opacity ease-in-out 0.3s; 223 | } 224 | a.tar, 225 | a.tar span { 226 | background: transparent url(../images/tar.png) no-repeat 0 0; 227 | width: 30px; 228 | height: 21px; 229 | opacity: 0.8; 230 | display: inline-block; 231 | text-indent: -10000px; 232 | -moz-opacity: 0.8; 233 | filter:alpha(opacity=8); 234 | -webkit-transition: opacity ease-in-out 0.3s; 235 | } 236 | a.code { 237 | background: transparent url(../images/code.png) no-repeat 0 2px; 238 | width: 30px; 239 | height: 21px; 240 | display: block; 241 | opacity: 0.8; 242 | display: inline-block; 243 | text-indent: -10000px; 244 | -moz-opacity: 0.8; 245 | filter:alpha(opacity=8); 246 | -webkit-transition: opacity ease-in-out 0.3s; 247 | } 248 | a.zip:hover, 249 | a.tar:hover, 250 | a.code:hover { 251 | opacity: 1; 252 | -moz-opacity: 1; 253 | filter:alpha(opacity=1); 254 | } 255 | a.download-button { 256 | border: 1px solid black; 257 | border-radius: 3px; 258 | display: inline-block; 259 | text-indent: 0!important; 260 | width: auto; 261 | float: right; 262 | background: #999; 263 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ADD4', endColorstr='#1B657E'); 264 | background: -webkit-gradient(linear, left top, left bottom, from(#37ADD4), to(#1B657E)); 265 | background: -moz-linear-gradient(top, #37ADD4, #1B657E); 266 | height: auto; 267 | margin-left: 10px; 268 | } 269 | a.download-button span { 270 | background-position: 10px 5px; 271 | width: auto; 272 | height: auto; 273 | padding: 5px 10px; 274 | padding-left: 45px; 275 | display: inline-block; 276 | text-indent: 0!important; 277 | color: #fff; 278 | } 279 | footer { 280 | margin-bottom: 60px; 281 | padding-bottom: 60px; 282 | } 283 | footer .owner { 284 | background: #222; 285 | border: 5px solid #444; 286 | padding: 5px 15px; 287 | margin: -67px -10px 35px; 288 | color: #d6d6d6; 289 | } 290 | footer .creds small { 291 | float: right; 292 | font-size: 10px; 293 | text-align: right; 294 | margin-left: 15px; 295 | } 296 | footer .owner .avatar { 297 | background-color: #666; 298 | display: block; 299 | margin: -19px 10px 0 0; 300 | width: 60px; 301 | float: left; 302 | } 303 | footer .owner img { 304 | display: block; 305 | border: 1px solid #2a2a2a; 306 | margin: 5px; 307 | } 308 | footer .owner p { 309 | font-family:Georgia, serif; 310 | } 311 | footer .owner p a { 312 | font-size: 16px; 313 | font-style: italic; 314 | } 315 | .markdown-body h1, 316 | .markdown-body h2, 317 | .markdown-body h3, 318 | .markdown-body h4, 319 | .markdown-body h5, 320 | .markdown-body h6, 321 | .markdown-body p, 322 | .markdown-body pre, 323 | .markdown-body ul, 324 | .markdown-body ol, 325 | .markdown-body dl, 326 | .markdown-body table, 327 | .markdown-body blockquote { 328 | margin-bottom: 20px; 329 | } 330 | .markdown-body h1, 331 | .markdown-body h2, 332 | .markdown-body h3, 333 | .markdown-body h4, 334 | .markdown-body h5, 335 | .markdown-body h6 { 336 | font-weight: bold; 337 | } 338 | .markdown-body h1 { 339 | font-size: 28px; 340 | } 341 | .markdown-body h2 { 342 | font-size: 24px; 343 | color: #557398; 344 | } 345 | .markdown-body h3 { 346 | font-size: 20px; 347 | } 348 | .markdown-body h4 { 349 | font-size: 18px; 350 | } 351 | .markdown-body h5 { 352 | font-size: 16px; 353 | } 354 | .markdown-body pre { 355 | padding: 10px 70px 10px 0; 356 | margin-left: -20px; 357 | margin-right: -20px; 358 | font-family: 'Monaco', 'Lucida Console', monospace; 359 | font-size: 13px; 360 | line-height: 20px; 361 | box-shadow: inset 0 0 5px #000; 362 | word-wrap: break-word; 363 | background-color:#3b3b3b; 364 | color: #d6d6d6; 365 | } 366 | .markdown-body pre.lines { 367 | font-size: 12px; 368 | margin:0 10px 0 -20px; 369 | padding: 10px; 370 | float: left; 371 | display: block; 372 | text-align: right; 373 | box-shadow: none; 374 | background-color:#2a2a2a; 375 | color: #d6d6d6; 376 | } 377 | .markdown-body ul, 378 | .markdown-body ol { 379 | padding-left: 30px; 380 | } 381 | .markdown-body ul { 382 | list-style-type: disc; 383 | } 384 | .markdown-body li, 385 | .markdown-body li p, 386 | .markdown-body dd, 387 | .markdown-body dd p { 388 | margin-bottom: 10px; 389 | } 390 | .markdown-body li pre, 391 | .markdown-body li pre.lines, 392 | .markdown-body dd pre, 393 | .markdown-body dd pre.lines { 394 | margin-left: -35px; 395 | } 396 | .markdown-body dt { 397 | font-weight: bold; 398 | font-style: italic; 399 | } 400 | .markdown-body dd { 401 | margin-left: 15px; 402 | } 403 | .markdown-body table { 404 | width: 673px; 405 | margin-left: -20px; 406 | margin-right: -20px; 407 | } 408 | .markdown-body tbody { 409 | border-top: 2px solid #557398; 410 | border-bottom: 2px solid #557398; 411 | background-color: #EBEFF4; 412 | } 413 | .markdown-body table td * { 414 | margin: 0; 415 | } 416 | .markdown-body td { 417 | border-right: 1px solid #557398; 418 | border-bottom: 1px solid #557398; 419 | padding: 5px; 420 | } 421 | .markdown-body td:first-child, 422 | .markdown-body th:first-child { 423 | width: 30%; 424 | padding-left: 20px; 425 | } 426 | .markdown-body td:last-child { 427 | border-right: 0 none; 428 | } 429 | .markdown-body th { 430 | font-size: 18px; 431 | font-weight: bold; 432 | text-align: left; 433 | padding: 5px; 434 | } 435 | .markdown-body tt { 436 | background-color:#3b3b3b; 437 | color: #d6d6d6; 438 | padding: 2px 3px; 439 | } 440 | .markdown-body blockquote { 441 | font-style: italic; 442 | font-family:Georgia, serif; 443 | font-size: 17px; 444 | border-top: 3px solid #333; 445 | border-bottom: 3px solid #333; 446 | padding: 10px 20px; 447 | padding-left: 50px; 448 | } 449 | .markdown-body blockquote:before { 450 | font-style: italic; 451 | font-family: Georgia, serif; 452 | font-size: 90px; 453 | height: 90px; 454 | margin-left: -60px; 455 | margin-top: -25px; 456 | content: "‟"; 457 | display: block; 458 | float: left; 459 | } 460 | .markdown-body img { 461 | max-width: 100%; 462 | } 463 | .highlight { background: #ffffff; } 464 | .highlight .c { color: #999988; font-style: italic } 465 | .highlight .err { color: #a61717; background-color: #e3d2d2 } 466 | .highlight .k { font-weight: bold } 467 | .highlight .o { font-weight: bold } 468 | .highlight .cm { color: #999988; font-style: italic } 469 | .highlight .cp { color: #999999; font-weight: bold } 470 | .highlight .c1 { color: #999988; font-style: italic } 471 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } 472 | .highlight .gd { color: #000000; background-color: #ffdddd } 473 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } 474 | .highlight .ge { font-style: italic } 475 | .highlight .gr { color: #aa0000 } 476 | .highlight .gh { color: #999999 } 477 | .highlight .gi { color: #000000; background-color: #ddffdd } 478 | .highlight .gi .x { color: #000000; background-color: #aaffaa } 479 | .highlight .go { color: #888888 } 480 | .highlight .gp { color: #555555 } 481 | .highlight .gs { font-weight: bold } 482 | .highlight .gu { color: #800080; font-weight: bold; } 483 | .highlight .gt { color: #aa0000 } 484 | .highlight .kc { font-weight: bold } 485 | .highlight .kd { font-weight: bold } 486 | .highlight .kn { font-weight: bold } 487 | .highlight .kp { font-weight: bold } 488 | .highlight .kr { font-weight: bold } 489 | .highlight .kt { color: #445588; font-weight: bold } 490 | .highlight .m { color: #009999 } 491 | .highlight .s { color: #d14 } 492 | .highlight .na { color: #008080 } 493 | .highlight .nb { color: #0086B3 } 494 | .highlight .nc { color: #445588; font-weight: bold } 495 | .highlight .no { color: #008080 } 496 | .highlight .ni { color: #800080 } 497 | .highlight .ne { color: #990000; font-weight: bold } 498 | .highlight .nf { color: #990000; font-weight: bold } 499 | .highlight .nn { color: #555555 } 500 | .highlight .nt { color: #000080 } 501 | .highlight .nv { color: #008080 } 502 | .highlight .ow { font-weight: bold } 503 | .highlight .w { color: #bbbbbb } 504 | .highlight .mf { color: #009999 } 505 | .highlight .mh { color: #009999 } 506 | .highlight .mi { color: #009999 } 507 | .highlight .mo { color: #009999 } 508 | .highlight .sb { color: #d14 } 509 | .highlight .sc { color: #d14 } 510 | .highlight .sd { color: #d14 } 511 | .highlight .s2 { color: #d14 } 512 | .highlight .se { color: #d14 } 513 | .highlight .sh { color: #d14 } 514 | .highlight .si { color: #d14 } 515 | .highlight .sx { color: #d14 } 516 | .highlight .sr { color: #009926 } 517 | .highlight .s1 { color: #d14 } 518 | .highlight .ss { color: #990073 } 519 | .highlight .bp { color: #999999 } 520 | .highlight .vc { color: #008080 } 521 | .highlight .vg { color: #008080 } 522 | .highlight .vi { color: #008080 } 523 | .highlight .il { color: #009999 } -------------------------------------------------------------------------------- /docs/demo/images/design/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/design/default.png -------------------------------------------------------------------------------- /docs/demo/images/design/revert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/design/revert.png -------------------------------------------------------------------------------- /docs/demo/images/layout/double-subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/layout/double-subtitle.png -------------------------------------------------------------------------------- /docs/demo/images/layout/double.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/layout/double.png -------------------------------------------------------------------------------- /docs/demo/images/layout/imax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/layout/imax.png -------------------------------------------------------------------------------- /docs/demo/images/layout/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/layout/normal.png -------------------------------------------------------------------------------- /docs/demo/images/layout/subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/layout/subtitle.png -------------------------------------------------------------------------------- /docs/demo/images/layout/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/layout/title.png -------------------------------------------------------------------------------- /docs/demo/images/template/double-subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/double-subtitle.png -------------------------------------------------------------------------------- /docs/demo/images/template/double.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/double.png -------------------------------------------------------------------------------- /docs/demo/images/template/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/normal.png -------------------------------------------------------------------------------- /docs/demo/images/template/picture-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/picture-left.png -------------------------------------------------------------------------------- /docs/demo/images/template/picture-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/picture-right.png -------------------------------------------------------------------------------- /docs/demo/images/template/picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/picture.png -------------------------------------------------------------------------------- /docs/demo/images/template/subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/subtitle.png -------------------------------------------------------------------------------- /docs/demo/images/template/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/title.png -------------------------------------------------------------------------------- /docs/demo/images/template/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/template/video.png -------------------------------------------------------------------------------- /docs/demo/images/widget/video/youkulogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/images/widget/video/youkulogo.png -------------------------------------------------------------------------------- /docs/demo/lib/css/default.min.css: -------------------------------------------------------------------------------- 1 | pre code{display:block;padding:.5em;background:#f0f0f0}pre code,pre .subst,pre .tag .title,pre .lisp .title,pre .clojure .built_in,pre .nginx .title{color:black}pre .string,pre .title,pre .constant,pre .parent,pre .tag .value,pre .rules .value,pre .rules .value .number,pre .preprocessor,pre .ruby .symbol,pre .ruby .symbol .string,pre .aggregate,pre .template_tag,pre .django .variable,pre .smalltalk .class,pre .addition,pre .flow,pre .stream,pre .bash .variable,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .tex .special,pre .erlang_repl .function_or_atom,pre .markdown .header{color:#800}pre .comment,pre .annotation,pre .template_comment,pre .diff .header,pre .chunk,pre .markdown .blockquote{color:#888}pre .number,pre .date,pre .regexp,pre .literal,pre .smalltalk .symbol,pre .smalltalk .char,pre .go .constant,pre .change,pre .markdown .bullet,pre .markdown .link_url{color:#080}pre .label,pre .javadoc,pre .ruby .string,pre .decorator,pre .filter .argument,pre .localvars,pre .array,pre .attr_selector,pre .important,pre .pseudo,pre .pi,pre .doctype,pre .deletion,pre .envvar,pre .shebang,pre .apache .sqbracket,pre .nginx .built_in,pre .tex .formula,pre .erlang_repl .reserved,pre .prompt,pre .markdown .link_label,pre .vhdl .attribute,pre .clojure .attribute,pre .coffeescript .property{color:#88F}pre .keyword,pre .id,pre .phpdoc,pre .title,pre .built_in,pre .aggregate,pre .css .tag,pre .javadoctag,pre .phpdoc,pre .yardoctag,pre .smalltalk .class,pre .winutils,pre .bash .variable,pre .apache .tag,pre .go .typename,pre .tex .command,pre .markdown .strong,pre .request,pre .status{font-weight:bold}pre .markdown .emphasis{font-style:italic}pre .nginx .built_in{font-weight:normal}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:.5} -------------------------------------------------------------------------------- /docs/demo/lib/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/lib/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /docs/demo/lib/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/demo/lib/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /docs/images/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/images/code.png -------------------------------------------------------------------------------- /docs/images/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/images/pattern.png -------------------------------------------------------------------------------- /docs/images/tar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/images/tar.png -------------------------------------------------------------------------------- /docs/images/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/images/top.png -------------------------------------------------------------------------------- /docs/images/zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/docs/images/zip.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | H5Slides 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |

H5Slides

26 |
27 |
28 |

29 |
30 |
31 |
32 | Download 33 | Download 34 | View H5Slides on GitHub 35 | DEMO 36 |
37 | 38 |
39 |
40 |

H5Slides

41 | 42 |

H5Slides希望通过HTML5的技术，成为用户编辑、播放、控制幻灯片这一系列行为的全套方案的提供者。幻灯演示将会变得更自如，更轻便，更开放，更易于分享。

43 | 44 |

特点

45 | 46 |
    47 |
  1. 它是HTML5的！
    2. 48 |
  2. 我们不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片
    3. 49 |
  3. 我们可以自由的在各种设备上进行幻灯演示
    4. 50 |
  4. 我们可以自由扩展幻灯片的制作工具和播放环境
    5. 51 |
  5. 它可以很自由很方便的传播
    6. 52 |
53 | 54 |

它不是……

55 | 56 |
    57 |
  • 它不是个重量级选手
    • 58 |
  • 它不是个全能型选手
    • 59 |
  • 它不是PPT，而是H5Slides！
    • 60 |
61 | 62 |
63 | 64 |

运行方式

65 | 66 |

运行环境

67 | 68 |

H5Slides目前仅支持webkit内核浏览器，PC、Mac端经过本人测试的包括最新版的Safari/Chrome/Maxthon，iOS端仅支持iOS6以上版本(因为可以导入相册图片或相机拍照)。
69 | 兼容更多的浏览器和操作系统需要一个过程，也希望大家可以踊跃参与，贡献代码 :-)

70 | 71 |

运行步骤

72 | 73 |
    74 |
  1. 用浏览器打开源代码中的index.html即可运行；
    2. 75 |
  2. 在新打开的界面中，我们可以自由编辑幻灯片的内容和样式；
    3. 76 |
  3. 点击右上角的“Preview”(预览)按钮，可以进入播放器模式，播放我们之前编辑好的幻灯片；
    4. 77 |
  4. 如果想重新编写一个全新的幻灯片，可以点击右上角的“Reset”(重做)按钮。
    5. 78 |
79 | 80 |
81 | 82 |

我们的计划

83 | 84 |

H5Slides还是个很初级的WebApp，我们希望大家可以一同参与其中，共同打造我们自己的幻灯演示平台！
85 | 同时，H5Slides也是一块HTML5的试验台，很多新的特性、规范、库和框架都可以在这个平台上得以实践，比如：

86 | 87 |
    88 |
  • css 3 transformation
    • 89 |
  • css 3 flexbox
    • 90 |
  • fullscreen api
    • 91 |
  • web storage
    • 92 |
  • knockout.js
    • 93 |
  • bootstrap
    • 94 |
  • require.js
    • 95 |
96 | 97 |

欢迎为我们push代码，如果希望更深入的交流，可以随时与我们取得联系。

98 | 99 |

我们的联系方式

100 | 101 |

我们的github页面：https://github.com/Jinjiang/h5slides
102 | 我们的邮箱：h5slides@gmail.com
103 | 我的个人微博：@勾三股四

104 |
105 |
106 |
107 | 115 |
116 |
117 | Scroll to top 118 | tarzipsource code 119 |

120 |
121 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /docs/javascripts/script.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $(document).ready(function(){ 3 | 4 | // putting lines by the pre blocks 5 | $("pre").each(function(){ 6 | var pre = $(this).text().split("\n"); 7 | var lines = new Array(pre.length+1); 8 | for(var i = 0; i < pre.length; i++) { 9 | var wrap = Math.floor(pre[i].split("").length / 70) 10 | if (pre[i]==""&&i==pre.length-1) { 11 | lines.splice(i, 1); 12 | } else { 13 | lines[i] = i+1; 14 | for(var j = 0; j < wrap; j++) { 15 | lines[i] += "\n"; 16 | } 17 | } 18 | } 19 | $(this).before("
" + lines.join("\n") + "
"); 20 | }); 21 | 22 | var headings = []; 23 | 24 | var collectHeaders = function(){ 25 | headings.push({"top":$(this).offset().top - 15,"text":$(this).text()}); 26 | } 27 | 28 | if($(".markdown-body h1").length > 1) $(".markdown-body h1").each(collectHeaders) 29 | else if($(".markdown-body h2").length > 1) $(".markdown-body h2").each(collectHeaders) 30 | else if($(".markdown-body h3").length > 1) $(".markdown-body h3").each(collectHeaders) 31 | 32 | $(window).scroll(function(){ 33 | if(headings.length==0) return true; 34 | var scrolltop = $(window).scrollTop() || 0; 35 | if(headings[0] && scrolltop < headings[0].top) { 36 | $(".current-section").css({"opacity":0,"visibility":"hidden"}); 37 | return false; 38 | } 39 | $(".current-section").css({"opacity":1,"visibility":"visible"}); 40 | for(var i in headings) { 41 | if(scrolltop >= headings[i].top) { 42 | $(".current-section .name").text(headings[i].text); 43 | } 44 | } 45 | }); 46 | 47 | $(".current-section a").click(function(){ 48 | $(window).scrollTop(0); 49 | return false; 50 | }) 51 | }); 52 | })(jQuery) -------------------------------------------------------------------------------- /docs/params.json: -------------------------------------------------------------------------------- 1 | {"google":"","body":"# H5Slides\r\n\r\n`H5Slides`希望通过HTML5的技术，成为用户编辑、播放、控制幻灯片这一系列行为的全套方案的提供者。幻灯演示将会变得更自如，更轻便，更开放，更易于分享。\r\n\r\n## 特点\r\n\r\n1. 它是HTML5的！\r\n2. 我们不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片\r\n3. 我们可以自由的在各种设备上进行幻灯演示\r\n4. 我们可以自由扩展幻灯片的制作工具和播放环境\r\n5. 它可以很自由很方便的传播\r\n\r\n### 它不是……\r\n\r\n* 它不是个重量级选手\r\n* 它不是个全能型选手\r\n* 它不是PPT，而是`H5Slides`！\r\n\r\n## 运行方式\r\n\r\n### 运行环境\r\n\r\n`H5Slides`支持所有的webkit内核浏览器(safari/maxthon/chrome)，这包括Safari for iPad版本的触摸操作。在支持`FileSystemAPI`的新版webkit内核下(chrome 17+/maxthon 3.3.7+)，还允许用户上传图片，并设置为幻灯片背景等。\r\n\r\n我们对于非webkit内核的浏览器也非常尊重，我们接下来会有一些[兼容其他内核](#兼容更多的环境)的打算。感兴趣的朋友可以移步到项目进展和规划的章节了解情况或参与其中。\r\n\r\n目前，在非webkit内核浏览器下，`H5Slides`会给用户一个较为友好的提示界面，推荐用户通过webkit内核浏览器进行使用。\r\n\r\n### 运行步骤\r\n\r\n* 用webkit内核浏览器打开源代码中的`index.html`即可运行；\r\n* 在新打开的界面中，我们可以自由编辑幻灯片的内容和样式；\r\n* 点击右上角的“播放”按钮，可以进入播放器模式，播放我们之前编辑好的幻灯片；\r\n* 如果想重新编写一个全新的幻灯片，可以点击右上角的“重做”按钮。\r\n\r\n----\r\n\r\n## 我们的计划\r\n\r\n`H5Slides`还是个很初级的WebApp，我们希望大家可以一同参与其中，共同打造我们自己的幻灯演示平台！欢迎为我们push代码，如果希望更深入的交流，可以随时与我们[取得联系](#我们的联系方式)。\r\n\r\n我们看得到的可完善的空间(2012.04.23更新)会放在下面；而同时，这里有一些多多益善的事情可以让大家都参与进来：\r\n\r\n### 幻灯素材\r\n\r\n* 制作更多皮肤 —— 我们会提供[皮肤开发文档](#皮肤开发文档)\r\n* 制作更多动画 —— 我们会提供[动画开发文档](#动画开发文档)\r\n* 更多插件 *1\r\n\r\n### 数据处理\r\n\r\n* 数据结构的扩展 —— 我们会提供[数据格式说明文档](#数据格式说明文档)\r\n* 附件管理(如图片等)\r\n* 数据导入导出\r\n\r\n### 完善编辑器功能\r\n\r\n* 美化编辑器的界面\r\n* 调整布局位置\r\n* 修改字体\r\n* 选择动画\r\n* 幻灯片排序\r\n* 撤销&恢复\r\n* 配置插件 *1\r\n* 插入widget *2\r\n* 设置页面内的动画 *3\r\n\r\n### widget机制 *2\r\n\r\n* 富文本编辑器\r\n* 图片\r\n* 流程图\r\n* 报表\r\n* 视频\r\n* 地图\r\n* 问卷\r\n\r\n### 兼容更多的环境\r\n\r\n* 兼容平板\r\n* 兼容其它浏览器\r\n\r\n\r\n#### 注\r\n\r\n1. 插件是指播放器在播放幻灯演示时的附加功能(如允许演示者在幻灯片上涂鸦等)，插件系统目前还在设计之中\r\n2. widget是指可以插入幻灯片中的多媒体内容或复杂内容，以widget的形式插入其中，widget系统目前还在设计之中\r\n3. 页面内的动画是指幻灯片内容的分步骤呈现的效果，目前还在设计之中\r\n\r\n#### 我们的联系方式\r\n\r\n我们的github页面：[https://github.com/Jinjiang/h5slides](https://github.com/Jinjiang/h5slides) \r\n我们的邮箱：[h5slides@gmail.com](mailto:h5slides@gmail.com) \r\n我的个人微博：[@勾三股四](http://weibo.com/mx006) \r\n\r\n----\r\n\r\n## 皮肤开发文档\r\n\r\n皮肤是基于幻灯片布局和幻灯片内部元素的样式和尺寸的设计。每款皮肤应该拥有一个唯一的名称，在展示时，幻灯片的根结点会被赋予`[data-design=\"*\"]`特性。比如`[data-design=\"blue-summer\"]`。\r\n\r\n### 皮肤文件格式\r\n\r\n每一款皮肤都是由一个css文件作为起点，存放在`/css/theme/`目录下的和皮肤名称同名的css文件中。该css文件的内容应该是一系列主题特性、布局特性、内部元素特性及其样式的集合。比如：\r\n\r\n [data-design=\"blue-summer\"] [data-layout=\"title\"] [data-item=\"content\"] {\r\n color: blue;\r\n width: 480px;\r\n }\r\n [data-design=\"blue-summer\"] [data-layout=\"subtitle\"] [data-item=\"content\"] {\r\n color: navy;\r\n width: 420px;\r\n }\r\n ......\r\n\r\n其中，布局是基于`[data-layout=\"*\"]`的，默认的布局情况一共有5个：\r\n\r\n* `title`: 大标题页面\r\n* `subtitle`: 小标题页面\r\n* `normal`: 正文页面\r\n* `double`: 两列正文页面\r\n* `double-subtitle`: 两列正文且每列正文带子标题的页面\r\n\r\n内部元素是基于`[data-item=\"*\"]`的，默认的内部元素一共有5个：\r\n\r\n* `title`: 标题元素\r\n* `subtitle`: 第一子标题元素\r\n* `subtitle2`: 第二子标题元素\r\n* `content`: 正文元素\r\n* `content2`: 第二正文元素\r\n\r\n幻灯片布局和内部元素的对应关系如下：\r\n\r\n* 每个大标题页面都包含一个标题元素和一个正文元素\r\n* 每个小标题页面都包含一个标题元素和一个正文元素\r\n* 每个正文页面都包含一个标题元素和一个正文元素\r\n* 每个两列正文页面都包含一个标题元素和两个正文元素(正文元素和第二正文元素)\r\n* 每个两列正文带子标题的页面都包含一个标题元素、两个子标题元素(第一子标题元素和第二子标题元素)和两个正文元素(正文元素和第二正文元素)\r\n\r\n默认的主题样式可参考`/css/theme.css`\r\n\r\n另外，我们针对显示区域不是默认比例(4:3)的情况，提供了简单的屏幕背景的样式匹配方式，其依赖于`[data-design]`更上层的元素，所以css选择器处于更上层，命名有两个`[data-background-design]`和`[data-background-layout]`，分别匹配默认情况下的大背景样式和当前幻灯片处于某种布局时的大背景样式。代码示例如下(强烈建议只对其`background(-*)`属性进行修改)：\r\n\r\n [data-background-design=\"summer\"] {\r\n background: white;\r\n }\r\n [data-background-layout=\"subtitle\"] {\r\n background: blue;\r\n }\r\n\r\n### 使用定义好的皮肤\r\n\r\n打开`/data/themes.js`，加入一行数据，比如：`{\"key\": \"blue-summer\", \"title\": \"蓝色夏天\"}`，同时，在`/css/theme/`下新建一个该皮肤的同名目录，并放入`logo.png`作为皮肤展示时的缩略图。然后在编辑器左侧边栏的“主题”面板下会看到这个主题的缩略图。点击该缩略图，即可应用主题。\r\n\r\n----\r\n\r\n## 动画开发文档\r\n\r\n### 播放器的dom结构\r\n\r\n幻灯片在播放时的根结点是`#player`，每张幻灯片是一个`section`结点。默认情况下幻灯片都是隐藏起来的(`display: none;`)，只有正在播放的那张幻灯片是显示出来的(`display: block;`)。\r\n\r\n### 动画的实现原理\r\n\r\n由于`display`的属性值在`none`和`block`之间切换是没有动画效果支持的，我们做了一点改进：把当前幻灯片、前一张幻灯片和后一张幻灯片，分别赋予特殊的className：`.current`、`.prev`、`.next`。他们三个的`display`属性值均为`block`，同时`.prev`和`.next`的`opacity`属性值为`0`，`.current`的`opacity`属性值为`1`。这样幻灯片的切换就会有渐变效果。基本的css样式如下：\r\n\r\n #player section {\r\n display: none;\r\n transition: all 0.3s ease-out;\r\n }\r\n #player section.current {\r\n display: block;\r\n opacity: 1;\r\n }\r\n #player section.next,\r\n #player section.prev {\r\n display: block;\r\n opacity: 0;\r\n }\r\n\r\n### 动画文件格式\r\n\r\n我们可以在此基础上，通过css代码加入更酷炫的幻灯片切换动画。和皮肤开发相同的，我们需要为每种动画效果起一个名字。比如：`horizontal`。然后，我们可以在`/css/transition/`目录下创建一个同名的css文件。\r\n\r\n这个css文件中，我们为幻灯片中的`section`元素增加一个`data-transition`属性：`section[data-transition=\"transition_horizontal\"]`(注意，属性值前需要加入`transition_`前缀)。然后将`.current`、`.prev`、`.next`下的不同样式写入即可。比如：\r\n\r\n [data-transition=\"transition_horizontal\"].next {\r\n left: 450px;\r\n }\r\n [data-transition=\"transition_horizontal\"].current {\r\n left: 0;\r\n }\r\n [data-transition=\"transition_horizontal\"].prev {\r\n left: -450px;\r\n }\r\n\r\n### 使用定义好的动画\r\n\r\n目前使用动画的方法是：打开`/js/app.js`，把其中的变量`defaultTransition`改为带`transition_`前缀的动画名即可。比如：\r\n\r\n var defaultTransition = 'transition_horizontal';\r\n\r\n再使用播放器，就可以看到效果了。\r\n\r\n----\r\n\r\n## 文件/目录结构说明\r\n\r\n* `/css/`: 基本样式文件\r\n* `/css/theme/`: 主题样式集合，每个主题是一个同名css文件，可以伴随同名文件夹包含更多内容\r\n* `/css/transition/`: 切换动画集合，每个动画是一个同名css文件\r\n* `/js/`: 脚本文件\r\n* `/js/lib/`: 基础函数库\r\n* `/js/ui/`: 界面相关的脚本\r\n* `/data/`: 脚本数据，包括可用布局列表、可选主题列表、初始化数据信息等\r\n\r\n----\r\n\r\n## 数据格式说明文档\r\n\r\n默认数据保存在`/data/default.js`中，变量名为`defaultData`。\r\n\r\n var defaultData = {\r\n \"theme\": \"blank\",\r\n \"slides\": [\r\n {\r\n \"layout\": \"title\",\r\n \"content\": {\r\n \"title\": \"幻灯片标题\",\r\n \"content\": \"你的名字\"\r\n }\r\n },\r\n {\r\n \"layout\": \"normal\",\r\n \"content\": {\r\n \"title\": \"正文标题\",\r\n \"content\": \"正文内容\\n是可以多行显示的\"\r\n }\r\n },\r\n {\r\n \"layout\": \"subtitle\",\r\n \"content\": {\r\n \"title\": \"THE END\",\r\n \"content\": \"谢谢大家\"\r\n }\r\n }\r\n ]\r\n };\r\n\r\n### 字段解释\r\n\r\n#### `theme`\r\n\r\n默认主题名称\r\n\r\n#### `slides`\r\n\r\n以数组形式存放所有幻灯片的详细内容\r\n\r\n#### `slides[i].layout`\r\n\r\n某张幻灯片的布局类型，有效的值有：`title`、`subtitle`、`normal`、`double`、`double-subtitle`\r\n\r\n#### `slides[i].content[key]`\r\n\r\n某张幻灯片的所有内部元素的文字内容，有效的key值有：`title`、`subtitle`、`subtitle2`、`content`、`content2`\r\n\r\n#### `slides[i].position[key][cssName]`\r\n\r\n某张幻灯片的自定义元素尺寸和位置，有效的key值同上，有效的cssName值有：`left`、`top`、`width`、`height`。\r\n\r\n目前我们的编辑器暂不支持编辑尺寸和位置，使用时可以通过直接修改`defaultData`的值来应用这一规则。\r\n\r\n#### `slides[i].style[key][cssName]`\r\n\r\n某张幻灯片的自定义元素尺寸和位置，有效的key值在同上的基础上外加一个`slide`，表示该幻灯片整体的样式，有效的cssName值除了上一条提到的属性值外，还不支持：`right`、`bottom`；另外支持形如`-ppt-*`的属性值，以备扩展。\r\n\r\n目前已有的扩展只有一个，就是`-ppt-size`，用来控制文字大小，可选的`-ppt-size`属性值有：`small`、`normal`、`large`。\r\n\r\n目前我们的编辑器暂支持编辑`color`、`-ppt-size`和`slide`下的`background-image`这几个css属性。若想使用其它css属性，可以通过直接修改`defaultData`的值来应用这一规则。\r\n\r\n","note":"Don't delete this file! It's used internally to help with page regeneration.","tagline":"","name":"H5Slides"} -------------------------------------------------------------------------------- /docs/stylesheets/pygment_trac.css: -------------------------------------------------------------------------------- 1 | .highlight { background: #ffffff; } 2 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 4 | .highlight .k { font-weight: bold } /* Keyword */ 5 | .highlight .o { font-weight: bold } /* Operator */ 6 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 7 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ 12 | .highlight .ge { font-style: italic } /* Generic.Emph */ 13 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 14 | .highlight .gh { color: #999999 } /* Generic.Heading */ 15 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ 17 | .highlight .go { color: #888888 } /* Generic.Output */ 18 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 19 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 20 | .highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ 21 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 22 | .highlight .kc { font-weight: bold } /* Keyword.Constant */ 23 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */ 24 | .highlight .kn { font-weight: bold } /* Keyword.Namespace */ 25 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ 26 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */ 27 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 28 | .highlight .m { color: #009999 } /* Literal.Number */ 29 | .highlight .s { color: #d14 } /* Literal.String */ 30 | .highlight .na { color: #008080 } /* Name.Attribute */ 31 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 32 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 33 | .highlight .no { color: #008080 } /* Name.Constant */ 34 | .highlight .ni { color: #800080 } /* Name.Entity */ 35 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 36 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 37 | .highlight .nn { color: #555555 } /* Name.Namespace */ 38 | .highlight .nt { color: #000080 } /* Name.Tag */ 39 | .highlight .nv { color: #008080 } /* Name.Variable */ 40 | .highlight .ow { font-weight: bold } /* Operator.Word */ 41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 42 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 43 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 44 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 45 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 46 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */ 47 | .highlight .sc { color: #d14 } /* Literal.String.Char */ 48 | .highlight .sd { color: #d14 } /* Literal.String.Doc */ 49 | .highlight .s2 { color: #d14 } /* Literal.String.Double */ 50 | .highlight .se { color: #d14 } /* Literal.String.Escape */ 51 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ 52 | .highlight .si { color: #d14 } /* Literal.String.Interpol */ 53 | .highlight .sx { color: #d14 } /* Literal.String.Other */ 54 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 55 | .highlight .s1 { color: #d14 } /* Literal.String.Single */ 56 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 57 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 58 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 59 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 60 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 61 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 62 | 63 | .type-csharp .highlight .k { color: #0000FF } 64 | .type-csharp .highlight .kt { color: #0000FF } 65 | .type-csharp .highlight .nf { color: #000000; font-weight: normal } 66 | .type-csharp .highlight .nc { color: #2B91AF } 67 | .type-csharp .highlight .nn { color: #000000 } 68 | .type-csharp .highlight .s { color: #A31515 } 69 | .type-csharp .highlight .sc { color: #A31515 } 70 | -------------------------------------------------------------------------------- /images/design/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/design/default.png -------------------------------------------------------------------------------- /images/design/revert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/design/revert.png -------------------------------------------------------------------------------- /images/layout/double-subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/layout/double-subtitle.png -------------------------------------------------------------------------------- /images/layout/double.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/layout/double.png -------------------------------------------------------------------------------- /images/layout/imax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/layout/imax.png -------------------------------------------------------------------------------- /images/layout/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/layout/normal.png -------------------------------------------------------------------------------- /images/layout/subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/layout/subtitle.png -------------------------------------------------------------------------------- /images/layout/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/layout/title.png -------------------------------------------------------------------------------- /images/template/double-subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/double-subtitle.png -------------------------------------------------------------------------------- /images/template/double.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/double.png -------------------------------------------------------------------------------- /images/template/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/normal.png -------------------------------------------------------------------------------- /images/template/picture-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/picture-left.png -------------------------------------------------------------------------------- /images/template/picture-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/picture-right.png -------------------------------------------------------------------------------- /images/template/picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/picture.png -------------------------------------------------------------------------------- /images/template/subtitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/subtitle.png -------------------------------------------------------------------------------- /images/template/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/title.png -------------------------------------------------------------------------------- /images/template/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/template/video.png -------------------------------------------------------------------------------- /images/widget/video/youkulogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/images/widget/video/youkulogo.png -------------------------------------------------------------------------------- /js/ctrl.js: -------------------------------------------------------------------------------- 1 | define(function () { 2 | var STAGE_WIDTH = 640; 3 | var STAGE_HEIGHT = 480; 4 | var MIN_UNIT = 20; 5 | 6 | var currentVm; 7 | var currentMenu; 8 | 9 | function toggleMenu(menu) { 10 | if (menu.attr('data-shown')) { 11 | hideMenu(menu); 12 | } 13 | else { 14 | showMenu(menu); 15 | } 16 | } 17 | 18 | function showMenu(menu) { 19 | menu.attr('data-show', 'true'); 20 | 21 | setTimeout(function () { 22 | menu.attr('data-shown', 'true'); 23 | currentMenu = menu; 24 | }, 13); 25 | } 26 | 27 | function hideMenu(menu) { 28 | currentMenu = null; 29 | 30 | menu.removeAttr('data-shown'); 31 | menu.removeAttr('data-extended'); 32 | 33 | setTimeout(function () { 34 | menu.removeAttr('data-extend'); 35 | }, 513); 36 | setTimeout(function () { 37 | menu.removeAttr('data-show'); 38 | }, 513); 39 | } 40 | 41 | function toggleMoreMenu(menu) { 42 | if (menu.attr('data-extended')) { 43 | hideMoreMenu(menu); 44 | } 45 | else { 46 | showMoreMenu(menu); 47 | } 48 | } 49 | 50 | function showMoreMenu(menu) { 51 | menu.attr('data-extend', 'true'); 52 | 53 | setTimeout(function () { 54 | menu.attr('data-extended', 'true'); 55 | }, 13); 56 | } 57 | 58 | function hideMoreMenu(menu) { 59 | menu.removeAttr('data-extended'); 60 | 61 | setTimeout(function () { 62 | menu.removeAttr('data-extend'); 63 | }, 513); 64 | } 65 | 66 | function startDrag(e, dragTo, finish) { 67 | var ori = {}; 68 | var win = $(window); 69 | var target = $(e.target); 70 | var type = e.type; 71 | var offset = {}; 72 | 73 | function readXY(e, dest) { 74 | try { 75 | if (type == 'touchstart') { 76 | e = e.originalEvent.touches[0]; 77 | } 78 | dest.x = e.clientX; 79 | dest.y = e.clientY; 80 | } 81 | catch (ex) { 82 | console.log(ex); 83 | } 84 | } 85 | 86 | function move(e) { 87 | var cur = {}; 88 | 89 | e.preventDefault(); 90 | 91 | readXY(e, cur); 92 | offset.x = cur.x - ori.x; 93 | offset.y = cur.y - ori.y; 94 | 95 | if (!draggingFlag) { 96 | if (Math.abs(offset.x) + Math.abs(offset.y) > 5) { 97 | draggingFlag = true; 98 | } 99 | } 100 | else { 101 | dragTo(offset); 102 | } 103 | } 104 | 105 | function end(e) { 106 | var cur = {}; 107 | var offset = {}; 108 | 109 | if (draggingFlag) { 110 | e.preventDefault(); 111 | finish(offset); 112 | setTimeout(function () { 113 | draggingFlag = false; 114 | }, 13); 115 | } 116 | 117 | target.css('cursor', ''); 118 | 119 | if (type == 'touchstart') { 120 | win.unbind('touchmove', move); 121 | win.unbind('touchend', end); 122 | } 123 | else { 124 | win.unbind('mousemove', move); 125 | win.unbind('mouseup', end); 126 | } 127 | } 128 | 129 | draggingFlag = false; 130 | 131 | readXY(e, ori); 132 | 133 | target.css('cursor', 'move'); 134 | 135 | if (type == 'touchstart') { 136 | win.bind('touchmove', move); 137 | win.bind('touchend', end); 138 | } 139 | else { 140 | e.preventDefault(); 141 | win.bind('mousemove', move); 142 | win.bind('mouseup', end); 143 | } 144 | } 145 | 146 | function adjustChanges(status, changes, mode, verticalAlign) { 147 | var left = status.left + (changes.left || 0); 148 | var top = status.top + (changes.top || 0); 149 | var width = status.outerWidth + (changes.width || 0); 150 | var height = status.outerHeight + (changes.height || 0); 151 | 152 | var widthExtra = status.outerWidth - status.width; 153 | var heightExtra = status.outerHeight - status.height; 154 | 155 | if (verticalAlign == 'bottom') { 156 | top = STAGE_HEIGHT - status.bottom - status.outerHeight + (changes.top || 0); 157 | } 158 | 159 | if (left < 0) { 160 | left = 0; 161 | } 162 | if (top < 0) { 163 | top = 0; 164 | } 165 | if (width < MIN_UNIT) { 166 | width = MIN_UNIT; 167 | } 168 | if (height < MIN_UNIT) { 169 | height = MIN_UNIT; 170 | } 171 | if (left + width > STAGE_WIDTH) { 172 | if (mode == 'move') { 173 | left = STAGE_WIDTH - width; 174 | } 175 | else { 176 | width = STAGE_WIDTH - left; 177 | } 178 | } 179 | if (top + height > STAGE_HEIGHT) { 180 | if (mode == 'move') { 181 | top = STAGE_HEIGHT - height; 182 | } 183 | else { 184 | height = STAGE_HEIGHT - top; 185 | } 186 | } 187 | 188 | return { 189 | left: left, 190 | top: top, 191 | width: width, 192 | height: height 193 | }; 194 | } 195 | 196 | function initCtrl(root, vm) { 197 | var btnStart; 198 | var menu; 199 | var btnMore; 200 | var btnResize; 201 | var key = root.attr('data-key'); 202 | 203 | var verticalAlign = (key == 'title') ? 'bottom' : 'top'; 204 | 205 | var draggingFlag = false; 206 | 207 | function appendCtrl(root) { 208 | var templateSrc = $('#ctrl-template'); 209 | var template = $.trim(templateSrc.text()); 210 | var ctrlRoot = $(template); 211 | 212 | root.append(ctrlRoot); 213 | ctrlRoot.find('a').click(function (e) { 214 | e.preventDefault(); 215 | }); 216 | 217 | btnStart = root.find('.ctrl-start'); 218 | menu = root.find('.ctrl-menu'); 219 | btnResize = root.find('.ctrl-resize'); 220 | 221 | // if (menu.find('li').length > 3) { 222 | // btnMore = menu.find('li:nth-child(3) a'); 223 | // } 224 | // else { 225 | // btnMore = $(); 226 | // } 227 | } 228 | function bindActions(menu) { 229 | var output = root.find('.output'); 230 | var btnEdit = menu.find('[data-action="edit"]'); 231 | var btnClear = menu.find('[data-action="clear"]'); 232 | var moreMenu = menu.find('.ctrl-menu-more'); 233 | 234 | btnEdit.click(function (e) { 235 | e.preventDefault(); 236 | hideMenu(menu); 237 | vm.editItem(output); 238 | }); 239 | 240 | btnClear.click(function (e) { 241 | e.preventDefault(); 242 | hideMenu(menu); 243 | vm.clearItem(output); 244 | }); 245 | 246 | moreMenu.delegate('a', 'click', function (e) { 247 | var target; 248 | e.preventDefault(); 249 | target = $(this); 250 | if (target.attr('data-action') === 'type') { 251 | vm.confirmChangeType(output, target.attr('data-type')); 252 | } 253 | }); 254 | } 255 | 256 | function startMove(e) { 257 | var status = { 258 | left: parseInt(root.css('left')) || 0, 259 | top: parseInt(root.css('top')) || 0, 260 | bottom: parseInt(root.css('bottom')) || 0, 261 | width: parseInt(root.css('width')) || 0, 262 | height: parseInt(root.css('height')) || 0, 263 | outerWidth: root.outerWidth(), 264 | outerHeight: root.outerHeight() 265 | }; 266 | var result; 267 | 268 | startDrag(e, function (offset) { 269 | var changes = { 270 | left: offset.x, 271 | top: offset.y 272 | }; 273 | 274 | result = adjustChanges(status, changes, 'move', verticalAlign); 275 | 276 | root.css('left', result.left + 'px'); 277 | if (verticalAlign == 'top') { 278 | root.css('top', result.top + 'px'); 279 | } 280 | else { 281 | root.css('bottom', STAGE_HEIGHT - result.top - result.height + 'px'); 282 | } 283 | }, function (offset) { 284 | var diffX; 285 | var diffY; 286 | 287 | diffX = result.left - status.left; 288 | if (verticalAlign == 'top') { 289 | diffY = result.top - status.top; 290 | } 291 | else { 292 | diffY = STAGE_HEIGHT - result.top - result.height - status.bottom; 293 | } 294 | 295 | if (Math.abs(diffX) + Math.abs(diffY) > 0) { 296 | // TODO changed; 297 | } 298 | }); 299 | } 300 | function startResize(e) { 301 | var status = { 302 | left: parseInt(root.css('left')) || 0, 303 | top: parseInt(root.css('top')) || 0, 304 | bottom: parseInt(root.css('bottom')) || 0, 305 | width: parseInt(root.css('width')) || 0, 306 | height: parseInt(root.css('height')) || 0, 307 | outerWidth: root.outerWidth(), 308 | outerHeight: root.outerHeight() 309 | }; 310 | var result; 311 | 312 | startDrag(e, function (offset) { 313 | var changes = { 314 | width: offset.x, 315 | height: offset.y 316 | }; 317 | 318 | result = adjustChanges(status, changes, 'resize', verticalAlign); 319 | 320 | root.css('width', result.width + 'px'); 321 | root.css('height', result.height + 'px'); 322 | if (verticalAlign == 'bottom') { 323 | root.css('bottom', STAGE_HEIGHT - result.top - result.height + 'px'); 324 | } 325 | }, function (offset) { 326 | var diffX; 327 | var diffY; 328 | 329 | diffX = result.width - status.width; 330 | diffY = result.height - status.height; 331 | 332 | if (Math.abs(diffX) + Math.abs(diffY) > 0) { 333 | // TODO save new size/position; 334 | } 335 | }); 336 | } 337 | 338 | currentVm = vm; 339 | appendCtrl(root); 340 | bindActions(menu); 341 | 342 | btnStart.click(function (e) { 343 | e.preventDefault(); 344 | currentVm.currentItem(key); 345 | if (!draggingFlag) { 346 | toggleMenu(menu); 347 | } 348 | }); 349 | // btnMore.click(function (e) { 350 | // e.preventDefault(); 351 | // toggleMoreMenu(menu); 352 | // }); 353 | // btnResize.click(function (e) { 354 | // e.preventDefault(); 355 | // }); 356 | // btnStart.bind('mousedown', startMove); 357 | // btnStart.bind('touchstart', startMove); 358 | // btnResize.bind('mousedown', startResize); 359 | // btnResize.bind('touchstart', startResize); 360 | } 361 | 362 | function updateTypeList(root, currentType, typeList) { 363 | var output = root.find('.output'); 364 | var moreMenu = root.find('.ctrl-menu-more'); 365 | 366 | if (!typeList) { 367 | moreMenu.find('a').removeClass('active'); 368 | moreMenu.find('[data-type="' + currentType + '"]').addClass('active'); 369 | } 370 | else { 371 | moreMenu.empty(); 372 | if (typeList.length > 0) { 373 | $.each(typeList, function (i, typeData) { 374 | var key = typeData.key; 375 | var name = typeData.name; 376 | var btn = $('').text(name). 377 | attr('data-action', 'type').attr('data-type', key); 378 | if (currentType === key) { 379 | btn.addClass('active'); 380 | } 381 | moreMenu.append(btn); 382 | }); 383 | } 384 | else { 385 | moreMenu.html('Text'); 386 | } 387 | } 388 | } 389 | 390 | function mousedown(e) { 391 | var target = $(e.target); 392 | var menu = target.closest('.ctrl-menu'); 393 | 394 | if (currentMenu && (!menu || !currentMenu.is(menu))) { 395 | hideMenu(currentMenu); 396 | } 397 | if (menu && menu.length) { 398 | currentMenu = menu; 399 | } 400 | } 401 | 402 | return { 403 | init: function (stage, vm) { 404 | stage.find('[data-key]').each(function () { 405 | initCtrl($(this), vm); 406 | }); 407 | 408 | $(window).bind('mousedown', mousedown); 409 | }, 410 | update: function (item, currentIndex, typeList) { 411 | updateTypeList(item, currentIndex, typeList); 412 | } 413 | }; 414 | }); -------------------------------------------------------------------------------- /js/data.js: -------------------------------------------------------------------------------- 1 | // set data * 2 | // set title * 3 | // set design * 4 | // add/clone/remove slide * 5 | // move slide * 6 | // change template * 7 | // edit item * 8 | // reset * 9 | 10 | define(['storage'], function (storage) { 11 | var templateList = [ 12 | {key: 'normal', title: 'Normal', layout: 'normal', typeMap: {title: 'text', content: 'text'}}, 13 | {key: 'title', title: 'Title', layout: 'title', typeMap: {title: 'text', content: 'text'}}, 14 | {key: 'subtitle', title: 'Subtitle', layout: 'subtitle', typeMap: {title: 'text', content: 'text'}}, 15 | {key: 'double', title: 'Two Columns', layout: 'double', typeMap: {title: 'text', content: 'text', content2: 'text'}}, 16 | {key: 'double-subtitle', title: 'Two Columns with Subtitle', layout: 'double-subtitle', typeMap: {title: 'text', subtitle: 'text', subtitle2: 'text', content: 'text', content2: 'text'}}, 17 | {key: 'picture', title: 'Picture', layout: 'imax', typeMap: {title: 'text', content: 'img'}}, 18 | {key: 'picture-left', title: 'Picture in Left', layout: 'double', typeMap: {title: 'text', content: 'img', content2: 'text'}}, 19 | {key: 'picture-right', title: 'Picture in Right', layout: 'double', typeMap: {title: 'text', content: 'text', content2: 'img'}} 20 | // {key: 'video', title: 'Youku Video', layout: 'imax', typeMap: {title: 'text', content: 'video'}} 21 | ]; 22 | var tmplList = [ 23 | ]; 24 | var layoutList = [ 25 | {key: 'normal', title: 'Normal'}, 26 | {key: 'title', title: 'Title'}, 27 | {key: 'subtitle', title: 'Subtitle'}, 28 | {key: 'double', title: 'Two Columns'}, 29 | {key: 'double-subtitle', title: 'Two Columns with Subtitle'}, 30 | {key: 'imax', title: 'iMax Item'} 31 | ]; 32 | var typeName = { 33 | text: 'Text', 34 | img: 'Image', 35 | code: 'Code' 36 | }; 37 | var typeMap = { 38 | default: { 39 | default: ['text', 'img', 'code'], 40 | title: ['text'], 41 | subtitle: ['text'], 42 | subtitle2: ['text'] 43 | }, 44 | title: { 45 | content: ['text'] 46 | }, 47 | subtitle: { 48 | content: ['text'] 49 | } 50 | }; 51 | var designList = [ 52 | {key: 'default', title: 'Default'}, 53 | {key: 'revert', title: 'Revert'} 54 | ]; 55 | var transitionList = [ 56 | {key: 'horizontal', title: 'Normal'}, 57 | {key: 'vertical', title: 'Vertical'}, 58 | {key: 'cubic-horizontal', title: 'Cubic'}, 59 | {key: 'cubic-horizontal-inner', title: 'Cubic Inset'}, 60 | {key: 'cubic-vertical', title: 'Cubic Vertical'}, 61 | {key: 'cubic-vertical-inner', title: 'Cubic Vertical Inset'}, 62 | {key: 'doors', title: 'Open Doors'}, 63 | {key: 'zoom-in', title: 'Zoom In'}, 64 | {key: 'zoom-out', title: 'Zoom Out'}, 65 | {key: 'sublime', title: 'Sublime'}, 66 | {key: 'fly', title: 'Fly Away'}, 67 | {key: 'fall', title: 'Fall Down'} 68 | ]; 69 | 70 | var defaultData = { 71 | design: 'default', 72 | transition: 'horizontal', 73 | title: '', 74 | slides: [ 75 | {sid: 'A', layout: 'title', items: {title: {type: 'text', value: 'Hello World'}, content: {type: 'text', value: 'test info'}}}, 76 | {sid: 'B', layout: 'normal', items: {title: {type: 'text', value: 'Content'}, content: {type: 'text', value: 'this is the menu here.'}}}, 77 | {sid: 'C', layout: 'imax', items: {title: {type: 'text', value: 'Logo'}, content: {type: 'img', value: 'http://www.maxthon.cn/images/logo_128x128.png'}}} 78 | // {sid: 'D', template: 'video', layout: 'imax', items: {title: {type: 'text', value: 'Video'}, content: {type: 'video', value: 'XNjUwODE1Mg=='}}} 79 | ] 80 | }; 81 | 82 | var data = storage.readData() || JSON.parse(JSON.stringify(defaultData)); 83 | 84 | var onStorage = true; 85 | 86 | function mapToArray(obj) { 87 | var newObj; 88 | if (Object.prototype.toString.call(obj) == '[object Object]') { 89 | newObj = []; 90 | $.each(obj, function (k, v) { 91 | newObj.push([k, mapToArray(v)]); 92 | }); 93 | newObj.sort(function (a, b) { 94 | return a[0] > b[0]; 95 | }); 96 | } 97 | else if (Object.prototype.toString.call(obj) == '[object Array]') { 98 | newObj = []; 99 | $.each(obj, function (i, v) { 100 | newObj.push(mapToArray(v)); 101 | }); 102 | } 103 | else { 104 | newObj = obj; 105 | } 106 | return newObj; 107 | } 108 | function checkChanged(objA, objB) { 109 | var newObjA = mapToArray(objA); 110 | var newObjB = mapToArray(objB); 111 | 112 | return JSON.stringify(newObjA) !== JSON.stringify(newObjB); 113 | } 114 | 115 | function extend(dest, src) { 116 | $.each(src, function (k, v) { 117 | dest[k] = v; 118 | }); 119 | } 120 | 121 | var manager = { 122 | getTplList: function () { 123 | return templateList; 124 | }, 125 | getLayoutList: function () { 126 | return layoutList; 127 | }, 128 | getDesignList: function () { 129 | return designList; 130 | }, 131 | getTransitionList: function () { 132 | return transitionList; 133 | }, 134 | getTplByKey: function (key) { 135 | var result; 136 | templateList.forEach(function (tplData) { 137 | if (tplData.key == key) { 138 | result = tplData; 139 | } 140 | }); 141 | return result; 142 | }, 143 | getDesignByKey: function (key) { 144 | var result; 145 | designList.forEach(function (designData) { 146 | if (designData.key == key) { 147 | result = designData; 148 | } 149 | }); 150 | return result; 151 | }, 152 | getTransitionByKey: function (key) { 153 | var result; 154 | transitionList.forEach(function (transitionData) { 155 | if (transitionData.key == key) { 156 | result = transitionData; 157 | } 158 | }); 159 | return result; 160 | }, 161 | getTypeList: function (layout, key) { 162 | var layoutInfo; 163 | var itemInfo; 164 | var result; 165 | 166 | layoutInfo = typeMap[layout]; 167 | 168 | if (layoutInfo) { 169 | itemInfo = layoutInfo[key] || layoutInfo.default; 170 | } 171 | if (!itemInfo) { 172 | layoutInfo = typeMap.default; 173 | itemInfo = layoutInfo[key] || layoutInfo.default; 174 | } 175 | 176 | result = []; 177 | itemInfo.forEach(function (key) { 178 | result.push({key: key, name: typeName[key]}); 179 | }); 180 | 181 | return result; 182 | }, 183 | 184 | getData: function () { 185 | return data; 186 | }, 187 | getDesign: function () { 188 | return data.design; 189 | }, 190 | getTransition: function () { 191 | return data.transition; 192 | }, 193 | getTitle: function () { 194 | return data.title; 195 | }, 196 | setData: function (newData) { 197 | data = newData; 198 | }, 199 | setDesign: function (newDesign) { 200 | data.design = newDesign; 201 | }, 202 | setTransition: function (newTransition) { 203 | data.transition = newTransition; 204 | }, 205 | setTitle: function (newTitle) { 206 | data.title = newTitle; 207 | }, 208 | 209 | getPageList: function () { 210 | var list = []; 211 | data.slides.forEach(function (slideData) { 212 | list.push({sid: slideData.sid, title: slideData.items.title.value}); 213 | }); 214 | return list; 215 | }, 216 | 217 | getSlideList: function () { 218 | return data.slides; 219 | }, 220 | getSlide: function (page) { 221 | return data.slides[page]; 222 | }, 223 | getSlideById: function (sid) { 224 | var result; 225 | data.slides.forEach(function (slideData) { 226 | if (slideData.sid == sid) { 227 | result = slideData; 228 | } 229 | }); 230 | return result; 231 | }, 232 | getItem: function (page, key) { 233 | var slideData = data.slides[page] || {}; 234 | var itemMap = slideData.items || {}; 235 | var itemData = itemMap[key] || {}; 236 | return itemData; 237 | }, 238 | getValue: function (page, key) { 239 | var slideData = data.slides[page] || {}; 240 | var itemMap = slideData.items || {}; 241 | var itemData = itemMap[key] || {}; 242 | return itemData.value; 243 | }, 244 | 245 | changeLayout: function (page, layout, ignoreTypeChange) { 246 | var slideData = data.slides[page] || {}; 247 | slideData.layout = layout; 248 | }, 249 | // changeTemplate: function (page, template, ignoreTypeChange) { 250 | // var slideData = data.slides[page] || {}; 251 | // var tplData = manager.getTplByKey(template); 252 | // var hasNewLayout = (slideData.layout != tplData.layout); 253 | // var changedKeys = []; 254 | 255 | // slideData.template = template; 256 | 257 | // if (hasNewLayout) { 258 | // slideData.layout = tplData.layout; 259 | // } 260 | 261 | // $.each(tplData.typeMap, function (key, type) { 262 | // var itemData = slideData.items[key]; 263 | 264 | // if (!itemData) { 265 | // slideData.items[key] = itemData = {}; 266 | // } 267 | // if (hasNewLayout) { 268 | // itemData.position = {}; 269 | // } 270 | // if (!itemData.value) { 271 | // if (!ignoreTypeChange) { 272 | // itemData.type = type; 273 | // } 274 | // itemData.config = {}; 275 | // changedKeys.push(key); 276 | // } 277 | // }); 278 | 279 | // return changedKeys; 280 | // }, 281 | changeType: function (page, key, type) { 282 | var slideData = data.slides[page] || {}; 283 | var itemData = slideData.items[key]; 284 | 285 | if (!itemData) { 286 | itemData = {}; 287 | slideData.items[key] = itemData; 288 | } 289 | 290 | itemData.type = type; 291 | itemData.value = null; 292 | itemData.config = {}; 293 | }, 294 | 295 | clearItem: function (page, key) { 296 | var itemData = manager.getItem(page, key); 297 | itemData.value = null; 298 | itemData.config = {}; 299 | }, 300 | setValue: function (page, key, value) { 301 | var itemData = manager.getItem(page, key); 302 | itemData.value = value; 303 | }, 304 | 305 | startStorage: function () { 306 | onStorage = true; 307 | }, 308 | stopStorage: function () { 309 | onStorage = false; 310 | }, 311 | 312 | checkItemChanged: function (page, key, outerData) { 313 | var itemData; 314 | 315 | if (!key) { 316 | return; 317 | } 318 | 319 | itemData = manager.getItem(page, key); 320 | 321 | return checkChanged(itemData, outerData); 322 | }, 323 | 324 | reset: function (newData) { 325 | newData = newData || defaultData; 326 | data = JSON.parse(JSON.stringify(newData)); 327 | }, 328 | save: function () { 329 | var result; 330 | if (onStorage) { 331 | result = storage.saveData(data); 332 | if (result === false) { 333 | console.log('storage error! (QuotaExceededError)'); 334 | } 335 | } 336 | } 337 | }; 338 | 339 | extend(manager, { 340 | readMedia: storage.readMedia, 341 | saveMedia: storage.saveMedia, 342 | removeMedia: storage.removeMedia, 343 | getMediaList: storage.getMediaList 344 | }); 345 | 346 | return manager; 347 | }); -------------------------------------------------------------------------------- /js/design.js: -------------------------------------------------------------------------------- 1 | define(function () { 2 | var cssLinkMap = {}; 3 | 4 | function loadCssLink(key) { 5 | if (!cssLinkMap[key]) { 6 | cssLink = $('').attr('href', 'css/design/' + key + '.css'); 7 | $('head').append(cssLink); 8 | cssLinkMap[key] = cssLink; 9 | } 10 | } 11 | 12 | return { 13 | loadCssLink: loadCssLink 14 | }; 15 | }); -------------------------------------------------------------------------------- /js/editor.js: -------------------------------------------------------------------------------- 1 | define(['vm', 'title', 'page', 'status', 'stage'], 2 | function (vm, titleManager, pageManager, statusManager, stageManager) { 3 | function getExtUrl() { 4 | var url = ''; 5 | var extResult = location.search.match(/[\&\?]ext=([^\&]*)/); 6 | 7 | if (extResult) { 8 | url = decodeURIComponent(extResult[1]); 9 | } 10 | 11 | return url; 12 | } 13 | 14 | function checkExt() { 15 | var url = getExtUrl(); 16 | var script; 17 | 18 | if (url) { 19 | script = document.createElement('script'); 20 | script.src = url; 21 | document.body.appendChild(script); 22 | } 23 | 24 | history.replaceState(null, null, location.pathname); 25 | } 26 | 27 | function init() { 28 | titleManager.init(vm); 29 | statusManager.init(vm); 30 | pageManager.init(vm); 31 | stageManager.init(vm); 32 | 33 | ko.applyBindings(vm); 34 | vm.previewAll(); 35 | 36 | checkExt(); 37 | } 38 | 39 | return { 40 | init: init 41 | } 42 | } 43 | ); -------------------------------------------------------------------------------- /js/fullscreen.js: -------------------------------------------------------------------------------- 1 | define([], function(){ 2 | 3 | var fullScreen = { 4 | /** 5 | 是否支持全屏模式 6 | */ 7 | fullScreenEnabled: ( function() { 8 | var doc = document.documentElement; 9 | 10 | return ( 'requestFullscreen' in doc ) || 11 | ( 'webkitRequestFullScreen' in doc ) || 12 | ( 'msRequestFullscreen' in doc && document.msFullscreenEnabled) || 13 | ( 'mozRequestFullScreen' in doc && document.mozFullScreenEnabled ) || 14 | false; 15 | } )(), 16 | /** 17 | 判断当前全屏状态 18 | */ 19 | isFullScreen: function() { 20 | return document.fullscreen || 21 | document.webkitIsFullScreen || 22 | document.mozFullScreen || 23 | false; 24 | }, 25 | /** 26 | 进入全屏模式 27 | */ 28 | requestFullScreen : function(elem){ 29 | if ( !this.fullScreenEnabled ) { 30 | return; 31 | } 32 | 33 | if ( this.isFullScreen() ) { 34 | this.exitFullScreen(); 35 | } 36 | 37 | if (elem.requestFullscreen) { 38 | elem.requestFullscreen(); 39 | }else if (elem.webkitRequestFullScreen) { 40 | elem.webkitRequestFullScreen(); 41 | }else if (elem.mozRequestFullScreen) { 42 | elem.mozRequestFullScreen(); 43 | }else if (elem.msRequestFullscreen){ 44 | elem.msRequestFullscreen(); 45 | } 46 | }, 47 | /** 48 | 退出全屏模式 49 | */ 50 | exitFullScreen : function(){ 51 | if (document.exitFullscreen) { 52 | document.exitFullscreen(); 53 | }else if (document.webkitCancelFullScreen) { 54 | document.webkitCancelFullScreen(); 55 | }else if (document.mozCancelFullScreen) { 56 | document.mozCancelFullScreen(); 57 | }else if (document.msExitFullscreen){ 58 | document.msExitFullscreen(); 59 | } 60 | }, 61 | /** 62 | 绑定全屏事件 63 | */ 64 | bindFullScreenChange : function(handler){ 65 | if (this.fullScreenEnabled) { 66 | if(document.onwebkitfullscreenchange){ 67 | document.onwebkitfullscreenchange = function (e) { 68 | handler && handler(isFullscreen()); 69 | }; 70 | }else if(document.onmozfullscreenchange){ 71 | document.onmozfullscreenchange = function (e) { 72 | handler && handler(isFullscreen()); 73 | }; 74 | }else if(document.onmsfullscreenchange){ 75 | document.onmsfullscreenchange = function (e) { 76 | handler && handler(isFullscreen()); 77 | }; 78 | } 79 | } 80 | } 81 | }; 82 | 83 | return fullScreen; 84 | }); 85 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // designList ** 2 | // transitionList ** 3 | // tplList ** 4 | // pageList ** 5 | 6 | // currentDesign ** 7 | // currentLayout ** 8 | // currentPage ** 9 | // currentLayout ** 10 | // currentItem ** 11 | // currentItemDataCopy * 12 | 13 | // title ** 14 | // titleDisplay ** 15 | // editingTitle ** 16 | 17 | // clickTpl ** 18 | // clickDesign ** 19 | // clickPage ** 20 | 21 | // addPage ** 22 | // clonePage ** 23 | // removePage ** 24 | // nextPage ** 25 | // prevPage ** 26 | // moveUpPage ** 27 | // moveDownPage ** 28 | 29 | // editTitle ** 30 | 31 | // previewItem ** 32 | // previewAll ** 33 | // editItem ** 34 | // finishEdit * 35 | 36 | 37 | requirejs( 38 | ['editor', 'player'], 39 | function (editor, player) { 40 | editor.init(); 41 | } 42 | ); 43 | -------------------------------------------------------------------------------- /js/page.js: -------------------------------------------------------------------------------- 1 | define(['data'], function (dataManager) { 2 | return { 3 | init: function (vm) { 4 | vm.nextPage = function () { 5 | var $index = vm.currentPage(); 6 | if ($index < vm.pageList().length - 1) { 7 | vm.currentPage($index + 1); 8 | } 9 | }; 10 | vm.prevPage = function () { 11 | var $index = vm.currentPage(); 12 | if ($index > 0) { 13 | vm.currentPage($index - 1); 14 | } 15 | }; 16 | 17 | vm.addPage = function (templateData) { 18 | var $index; 19 | var slideList; 20 | var slide; 21 | var sid = (new Date).valueOf(); 22 | 23 | templateData = templateData || { 24 | layout: 'normal', 25 | typeMap: {title: 'text', content: 'text'} 26 | }; 27 | 28 | $index = vm.currentPage(); 29 | vm.pageList.splice($index + 1, 0, {sid: sid, title: ''}); 30 | 31 | slideList = dataManager.getSlideList(); 32 | slide = { 33 | sid: sid, 34 | layout: templateData.layout, 35 | items: {} 36 | // template: 'normal', 37 | // layout: 'normal', 38 | // items: { 39 | // title: {type: 'text', value: ''}, 40 | // content: {type: 'text', value: ''} 41 | // } 42 | }; 43 | $.each(templateData.typeMap, function (key, type) { 44 | slide.items[key] = {type: type, value: ''}; 45 | }); 46 | 47 | slideList.splice($index + 1, 0, slide); 48 | 49 | vm.currentPage($index + 1); 50 | 51 | dataManager.save(); 52 | }; 53 | vm.clonePage = function () { 54 | var $index; 55 | var page; 56 | var slideList; 57 | var slide; 58 | var sid = (new Date).toString(); 59 | 60 | $index = vm.currentPage(); 61 | page = JSON.stringify(vm.pageList.slice($index, $index + 1)[0]); 62 | page.sid = sid; 63 | page = JSON.parse(page); 64 | vm.pageList.splice($index + 1, 0, page); 65 | 66 | slideList = dataManager.getSlideList(); 67 | slide = JSON.stringify(dataManager.getSlide($index)); 68 | slide.sid = sid; 69 | slide = JSON.parse(slide); 70 | slideList.splice($index + 1, 0, slide); 71 | 72 | vm.currentPage($index + 1); 73 | 74 | dataManager.save(); 75 | }; 76 | vm.removePage = function () { 77 | var $index; 78 | var slideList; 79 | 80 | $index = vm.currentPage(); 81 | if (vm.pageList().length == 1) { 82 | return; 83 | } 84 | if ($index == vm.pageList().length - 1) { 85 | vm.currentPage($index - 1); 86 | } 87 | vm.pageList.splice($index, 1); 88 | 89 | slideList = dataManager.getSlideList(); 90 | slideList.splice($index, 1); 91 | dataManager.save(); 92 | }; 93 | vm.moveUpPage = function () { 94 | var $index; 95 | var slideList; 96 | var page; 97 | var slide; 98 | 99 | $index = vm.currentPage(); 100 | slideList = dataManager.getSlideList(); 101 | 102 | if ($index > 0) { 103 | page = vm.pageList.splice($index, 1)[0]; 104 | vm.pageList.splice($index - 1, 0, page); 105 | 106 | slide = slideList.splice($index, 1)[0]; 107 | slideList.splice($index - 1, 0, slide); 108 | 109 | vm.currentPage($index - 1); 110 | 111 | dataManager.save(); 112 | } 113 | }; 114 | vm.moveDownPage = function () { 115 | var $index; 116 | var slideList; 117 | var page; 118 | var slide; 119 | 120 | $index = vm.currentPage(); 121 | slideList = dataManager.getSlideList(); 122 | 123 | if ($index < vm.pageList().length - 1) { 124 | page = vm.pageList.splice($index, 1)[0]; 125 | vm.pageList.splice($index + 1, 0, page); 126 | 127 | slide = slideList.splice($index, 1)[0]; 128 | slideList.splice($index + 1, 0, slide); 129 | 130 | vm.currentPage($index + 1); 131 | 132 | dataManager.save(); 133 | } 134 | }; 135 | } 136 | }; 137 | }); -------------------------------------------------------------------------------- /js/player.js: -------------------------------------------------------------------------------- 1 | define(['data', 'design', 'types', 'vm', 'fullscreen'], function (dataManager, designManager, typeMap, vm, fullscreen) { 2 | var btnPreview = $('#preview-btn'); 3 | var btnPreviewCurrent = $('#preview-current-btn'); 4 | 5 | var player = $('#player'); 6 | var editor = $('#editor'); 7 | 8 | var stageDom = $('#player-stage'); 9 | var slidesContainer = $('#player-slides-container'); 10 | 11 | var btnMenu = $('#player-btn-menu'); 12 | var btnNext = $('#player-btn-next'); 13 | var btnPrev = $('#player-btn-prev'); 14 | var btnGoto = $('#player-btn-goto'); 15 | var btnExit = $('#player-btn-exit'); 16 | 17 | var txtPage = $('#player-page'); 18 | var txtSum = $('#player-sum'); 19 | 20 | var gotoDialog = $('#goto-dialog'); 21 | var gotoNumber = $('#goto-number'); 22 | var btnGo = gotoDialog.find('[data-action="go"]'); 23 | 24 | var slideLength; 25 | var currentPage; 26 | 27 | var currentSlideDom; 28 | var nextSlideDom; 29 | var prevSlideDom; 30 | 31 | var isPlaying = false; 32 | 33 | /** 34 | 创建一个元素 35 | */ 36 | function createItem(key, itemData) { 37 | var itemDom = $('
'); 38 | var type = itemData.type || 'text'; 39 | var typeHelper = typeMap[type]; 40 | var output = itemDom.find('.output'); 41 | 42 | itemDom.attr('data-key', key); 43 | itemDom.attr('data-type', type); 44 | 45 | if (typeHelper) { 46 | typeHelper.build(itemData, output); 47 | } 48 | 49 | return itemDom; 50 | } 51 | /** 52 | 创建一页幻灯片 53 | */ 54 | function createSlide(page, slideData) { 55 | var slideDom = $('
'); 56 | 57 | slideDom.addClass('slide'); 58 | 59 | slideDom.attr('id', 'slide-' + slideData.sid); 60 | slideDom.attr('data-layout', slideData.layout); 61 | slideDom.attr('data-page', page); 62 | 63 | $.each(slideData.items, function (key, itemData) { 64 | var itemDom = createItem(key, itemData); 65 | if (itemDom) { 66 | slideDom.append(itemDom); 67 | } 68 | }); 69 | 70 | return slideDom; 71 | } 72 | 73 | 74 | /** 75 | 获取某一页幻灯片 76 | */ 77 | function getSlideDom(page) { 78 | if (page < 0) { 79 | return $(); 80 | } 81 | return $(slidesContainer.find('.slide')[page]); 82 | } 83 | 84 | 85 | /** 86 | 隐藏一页幻灯片 87 | */ 88 | function hidePage(dom) { 89 | dom.children().each(function () { 90 | var itemDom = $(this); 91 | var output = itemDom.find('.output'); 92 | var type = itemDom.attr('data-type'); 93 | var typeHelper = typeMap[type]; 94 | 95 | if (typeHelper && typeHelper.hide) { 96 | typeHelper.hide(output); 97 | } 98 | }); 99 | } 100 | /** 101 | 显示一页幻灯片 102 | */ 103 | function showPage(dom) { 104 | dom.children().each(function () { 105 | var itemDom = $(this); 106 | var output = itemDom.find('.output'); 107 | var type = itemDom.attr('data-type'); 108 | var typeHelper = typeMap[type]; 109 | 110 | if (typeHelper && typeHelper.show) { 111 | typeHelper.show(output); 112 | } 113 | }); 114 | } 115 | 116 | 117 | /** 118 | 切换两页幻灯片 119 | */ 120 | function switchPage(newPage) { 121 | var next = -1; 122 | var prev = -1; 123 | 124 | var oldPage = -1; 125 | var oldNext = -1; 126 | var oldPrev = -1; 127 | 128 | // get old current/next/prev 129 | if (currentSlideDom) { 130 | oldPage = currentSlideDom.attr('data-page') - 0; 131 | } 132 | if (nextSlideDom) { 133 | oldNext = nextSlideDom.attr('data-page') - 0; 134 | } 135 | if (prevSlideDom) { 136 | oldPrev = prevSlideDom.attr('data-page') - 0; 137 | } 138 | 139 | if (oldPage == newPage) { 140 | return; 141 | } 142 | 143 | // get new current/next/prev 144 | if (newPage > 0) { 145 | prev = newPage - 1; 146 | } 147 | if (newPage < slideLength - 1) { 148 | next = newPage + 1; 149 | } 150 | if (oldPage >= 0) { 151 | if (oldPage > newPage) { 152 | next = oldPage; 153 | } 154 | else if (oldPage < newPage) { 155 | prev = oldPage; 156 | } 157 | } 158 | 159 | currentSlideDom && currentSlideDom.removeClass('slide-current'); 160 | nextSlideDom && nextSlideDom.removeClass('slide-next'); 161 | prevSlideDom && prevSlideDom.removeClass('slide-prev'); 162 | 163 | currentSlideDom = null; 164 | nextSlideDom = null; 165 | prevSlideDom = null; 166 | 167 | if (newPage >= 0) { 168 | currentSlideDom = getSlideDom(newPage).addClass('slide-current'); 169 | } 170 | if (next >= 0) { 171 | nextSlideDom = getSlideDom(next).addClass('slide-next'); 172 | } 173 | if (prev >= 0) { 174 | prevSlideDom = getSlideDom(prev).addClass('slide-prev'); 175 | } 176 | } 177 | 178 | /** 179 | 跳转到某一页 180 | */ 181 | function gotoPage(page) { 182 | var oldPage = currentPage; 183 | var newPage = page - 0; 184 | 185 | var oldSlideDom = currentSlideDom; 186 | var newSlideDom = getSlideDom(page);; 187 | 188 | if (oldPage == newPage) { 189 | return; 190 | } 191 | 192 | if (oldSlideDom) { 193 | hidePage(oldSlideDom); 194 | } 195 | if (newSlideDom) { 196 | showPage(newSlideDom); 197 | } 198 | 199 | currentPage = newPage; 200 | txtPage.text(newPage + 1); 201 | 202 | switchPage(newPage); 203 | } 204 | 205 | 206 | /** 207 | 下一页 208 | */ 209 | function goNext() { 210 | if (currentPage < slideLength - 1) { 211 | gotoPage(currentPage + 1); 212 | } 213 | } 214 | /** 215 | 前一页 216 | */ 217 | function goPrev() { 218 | if (currentPage > 0) { 219 | gotoPage(currentPage - 1); 220 | } 221 | } 222 | 223 | 224 | /** 225 | 绑定点击下一页按钮的事件 226 | */ 227 | function clickNext(e) { 228 | e.preventDefault(); 229 | goNext(); 230 | } 231 | /** 232 | 绑定点击前一页按钮的事件 233 | */ 234 | function clickPrev(e) { 235 | e.preventDefault(); 236 | goPrev(); 237 | } 238 | /** 239 | 绑定点击弹出跳转对话框按钮的事件 240 | */ 241 | function clickGoto(e) { 242 | e.preventDefault(); 243 | 244 | gotoDialog.modal('show'); 245 | gotoNumber.val(currentPage + 1); 246 | } 247 | /** 248 | 绑定点击跳转按钮的事件 249 | */ 250 | function clickGo(e) { 251 | var newPage = gotoNumber.val() - 1; 252 | gotoPage(newPage); 253 | } 254 | 255 | /** 256 | 修改属性元素的前缀以兼容当前浏览器 257 | */ 258 | function compatCssPropPrefix(prop) { 259 | var style = document.createElement('dummy').style, 260 | prefixes = 'Webkit Moz O ms Khtml'.split(' '), 261 | memory = {}; 262 | 263 | if (typeof memory[ prop ] === "undefined") { 264 | 265 | var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1), 266 | props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' '); 267 | 268 | memory[ prop ] = null; 269 | for (var i in props) { 270 | if (style[ props[i] ] !== undefined) { 271 | memory[ prop ] = props[i]; 272 | break; 273 | } 274 | } 275 | 276 | } 277 | 278 | return memory[ prop ]; 279 | } 280 | 281 | /** 282 | 修改元素的css属性元素以兼容当前浏览器 283 | @param el 284 | @param props 285 | @returns {*} 286 | */ 287 | function compatCssProp ( el, props ) { 288 | var key, pkey; 289 | 290 | for ( key in props ) { 291 | if ( props.hasOwnProperty(key) ) { 292 | pkey = compatCssPropPrefix(key); 293 | if ( pkey !== null ) { 294 | el.style[pkey] = props[key]; 295 | } 296 | } 297 | } 298 | return el; 299 | } 300 | 301 | /** 302 | 退出播放器，显示编辑器 303 | */ 304 | function doExit() { 305 | //使transform属性兼容当前浏览器 306 | compatCssProp(slidesContainer[0], {'transform':''}); 307 | 308 | currentSlideDom = null; 309 | nextSlideDom = null; 310 | prevSlideDom = null; 311 | 312 | currentPage = -1; 313 | 314 | slideLength = null; 315 | slidesContainer.empty(); 316 | 317 | $(window).unbind('keydown', keydown); 318 | 319 | fullscreen.bindFullScreenChange(null); 320 | fullscreen.exitFullScreen(); 321 | 322 | player.hide(); 323 | editor.show(); 324 | 325 | isPlaying = false; 326 | } 327 | 328 | /** 329 | 启动播放器，初始化幻灯片和屏幕 330 | */ 331 | function doPlay(page) { 332 | var design = dataManager.getDesign(); 333 | var transition = dataManager.getTransition(); 334 | var title = dataManager.getTitle(); 335 | var slideList = dataManager.getSlideList(); 336 | 337 | designManager.loadCssLink(design); 338 | stageDom.attr('data-design', design); 339 | stageDom.attr('data-transition', transition); 340 | 341 | slidesContainer.empty(); 342 | $.each(slideList, function (i, slideData) { 343 | var slideDom = createSlide(i, slideData); 344 | 345 | slidesContainer.append(slideDom); 346 | }); 347 | 348 | slideLength = slideList.length 349 | txtSum.text(slideLength); 350 | gotoNumber.attr('min', 1); 351 | gotoNumber.attr('max', slideLength); 352 | 353 | gotoPage(parseInt(page) || 0); 354 | 355 | $(window).bind('keydown', keydown); 356 | 357 | fullscreen.requestFullScreen(document.body); 358 | fullscreen.bindFullScreenChange(function (isFullscreen) { 359 | if (!isFullscreen) { 360 | doExit(); 361 | } 362 | }); 363 | 364 | isPlaying = true; 365 | } 366 | 367 | 368 | /** 369 | 绑定键盘事件 370 | */ 371 | function keydown(e) { 372 | switch (e.keyCode) { 373 | case 38: 374 | case 37: 375 | goPrev(); 376 | break; 377 | case 13: 378 | case 39: 379 | case 40: 380 | goNext(); 381 | break; 382 | case 27: 383 | doExit(); 384 | break; 385 | default: 386 | ; 387 | } 388 | } 389 | 390 | /** 391 | 绑定点击退出按钮的事件 392 | */ 393 | function clickExit(e) { 394 | e.preventDefault(); 395 | doExit(); 396 | } 397 | 398 | /** 399 | 绑定点击播放按钮的事件 400 | */ 401 | function clickPreview(e) { 402 | e.preventDefault(); 403 | editor.hide(); 404 | player.show(); 405 | doPlay(); 406 | } 407 | 408 | /** 409 | 绑定点击播放按钮的事件 410 | */ 411 | function clickPreviewCurrent(e) { 412 | e.preventDefault(); 413 | editor.hide(); 414 | player.show(); 415 | doPlay(vm.currentPage()); 416 | } 417 | 418 | 419 | btnPreview.click(clickPreview); 420 | btnPreviewCurrent.click(clickPreviewCurrent); 421 | btnNext.click(clickNext); 422 | btnPrev.click(clickPrev); 423 | btnGoto.click(clickGoto); 424 | btnExit.click(clickExit); 425 | btnGo.click(clickGo); 426 | 427 | 428 | return {}; 429 | }); -------------------------------------------------------------------------------- /js/stage.js: -------------------------------------------------------------------------------- 1 | define(['data', 'types', 'ctrl'], function (dataManager, typeMap, ctrlManager) { 2 | var itemKeyMap = ['title', 'content', 'content2', 'subtitle', 'subtitle2']; 3 | 4 | return { 5 | init: function (vm) { 6 | vm.previewItem = function (key) { 7 | var page = vm.currentPage(); 8 | var itemData = dataManager.getItem(page, key); 9 | var dom = $('#slide-' + key); 10 | var output = dom.find('.output'); 11 | var typeHelper = typeMap[itemData.type]; 12 | 13 | output.empty(); 14 | 15 | if (typeHelper) { 16 | typeHelper.preview(itemData, output); 17 | } 18 | }; 19 | vm.previewAll = function () { 20 | itemKeyMap.forEach(function (key) { 21 | vm.previewItem(key); 22 | }); 23 | }; 24 | 25 | vm.resizeItem = function (key) { 26 | var page = vm.currentPage(); 27 | var layout = dataManager.getSlide(page).layout; 28 | var itemData = dataManager.getItem(page, key); 29 | var dom = $('#slide-' + key); 30 | var output = dom.find('.output'); 31 | var typeHelper = typeMap[itemData.type]; 32 | 33 | if (typeHelper && typeHelper.resize) { 34 | typeHelper.resize(itemData, output); 35 | } 36 | 37 | ctrlManager.update(dom, itemData.type, dataManager.getTypeList(layout, key)); 38 | }; 39 | vm.resizeAll = function () { 40 | itemKeyMap.forEach(function (key) { 41 | vm.resizeItem(key); 42 | }); 43 | }; 44 | 45 | vm.clickItem = function (vm, e) { 46 | var output = $(e.currentTarget); 47 | e.stopPropagation(); 48 | vm.editItem(output); 49 | }; 50 | 51 | vm.editItem = function (output) { 52 | var dom = output.parent(); 53 | var key = dom.attr('data-key'); 54 | var page = vm.currentPage(); 55 | var itemData = dataManager.getItem(page, key); 56 | var typeHelper = typeMap[itemData.type]; 57 | 58 | vm.currentItem(key); 59 | 60 | if (typeHelper) { 61 | vm.currentItemDataCopy(JSON.parse(JSON.stringify(itemData))); 62 | if (typeHelper.init && !typeHelper.initialized) { 63 | typeHelper.init(); 64 | typeHelper.initialized = true; 65 | } 66 | typeHelper.edit(key, page, itemData, output); 67 | } 68 | }; 69 | 70 | vm.confirmChangeType = function (output, newType) { 71 | var dom = output.parent(); 72 | var key = dom.attr('data-key'); 73 | var page = vm.currentPage(); 74 | var itemData = dataManager.getItem(page, key); 75 | var type = itemData.type; 76 | 77 | var dialog = $('#confirm-dialog'); 78 | 79 | vm.currentItem(key); 80 | 81 | if (type === newType) { 82 | return; 83 | } 84 | 85 | if (itemData.value) { 86 | dialog.find('.modal-header h3').text('Change Type'); 87 | dialog.find('.modal-body').text('Are you sure?'); 88 | dialog.find('[data-action="yes"]').on('click', function (e) { 89 | vm.changeType(output, newType); 90 | }); 91 | dialog.on('hide', function () { 92 | dialog.find('modal-header h3').text('Change Type'); 93 | dialog.find('modal-body').text('Are you sure?'); 94 | dialog.find('[data-action="yes"]').off('click'); 95 | }); 96 | dialog.modal('show'); 97 | } 98 | else { 99 | vm.changeType(output, newType); 100 | } 101 | }, 102 | vm.changeType = function (output, type) { 103 | var dom = output.parent(); 104 | var key = dom.attr('data-key'); 105 | var page = vm.currentPage(); 106 | 107 | vm.currentItem(key); 108 | dataManager.changeType(page, key, type); 109 | dataManager.save(); 110 | vm.previewItem(key); 111 | 112 | ctrlManager.update(dom, type); 113 | } 114 | 115 | vm.clearItem = function (output) { 116 | var dom = output.parent(); 117 | var key = dom.attr('data-key'); 118 | var page = vm.currentPage(); 119 | 120 | vm.currentItem(key); 121 | 122 | dataManager.clearItem(page, key); 123 | dataManager.save(); 124 | vm.previewItem(key); 125 | }; 126 | 127 | vm.finishEdit = function () { 128 | var page = vm.currentPage(); 129 | var key = vm.currentItem(); 130 | var newPageData; 131 | 132 | var changed = dataManager.checkItemChanged( 133 | page, key, 134 | vm.currentItemDataCopy() 135 | ); 136 | if (changed) { 137 | if (key == 'title') { 138 | newPageData = JSON.parse(JSON.stringify(vm.pageList.slice(page, page + 1)[0])); 139 | newPageData.title = dataManager.getValue(page, key); 140 | vm.pageList.splice(page, 1, newPageData); 141 | } 142 | dataManager.save(); 143 | vm.previewItem(key); 144 | } 145 | 146 | vm.currentItem(''); 147 | }; 148 | 149 | vm.currentSid.subscribe(function () { 150 | setTimeout(vm.previewAll, 13); 151 | }); 152 | 153 | ctrlManager.init($('#editor-stage'), vm); 154 | vm.resizeAll(); 155 | } 156 | }; 157 | }); -------------------------------------------------------------------------------- /js/status.js: -------------------------------------------------------------------------------- 1 | define(['data', 'design', 'transition'], function (dataManager, designManager, transitionManager) { 2 | var activeItem; 3 | // var ignoreTypeChange; 4 | 5 | return { 6 | init: function (vm) { 7 | designManager.loadCssLink(vm.currentDesign()); 8 | 9 | vm.clickLayout = function (layoutData, e) { 10 | vm.currentLayout(layoutData.key); 11 | }; 12 | // vm.clickTpl = function (templateData, e) { 13 | // vm.currentTpl(templateData.key); 14 | // }; 15 | vm.clickPage = function (pageData, e) { 16 | var $index = vm.pageList().indexOf(pageData); 17 | vm.currentPage($index); 18 | }; 19 | vm.clickDesign = function (designData, e) { 20 | var key = designData.key; 21 | var cssLink; 22 | 23 | designManager.loadCssLink(key); 24 | vm.currentDesign(key); 25 | }; 26 | vm.clickTransition = function (transitionData, e) { 27 | var key = transitionData.key; 28 | vm.currentTransition(key); 29 | }; 30 | vm.resetData = function (newData) { 31 | if (newData === vm) { 32 | newData = null; 33 | } 34 | dataManager.reset(newData); 35 | dataManager.stopStorage(); 36 | 37 | var currentPage = 0; 38 | var currentSlide = dataManager.getSlideList()[currentPage]; 39 | 40 | vm.title(dataManager.getTitle()), 41 | vm.currentDesign(dataManager.getDesign()); 42 | vm.currentPage(currentPage); 43 | vm.currentLayout(currentSlide.layout); 44 | // vm.currentTpl(currentSlide.template); 45 | vm.pageList(dataManager.getPageList()); 46 | 47 | dataManager.startStorage(); 48 | dataManager.save(); 49 | }; 50 | 51 | vm.currentLayout.subscribe(function (newValue) { 52 | var page = vm.currentPage(); 53 | dataManager.changeLayout(page, newValue); 54 | setTimeout(vm.resizeAll, 13); 55 | dataManager.save(); 56 | }); 57 | // vm.currentTpl.subscribe(function (newValue) { 58 | // var page = vm.currentPage(); 59 | // var changedKeys = dataManager.changeTemplate(page, newValue, ignoreTypeChange); 60 | 61 | // changedKeys.forEach(function (key) { 62 | // vm.previewItem(key); 63 | // }); 64 | 65 | // vm.resizeAll(); 66 | // dataManager.save(); 67 | // }); 68 | vm.currentPage.subscribe(function (newValue) { 69 | var slideData = dataManager.getSlide(newValue); 70 | dataManager.stopStorage(); 71 | vm.currentLayout(slideData.layout); 72 | // ignoreTypeChange = true; 73 | // vm.currentTpl(slideData.template); 74 | // ignoreTypeChange = false; 75 | dataManager.startStorage(); 76 | }); 77 | vm.currentDesign.subscribe(function (newValue) { 78 | dataManager.setDesign(newValue); 79 | dataManager.save(); 80 | }); 81 | vm.currentTransition.subscribe(function (newValue) { 82 | transitionManager.change(newValue); 83 | dataManager.setTransition(newValue); 84 | dataManager.save(); 85 | }); 86 | vm.currentItem.subscribe(function (newValue) { 87 | if (activeItem) { 88 | activeItem.removeClass('active'); 89 | } 90 | if (newValue) { 91 | activeItem = $('#slide-' + newValue).addClass('active'); 92 | } 93 | }); 94 | } 95 | }; 96 | }); -------------------------------------------------------------------------------- /js/storage.js: -------------------------------------------------------------------------------- 1 | define(function () { 2 | var storage = window.localStorage; 3 | 4 | function getTimestamp() { 5 | var date = new Date; 6 | return date.valueOf().toString(); 7 | } 8 | 9 | function readData() { 10 | var data; 11 | var dataStr = storage.getItem('h5slides-data'); 12 | if (dataStr) { 13 | data = JSON.parse(dataStr); 14 | } 15 | console.log('read'); 16 | return data; 17 | } 18 | function saveData(data) { 19 | try { 20 | storage.setItem('h5slides-data', JSON.stringify(data)); 21 | console.log('saved', (new Date).valueOf()); 22 | return true; 23 | } 24 | catch (e) { 25 | console.log(e); // QuotaExceededError 26 | return false; 27 | } 28 | } 29 | 30 | function readMedia(mid) { 31 | var key = 'h5slides-media-' + mid; 32 | return storage.getItem(key); 33 | } 34 | function removeMedia(mid) { 35 | var key = 'h5slides-media-' + mid; 36 | var list = getMediaList(); 37 | var index = list.indexOf(mid); 38 | if (index >= 0) { 39 | storage.removeItem(key); 40 | list.splice(index, 1); 41 | storage.setItem('h5slides-medialist', JSON.stringify(list)); 42 | } 43 | return true; 44 | } 45 | function saveMedia(media) { 46 | var mid = getTimestamp(); 47 | var key = 'h5slides-media-' + mid; 48 | var list = getMediaList(); 49 | 50 | list.push(mid); 51 | 52 | try { 53 | storage.setItem('h5slides-medialist', JSON.stringify(list)); 54 | storage.setItem(key, media); 55 | } 56 | catch (e) { 57 | console.log(e); // QuotaExceededError 58 | list.pop(); 59 | storage.removeItem(key); 60 | storage.setItem('h5slides-medialist', JSON.stringify(list)); 61 | mid = null; 62 | } 63 | 64 | return mid; 65 | } 66 | function getMediaList() { 67 | var list; 68 | var listStr = storage.getItem('h5slides-medialist'); 69 | if (listStr) { 70 | list = JSON.parse(listStr); 71 | } 72 | else { 73 | list = []; 74 | } 75 | return list; 76 | } 77 | 78 | return { 79 | readData: readData, 80 | saveData: saveData, 81 | readMedia: readMedia, 82 | saveMedia: saveMedia, 83 | removeMedia: removeMedia, 84 | getMediaList: getMediaList 85 | }; 86 | }); -------------------------------------------------------------------------------- /js/title.js: -------------------------------------------------------------------------------- 1 | define(['data'], function (dataManager) { 2 | return { 3 | init: function (vm) { 4 | vm.editTitle = function () { 5 | vm.editingTitle(true); 6 | }; 7 | vm.titleDisplay = ko.computed(function () { 8 | var title = vm.title(); 9 | if (title.trim()) { 10 | return title; 11 | } 12 | else { 13 | return 'Edit title...'; 14 | } 15 | }); 16 | 17 | vm.title.subscribe(function (newValue) { 18 | dataManager.setTitle(newValue); 19 | dataManager.save(); 20 | }); 21 | } 22 | }; 23 | }); -------------------------------------------------------------------------------- /js/transition.js: -------------------------------------------------------------------------------- 1 | define(function () { 2 | var dialog = $('#theme-manager'); 3 | var tabs = $('#theme-manager-tabs'); 4 | var root = $('#transition-stage'); 5 | var slides = root.find('.transition-slide'); 6 | 7 | var length = slides.length; 8 | 9 | var currentPage; 10 | var currentSlide; 11 | var nextSlide; 12 | var prevSlide; 13 | 14 | var isActiveTab = false; 15 | var isActiveDialog = false; 16 | var loopTimer; 17 | 18 | function loseSlide() { 19 | currentSlide.removeClass('slide-current'); 20 | nextSlide.removeClass('slide-next'); 21 | prevSlide.removeClass('slide-prev'); 22 | } 23 | function findSlide(page) { 24 | currentSlide = $(slides[page]).addClass('slide-current'); 25 | nextSlide = $(slides[(page + 1) % length]).addClass('slide-next'); 26 | prevSlide = $(slides[(page + length - 1) % length]).addClass('slide-prev'); 27 | } 28 | 29 | function next() { 30 | currentPage = (currentPage + 1) % length; 31 | loseSlide(); 32 | findSlide(currentPage); 33 | } 34 | function prev() { 35 | currentPage = (currentPage + length - 1) % length; 36 | loseSlide(); 37 | findSlide(currentPage); 38 | } 39 | 40 | function change(key) { 41 | root.attr('data-transition', key); 42 | } 43 | 44 | function init() { 45 | currentPage = 0; 46 | findSlide(currentPage); 47 | } 48 | 49 | function checkLoop() { 50 | clearInterval(loopTimer); 51 | if (isActiveDialog && isActiveTab) { 52 | loopTimer = setInterval(next, 1500); 53 | } 54 | } 55 | 56 | tabs.find('a').on('shown', function (e) { 57 | var target = $(e.target); 58 | isActiveTab = target.attr('href') === '#transition-panel'; 59 | checkLoop(); 60 | }); 61 | dialog.on('shown', function () { 62 | isActiveDialog = true; 63 | checkLoop(); 64 | }); 65 | dialog.on('hide', function () { 66 | isActiveDialog = true; 67 | checkLoop(); 68 | }); 69 | 70 | init(); 71 | 72 | return { 73 | change: change 74 | }; 75 | }); -------------------------------------------------------------------------------- /js/types.js: -------------------------------------------------------------------------------- 1 | define(['types/text', 'types/img', 'types/video', 'types/code'], function (textManager, imgManager, videoManager, codeManager) { 2 | 3 | // for each type 4 | // unscalable 5 | // init(): initiation 6 | // preview(data, dom): preview in editor 7 | // resize(data, dom): resize in editor when layout changed 8 | // adjust(dom): resize in player when a unscalable item set current 9 | // edit(key, page, data, dom): handler when click item in editor 10 | // build(data, dom): prepare to display in player 11 | // show(dom): handler when show the current page in player 12 | // hide(dom): handler when show another page in player 13 | 14 | return { 15 | text: textManager, 16 | img: imgManager, 17 | video: videoManager, 18 | code: codeManager 19 | }; 20 | }); -------------------------------------------------------------------------------- /js/types/code.js: -------------------------------------------------------------------------------- 1 | define(['data', 'vm'], function (dataManager, vm) { 2 | var dialog = $('#code-dialog'); 3 | var tabs = $('#code-manager-tabs'); 4 | var codePanel = $('#code-panel'); 5 | var demoPanel = $('#demo-panel'); 6 | 7 | var codeInput = $('#code-input'); 8 | var urlInput = $('#demo-url-input'); 9 | var urlBtnRemove = $('#demo-url-remove'); 10 | 11 | var currentData; 12 | 13 | function getCurrentKey() { 14 | return tabs.find('.active a').attr('data-key') || 'code'; 15 | } 16 | 17 | function showData(data) { 18 | var key; 19 | 20 | if (data.config && data.config.type === 'demo') { 21 | key = 'demo'; 22 | urlInput.val(data.value).focus(); 23 | } 24 | else { 25 | key = 'code'; 26 | codeInput.val(data.value).focus(); 27 | } 28 | 29 | tabs.find('[data-key="' + key + '"]').tab('show'); 30 | } 31 | 32 | function render(data, dom, placeHolder) { 33 | var contentDom; 34 | 35 | if (!data.value) { 36 | dom.text(placeHolder); 37 | return; 38 | } 39 | 40 | if (data.config && data.config.type == 'demo') { 41 | contentDom = $(''); 42 | contentDom.attr('frameborder', '0'); 43 | contentDom.attr('src', data.value); 44 | } 45 | else { 46 | contentDom = $('
');
 47 |             contentDom.html(hljs.highlightAuto(data.value).value);
 48 |         }
 49 | 
 50 |         contentDom.hide();
 51 |         dom.append(contentDom);
 52 |     }
 53 | 
 54 |     function resize(dom) {
 55 |         var width;
 56 |         var height;
 57 | 
 58 |         var contentDom = dom.find('.code-item');
 59 | 
 60 | 
 61 |         if (!contentDom || !dom) {
 62 |             return;
 63 |         }
 64 | 
 65 |         width = dom.width();
 66 |         height = dom.height();
 67 |         contentDom.css('width', width + 'px');
 68 |         contentDom.css('height', height + 'px');
 69 | 
 70 |         contentDom.show();
 71 |     }
 72 | 
 73 |     function save() {
 74 |         var currentKey = getCurrentKey();
 75 |         var newValue;
 76 | 
 77 |         if (currentKey === 'code') {
 78 |             newValue = codeInput.val();
 79 |         }
 80 |         else {
 81 |             newValue = urlInput.val();
 82 |         }
 83 | 
 84 |         if (!currentData.config) {
 85 |             currentData.config = {};
 86 |         }
 87 |         currentData.config.type = currentKey;
 88 | 
 89 |         dataManager.setValue(vm.currentPage(), vm.currentItem(), newValue);
 90 |     }
 91 | 
 92 |     return {
 93 |         init: function () {
 94 |             urlBtnRemove.click(function () {
 95 |                 if (!currentData.config) {
 96 |                     currentData.config = {};
 97 |                 }
 98 |                 currentData.config.type = 'code';
 99 | 
100 |                 dataManager.setValue(vm.currentPage(), vm.currentItem(), '');
101 |                 dialog.modal('hide');
102 |             });
103 | 
104 |             dialog.on('hidden', function () {
105 |                 vm.finishEdit();
106 |             });
107 | 
108 |             dialog.find('[data-action="save"]').click(save);
109 |         },
110 |         preview: function (data, dom) {
111 |             render(data, dom, 'NO ANY ODE & DEMO HERE :-(');
112 |             resize(dom);
113 |         },
114 |         resize: function (data, dom) {
115 |             resize(dom);
116 |         },
117 |         edit: function (key, page, data, dom) {
118 |             currentData = data;
119 |             dialog.modal('show');
120 |             showData(data);
121 |         },
122 |         build: function (data, dom) {
123 |             render(data, dom, '');
124 |         },
125 |         show: function (dom) {
126 |             resize(dom);
127 |         },
128 |         hide: function (dom) {
129 |         }
130 |     };
131 | });


--------------------------------------------------------------------------------
/js/types/img-helper.js:
--------------------------------------------------------------------------------
  1 | define(function () {
  2 |     var MAX_WIDTH = 640;
  3 |     var MAX_HEIGHT = 480;
  4 | 
  5 |     var canvas = document.createElement('canvas');
  6 |     var context = canvas.getContext('2d');
  7 | 
  8 |     canvas.width = MAX_WIDTH;
  9 |     canvas.height = MAX_HEIGHT;
 10 | 
 11 |     function adjustSize(sw, sh, dw, dh) {
 12 |         var x, y, w, h, scale;
 13 |         var dRatio = dh / dw;
 14 |         var sRatio = sh / sw;
 15 | 
 16 |         if (sw <= dw && sh <= dh) {
 17 |             scale = 1;
 18 |             w = sw;
 19 |             h = sh;
 20 |             x = parseInt((dw - sw) / 2);
 21 |             y = parseInt((dh - sh) / 2);
 22 |         }
 23 |         else {
 24 |             if (sRatio >= dRatio) {
 25 |                 scale = dh / sh;
 26 |                 y = 0;
 27 |                 h = dh;
 28 |                 w = sw * scale;
 29 |                 x = parseInt((dw - w) / 2);
 30 |             }
 31 |             else {
 32 |                 scale = dw / sw;
 33 |                 x = 0;
 34 |                 w = dw;
 35 |                 h = sh * scale;
 36 |                 y = parseInt((dh - h) / 2);
 37 |             }
 38 |         }
 39 | 
 40 |         return {
 41 |             scale: scale,
 42 |             w: w,
 43 |             h: h,
 44 |             x: x,
 45 |             y: y
 46 |         };
 47 |     }
 48 | 
 49 |     function loadImg(src, callback, errorCallback) {
 50 |         var img = new Image;
 51 |         var timer = setTimeout(function () {
 52 |             errorCallback && errorCallback(img);
 53 |         }, 500);
 54 | 
 55 |         img.src = src;
 56 |         img.onload = function () {
 57 |             clearTimeout(timer);
 58 |             callback && callback(img);
 59 |         };
 60 |         img.onerror = function () {
 61 |             errorCallback && errorCallback(img);
 62 |         };
 63 |     }
 64 | 
 65 |     function minify(src, callback) {
 66 |         loadImg(src,
 67 |             function (img) {
 68 |                 var newSrc;
 69 | 
 70 |                 var nw = img.naturalWidth;
 71 |                 var nh = img.naturalHeight;
 72 | 
 73 |                 var ref = adjustSize(nw, nh, MAX_WIDTH, MAX_HEIGHT);
 74 | 
 75 |                 canvas.width = ref.w;
 76 |                 canvas.height = ref.h;
 77 | 
 78 |                 context.drawImage(img, 0, 0, ref.w, ref.h);
 79 |                 newSrc = canvas.toDataURL();
 80 |                 context.clearRect(0, 0, ref.w, ref.h);
 81 | 
 82 |                 callback && callback(newSrc, ref);
 83 |             },
 84 |             function (img) {
 85 |                 callback && callback('', {});
 86 |             }
 87 |         );
 88 |     }
 89 |     function embed(src, dom, placeHolder) {
 90 |         var dw;
 91 |         var dh;
 92 | 
 93 |         dw = dom.width();
 94 |         dh = dom.height();
 95 | 
 96 |         loadImg(src,
 97 |             function (img) {
 98 |                 var nw = img.naturalWidth;
 99 |                 var nh = img.naturalHeight;
100 | 
101 |                 ref = adjustSize(nw, nh, dw, dh);
102 | 
103 |                 img.style.width = ref.w + 'px';
104 |                 img.style.height = ref.h + 'px';
105 |                 img.style.padding = ref.y + 'px ' + ref.x + 'px';
106 | 
107 |                 dom.empty().append(img);
108 |             },
109 |             function (img) {
110 |                 dom.html(placeHolder);
111 |             }
112 |         );
113 |     }
114 |     return {
115 |         minify: minify,
116 |         embed: embed
117 |     };
118 | });


--------------------------------------------------------------------------------
/js/types/img.js:
--------------------------------------------------------------------------------
  1 | define(['data', 'vm', 'types/img-helper'], function (dataManager, vm, lib) {
  2 |     var dialog = $('#img-manager');
  3 |     var tabs = $('#img-manager-tabs');
  4 | 
  5 |     var imgList = $('#my-img-list');
  6 |     var imgListHolder = $('#my-img-list-holder');
  7 | 
  8 |     var localPanel = $('#img-local-panel');
  9 |     var localInput = localPanel.find('input');
 10 |     var localThumb = localPanel.find('.thumbnail');
 11 | 
 12 |     var urlPanel = $('#img-url-panel');
 13 |     var urlInput = urlPanel.find('input');
 14 |     var urlThumb = urlPanel.find('.thumbnail');
 15 | 
 16 |     var urlBtnRemove = $('#img-url-remove');
 17 | 
 18 |     var currentLi;
 19 |     var oldMid;
 20 |     var newMid; // '$' means remove
 21 | 
 22 |     var localMedia;
 23 | 
 24 |     var manager = {};
 25 | 
 26 |     function setCurrentLi(li, mid) {
 27 |         if (currentLi) {
 28 |             currentLi.removeClass('active');
 29 |         }
 30 |         currentLi = li.addClass('active');
 31 | 
 32 |         newMid = mid;
 33 |     }
 34 | 
 35 |     function checkMediaListEmpty() {
 36 |         if (imgList.find('li').length == 0) {
 37 |             imgList.hide();
 38 |             imgListHolder.show();
 39 |         }
 40 |         else {
 41 |             imgList.show();
 42 |             imgListHolder.hide();
 43 |         }
 44 |     }
 45 | 
 46 |     function buildMeidaList(mediaList) {
 47 |         imgList.empty();
 48 | 
 49 |         mediaList.forEach(function (mid) {
 50 |             var li = $('
  • ' +
 51 |                 '
    ' +
 52 |                 '
    • ');
 53 | 
 54 |             if (mid == oldMid) {
 55 |                 currentLi = li.addClass('active');
 56 |             }
 57 |             li.find('img').attr('src', dataManager.readMedia(mid));
 58 |             li.find('a').click(function (e) {
 59 |                 e.preventDefault();
 60 |                 setCurrentLi(li, mid);
 61 |             });
 62 |             li.find('[data-action="choose"]').click(function () {
 63 |                 setCurrentLi(li, mid);
 64 |                 save();
 65 |                 dialog.modal('hide');
 66 |             });
 67 |             li.find('[data-action="remove"]').click(function (e) {
 68 |                 e.preventDefault();
 69 |                 if (li.hasClass('active')) {
 70 |                     newMid = '$';
 71 |                 }
 72 |                 li.remove();
 73 |                 dataManager.removeMedia(mid);
 74 |                 checkMediaListEmpty();
 75 |             });
 76 |             imgList.append(li);
 77 |         });
 78 | 
 79 |         checkMediaListEmpty();
 80 |     }
 81 | 
 82 |     function save() {
 83 |         var currentPanelKey = tabs.find('.active').attr('data-key');
 84 |         var media;
 85 |         var mid;
 86 | 
 87 |         switch (currentPanelKey) {
 88 |             case 'list':
 89 |             if (newMid) {
 90 |                 if (newMid == '$') {
 91 |                     media = '$';
 92 |                 }
 93 |                 else {
 94 |                     media = 'media://' + newMid;
 95 |                 }
 96 |             }
 97 |             break;
 98 |             case 'local':
 99 |             if (localMedia) {
100 |                 mid = dataManager.saveMedia(localMedia);
101 |                 if (mid) {
102 |                     media = 'media://' + mid;
103 |                 }
104 |                 else {
105 |                     console.log('storage error! (QuotaExceededError)');
106 |                     return;
107 |                 }
108 |             }
109 |             break;
110 |             case 'url':
111 |             media = urlInput.val();
112 |             break;
113 |             default:
114 |             ;
115 |         }
116 | 
117 |         if (media) {
118 |             if (media == '$') {
119 |                 media = '';
120 |             }
121 |             dataManager.setValue(vm.currentPage(), vm.currentItem(), media);
122 |         }
123 | 
124 |         // vm.finishEdit();
125 |     }
126 | 
127 |     function render(data, dom, placeHolder) {
128 |         var src = data.value;
129 | 
130 |         // dom[0].cssText = '';
131 |         // if (data.position) {
132 |         //     $.each(data.position, function (key, value) {
133 |         //         dom.css(key, value);
134 |         //     });
135 |         // }
136 | 
137 |         if (src) {
138 |             dom.html('
    ');
139 |             dom.find('.info').attr('data-src', src);
140 |         }
141 |         else {
142 |             dom.text(placeHolder);
143 |         }
144 |     }
145 | 
146 |     function showImg(dom, placeHolder) {
147 |         var src = dom.find('.info').attr('data-src');
148 | 
149 |         if (src) {
150 |             dom.html('');
151 |             if (src.match(/^media\:\/\//)) {
152 |                 src = dataManager.readMedia(src.substr(8));
153 |             }
154 |             lib.embed(src, dom, placeHolder);
155 |         }
156 |     }
157 | 
158 |     return {
159 |         init: function () {
160 |             imgListHolder.find('a').click(function (e) {
161 |                 var item = $(this);
162 |                 var key = item.attr('data-key');
163 | 
164 |                 if (key) {
165 |                     e.preventDefault();
166 |                     tabs.find('[data-key="' + key + '"] a').tab('show');
167 |                 }
168 |             });
169 | 
170 |             localInput.on('change', function (e) {
171 |                 var file = e.target.files[0];
172 |                 var reader = new FileReader();
173 |                 reader.onload = function (e) {
174 |                     var img;
175 |                     var src = e.target.result;
176 | 
177 |                     if (src.length > 0) {
178 |                         lib.minify(src, function (newSrc, info) {
179 |                             localMedia = newSrc;
180 |                             lib.embed(newSrc, localThumb, 'Image loading error!');
181 |                         });
182 |                     }
183 |                 };
184 |                 reader.readAsDataURL(file);
185 |             });
186 | 
187 |             urlInput.on('change', function (e) {
188 |                 var img;
189 |                 var src = e.target.value;
190 | 
191 |                 if (src.length > 0) {
192 |                     lib.embed(src, urlThumb, 'Image loading error!');
193 |                 }
194 |             });
195 | 
196 |             urlBtnRemove.click(function () {
197 |                 dataManager.setValue(vm.currentPage(), vm.currentItem(), '');
198 |                 dialog.modal('hide');
199 |             });
200 | 
201 |             dialog.on('hidden', function () {
202 |                 vm.finishEdit();
203 |             });
204 | 
205 |             dialog.find('[data-action="save"]').click(save);
206 |         },
207 |         preview: function (data, dom) {
208 |             render(data, dom, '[empty img]');
209 |             showImg(dom, '[empty img]');
210 |         },
211 |         resize: function (data, dom) {
212 |             var src = data.value;
213 | 
214 |             if (src) {
215 |                 dom.html('');
216 |                 if (src.match(/^media\:\/\//)) {
217 |                     src = dataManager.readMedia(src.substr(8));
218 |                 }
219 |                 lib.embed(src, dom, '[empty img]');
220 |             }
221 |         },
222 |         edit: function (key, page, data, dom) {
223 |             var position = dom.position();
224 |             var width = dom.width();
225 |             var height = dom.height();
226 |             var mediaList;
227 | 
228 |             newMid = '';
229 |             localMedia = '';
230 | 
231 |             localInput.val('');
232 |             localThumb.html('');
233 | 
234 |             urlInput.val('');
235 |             urlThumb.html('');
236 |             urlBtnRemove.hide();
237 | 
238 |             dialog.modal('show');
239 | 
240 |             if (!data.value) {
241 |                 oldMid = '';
242 |             }
243 |             else if (data.value.match(/^media\:\/\//)) {
244 |                 oldMid = data.value.substr(8);
245 |                 tabs.find('[data-key="list"] a').tab('show');
246 |             }
247 |             else {
248 |                 tabs.find('[data-key="url"] a').tab('show');
249 |                 urlInput.val(data.value);
250 |                 lib.embed(data.value, urlThumb, 'Image loading error!');
251 |                 urlBtnRemove.show();
252 |             }
253 | 
254 |             mediaList = dataManager.getMediaList();
255 |             buildMeidaList(mediaList);
256 |         },
257 |         build: function (data, dom) {
258 |             render(data, dom, '');
259 |         },
260 |         show: function (dom) {
261 |             showImg(dom, '');
262 |         },
263 |         hide: function (dom) {}
264 |     };
265 | });


--------------------------------------------------------------------------------
/js/types/text.js:
--------------------------------------------------------------------------------
  1 | define(['data', 'vm'], function (dataManager, vm) {
  2 |     var itemEditorLayer = $('#item-editor-layer');
  3 | 
  4 |     function blurEditor(e) {
  5 |         var target = $(e.target);
  6 |         var key = vm.currentItem();
  7 | 
  8 |         if (!vm.currentItem()) {
  9 |             return;
 10 |         }
 11 |         if (itemEditorLayer.has(target).length > 0) {
 12 |             return;
 13 |         }
 14 | 
 15 |         itemEditorLayer.empty().hide();
 16 |         vm.finishEdit();
 17 | 
 18 |         $(window).unbind('mousedown', blurEditor);
 19 |         $(window).unbind('touchstart', blurEditor);
 20 |     }
 21 | 
 22 |     function render(data, dom, placeHolder) {
 23 |         var textArray;
 24 |         var ul;
 25 | 
 26 |         // dom[0].cssText = '';
 27 |         // if (data.position) {
 28 |         //     $.each(data.position, function (key, value) {
 29 |         //         dom.css(key, value);
 30 |         //     });
 31 |         // }
 32 |         // if (data.config) {
 33 |         //     $.each(data.config, function (key, value) {
 34 |         //         dom.css(key, value);
 35 |         //     });
 36 |         // }
 37 | 
 38 |         if (data.value) {
 39 |             ul = $('');
 40 |             textArray = data.value.split('\n');
 41 |             textArray.forEach(function (text) {
 42 |                 var li = $('
  • ');
 43 |                 li.text(text);
 44 |                 ul.append(li);
 45 |             });
 46 |             dom.empty().append(ul);
 47 |         }
 48 |         else {
 49 |             dom.text(placeHolder);
 50 |         }
 51 |     }
 52 | 
 53 |     return {
 54 |         init: null,
 55 |         preview: function (data, dom) {
 56 |             render(data, dom, '[empty text]');
 57 |         },
 58 |         resize: null,
 59 |         edit: function (key, page, data, dom) {
 60 |             var position = dom.parent().position();
 61 |             var width = dom.outerWidth();
 62 |             var height = dom.outerHeight();
 63 |             var fontSize = dom.css('font-size');
 64 |             var lineHeight = dom.css('line-height');
 65 |             var editor = $('');
 66 | 
 67 |             editor.css('position', 'absolute');
 68 |             editor.css('left', position.left + 'px');
 69 |             editor.css('top', position.top + 'px');
 70 |             editor.css('width', width + 'px');
 71 |             editor.css('height', height + 'px');
 72 |             editor.css('font-size', fontSize);
 73 |             editor.css('line-height', lineHeight);
 74 |             editor.val(data.value);
 75 | 
 76 |             itemEditorLayer.empty().append(editor);
 77 |             itemEditorLayer.show();
 78 | 
 79 |             editor.on('input', function (e) {
 80 |                 var newValue = this.value;
 81 |                 var page = vm.currentPage();
 82 |                 var itemData = dataManager.getItem(page, key);
 83 | 
 84 |                 if (itemData.value != newValue) {
 85 |                     dataManager.setValue(page, key, newValue);
 86 |                 }
 87 |             });
 88 |             editor.focus();
 89 | 
 90 |             $(window).bind('mousedown', blurEditor);
 91 |             $(window).bind('touchstart', blurEditor);
 92 |         },
 93 |         build: function (data, dom) {
 94 |             render(data, dom, '');
 95 |         },
 96 |         show: function (dom) {
 97 |         },
 98 |         hide: function (dom) {
 99 |         }
100 |     };
101 | });


--------------------------------------------------------------------------------
/js/types/video.js:
--------------------------------------------------------------------------------
  1 | define(['data', 'vm'], function (dataManager, vm) {
  2 |     var dialog = $('#video-dialog');
  3 |     var input = $('#video-url');
  4 | 
  5 |     var helperLoaded;
  6 | 
  7 |     function loadHelperScript(callback) {
  8 |         var node = document.createElement('script');
  9 | 
 10 |         node.addEventListener('load', function () {
 11 |             helperLoaded = true;
 12 |             callback && callback();
 13 |         }, false);
 14 | 
 15 |         node.type = 'text/javascript';
 16 |         node.src = 'http://player.youku.com/jsapi';
 17 | 
 18 |         document.head.appendChild(node);
 19 |     }
 20 | 
 21 |     function checkHelperLoaded(callback) {
 22 |         if (helperLoaded) {
 23 |             callback && callback();
 24 |         }
 25 |         else {
 26 |             loadHelperScript(callback);
 27 |         }
 28 |     }
 29 | 
 30 |     function getVid(value) {
 31 |         // http://v.youku.com/v_show/id_XNjUwODE1Mg==.html
 32 |         var matchResult;
 33 | 
 34 |         if (value) {
 35 |             matchResult = value.match(/\/id_(.+?)\.html/);
 36 |             if (matchResult && matchResult.length >= 2) {
 37 |                 return matchResult[1];
 38 |             }
 39 |         }
 40 | 
 41 |         return '';
 42 |     }
 43 | 
 44 |     dialog.find('[data-action="save"]').click(function (e) {
 45 |         var val = input.val();
 46 |         var vid = getVid(val);
 47 | 
 48 |         e.preventDefault();
 49 | 
 50 |         dataManager.setValue(vm.currentPage(), vm.currentItem(), vid);
 51 |     });
 52 | 
 53 |     dialog.on('hidden', function () {
 54 |         vm.finishEdit();
 55 |     });
 56 | 
 57 |     return {
 58 |         init: function () {
 59 |             checkHelperLoaded();
 60 |         },
 61 |         preview: function (data, dom) {
 62 |             var timeStamp = (new Date).valueOf();
 63 |             var value = data ? data.value : '';
 64 |             var playerId = 'video-' + timeStamp;
 65 |             var playerContainer;
 66 |             var img;
 67 |             var height;
 68 | 
 69 |             if (value) {
 70 |                 dom.empty();
 71 |                 height = dom.height();
 72 |                 playerContainer = $('
    ');
 73 |                 playerContainer.css('height', height + 'px');
 74 |                 playerContainer.css('line-height', height + 'px');
 75 |                 playerContainer.css('text-align', 'center');
 76 |                 dom.append(playerContainer);
 77 |                 img = $('');
 78 |                 img.attr('src', 'images/widget/video/youkulogo.png');
 79 |                 playerContainer.append(img);
 80 |             }
 81 |             else {
 82 |                 dom.text('[empty video]');
 83 |             }
 84 |         },
 85 |         resize: function (data, dom) {
 86 |             var playerContainer = dom.children().first();
 87 |             var height;
 88 |             playerContainer.hide();
 89 |             height = dom.height();
 90 |             playerContainer.css('height', height + 'px');
 91 |             playerContainer.css('line-height', height + 'px');
 92 |             playerContainer.show();
 93 |         },
 94 |         adjust: function (dom) {
 95 |             ;
 96 |         },
 97 |         edit: function (key, page, data, dom) {
 98 |             dialog.modal('show');
 99 |         },
100 |         build: function (data, dom) {
101 |             var timeStamp = (new Date).valueOf();
102 |             var value = data ? data.value : '';
103 |             var playerId = 'video-' + timeStamp;
104 |             var playerContainer;
105 | 
106 |             dom.empty();
107 | 
108 |             if (value) {
109 |                 playerContainer = $('
    ');
110 |                 playerContainer.attr('data-vid', value);
111 |                 dom.append(playerContainer);
112 |             }
113 |         },
114 |         show: function (dom) {
115 |             var playerContainer = dom.find('div');
116 |             var playerId = playerContainer.attr('id');
117 |             var vid = playerContainer.attr('data-vid');
118 | 
119 |             if (vid) {
120 |                 playerContainer.css('height', dom.height() + 'px');
121 |                 checkHelperLoaded(function () {
122 |                     var player = new YKU.Player(playerId, {
123 |                             client_id: 'c22ac066adde91fe',
124 |                             vid: vid
125 |                         });
126 |                 });
127 |             }
128 |         },
129 |         hide: function (dom) {
130 |             dom.find('div').empty();
131 |         }
132 |     };
133 | });


--------------------------------------------------------------------------------
/js/vm.js:
--------------------------------------------------------------------------------
 1 | define(['data'], function (dataManager) {
 2 |     var currentPage = 0;
 3 |     var currentSlide = dataManager.getSlideList()[currentPage];
 4 | 
 5 |     var vm = {
 6 |         title: ko.observable(dataManager.getTitle()),
 7 |         editingTitle: ko.observable(false),
 8 |         designList: dataManager.getDesignList(),
 9 |         transitionList: dataManager.getTransitionList(),
10 |         layoutList: dataManager.getLayoutList(),
11 |         tplList: dataManager.getTplList(),
12 |         pageList: ko.observableArray(dataManager.getPageList()),
13 |         currentDesign: ko.observable(dataManager.getDesign()),
14 |         currentTransition: ko.observable(dataManager.getTransition()),
15 |         currentPage: ko.observable(currentPage),
16 |         currentLayout: ko.observable(currentSlide.layout),
17 |         // currentTpl: ko.observable(currentSlide.template),
18 |         currentItem: ko.observable(''),
19 |         currentItemDataCopy: ko.observable(null)
20 |     };
21 | 
22 |     vm.currentSid = ko.computed(function () {
23 |         var page = vm.currentPage();
24 |         var pageList = vm.pageList();
25 |         return pageList[page] ? pageList[page].sid : '';
26 |     });
27 | 
28 |     // vm.currentLayout = ko.computed(function () {
29 |     //     var layout;
30 |     //     var currentTpl = vm.currentTpl();
31 |     //     vm.tplList.forEach(function (template) {
32 |     //         if (template.key == currentTpl) {
33 |     //             layout = template.layout;
34 |     //         }
35 |     //     });
36 |     //     return layout;
37 |     // });
38 | 
39 |     return vm;
40 | });
41 | 


--------------------------------------------------------------------------------
/lib/css/default.min.css:
--------------------------------------------------------------------------------
1 | pre code{display:block;padding:.5em;background:#f0f0f0}pre code,pre .subst,pre .tag .title,pre .lisp .title,pre .clojure .built_in,pre .nginx .title{color:black}pre .string,pre .title,pre .constant,pre .parent,pre .tag .value,pre .rules .value,pre .rules .value .number,pre .preprocessor,pre .ruby .symbol,pre .ruby .symbol .string,pre .aggregate,pre .template_tag,pre .django .variable,pre .smalltalk .class,pre .addition,pre .flow,pre .stream,pre .bash .variable,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .tex .special,pre .erlang_repl .function_or_atom,pre .markdown .header{color:#800}pre .comment,pre .annotation,pre .template_comment,pre .diff .header,pre .chunk,pre .markdown .blockquote{color:#888}pre .number,pre .date,pre .regexp,pre .literal,pre .smalltalk .symbol,pre .smalltalk .char,pre .go .constant,pre .change,pre .markdown .bullet,pre .markdown .link_url{color:#080}pre .label,pre .javadoc,pre .ruby .string,pre .decorator,pre .filter .argument,pre .localvars,pre .array,pre .attr_selector,pre .important,pre .pseudo,pre .pi,pre .doctype,pre .deletion,pre .envvar,pre .shebang,pre .apache .sqbracket,pre .nginx .built_in,pre .tex .formula,pre .erlang_repl .reserved,pre .prompt,pre .markdown .link_label,pre .vhdl .attribute,pre .clojure .attribute,pre .coffeescript .property{color:#88F}pre .keyword,pre .id,pre .phpdoc,pre .title,pre .built_in,pre .aggregate,pre .css .tag,pre .javadoctag,pre .phpdoc,pre .yardoctag,pre .smalltalk .class,pre .winutils,pre .bash .variable,pre .apache .tag,pre .go .typename,pre .tex .command,pre .markdown .strong,pre .request,pre .status{font-weight:bold}pre .markdown .emphasis{font-style:italic}pre .nginx .built_in{font-weight:normal}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:.5}


--------------------------------------------------------------------------------
/lib/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/lib/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/lib/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jinjiang/h5slides/4adb646966b72a77fb35ff3d2c687a247171c9eb/lib/img/glyphicons-halflings.png


--------------------------------------------------------------------------------