├── .gitignore ├── Gemfile ├── Gemfile.lock ├── Gruntfile.js ├── README.md ├── asset ├── blank.gif ├── drawer_icon.png ├── fold_icon.png ├── menu.png ├── more.png └── unfold_icon.png ├── bower.json ├── build ├── cardkit-standalone.js └── cardkit.js ├── cardkit.js ├── cardkit ├── bus.js ├── card │ ├── box.js │ ├── common │ │ └── scaffold.js │ ├── form.js │ ├── item.js │ ├── list.js │ ├── mini.js │ └── page.js ├── helper.js ├── oldspec.js ├── oldspec │ ├── box.js │ ├── common │ │ ├── item.js │ │ ├── scaffold.js │ │ └── source_item.js │ ├── form.js │ ├── list.js │ ├── mini.js │ └── page.js ├── spec.js ├── spec │ ├── box.js │ ├── common │ │ ├── item.js │ │ ├── scaffold.js │ │ ├── source_item.js │ │ └── source_scaffold.js │ ├── form.js │ ├── list.js │ ├── mini.js │ └── page.js ├── supports.js ├── ui.js └── ui │ ├── actionview.js │ ├── control.js │ ├── growl.js │ ├── modalview.js │ ├── picker.js │ ├── ranger.js │ ├── stars.js │ └── util.js ├── dist ├── cardkit-standalone.js ├── cardkit-standalone.min.js ├── cardkit.js ├── cardkit.min.js ├── css │ ├── cardkit-standalone.css │ ├── cardkit-standalone.min.css │ ├── cardkit.css │ └── cardkit.min.css └── pics │ ├── drawer_icon.png │ ├── fold_icon.png │ ├── menu.png │ ├── more.png │ └── unfold_icon.png ├── package.json ├── scss ├── cardkit-standalone.scss ├── cardkit.scss ├── cardkit │ ├── _active.scss │ ├── _base.scss │ ├── _card.scss │ ├── _config.scss │ ├── _include.scss │ ├── _lib.scss │ ├── active │ │ ├── _control.scss │ │ ├── _overlay.scss │ │ ├── _picker.scss │ │ └── _popup.scss │ └── card │ │ ├── _box.scss │ │ ├── _form.scss │ │ ├── _list.scss │ │ ├── _mini.scss │ │ ├── _page.scss │ │ └── common │ │ ├── _item.scss │ │ └── _scaffold.scss └── config.rb └── tpl └── cardkit ├── box.tpl ├── box ├── collect.tpl └── content.tpl ├── form.tpl ├── form ├── content.tpl ├── item.tpl └── title.tpl ├── item.tpl ├── item ├── author.tpl ├── author_desc.tpl ├── author_info.tpl ├── author_meta.tpl ├── author_prefix.tpl ├── author_suffix.tpl ├── avatar.tpl ├── content.tpl ├── desc.tpl ├── icon.tpl ├── info.tpl ├── meta.tpl ├── opt.tpl ├── title.tpl ├── title_prefix.tpl ├── title_suffix.tpl └── title_tag.tpl ├── list.tpl ├── mini.tpl ├── page.tpl ├── page ├── actionbar.tpl ├── actionbar │ └── action.tpl ├── banner.tpl ├── nav.tpl └── title.tpl └── scaffold ├── ft.tpl ├── hd.tpl ├── hd_opt.tpl └── hdwrap.tpl /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .DS_Store? 3 | ._* 4 | .Spotlight-V100 5 | .Trashes 6 | Icon? 7 | ehthumbs.db 8 | Thumbs.db 9 | 10 | node_modules/ 11 | bower_components/ 12 | .sass-cache/ 13 | .statictmp 14 | 15 | vendor/ 16 | scss/moui/ 17 | cardkit/tpl/ 18 | 19 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | #source 'https://rubygems.org' 2 | source 'http://ruby.taobao.org' 3 | 4 | gem "sass", ">= 3.2.0" 5 | gem "compass", ">= 0.13.alpha.10" 6 | gem "compass-normalize", ">= 1.3" 7 | gem "ceaser-easing", "~> 0.6.1" 8 | gem "animate", ">= 0.2.beta.0" 9 | gem "compass-recipes", "~> 0.3.0" 10 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: http://ruby.taobao.org/ 3 | specs: 4 | animate (0.2.beta.0) 5 | compass (>= 0.13.alpha.0) 6 | sass (>= 3.2.0) 7 | ceaser-easing (0.6.1) 8 | compass (>= 0.12.2) 9 | chunky_png (1.2.9) 10 | compass (0.13.alpha.10) 11 | chunky_png (~> 1.2) 12 | json 13 | listen (~> 1.1.0) 14 | sass (~> 3.3.0.rc.1) 15 | compass-normalize (1.4.3) 16 | compass (>= 0.12.0) 17 | compass-recipes (0.3.0) 18 | compass (>= 0.12.2) 19 | compass-normalize (>= 1.3) 20 | sass (>= 3.2.1) 21 | ffi (1.9.0) 22 | json (1.8.1) 23 | listen (1.1.6) 24 | rb-fsevent (>= 0.9.3) 25 | rb-inotify (>= 0.9) 26 | rb-kqueue (>= 0.2) 27 | rb-fsevent (0.9.3) 28 | rb-inotify (0.9.2) 29 | ffi (>= 0.5.0) 30 | rb-kqueue (0.2.0) 31 | ffi (>= 0.5.0) 32 | sass (3.3.0.rc.1) 33 | listen (~> 1.1.0) 34 | 35 | PLATFORMS 36 | ruby 37 | 38 | DEPENDENCIES 39 | animate (>= 0.2.beta.0) 40 | ceaser-easing (~> 0.6.1) 41 | compass (>= 0.13.alpha.4) 42 | compass-normalize (>= 1.3) 43 | compass-recipes (~> 0.3.0) 44 | sass (>= 3.2.0) 45 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = function(grunt) { 3 | 4 | var pkg = grunt.file.readJSON('package.json'); 5 | 6 | grunt.initConfig({ 7 | pkg: pkg, 8 | 9 | dispatch: { 10 | options: { 11 | directory: "bower_components" 12 | }, 13 | "mo": { 14 | use: { 15 | "build/vendor/mo/": ["**/*.js", "!**/Gruntfile.js"] 16 | } 17 | }, 18 | "darkdom": { 19 | use: { 20 | "build/vendor/": "darkdom.js" 21 | } 22 | }, 23 | "eventmaster": { 24 | use: { 25 | "build/vendor/": "eventmaster.js" 26 | } 27 | }, 28 | "dollar": { 29 | use: { 30 | "build/vendor/": ["**/*.js", "!**/Gruntfile.js"] 31 | } 32 | }, 33 | "soviet": { 34 | use: { 35 | "build/vendor/": "soviet.js" 36 | } 37 | }, 38 | "momo": { 39 | use: { 40 | "build/vendor/": ["**/*.js", "!**/Gruntfile.js"] 41 | } 42 | }, 43 | "moui": { 44 | use: [{ 45 | cwd: "scss/moui", 46 | src: ["**"], 47 | dest: "scss/moui/" 48 | }, { 49 | src: ["**/*.js", "!**/Gruntfile.js"], 50 | dest: "build/vendor/moui/" 51 | }, { 52 | cwd: "asset", 53 | src: ["**"], 54 | dest: "asset/" 55 | }] 56 | }, 57 | }, 58 | 59 | clean: { 60 | vendor: ["build/vendor", "scss/moui"], 61 | dist: ["dist", "cardkit/tpl"], 62 | }, 63 | 64 | copy: { 65 | cardkit: { 66 | files: [{ 67 | 'build/vendor/': ['cardkit/**', 'cardkit.js'] 68 | }] 69 | } 70 | }, 71 | 72 | furnace: { 73 | cardkit_tpl: { 74 | options: { 75 | importas: 'tpl', 76 | exportas: 'amd' 77 | }, 78 | files: [{ 79 | expand: true, 80 | cwd: 'tpl/cardkit', 81 | src: ['**/*.tpl'], 82 | dest: 'build/vendor/cardkit/tpl', 83 | ext: '.js' 84 | }] 85 | } 86 | }, 87 | 88 | imagemin: { 89 | main: { 90 | options: { 91 | optimizationLevel: 3 92 | }, 93 | files: [{ 94 | expand: true, 95 | cwd: 'asset/', 96 | src: ['**/*.{png,gif,jpg}'], 97 | dest: 'dist/pics/' 98 | }] 99 | } 100 | }, 101 | 102 | ozma: { 103 | cardkit: { 104 | src: 'build/cardkit.js', 105 | config: { 106 | baseUrl: "build/vendor", 107 | distUrl: "dist/vendor", 108 | loader: false, 109 | ignore: [ 110 | 'mo/lang', 'mo/lang/es5', 'mo/lang/type', 'mo/lang/mix', 111 | 'mo/browsers', 112 | 'mo/network', 113 | 'mo/template', 'mo/template/micro', 114 | 'dollar', 115 | 'soviet', 116 | 'darkdom', 117 | 'eventmaster', 118 | 'moui/control', 119 | 'moui/picker', 120 | 'moui/ranger', 121 | 'moui/actionview', 122 | 'moui/modalview', 123 | 'moui/growl', 124 | 'momo/base', 125 | 'momo/tap' 126 | ], 127 | disableAutoSuffix: true 128 | }, 129 | "library-release": true, 130 | }, 131 | standalone: { 132 | src: 'build/cardkit-standalone.js', 133 | config: { 134 | baseUrl: "build/vendor", 135 | distUrl: "dist/vendor", 136 | loader: '../../node_modules/ozjs/oz.js', 137 | disableAutoSuffix: true 138 | } 139 | }, 140 | }, 141 | 142 | compass: { 143 | main: { 144 | options: { 145 | config: 'scss/config.rb', 146 | sassDir: 'scss', 147 | cssDir: 'dist/css', 148 | imagesDir: 'dist/pics', 149 | relativeAssets: true, 150 | outputStyle: 'expanded', 151 | noLineComments: false, 152 | require: [ 153 | 'compass-normalize', 154 | 'ceaser-easing', 155 | 'animate', 156 | 'compass-recipes' 157 | ], 158 | environment: 'production' 159 | } 160 | } 161 | }, 162 | 163 | uglify: { 164 | main: { 165 | files: [{ 166 | expand: true, 167 | cwd: 'dist/', 168 | src: ['**/*.js'], 169 | dest: 'dist/', 170 | ext: '.min.js' 171 | }] 172 | } 173 | }, 174 | 175 | cssmin: { 176 | main: { 177 | files: [{ 178 | expand: true, 179 | cwd: 'dist/css/', 180 | src: ['**/*.css'], 181 | dest: 'dist/css/', 182 | ext: '.min.css' 183 | }] 184 | } 185 | }, 186 | 187 | jshint: { 188 | options: pkg.jshintConfig, 189 | dist: { 190 | files: { 191 | src: [ 192 | 'cardkit.js', 193 | 'cardkit/**/*.js', 194 | '!cardkit/tpl/**' 195 | ] 196 | } 197 | } 198 | } 199 | 200 | }); 201 | 202 | grunt.loadNpmTasks('grunt-contrib-concat'); 203 | grunt.loadNpmTasks('grunt-contrib-clean'); 204 | grunt.loadNpmTasks('grunt-contrib-copy'); 205 | grunt.loadNpmTasks('grunt-contrib-watch'); 206 | grunt.loadNpmTasks('grunt-contrib-jshint'); 207 | grunt.loadNpmTasks('grunt-contrib-imagemin'); 208 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 209 | grunt.loadNpmTasks('grunt-contrib-uglify'); 210 | grunt.loadNpmTasks('grunt-contrib-compass'); 211 | grunt.loadNpmTasks('grunt-furnace'); 212 | grunt.loadNpmTasks('grunt-dispatch'); 213 | grunt.loadNpmTasks('grunt-ozjs'); 214 | 215 | grunt.registerTask('update', [ 216 | 'clean:vendor', 217 | 'dispatch', 218 | ]); 219 | 220 | grunt.registerTask('publish', [ 221 | 'jshint:dist', 222 | 'clean:dist', 223 | 'copy:cardkit', 224 | 'furnace', 225 | 'imagemin', 226 | 'compass', 227 | 'ozma', 228 | 'cssmin', 229 | 'uglify', 230 | ]); 231 | 232 | grunt.registerTask('default', [ 233 | 'update', 234 | 'publish', 235 | ]); 236 | 237 | }; 238 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | # CardKit (v2) 7 | 8 | CardKit is a mobile UI library provides a series of building blocks to help you build mobile web apps quickly and simply, or transfer entire website to mobile-first web app for touch devices. 9 | 10 | CardKit building blocks are all _use-html-as-configure-style_ (like Custom Elements, directive...) components built on [DarkDOM](https://github.com/dexteryy/DarkDOM) and [Moui](https://github.com/dexteryy/moui). 11 | 12 | ## Usages and Examples 13 | 14 | * [Components Gallery App](http://dexteryy.github.io/cardkit-demo-gallery) 15 | * [To-do App](https://github.com/dexteryy/cardkit-demo-todoapp) 16 | * [Custom DarkDOM Components](https://github.com/dexteryy/cardkit-demo-darkdom) 17 | 18 | ## References 19 | 20 | * Presentation in QCon Beijing 2014 (in Chinese): [slides + transcript](http://www.douban.com/note/347692465/) 21 | 22 | ### In the Real World 23 | 24 | ![douban apps](http://dexteryy.github.io/cardkit-demo-gallery/screenshot/doubanapp.png) 25 | 26 | ## Installation 27 | 28 | Install via bower: 29 | 30 | ``` 31 | bower install cardkit 32 | ``` 33 | 34 | Or download directly: 35 | 36 | * Packaged version without dependencies 37 | [cardkit.js](https://github.com/dexteryy/CardKit/blob/master/dist/cardkit.js) 38 | [cardkit.min.js](https://github.com/dexteryy/CardKit/blob/master/dist/cardkit.min.js) 39 | * Packaged version with dependencies 40 | [cardkit-standalone.js](https://github.com/dexteryy/CardKit/blob/master/dist/cardkit-standalone.js) 41 | [cardkit-standalone.min.js](https://github.com/dexteryy/CardKit/blob/master/dist/cardkit-standalone.min.js) 42 | 43 | ## Quick Start for building 44 | 45 | ### Prepare the environment 46 | 47 | 1. node, npm 48 | 2. [grunt v0.4](http://gruntjs.com/getting-started) - `npm install grunt-cli -g` 49 | 3. [bower v0.10.0+](http://bower.io/) - `npm install bower -g` 50 | 4. ruby, gem, [bundler](http://gembundler.com/) 51 | 52 | ### Install dependencies 53 | 54 | 1. `npm install` 55 | 2. `bundle install` 56 | 3. `bower install` 57 | 58 | ### The first build 59 | 60 | 1. `grunt` 61 | 62 | ## License 63 | 64 | Copyright (c) 2013-2014 douban.com 65 | Licensed under the MIT license. 66 | -------------------------------------------------------------------------------- /asset/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/asset/blank.gif -------------------------------------------------------------------------------- /asset/drawer_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/asset/drawer_icon.png -------------------------------------------------------------------------------- /asset/fold_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/asset/fold_icon.png -------------------------------------------------------------------------------- /asset/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/asset/menu.png -------------------------------------------------------------------------------- /asset/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/asset/more.png -------------------------------------------------------------------------------- /asset/unfold_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/asset/unfold_icon.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cardkit", 3 | "description": "CardKit is a mobile UI library provides a series of building blocks which are all components built on DarkDOM and Moui.", 4 | "version": "2.0.0", 5 | "main": "cardkit.js", 6 | "dependencies": { 7 | "mo": "~1.7.2", 8 | "dollar": "~1.5.1", 9 | "darkdom": "0.15.0", 10 | "eventmaster": "2.1.0", 11 | "soviet": "~1.0.0", 12 | "momo": "~1.2.0-alpha.1", 13 | "moui": "~2.3.2" 14 | }, 15 | "ignore": [ 16 | "**/.*", 17 | "npmpackage", 18 | "node_modules", 19 | "components", 20 | "bower_components", 21 | "build", 22 | "Gruntfile.js", 23 | "Gemfile", 24 | "Gemfile.lock", 25 | "test", 26 | "tests" 27 | ], 28 | "resolutions": { 29 | "dollar": "~1.5.1", 30 | "mo": ">=1.6.6" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /build/cardkit-standalone.js: -------------------------------------------------------------------------------- 1 | 2 | require.config({ 3 | baseUrl: 'vendor/' 4 | }); 5 | 6 | define('mo/easing/functions', [], function(){}); 7 | define('mo/mainloop', [], function(){}); 8 | 9 | require(['cardkit'], function(){}); 10 | 11 | -------------------------------------------------------------------------------- /build/cardkit.js: -------------------------------------------------------------------------------- 1 | 2 | require.config({ 3 | baseUrl: 'vendor/', 4 | }); 5 | 6 | require(['cardkit'], function(){}); 7 | 8 | -------------------------------------------------------------------------------- /cardkit.js: -------------------------------------------------------------------------------- 1 | 2 | define('cardkit', [ 3 | 'mo/lang', 4 | 'dollar', 5 | 'mo/mainloop', 6 | 'cardkit/spec', 7 | 'cardkit/oldspec', 8 | 'cardkit/ui', 9 | 'cardkit/supports', 10 | 'cardkit/bus' 11 | ], function(_, $, mainloop, 12 | specs, oldspecs, ui, supports, bus){ 13 | 14 | var DEFAULT_DECK = 'main', 15 | UNMOUNT_FLAG = 'unmount-page', 16 | RE_HASH = /#(.+)$/, 17 | doc = document, 18 | body = doc.body, 19 | _components = {}, 20 | _specs = {}, 21 | _guards = {}, 22 | _decks = {}, 23 | _current_deck, 24 | _page_opening, 25 | _defaults = { 26 | appWrapper: null, 27 | defaultPage: 'ckDefault', 28 | oldStyle: false, 29 | hybirdMode: false 30 | }; 31 | 32 | var exports = { 33 | 34 | init: function(opt){ 35 | this._config = _.config({}, opt, _defaults); 36 | this._specs = this._config.oldStyle ? oldspecs : specs; 37 | this.initSpec(); 38 | this.initView(); 39 | }, 40 | 41 | initSpec: function(){ 42 | _.each(specs, function(data, name){ 43 | var spec = this._specs[name][0]; 44 | this.component(name, data[1][name]()); 45 | _specs[name] = spec; 46 | }, this); 47 | }, 48 | 49 | initView: function(){ 50 | this.wrapper = $(this._config.appWrapper || body); 51 | if (supports.webview) { 52 | this.wrapper.addClass('ck-in-webview'); 53 | } 54 | if (this._config.hybirdMode) { 55 | this.wrapper.addClass('ck-in-hybird'); 56 | } 57 | if (!supports.noBugWhenFixed) { 58 | this.wrapper.addClass('ck-bugfix-fixed'); 59 | } 60 | bus.on('ready', function(){ 61 | $(window).on('hashchange', function(e){ 62 | e.preventDefault(); 63 | exports.openPage(); 64 | }); 65 | }); 66 | ui.init(this._config); 67 | }, 68 | 69 | component: function(name, component){ 70 | if (component) { 71 | _components[name] = component; 72 | } else { 73 | return _components[name]; 74 | } 75 | }, 76 | 77 | guard: function(name){ 78 | if (!_guards[name]) { 79 | _guards[name] = this.component(name).createGuard(); 80 | } 81 | return _guards[name]; 82 | }, 83 | 84 | render: function(name, parent){ 85 | var spec = _specs[name]; 86 | var guard = this.guard(name); 87 | if (spec && guard) { 88 | spec(guard, parent || this.wrapper); 89 | guard.mount(); 90 | } 91 | }, 92 | 93 | scrollPageTo: function(pid){ 94 | var target = $('.ck-page-card #' + pid); 95 | if (target[0]) { 96 | mainloop.addTween('scrollPage', 97 | window.scrollY, target.offset().top, 400, { 98 | easing: 'ease', 99 | step: function(v){ 100 | window.scrollTo(0, v); 101 | }, 102 | callback: function(){ 103 | mainloop.pause(); 104 | } 105 | }).run('scrollPage'); 106 | } 107 | }, 108 | 109 | openPageByNode: function(node){ 110 | var spec = this._specs['page'][0]; 111 | var outer_page = node.closest(spec.SELECTOR); 112 | if (!outer_page[0]) { 113 | outer_page = node.closest(spec.SELECTOR_OLD); 114 | } 115 | if (outer_page[0]) { 116 | var last_decktop = _decks[_current_deck]; 117 | if (!last_decktop || last_decktop[0] !== outer_page[0]) { 118 | this.openPage(outer_page); 119 | } 120 | } 121 | return outer_page; 122 | }, 123 | 124 | openPage: function(page){ 125 | if (_page_opening) { 126 | return false; 127 | } 128 | page = this.findPage(page); 129 | var pid = page[1]; 130 | page = page[0]; 131 | var is_page = this.isPage(page); 132 | if (pid && page[0] && !is_page) { 133 | this.openPageByNode(page); 134 | setTimeout(function(){ 135 | this.scrollPageTo(pid); 136 | }.bind(this), 400); 137 | return true; 138 | } 139 | var last_decktop = _decks[DEFAULT_DECK]; 140 | var is_init = !last_decktop; 141 | if (!page[0] || !is_page) { 142 | if (!is_init) { 143 | return false; 144 | } 145 | location.replace('#' + this._config.defaultPage); 146 | page = $('#' + this._config.defaultPage); 147 | } 148 | window.scrollTo(0, 0); 149 | if (is_init) { 150 | last_decktop = $('#' + this._config.defaultPage); 151 | if (page[0] !== last_decktop[0]) { 152 | _decks[DEFAULT_DECK] = last_decktop; 153 | this.openPage(last_decktop); 154 | } 155 | } 156 | _page_opening = true; 157 | if (!page[0].isMountedDarkDOM) { 158 | page.addClass(UNMOUNT_FLAG); 159 | this.render('page'); 160 | page.removeClass(UNMOUNT_FLAG); 161 | } 162 | var deck = page.getDarkState('deck') || DEFAULT_DECK, 163 | decktop = _decks[deck]; 164 | last_decktop = _decks[_current_deck]; 165 | _decks[deck] = page; 166 | _.each(_decks, notify_deck, deck); 167 | if (deck !== _current_deck) { 168 | var is_modal = _current_deck === 'modalview'; 169 | _current_deck = deck; 170 | if (is_modal) { 171 | exports.closeModal(); 172 | } 173 | if (last_decktop 174 | && $.contains(body, last_decktop[0])) { 175 | blur_page(last_decktop); 176 | } 177 | } 178 | if (decktop 179 | && decktop[0] !== page[0] 180 | && $.contains(body, decktop[0])) { 181 | close_page(decktop); 182 | } 183 | if (is_init) { 184 | page.once('pageCard:opened', function(){ 185 | bus.resolve('ready'); 186 | }); 187 | } 188 | open_page(page); 189 | focus_page(page); 190 | _page_opening = false; 191 | return true; 192 | }, 193 | 194 | resetPage: function(page){ 195 | page = this.findPage(page)[0]; 196 | if (!page[0]) { 197 | return; 198 | } 199 | page.resetDarkDOM(); 200 | }, 201 | 202 | updatePage: function(page){ 203 | page = page ? this.findPage(page)[0] 204 | : this.currentPage()[0]; 205 | page.updateDarkDOM(); 206 | }, 207 | 208 | currentPage: function(){ 209 | return _decks[_current_deck] || $(); 210 | }, 211 | 212 | findPage: function(page){ 213 | var pid; 214 | if (!page || typeof page === 'string') { 215 | var hash = RE_HASH.exec(location.href); 216 | pid = page 217 | || hash && hash[1] 218 | || this._config.defaultPage; 219 | page = $('#' + pid); 220 | } else { 221 | page = $(page); 222 | } 223 | return [page, pid]; 224 | }, 225 | 226 | isPage: function(page){ 227 | var spec = this._specs['page'][0]; 228 | return page.is(spec.SELECTOR) 229 | || spec.SELECTOR_OLD 230 | && page.is(spec.SELECTOR_OLD); 231 | }, 232 | 233 | isLandscape: function() { 234 | return window.innerWidth / window.innerHeight > 1.1; 235 | }, 236 | 237 | brightDelegate: ui.brightDelegate, 238 | darkDelegate: ui.darkDelegate, 239 | ui: ui, 240 | event: bus 241 | 242 | }; 243 | 244 | _.mix(exports, ui.action); 245 | _.mix(exports, ui.component); 246 | 247 | exports.openURL = exports.openLink; // @deprecated 248 | 249 | exports.modalCard.event.on('open', function(modal){ 250 | modal.lastDecktop = _decks[_current_deck]; 251 | exports.openPage(modal.pageNode()); 252 | }).on('willUpdateContent', function(modal){ 253 | var page = modal.pageNode(); 254 | if (page[0] && page[0].isMountedDarkDOM) { 255 | exports.resetPage(page); 256 | } 257 | }).on('close', function(modal){ 258 | if (_current_deck === 'modalview') { 259 | exports.openPage(modal.lastDecktop); 260 | } 261 | //}).on('frameOnload', function(modal){ 262 | //exports.render('page', modal._iframeWindow[0].document); 263 | }); 264 | 265 | function open_page(page){ 266 | if (page.getDarkState('isPageActive') === 'true') { 267 | return; 268 | } 269 | page.trigger('pageCard:willOpen') 270 | .setDarkState('isPageActive', true, { 271 | update: true 272 | }) 273 | .trigger('pageCard:opened'); 274 | } 275 | 276 | function close_page(page){ 277 | if (page.getDarkState('isPageActive') !== 'true') { 278 | return; 279 | } 280 | page.trigger('pageCard:willClose') 281 | .setDarkState('isPageActive', false, { 282 | update: true 283 | }) 284 | .trigger('pageCard:closed'); 285 | } 286 | 287 | function focus_page(page){ 288 | if (page.getDarkState('isDeckActive') === 'true') { 289 | return; 290 | } 291 | page.trigger('pageCard:willFocus') 292 | .setDarkState('isDeckActive', true, { 293 | update: true 294 | }) 295 | .trigger('pageCard:focused'); 296 | } 297 | 298 | function blur_page(page){ 299 | if (page.getDarkState('isDeckActive') !== 'true') { 300 | return; 301 | } 302 | page.trigger('pageCard:willBlur') 303 | .setDarkState('isDeckActive', false, { 304 | update: true 305 | }) 306 | .trigger('pageCard:blured'); 307 | } 308 | 309 | function notify_deck(page){ 310 | page.setDarkState('currentDeck', this, { 311 | update: true 312 | }); 313 | } 314 | 315 | return exports; 316 | 317 | }); 318 | -------------------------------------------------------------------------------- /cardkit/bus.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'eventmaster' 4 | ], function(event){ 5 | 6 | return event(); 7 | 8 | }); 9 | 10 | -------------------------------------------------------------------------------- /cardkit/card/box.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var darkdom = require('darkdom'), 5 | convert = require('mo/template/micro').convertTpl, 6 | helper = require('../helper'), 7 | render_content = convert(require('../tpl/box/content').template), 8 | render_collect = convert(require('../tpl/box/collect').template), 9 | render_hdwrap = convert(require('../tpl/scaffold/hdwrap').template), 10 | render_box = convert(require('../tpl/box').template), 11 | scaffold_components = require('./common/scaffold'); 12 | 13 | var exports = { 14 | 15 | content: function(){ 16 | return darkdom({ 17 | enableSource: true, 18 | sourceAsContent: true, 19 | render: render_content 20 | }); 21 | }, 22 | 23 | collect: function(){ 24 | return darkdom({ 25 | enableSource: true, 26 | sourceAsContent: true, 27 | render: render_collect 28 | }); 29 | }, 30 | 31 | box: function(){ 32 | var box = darkdom({ 33 | enableSource: true, 34 | render: function(data){ 35 | data.isBlank = !data.component.collect.length 36 | && helper.isBlank(data.content); 37 | data.hasSplitHd = data.state.plainStyle === 'true' 38 | || data.state.plainHdStyle === 'true'; 39 | data.hdwrap = render_hdwrap(data); 40 | return render_box(data); 41 | } 42 | }); 43 | box.contain(scaffold_components); 44 | box.contain('content', exports.content, { 45 | content: true 46 | }); 47 | box.contain('collect', exports.collect); 48 | return box; 49 | } 50 | 51 | }; 52 | 53 | return exports; 54 | 55 | }); 56 | 57 | -------------------------------------------------------------------------------- /cardkit/card/common/scaffold.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var darkdom = require('darkdom'), 5 | convert = require('mo/template/micro').convertTpl, 6 | helper = require('../../helper'), 7 | render_hd = convert(require('../../tpl/scaffold/hd').template), 8 | render_hdopt = convert(require('../../tpl/scaffold/hd_opt').template), 9 | render_ft = convert(require('../../tpl/scaffold/ft').template); 10 | 11 | var exports = { 12 | 13 | hd: function(){ 14 | return darkdom({ 15 | unique: true, 16 | enableSource: true, 17 | render: function(data){ 18 | var hdlink_data = data.context.componentData.hdLink; 19 | var hd_link = helper.readState(hdlink_data, 'link'); 20 | data.hdLink = hd_link 21 | || data.state.link; 22 | data.hdLinkTarget = hd_link 23 | ? helper.readState(hdlink_data, 'linkTarget') 24 | : data.state.linkTarget; 25 | return render_hd(data); 26 | } 27 | }); 28 | }, 29 | 30 | hdLink: function(){ 31 | return darkdom({ 32 | unique: true, 33 | enableSource: true, 34 | render: function(data){ 35 | return data.state.link; 36 | } 37 | }); 38 | }, 39 | 40 | hdOpt: function(){ 41 | return darkdom({ 42 | enableSource: true, 43 | sourceAsContent: true, 44 | render: render_hdopt 45 | }); 46 | }, 47 | 48 | ft: function(){ 49 | return darkdom({ 50 | unique: true, 51 | enableSource: true, 52 | render: render_ft 53 | }); 54 | }, 55 | 56 | blank: function(){ 57 | return darkdom({ 58 | unique: true, 59 | enableSource: true, 60 | render: function(data){ 61 | return '
' + data.content + '
'; 62 | } 63 | }); 64 | } 65 | 66 | }; 67 | 68 | return exports; 69 | 70 | }); 71 | 72 | -------------------------------------------------------------------------------- /cardkit/card/form.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var darkdom = require('darkdom'), 5 | convert = require('mo/template/micro').convertTpl, 6 | render_item = convert(require('../tpl/form/item').template), 7 | render_title = convert(require('../tpl/form/title').template), 8 | render_content = convert(require('../tpl/form/content').template), 9 | render_hdwrap = convert(require('../tpl/scaffold/hdwrap').template), 10 | render_form = convert(require('../tpl/form').template), 11 | helper = require('../helper'), 12 | scaffold_components = require('./common/scaffold'); 13 | 14 | var exports = { 15 | 16 | title: function(){ 17 | return darkdom({ 18 | unique: true, 19 | enableSource: true, 20 | render: render_title 21 | }); 22 | }, 23 | 24 | content: function(){ 25 | return darkdom({ 26 | enableSource: true, 27 | sourceAsContent: true, 28 | render: render_content 29 | }); 30 | }, 31 | 32 | item: function(){ 33 | var component = darkdom({ 34 | enableSource: true, 35 | render: render_item 36 | }).contain('content', exports.content, { 37 | content: true 38 | }).contain('title', exports.title); 39 | helper.forwardInputEvents(component); 40 | return component; 41 | }, 42 | 43 | form: function(){ 44 | var form = darkdom({ 45 | enableSource: true, 46 | render: function(data){ 47 | data.hasSplitHd = data.state.plainStyle === 'true' 48 | || data.state.plainHdStyle === 'true'; 49 | data.hdwrap = render_hdwrap(data); 50 | return render_form(data); 51 | } 52 | }); 53 | form.contain(scaffold_components); 54 | form.contain('item', exports.item); 55 | return form; 56 | } 57 | 58 | }; 59 | 60 | return exports; 61 | 62 | }); 63 | 64 | -------------------------------------------------------------------------------- /cardkit/card/item.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var darkdom = require('darkdom'), 5 | _ = require('mo/lang/mix'), 6 | convert = require('mo/template/micro').convertTpl, 7 | helper = require('../helper'), 8 | render_item = convert(require('../tpl/item').template), 9 | render_title = convert(require('../tpl/item/title').template), 10 | render_title_prefix = convert(require('../tpl/item/title_prefix').template), 11 | render_title_suffix = convert(require('../tpl/item/title_suffix').template), 12 | render_title_tag = convert(require('../tpl/item/title_tag').template), 13 | render_icon = convert(require('../tpl/item/icon').template), 14 | render_desc = convert(require('../tpl/item/desc').template), 15 | render_info = convert(require('../tpl/item/info').template), 16 | render_opt = convert(require('../tpl/item/opt').template), 17 | render_content = convert(require('../tpl/item/content').template), 18 | render_meta = convert(require('../tpl/item/meta').template), 19 | render_author = convert(require('../tpl/item/author').template), 20 | render_author_prefix = convert(require('../tpl/item/author_prefix').template), 21 | render_author_suffix = convert(require('../tpl/item/author_suffix').template), 22 | render_avatar = convert(require('../tpl/item/avatar').template), 23 | render_author_desc = convert(require('../tpl/item/author_desc').template), 24 | render_author_info = convert(require('../tpl/item/author_info').template), 25 | render_author_meta = convert(require('../tpl/item/author_meta').template); 26 | 27 | var exports = { 28 | 29 | title: function(){ 30 | return darkdom({ 31 | unique: true, 32 | enableSource: true, 33 | render: render_title 34 | }); 35 | }, 36 | 37 | titleLink: function(){ 38 | return darkdom({ 39 | unique: true, 40 | enableSource: true, 41 | render: function(data){ 42 | return data.state.link; 43 | } 44 | }); 45 | }, 46 | 47 | titlePrefix: function(){ 48 | return darkdom({ 49 | enableSource: true, 50 | sourceAsContent: true, 51 | render: render_title_prefix 52 | }); 53 | }, 54 | 55 | titleSuffix: function(){ 56 | return darkdom({ 57 | enableSource: true, 58 | sourceAsContent: true, 59 | render: render_title_suffix 60 | }); 61 | }, 62 | 63 | titleTag: function(){ 64 | return darkdom({ 65 | enableSource: true, 66 | render: render_title_tag 67 | }); 68 | }, 69 | 70 | icon: function(){ 71 | return darkdom({ 72 | unique: true, 73 | enableSource: true, 74 | render: render_icon 75 | }); 76 | }, 77 | 78 | desc: function(){ 79 | return darkdom({ 80 | enableSource: true, 81 | sourceAsContent: true, 82 | render: render_desc 83 | }); 84 | }, 85 | 86 | info: function(){ 87 | return darkdom({ 88 | enableSource: true, 89 | sourceAsContent: true, 90 | render: render_info 91 | }); 92 | }, 93 | 94 | opt: function(){ 95 | return darkdom({ 96 | enableSource: true, 97 | sourceAsContent: true, 98 | render: render_opt 99 | }); 100 | }, 101 | 102 | content: function(){ 103 | return darkdom({ 104 | enableSource: true, 105 | sourceAsContent: true, 106 | render: render_content 107 | }); 108 | }, 109 | 110 | meta: function(){ 111 | return darkdom({ 112 | enableSource: true, 113 | sourceAsContent: true, 114 | render: render_meta 115 | }); 116 | }, 117 | 118 | author: function(){ 119 | return darkdom({ 120 | unique: true, 121 | enableSource: true, 122 | render: render_author 123 | }); 124 | }, 125 | 126 | authorLink: function(){ 127 | return darkdom({ 128 | unique: true, 129 | enableSource: true, 130 | render: function(data){ 131 | return data.state.link; 132 | } 133 | }); 134 | }, 135 | 136 | authorPrefix: function(){ 137 | return darkdom({ 138 | enableSource: true, 139 | sourceAsContent: true, 140 | render: render_author_prefix 141 | }); 142 | }, 143 | 144 | authorSuffix: function(){ 145 | return darkdom({ 146 | enableSource: true, 147 | sourceAsContent: true, 148 | render: render_author_suffix 149 | }); 150 | }, 151 | 152 | avatar: function(){ 153 | return darkdom({ 154 | unique: true, 155 | enableSource: true, 156 | render: render_avatar 157 | }); 158 | }, 159 | 160 | authorDesc: function(){ 161 | return darkdom({ 162 | enableSource: true, 163 | sourceAsContent: true, 164 | render: render_author_desc 165 | }); 166 | }, 167 | 168 | authorInfo: function(){ 169 | return darkdom({ 170 | enableSource: true, 171 | sourceAsContent: true, 172 | render: render_author_info 173 | }); 174 | }, 175 | 176 | authorMeta: function(){ 177 | return darkdom({ 178 | enableSource: true, 179 | sourceAsContent: true, 180 | render: render_author_meta 181 | }); 182 | }, 183 | 184 | item: function(){ 185 | var item = darkdom({ 186 | enableSource: true, 187 | render: function(data){ 188 | var read_state = helper.readState; 189 | var state = data.state; 190 | var com = data.component; 191 | var comdata = data.componentData; 192 | var link_data = com.titleLink 193 | ? comdata.titleLink : comdata.title; 194 | data.itemLinkTarget = read_state(link_data, 'linkTarget') 195 | || state.linkTarget; 196 | data.isItemLinkAlone = read_state(link_data, 'isAlone') 197 | || state.isAlone; 198 | data.itemLink = com.titleLink 199 | || read_state(comdata.title, 'link') 200 | || state.link; 201 | data.itemContent = com.title || data.content; 202 | var author_data = com.authorLink 203 | ? comdata.authorLink : comdata.author; 204 | data.authorLinkTarget = read_state(author_data, 'linkTarget'); 205 | data.authorLink = com.authorLink 206 | || read_state(comdata.author, 'link'); 207 | return render_item(data); 208 | } 209 | }); 210 | var parts = _.copy(exports); 211 | delete parts.item; 212 | item.contain(parts); 213 | return item; 214 | } 215 | 216 | }; 217 | 218 | return exports; 219 | 220 | }); 221 | -------------------------------------------------------------------------------- /cardkit/card/list.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var darkdom = require('darkdom'), 5 | convert = require('mo/template/micro').convertTpl, 6 | render_hdwrap = convert(require('../tpl/scaffold/hdwrap').template), 7 | render_list = convert(require('../tpl/list').template), 8 | item = require('./item'), 9 | scaffold_components = require('./common/scaffold'); 10 | 11 | var exports = { 12 | 13 | item: item.item, 14 | 15 | list: function(){ 16 | var list = darkdom({ 17 | enableSource: true, 18 | render: function(data){ 19 | var s = data.state; 20 | data.hasSplitHd = s.plainStyle === 'true' 21 | || s.plainHdStyle === 'true' 22 | || s.subtype === 'split'; 23 | data.hdwrap = render_hdwrap(data); 24 | return render_list(data); 25 | } 26 | }); 27 | list.contain(scaffold_components); 28 | list.contain('item', exports.item); 29 | return list; 30 | } 31 | 32 | }; 33 | 34 | return exports; 35 | 36 | }); 37 | 38 | -------------------------------------------------------------------------------- /cardkit/card/mini.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var darkdom = require('darkdom'), 5 | convert = require('mo/template/micro').convertTpl, 6 | render_hdwrap = convert(require('../tpl/scaffold/hdwrap').template), 7 | render_mini = convert(require('../tpl/mini').template), 8 | item = require('./item'), 9 | scaffold_components = require('./common/scaffold'); 10 | 11 | var exports = { 12 | 13 | item: item.item, 14 | 15 | mini: function(){ 16 | var mini = darkdom({ 17 | enableSource: true, 18 | render: function(data){ 19 | data.hasSplitHd = true; 20 | data.hdwrap = render_hdwrap(data); 21 | var l = data.component.item.length; 22 | data.listWidth = l > 1 ? (l * 100 * 0.94 + '%') : ''; 23 | data.itemWidth = Math.floor(1000/l)/10 + '%'; 24 | return render_mini(data); 25 | } 26 | }); 27 | mini.contain(scaffold_components); 28 | mini.contain('item', exports.item); 29 | return mini; 30 | } 31 | 32 | }; 33 | 34 | return exports; 35 | 36 | }); 37 | 38 | -------------------------------------------------------------------------------- /cardkit/card/page.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var darkdom = require('darkdom'), 5 | _ = require('mo/lang/mix'), 6 | convert = require('mo/template/micro').convertTpl, 7 | helper = require('../helper'), 8 | render_title = convert(require('../tpl/page/title').template), 9 | render_nav = convert(require('../tpl/page/nav').template), 10 | render_banner = convert(require('../tpl/page/banner').template), 11 | render_actionbar = convert(require('../tpl/page/actionbar').template), 12 | render_action = convert(require('../tpl/page/actionbar/action').template), 13 | render_page = convert(require('../tpl/page').template); 14 | 15 | var cards = { 16 | box: require('./box').box, 17 | list: require('./list').list, 18 | mini: require('./mini').mini, 19 | form: require('./form').form, 20 | }; 21 | 22 | var exports = { 23 | 24 | title: function(){ 25 | return darkdom({ 26 | unique: true, 27 | enableSource: true, 28 | render: render_title 29 | }); 30 | }, 31 | 32 | nav: function(){ 33 | return darkdom({ 34 | unique: true, 35 | enableSource: true, 36 | render: render_nav 37 | }); 38 | }, 39 | 40 | banner: function(){ 41 | return darkdom({ 42 | unique: true, 43 | enableSource: true, 44 | render: function(data){ 45 | data.isBlank = helper.isBlank(data.content); 46 | return render_banner(data); 47 | } 48 | }); 49 | }, 50 | 51 | action: function(){ 52 | return darkdom({ 53 | enableSource: true, 54 | entireAsContent: true, 55 | render: render_action 56 | }); 57 | }, 58 | 59 | actionbar: function(){ 60 | var component = darkdom({ 61 | unique: true, 62 | enableSource: true, 63 | render: function(data){ 64 | var limit = data.state.limit || 1; 65 | data.visibleActions = []; 66 | data.overflowActions = []; 67 | data.componentData.action.forEach(function(action, i){ 68 | var action_html = data.component.action[i]; 69 | if (this.length < limit 70 | && !action.state.forceOverflow) { 71 | this.push(action_html); 72 | } else { 73 | data.overflowActions.push(action_html); 74 | } 75 | }, data.visibleActions); 76 | return render_actionbar(data); 77 | } 78 | }).contain('action', exports.action); 79 | helper.forwardActionEvents(component); 80 | return component; 81 | }, 82 | 83 | blank: function(){ 84 | return darkdom({ 85 | unique: true, 86 | enableSource: true, 87 | render: function(data){ 88 | return '
' + data.content + '
'; 89 | } 90 | }); 91 | }, 92 | 93 | footer: function(){ 94 | return darkdom({ 95 | unique: true, 96 | enableSource: true, 97 | render: function(data){ 98 | return '
' + data.content + '
'; 99 | } 100 | }); 101 | }, 102 | 103 | page: function(){ 104 | var page = darkdom({ 105 | render: function(data){ 106 | var com = data.component; 107 | data.hasHeader = com.title 108 | || com.nav || com.actionbar; 109 | data.isBlank = helper.isBlank(data.content); 110 | return render_page(data); 111 | } 112 | }); 113 | var parts = _.copy(exports); 114 | delete parts.page; 115 | page.contain(parts); 116 | page.contain(cards, { content: true }); 117 | page.response('state:isPageActive', when_page_active); 118 | page.response('state:isDeckActive', when_deck_active); 119 | page.response('state:currentDeck', when_deck_change); 120 | helper.forwardStateEvents(page); 121 | return page; 122 | } 123 | 124 | }; 125 | 126 | function when_page_active(changes){ 127 | var root = changes.root; 128 | if (changes.newValue === 'true') { 129 | if (root.attr('data-fixed-minheight') !== 'false') { 130 | root.css('min-height', window.innerHeight * 1.4 + 'px'); 131 | } 132 | root.attr('data-page-active', true); 133 | setTimeout(function(){ 134 | root.addClass('topbar-enabled'); 135 | window.scrollTo(0, 0); 136 | }, 100); 137 | } else { 138 | root.attr('data-page-active', false) 139 | .removeClass('topbar-enabled'); 140 | } 141 | return false; 142 | } 143 | 144 | function when_deck_active(changes){ 145 | var root = changes.root; 146 | if (changes.newValue === 'true') { 147 | if (root.attr('data-fixed-minheight') !== 'false') { 148 | root.css('min-height', window.innerHeight * 1.4 + 'px'); 149 | } 150 | root.attr('data-deck-active', true); 151 | } else { 152 | root.attr('data-deck-active', false); 153 | setTimeout(function(){ 154 | window.scrollTo(0, 0); 155 | }, 300); 156 | } 157 | return false; 158 | } 159 | 160 | function when_deck_change(changes){ 161 | changes.root.attr('data-curdeck', changes.newValue); 162 | return false; 163 | } 164 | 165 | return exports; 166 | 167 | }); 168 | 169 | -------------------------------------------------------------------------------- /cardkit/helper.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'mo/lang', 4 | 'dollar', 5 | 'darkdom', 6 | './ui' 7 | ], function(_, $, darkdom, ui){ 8 | 9 | var control = ui.component.control, 10 | picker = ui.component.picker, 11 | ranger = ui.component.ranger; 12 | 13 | var exports = { 14 | 15 | readState: function(data, state){ 16 | return data && (data.state || {})[state]; 17 | }, 18 | 19 | readSource: function(node){ 20 | var source = node.data('source'); 21 | return source && ('.' + source); 22 | }, 23 | 24 | readLabel: function(node){ 25 | var label = node.data('label'); 26 | if (label) { 27 | label = node.find(label)[0]; 28 | } 29 | label = $(label || node); 30 | return label.text() || label.val(); 31 | }, 32 | 33 | readClass: function(node){ 34 | return node[0].className.split(/\s+/).filter(function(cname){ 35 | return cname && !/^ckd\-/.test(cname); 36 | }).join(' '); 37 | }, 38 | 39 | forwardStateEvents: function(component){ 40 | component.forward({ 41 | 'control:enable *': 'control:enable', 42 | 'control:disable *': 'control:disable', 43 | 'picker:change *': 'picker:change', 44 | 'picker:response *': 'picker:response', 45 | 'selector:change *': 'selector:change', 46 | 'ranger:changed *': 'ranger:changed' 47 | }); 48 | }, 49 | 50 | applyStateEvents: function(guard){ 51 | guard.forward({ 52 | 'control:enable': apply_enable, 53 | 'control:disable': apply_disable, 54 | 'picker:change': apply_pick, 55 | 'picker:response': apply_pick_response, 56 | 'selector:change': apply_selector, 57 | 'ranger:changed': apply_ranger 58 | }); 59 | }, 60 | 61 | forwardActionEvents: function(component){ 62 | component.forward({ 63 | 'control:enable .ck-top-act > *': 'topControl:enable', 64 | 'control:disable .ck-top-act > *': 'topControl:disable', 65 | 'actionView:confirm .ck-top-overflow': 'topOverflow:confirm' 66 | }); 67 | }, 68 | 69 | applyActionEvents: function(guard){ 70 | guard.forward({ 71 | 'topOverflow:confirm': apply_top_confirm, 72 | 'topControl:enable': apply_top_enable, 73 | 'topControl:disable': apply_top_disable 74 | }); 75 | }, 76 | 77 | forwardInputEvents: function(component){ 78 | component.forward({ 79 | 'change select': 'select:change', 80 | 'change input': 'input:change', 81 | 'change textarea': 'input:change' 82 | }); 83 | }, 84 | 85 | applyInputEvents: function(guard){ 86 | guard.forward({ 87 | 'select:change': apply_select, 88 | 'input:change': apply_input 89 | }); 90 | }, 91 | 92 | isBlank: function(content){ 93 | return !content || !/\S/m.test(content); 94 | } 95 | 96 | }; 97 | 98 | var apply_enable = find_dark(enable_control); 99 | 100 | var apply_disable = find_dark(disable_control); 101 | 102 | var apply_pick = find_dark(function(node, e){ 103 | var p = picker(node, _.merge({ 104 | disableRequest: true 105 | }, e.component._config)); 106 | var new_val = e.component.val(); 107 | ui.action.updatePicker(p, new_val); 108 | }); 109 | 110 | var apply_pick_response = find_dark(function(node, e){ 111 | var p = picker(node, _.merge({}, e.component._config)); 112 | p.responseData = e.component.responseData; 113 | node.trigger('picker:response', { 114 | component: p 115 | }); 116 | }); 117 | 118 | var apply_selector = find_dark(function(node, e){ 119 | node.trigger('selector:change', { 120 | component: picker(node, _.merge({ 121 | disableRequest: true 122 | }, e.component._config)) 123 | }); 124 | }); 125 | 126 | var apply_ranger = find_dark(function(node, e){ 127 | var o = ranger(node, _.merge({ 128 | enableNotify: false 129 | }, e.component._config)); 130 | var v = e.component.val(); 131 | o.val(v).attr('value', v); 132 | node.trigger('ranger:changed', { 133 | component: o 134 | }); 135 | }); 136 | 137 | var apply_top_enable = find_top_dark(enable_control); 138 | 139 | var apply_top_disable = find_top_dark(disable_control); 140 | 141 | var apply_top_confirm = function (e){ 142 | var aid = e.component.val(); 143 | var target = $('#' + aid).children(); 144 | target.trigger('tap'); 145 | }; 146 | 147 | var apply_select = find_dark(function(node, e){ 148 | $('option', e.target).forEach(function(option, i){ 149 | if (option.selected) { 150 | this.eq(i).attr('selected', 'selected'); 151 | } else { 152 | this.eq(i).removeAttr('selected'); 153 | } 154 | }, node.find('option')); 155 | }); 156 | 157 | var apply_input = find_dark(function(node, e){ 158 | var checked = e.target.checked; 159 | node[0].checked = checked; 160 | if (checked === false) { 161 | node.removeAttr('checked'); 162 | } else { 163 | node.attr('checked', 'checked'); 164 | } 165 | var value = e.target.value; 166 | node.val(value).attr('value', value); 167 | }); 168 | 169 | function enable_control(node, e){ 170 | var o = control(node, _.merge({ 171 | disableRequest: true 172 | }, e.component._config)); 173 | o.responseData = e.component.responseData; 174 | o.enable(); 175 | } 176 | 177 | function disable_control(node, e){ 178 | var o = control(node, _.merge({ 179 | disableRequest: true 180 | }, e.component._config)); 181 | o.responseData = e.component.responseData; 182 | o.disable(); 183 | } 184 | 185 | function find_dark(fn){ 186 | return function(e, root){ 187 | var target = e.target.id; 188 | if (!target) { 189 | return; 190 | } 191 | target = darkdom.getDarkByCustomId(target); 192 | if (target[0] 193 | && !target[0]._ckDisablePageForward) { 194 | fn(target, e); 195 | root.updateDarkDOM({ 196 | ignoreRender: true 197 | }); 198 | } 199 | }; 200 | } 201 | 202 | function find_top_dark(fn){ 203 | return function(e){ 204 | var target = e.target.id; 205 | if (target) { 206 | target = darkdom.getDarkByCustomId(target); 207 | } else { 208 | target = darkdom.getDarkById(e.target.parentNode.id); 209 | } 210 | if (!target[0]) { 211 | return; 212 | } 213 | target[0]._ckDisablePageForward = true; 214 | fn(target, e); 215 | if (target[0].isDarkSource) { 216 | var actionbar = $(e.target).closest('.ck-top-actions'); 217 | darkdom.getDarkById(actionbar[0].id).updateDarkSource(); 218 | } else { 219 | target.updateDarkDOM(); 220 | } 221 | }; 222 | } 223 | 224 | return exports; 225 | 226 | }); 227 | -------------------------------------------------------------------------------- /cardkit/oldspec.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | return { 5 | page: [require('./oldspec/page')], 6 | box: [require('./oldspec/box')], 7 | list: [require('./oldspec/list')], 8 | }; 9 | 10 | }); 11 | 12 | -------------------------------------------------------------------------------- /cardkit/oldspec/box.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | '../helper', 5 | './common/scaffold' 6 | ], function($, helper, scaffold_specs){ 7 | 8 | var source_states = { 9 | source: helper.readSource 10 | }, 11 | SEL = '.ckd-box-card', 12 | SEL_OLD = '.ck-box-unit'; // @deprecated 13 | 14 | return function(guard, parent){ 15 | guard.watch($(SEL, parent)); 16 | guard.watch($(SEL_OLD, parent)); 17 | guard.state({ 18 | subtype: 'data-style', 19 | paperStyle: 'data-cfg-paper', 20 | plainStyle: 'data-cfg-plain', 21 | plainHdStyle: 'data-cfg-plainhd', 22 | customClass: helper.readClass 23 | }); 24 | guard.state(source_states); 25 | guard.component(scaffold_specs); 26 | guard.component({ 27 | content: function(guard){ 28 | guard.watch('.ckd-content'); 29 | guard.state(source_states); 30 | }, 31 | collect: function(guard){ 32 | guard.watch('.ckd-collect'); 33 | guard.state(source_states); 34 | } 35 | }); 36 | guard.source() 37 | .component(scaffold_specs) 38 | .component({ 39 | content: '.ckd-content', 40 | collect: '.ckd-collect' 41 | }); 42 | }; 43 | 44 | }); 45 | -------------------------------------------------------------------------------- /cardkit/oldspec/common/item.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | '../../helper' 4 | ], function(helper){ 5 | 6 | var source_states = { 7 | source: helper.readSource 8 | }; 9 | 10 | return { 11 | title: function(guard){ 12 | guard.watch('.ckd-title'); 13 | guard.state(source_states); 14 | guard.state({ 15 | link: 'href', 16 | linkTarget: function(node){ 17 | return node.hasClass('ckd-title-link-extern') 18 | && (node.attr('target') || '_blank'); 19 | }, 20 | isAlone: function(node){ 21 | return node.hasClass('ckd-title-link-alone'); 22 | } 23 | }); 24 | }, 25 | titleLink: function(guard){ 26 | guard.watch('.ckd-title-link'); 27 | guard.state(source_states); 28 | guard.state({ 29 | link: 'href', 30 | linkTarget: function(node){ 31 | return node.hasClass('ckd-title-link-extern') 32 | && (node.attr('target') || '_blank'); 33 | }, 34 | isAlone: function(node){ 35 | return node.hasClass('ckd-title-link-alone'); 36 | } 37 | }); 38 | }, 39 | titlePrefix: function(guard){ 40 | guard.watch('.ckd-title-prefix'); 41 | guard.state(source_states); 42 | }, 43 | titleSuffix: function(guard){ 44 | guard.watch('.ckd-title-suffix'); 45 | guard.state(source_states); 46 | }, 47 | titleTag: function(guard){ 48 | guard.watch('.ckd-title-tag'); 49 | guard.state(source_states); 50 | }, 51 | icon: function(guard){ 52 | guard.watch('.ckd-icon'); 53 | guard.state(source_states); 54 | guard.state({ 55 | imgUrl: 'src' 56 | }); 57 | }, 58 | info: function(guard){ 59 | guard.watch('.ckd-info'); 60 | guard.state(source_states); 61 | }, 62 | opt: function(guard){ 63 | guard.watch('.ckd-opt'); 64 | guard.state(source_states); 65 | }, 66 | desc: function(guard){ 67 | guard.watch('.ckd-desc, .ckd-subtitle'); 68 | guard.state(source_states); 69 | }, 70 | content: function(guard){ 71 | guard.watch('.ckd-content'); 72 | guard.state(source_states); 73 | }, 74 | meta: function(guard){ 75 | guard.watch('.ckd-meta'); 76 | guard.state(source_states); 77 | }, 78 | author: function(guard){ 79 | guard.watch('.ckd-author'); 80 | guard.state(source_states); 81 | guard.state({ 82 | link: 'href', 83 | linkTarget: function(node){ 84 | return node.hasClass('ckd-author-link-extern') 85 | && (node.attr('target') || '_blank'); 86 | } 87 | }); 88 | }, 89 | authorLink: function(guard){ 90 | guard.watch('.ckd-author-link'); 91 | guard.state(source_states); 92 | guard.state({ 93 | link: 'href', 94 | linkTarget: function(node){ 95 | return node.hasClass('ckd-author-link-extern') 96 | && (node.attr('target') || '_blank'); 97 | } 98 | }); 99 | }, 100 | authorPrefix: function(guard){ 101 | guard.watch('.ckd-author-prefix'); 102 | guard.state(source_states); 103 | }, 104 | authorSuffix: function(guard){ 105 | guard.watch('.ckd-author-suffix'); 106 | guard.state(source_states); 107 | }, 108 | avatar: function(guard){ 109 | guard.watch('.ckd-avatar'); 110 | guard.state(source_states); 111 | guard.state({ 112 | imgUrl: 'src' 113 | }); 114 | }, 115 | authorInfo: function(guard){ 116 | guard.watch('.ckd-author-info'); 117 | guard.state(source_states); 118 | }, 119 | authorDesc: function(guard){ 120 | guard.watch('.ckd-author-desc'); 121 | guard.state(source_states); 122 | }, 123 | authorMeta: function(guard){ 124 | guard.watch('.ckd-author-meta'); 125 | guard.state(source_states); 126 | } 127 | }; 128 | 129 | }); 130 | 131 | -------------------------------------------------------------------------------- /cardkit/oldspec/common/scaffold.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | '../../helper' 4 | ], function(helper){ 5 | 6 | var source_states = { 7 | source: helper.readSource 8 | }; 9 | 10 | return { 11 | hd: function(guard){ 12 | guard.watch('.ckd-hd'); 13 | guard.state(source_states); 14 | guard.state({ 15 | link: 'href', 16 | linkTarget: function(node){ 17 | return node.hasClass('ckd-hd-link-extern') 18 | && (node.attr('target') || '_blank'); 19 | } 20 | }); 21 | }, 22 | hdLink: function(guard){ 23 | guard.watch('.ckd-hd-link:not(.ckd-hd)'); 24 | guard.state(source_states); 25 | guard.state({ 26 | link: 'href', 27 | linkTarget: function(node){ 28 | return node.hasClass('ckd-hd-link-extern') 29 | && (node.attr('target') || '_blank'); 30 | } 31 | }); 32 | }, 33 | hdOpt: function(guard){ 34 | guard.watch('.ckd-hdopt'); 35 | guard.state(source_states); 36 | }, 37 | ft: function(guard){ 38 | guard.watch('.ckd-ft'); 39 | }, 40 | blank: function(guard){ 41 | guard.watch('.ckd-blank'); 42 | } 43 | }; 44 | 45 | }); 46 | 47 | -------------------------------------------------------------------------------- /cardkit/oldspec/common/source_item.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/cardkit/oldspec/common/source_item.js -------------------------------------------------------------------------------- /cardkit/oldspec/form.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | '../helper', 5 | '../spec/form', 6 | './common/scaffold' 7 | ], function($, helper, form_spec, scaffold_specs){ 8 | 9 | var source_states = { 10 | source: helper.readSource 11 | }, 12 | SEL = '.ckd-form-card', 13 | SEL_OLD = '.ck-form-unit'; // @deprecated 14 | 15 | return function(guard, parent){ 16 | guard.watch($(SEL, parent)); 17 | guard.watch($(SEL_OLD, parent)); 18 | guard.state({ 19 | subtype: 'data-style', 20 | blankText: 'data-cfg-blank', 21 | plainHdStyle: 'data-cfg-plainhd', 22 | customClass: helper.readClass 23 | }); 24 | guard.state(source_states); 25 | guard.component(scaffold_specs); 26 | guard.component('item', function(guard){ 27 | guard.watch('.ckd-item'); 28 | guard.component({ 29 | title: function(guard){ 30 | guard.watch('.ckd-title'); 31 | guard.state(source_states); 32 | }, 33 | content: function(guard){ 34 | guard.watch('.ckd-content'); 35 | guard.state(source_states); 36 | } 37 | }); 38 | helper.applyInputEvents(guard); 39 | guard.source().component({ 40 | title: '.ckd-title', 41 | content: '.ckd-content' 42 | }); 43 | }); 44 | guard.source() 45 | .component(scaffold_specs) 46 | .component('item', form_spec.sourceItemSpec); 47 | }; 48 | 49 | }); 50 | 51 | -------------------------------------------------------------------------------- /cardkit/oldspec/list.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | '../helper', 5 | '../spec/list', 6 | './common/scaffold', 7 | './common/item' 8 | ], function($, helper, list_spec, scaffold_specs, item_specs){ 9 | 10 | var source_states = { 11 | source: helper.readSource 12 | }, 13 | source_item_states = list_spec.sourceItemStates, 14 | source_item_spec = list_spec.sourceItemSpec, 15 | SEL = '.ckd-list-card', 16 | SEL_OLD = '.ck-list-unit'; // @deprecated 17 | 18 | function init_list(guard){ 19 | guard.state({ 20 | subtype: 'data-style', 21 | blankText: 'data-cfg-blank', 22 | limit: 'data-cfg-limit', 23 | col: 'data-cfg-col', 24 | paperStyle: 'data-cfg-paper', 25 | plainStyle: 'data-cfg-plain', 26 | plainHdStyle: 'data-cfg-plainhd', 27 | customClass: helper.readClass 28 | }); 29 | guard.state(source_states); 30 | guard.component(scaffold_specs); 31 | guard.component('item', function(guard){ 32 | guard.watch('.ckd-item'); 33 | guard.state(source_states); 34 | guard.state(source_item_states); 35 | guard.component(item_specs); 36 | guard.source().component(item_specs); 37 | }); 38 | guard.source() 39 | .component(scaffold_specs) 40 | .component('item', source_item_spec); 41 | } 42 | 43 | function exports(guard, parent){ 44 | guard.watch($(SEL, parent)); 45 | guard.watch($(SEL_OLD, parent)); 46 | init_list(guard); 47 | } 48 | 49 | exports.initList = init_list; 50 | 51 | return exports; 52 | 53 | }); 54 | 55 | -------------------------------------------------------------------------------- /cardkit/oldspec/mini.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | './list' 5 | ], function($, list_spec){ 6 | 7 | var SEL = '.ckd-mini-card', 8 | SEL_OLD = '.ck-mini-unit'; // @deprecated 9 | 10 | return function(guard, parent){ 11 | guard.watch($(SEL, parent)); 12 | guard.watch($(SEL_OLD, parent)); 13 | list_spec.initList(guard); 14 | }; 15 | 16 | }); 17 | 18 | -------------------------------------------------------------------------------- /cardkit/oldspec/page.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var $ = require('dollar'), 5 | newspec = require('../spec/page'), 6 | helper = require('../helper'), 7 | action_attr = newspec.initOldStyleActionState, 8 | UNMOUNT_FLAG = '.unmount-page'; 9 | 10 | var specs = { 11 | title: title_spec, 12 | actionbar: actionbar_spec, 13 | nav: nav_spec, 14 | banner: banner_spec, 15 | footer: footer_spec, 16 | blank: blank_spec, 17 | box: require('./box'), 18 | list: require('./list'), 19 | mini: require('./mini'), 20 | form: require('./form'), 21 | }; 22 | 23 | function title_spec(guard){ 24 | guard.watch('.ckd-page-title'); 25 | guard.state('source', helper.readSource); 26 | } 27 | 28 | function blank_spec(guard){ 29 | guard.watch('.ckd-page-blank'); 30 | guard.state('source', helper.readSource); 31 | } 32 | 33 | function nav_spec(guard){ 34 | guard.watch('.ckd-page-nav'); 35 | guard.state({ 36 | link: 'href', 37 | source: helper.readSource 38 | }); 39 | } 40 | 41 | function banner_spec(guard){ 42 | guard.watch('.ckd-page-banner'); 43 | guard.watch('.ck-banner-unit'); // @deprecated 44 | guard.state({ 45 | plainStyle: 'data-cfg-plain', 46 | source: helper.readSource 47 | }); 48 | } 49 | 50 | function actionbar_spec(guard){ 51 | guard.watch('.ckd-page-actions'); 52 | guard.state({ 53 | limit: 'data-cfg-limit', 54 | source: helper.readSource 55 | }); 56 | guard.component('action', action_spec); 57 | guard.source().component('action', action_spec); 58 | helper.applyActionEvents(guard); 59 | } 60 | 61 | function footer_spec(guard){ 62 | guard.watch('.ckd-page-footer'); 63 | guard.state('source', helper.readSource); 64 | } 65 | 66 | function action_spec(guard){ 67 | guard.watch('.ckd-item, .ckd-overflow-item'); 68 | guard.state('source', helper.readSource); 69 | action_attr(guard); 70 | action_attr(guard.source()); 71 | } 72 | 73 | function exports(guard, parent){ 74 | guard.watch($(exports.SELECTOR + UNMOUNT_FLAG, parent)); 75 | guard.watch($(exports.SELECTOR_OLD + UNMOUNT_FLAG, parent)); 76 | guard.state({ 77 | blankText: 'data-cfg-blank', 78 | deck: 'data-cfg-deck', 79 | isPageActive: 'data-active-page', 80 | isDeckActive: 'data-active-deck', 81 | currentDeck: 'data-current-deck', 82 | fixedMinHeight: 'data-fixed-minheight', 83 | cardId: 'id' 84 | }); 85 | guard.component(specs); 86 | helper.applyStateEvents(guard); 87 | } 88 | 89 | exports.SELECTOR = '.ckd-page-card'; 90 | exports.SELECTOR_OLD = '.ck-card'; // @deprecated 91 | 92 | return exports; 93 | 94 | }); 95 | 96 | -------------------------------------------------------------------------------- /cardkit/spec.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | return { 5 | page: [require('./spec/page'), require('./card/page')], 6 | box: [require('./spec/box'), require('./card/box')], 7 | list: [require('./spec/list'), require('./card/list')], 8 | }; 9 | 10 | }); 11 | -------------------------------------------------------------------------------- /cardkit/spec/box.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | './common/scaffold', 5 | './common/source_scaffold' 6 | ], function($, scaffold_specs, source_scaffold_specs){ 7 | 8 | var SEL = 'ck-card[type="box"]'; 9 | 10 | return function(guard, parent){ 11 | guard.watch($(SEL, parent)); 12 | guard.state({ 13 | subtype: 'subtype', 14 | paperStyle: 'paper-style', 15 | plainStyle: 'plain-style', 16 | plainHdStyle: 'plain-hd-style', 17 | customClass: 'custom-class' 18 | }); 19 | guard.component(scaffold_specs); 20 | guard.component({ 21 | content: 'ck-part[type="content"]', 22 | collect: 'ck-part[type="collect"]' 23 | }); 24 | guard.source() 25 | .component(source_scaffold_specs) 26 | .component({ 27 | content: '.ckd-content', 28 | collect: '.ckd-collect' 29 | }); 30 | }; 31 | 32 | }); 33 | 34 | -------------------------------------------------------------------------------- /cardkit/spec/common/item.js: -------------------------------------------------------------------------------- 1 | 2 | define([], function(){ 3 | 4 | return { 5 | title: function(guard){ 6 | guard.watch('ck-part[type="title"]'); 7 | guard.state({ 8 | link: 'href', 9 | linkTarget: 'target', 10 | isAlone: 'alone-mode' 11 | }); 12 | }, 13 | titleLink: function(guard){ 14 | guard.watch('ck-part[type="titleLink"]'); 15 | guard.state({ 16 | link: 'href', 17 | linkTarget: 'target', 18 | isAlone: 'alone-mode' 19 | }); 20 | }, 21 | titlePrefix: 'ck-part[type="titlePrefix"]', 22 | titleSuffix: 'ck-part[type="titleSuffix"]', 23 | titleTag: 'ck-part[type="titleTag"]', 24 | icon: function(guard){ 25 | guard.watch('ck-part[type="icon"]'); 26 | guard.state({ 27 | imgUrl: 'src' 28 | }); 29 | }, 30 | info: 'ck-part[type="info"]', 31 | opt: function(guard){ 32 | guard.watch('ck-part[type="opt"]'); 33 | }, 34 | desc: 'ck-part[type="desc"]', 35 | content: 'ck-part[type="content"]', 36 | meta: 'ck-part[type="meta"]', 37 | author: function(guard){ 38 | guard.watch('ck-part[type="author"]'); 39 | guard.state({ 40 | link: 'href', 41 | linkTarget: 'target' 42 | }); 43 | }, 44 | authorLink: function(guard){ 45 | guard.watch('ck-part[type="authorLink"]'); 46 | guard.state({ 47 | link: 'href', 48 | linkTarget: 'target' 49 | }); 50 | }, 51 | authorPrefix: 'ck-part[type="authorPrefix"]', 52 | authorSuffix: 'ck-part[type="authorSuffix"]', 53 | avatar: function(guard){ 54 | guard.watch('ck-part[type="avatar"]'); 55 | guard.state({ 56 | imgUrl: 'src' 57 | }); 58 | }, 59 | authorInfo: 'ck-part[type="authorInfo"]', 60 | authorDesc: 'ck-part[type="authorDesc"]', 61 | authorMeta: 'ck-part[type="authorMeta"]' 62 | }; 63 | 64 | }); 65 | 66 | -------------------------------------------------------------------------------- /cardkit/spec/common/scaffold.js: -------------------------------------------------------------------------------- 1 | 2 | define([], function(){ 3 | 4 | return { 5 | hd: function(guard){ 6 | guard.watch('ck-part[type="hd"]'); 7 | guard.state({ 8 | link: 'href', 9 | linkTarget: 'target' 10 | }); 11 | }, 12 | hdLink: function(guard){ 13 | guard.watch('ck-part[type="hdLink"]'); 14 | guard.state({ 15 | link: 'href', 16 | linkTarget: 'target' 17 | }); 18 | }, 19 | hdOpt: function(guard){ 20 | guard.watch('ck-part[type="hdOpt"]'); 21 | }, 22 | ft: function(guard){ 23 | guard.watch('ck-part[type="ft"]'); 24 | }, 25 | blank: function(guard){ 26 | guard.watch('ck-part[type="blank"]'); 27 | } 28 | }; 29 | 30 | }); 31 | 32 | -------------------------------------------------------------------------------- /cardkit/spec/common/source_item.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | return require('../../oldspec/common/item'); 5 | 6 | }); 7 | 8 | -------------------------------------------------------------------------------- /cardkit/spec/common/source_scaffold.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | return require('../../oldspec/common/scaffold'); 5 | 6 | }); 7 | 8 | -------------------------------------------------------------------------------- /cardkit/spec/form.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | '../helper', 5 | './common/scaffold', 6 | './common/source_scaffold' 7 | ], function($, helper, scaffold_specs, source_scaffold_specs){ 8 | 9 | var SEL = 'ck-card[type="form"]'; 10 | 11 | function exports(guard, parent){ 12 | guard.watch($(SEL, parent)); 13 | guard.state({ 14 | subtype: 'subtype', 15 | blankText: 'blank-text', 16 | plainHdStyle: 'plain-hd-style', 17 | customClass: 'custom-class' 18 | }); 19 | guard.component(scaffold_specs); 20 | guard.component('item', function(guard){ 21 | guard.watch('ck-part[type="item"]'); 22 | guard.component({ 23 | title: 'ck-part[type="title"]', 24 | content: 'ck-part[type="content"]' 25 | }); 26 | helper.applyInputEvents(guard); 27 | guard.source().component({ 28 | title: '.ckd-title', 29 | content: '.ckd-content' 30 | }); 31 | }); 32 | guard.source() 33 | .component(source_scaffold_specs) 34 | .component('item', exports.sourceItemSpec); 35 | } 36 | 37 | exports.sourceItemSpec = function(guard){ 38 | guard.watch('.ckd-item'); 39 | guard.component({ 40 | title: '.ckd-title', 41 | content: '.ckd-content' 42 | }); 43 | }; 44 | 45 | return exports; 46 | 47 | }); 48 | 49 | -------------------------------------------------------------------------------- /cardkit/spec/list.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | '../helper', 5 | './common/scaffold', 6 | './common/source_scaffold', 7 | './common/item', 8 | './common/source_item' 9 | ], function($, helper, scaffold_specs, source_scaffold_specs, 10 | item_specs, source_item_specs){ 11 | 12 | var SEL = 'ck-card[type="list"]'; 13 | 14 | var source_item_states = { 15 | link: 'href', 16 | linkTarget: function(node){ 17 | return node.hasClass('ckd-title-link-extern') 18 | && (node.attr('target') || '_blank'); 19 | }, 20 | isAlone: function(node){ 21 | return node.hasClass('ckd-title-link-alone'); 22 | }, 23 | customClass: helper.readClass 24 | }; 25 | 26 | function source_item_spec(source){ 27 | source.watch('.ckd-item'); 28 | source.state(source_item_states); 29 | source.component(source_item_specs); 30 | } 31 | 32 | function init_list(guard){ 33 | guard.state({ 34 | subtype: 'subtype', 35 | blankText: 'blank-text', 36 | limit: 'limit', 37 | col: 'col', 38 | paperStyle: 'paper-style', 39 | plainStyle: 'plain-style', 40 | plainHdStyle: 'plain-hd-style', 41 | customClass: 'custom-class' 42 | }); 43 | guard.component(scaffold_specs); 44 | guard.component('item', function(guard){ 45 | guard.watch('ck-part[type="item"]'); 46 | guard.state({ 47 | link: 'href', 48 | linkTarget: 'target', 49 | isAlone: 'alone-mode', 50 | customClass: 'custom-class' 51 | }); 52 | guard.component(item_specs); 53 | guard.source() 54 | .state(source_item_states) 55 | .component(source_item_specs); 56 | }); 57 | guard.source() 58 | .component(source_scaffold_specs) 59 | .component('item', source_item_spec); 60 | } 61 | 62 | function exports(guard, parent){ 63 | guard.watch($(SEL, parent)); 64 | init_list(guard); 65 | } 66 | 67 | exports.sourceItemStates = source_item_states; 68 | exports.sourceItemSpec = source_item_spec; 69 | exports.initList = init_list; 70 | 71 | return exports; 72 | 73 | }); 74 | 75 | -------------------------------------------------------------------------------- /cardkit/spec/mini.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'dollar', 4 | './list' 5 | ], function($, list_spec){ 6 | 7 | var SEL = 'ck-card[type="mini"]'; 8 | 9 | return function(guard, parent){ 10 | guard.watch($(SEL, parent)); 11 | list_spec.initList(guard); 12 | }; 13 | 14 | }); 15 | 16 | -------------------------------------------------------------------------------- /cardkit/spec/page.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var $ = require('dollar'), 5 | helper = require('../helper'), 6 | UNMOUNT_FLAG = '.unmount-page'; 7 | 8 | var specs = { 9 | title: 'ck-part[type="title"]', 10 | actionbar: actionbar_spec, 11 | nav: nav_spec, 12 | banner: banner_spec, 13 | footer: 'ck-part[type="footer"]', 14 | blank: 'ck-part[type="blank"]', 15 | box: require('./box'), 16 | list: require('./list'), 17 | mini: require('./mini'), 18 | form: require('./form'), 19 | }; 20 | 21 | function nav_spec(guard){ 22 | guard.watch('ck-part[type="nav"]'); 23 | guard.state({ 24 | link: 'href' 25 | }); 26 | } 27 | 28 | function banner_spec(guard){ 29 | guard.watch('ck-part[type="banner"]'); 30 | guard.state({ 31 | plainStyle: 'plain-style' 32 | }); 33 | } 34 | 35 | function actionbar_spec(guard){ 36 | guard.watch('ck-part[type="actionbar"]'); 37 | guard.state({ 38 | limit: 'limit' 39 | }); 40 | guard.component('action', action_spec); 41 | guard.source().component('action', source_action_spec); 42 | helper.applyActionEvents(guard); 43 | } 44 | 45 | function action_spec(guard){ 46 | guard.watch('[action-layout]'); 47 | guard.state({ 48 | label: helper.readLabel, 49 | forceOverflow: function(node){ 50 | return 'overflow' === 51 | node.attr('action-layout'); 52 | } 53 | }); 54 | source_action_attr(guard.source()); 55 | } 56 | 57 | function source_action_spec(source){ 58 | source.watch('.ckd-item, .ckd-overflow-item'); 59 | source_action_attr(source); 60 | } 61 | 62 | function source_action_attr(source){ 63 | if (!source) { 64 | return; 65 | } 66 | source.state({ 67 | label: helper.readLabel, 68 | forceOverflow: function(node){ 69 | return node.hasClass('ckd-overflow-item'); 70 | } 71 | }); 72 | } 73 | 74 | function exports(guard, parent){ 75 | guard.watch($(exports.SELECTOR + UNMOUNT_FLAG, parent)); 76 | guard.state({ 77 | blankText: 'blank-text', 78 | deck: 'deck', 79 | isPageActive: 'active-page', 80 | isDeckActive: 'active-deck', 81 | currentDeck: 'current-deck', 82 | fixedMinHeight: 'fixed-minheight', 83 | cardId: 'id' 84 | }); 85 | guard.component(specs); 86 | helper.applyStateEvents(guard); 87 | } 88 | 89 | exports.SELECTOR = 'ck-card[type="page"]'; 90 | 91 | exports.initOldStyleActionState = source_action_attr; 92 | 93 | return exports; 94 | 95 | }); 96 | 97 | -------------------------------------------------------------------------------- /cardkit/supports.js: -------------------------------------------------------------------------------- 1 | 2 | define(['mo/browsers'], function(browsers){ 3 | 4 | var exports = { 5 | touch: browsers.isTouch, 6 | webview: browsers.webview, 7 | noBugWhenFixed: browsers.os !== 'android' 8 | || browsers.shell !== 'ucbrowser' 9 | }; 10 | 11 | return exports; 12 | 13 | }); 14 | 15 | -------------------------------------------------------------------------------- /cardkit/ui.js: -------------------------------------------------------------------------------- 1 | 2 | define([ 3 | 'mo/lang', 4 | 'dollar', 5 | 'mo/browsers', 6 | 'mo/template', 7 | 'mo/network', 8 | 'soviet', 9 | 'momo/base', 10 | 'momo/tap', 11 | './ui/control', 12 | './ui/picker', 13 | './ui/ranger', 14 | './ui/modalview', 15 | './ui/actionview', 16 | './ui/growl', 17 | './supports', 18 | './bus' 19 | ], function(_, $, browsers, tpl, net, soviet, 20 | momoBase, momoTap, 21 | control, picker, ranger, 22 | modalView, actionView, growl, supports, bus){ 23 | 24 | var doc = document, 25 | modalCard = modalView(), 26 | _modal_tm, 27 | _soviet_aliases = {}, 28 | _soviet_opt = { 29 | aliasEvents: _soviet_aliases, 30 | autoOverride: true, 31 | matchesSelector: true, 32 | preventDefault: true 33 | }, 34 | _delegate = soviet(doc, _soviet_opt); 35 | 36 | var BrightSoviet = _.construct(soviet.Soviet); 37 | 38 | BrightSoviet.prototype.on = function(event, selector, handler){ 39 | if (typeof selector === 'string' 40 | && !/dd-autogen/.test(selector)) { 41 | selector = '[dd-autogen] ' + selector; 42 | } 43 | return this.superMethod('on', [event, selector, handler]); 44 | }; 45 | 46 | var DarkSoviet = _.construct(soviet.Soviet); 47 | 48 | DarkSoviet.prototype.on = function(event, selector, handler){ 49 | if (typeof selector === 'string' 50 | && !/dd-connect/.test(selector)) { 51 | selector = '[dd-connect] ' + selector; 52 | } 53 | return this.superMethod('on', [event, selector, handler]); 54 | }; 55 | 56 | _.mix(momoBase.Class.prototype, { 57 | bind: function(ev, handler, elm){ 58 | $(elm || this.node).bind(ev, handler); 59 | return this; 60 | }, 61 | unbind: function(ev, handler, elm){ 62 | $(elm || this.node).unbind(ev, handler); 63 | return this; 64 | }, 65 | trigger: function(e, ev){ 66 | delete e.layerX; 67 | delete e.layerY; 68 | delete e.returnValue; 69 | $(e.target).trigger(ev, e); 70 | return this; 71 | } 72 | }); 73 | 74 | var tap_events = { 75 | 76 | '.ck-link, .ck-link *': function(){ 77 | actions.openLink(this); 78 | }, 79 | 80 | '.ck-link-direct, .ck-link-direct *': function(){ // @deprecated 81 | actions.openLink(this); 82 | }, 83 | 84 | '.ck-link-extern, ck-link-extern *': function(){ 85 | actions.openLink(this, { 86 | target: this.target || '_blank' 87 | }); 88 | }, 89 | 90 | '.ck-link-img': function(){ 91 | actions.openImage(this.href); 92 | }, 93 | 94 | // control 95 | 96 | '.ck-post-link': handle_control, 97 | 98 | '.ck-post-button, .ck-post-button span': tap_ck_post, 99 | 100 | '.ck-folder header': function(){ 101 | control(this.parentNode).toggle(); 102 | }, 103 | 104 | '.ck-switch, .ck-switch span': tap_ck_switch, 105 | 106 | // picker 107 | 108 | '.ck-segment .ck-option, .ck-segment .ck-option span': function(){ 109 | var btn = $(this); 110 | if (!btn.hasClass('ck-option')) { 111 | btn = btn.closest('.ck-option'); 112 | } 113 | var p = picker(btn.parent()); 114 | p.select(btn); 115 | }, 116 | 117 | '.ck-select, .ck-select span, .ck-select .enabled': function(){ 118 | var me = $(this); 119 | if (!me.hasClass('ck-select')) { 120 | me = me.parent(); 121 | } 122 | var p = picker(me); 123 | show_actions(me); 124 | bus.on('actionView:confirmOnThis', function(actionWindow){ 125 | actions.updatePicker(p, actionWindow.val()); 126 | me.trigger('selector:change', { 127 | component: p 128 | }); 129 | }); 130 | }, 131 | 132 | '.ck-tagselector .ck-option': function(){ 133 | var p = picker(this.parentNode); 134 | p.select(this); 135 | }, 136 | 137 | '.ck-actions .ck-option': function(){ 138 | var acts = $(this).closest('.ck-actions'); 139 | var p = picker(acts, { 140 | ignoreStatus: acts.data("ignoreStatus") !== 'false' && true 141 | }); 142 | p.select(this); 143 | }, 144 | 145 | '.ck-actions-button, .ck-actions-button span': function(){ 146 | var me = $(this); 147 | if (!me.hasClass('ck-actions-button')) { 148 | me = me.parent(); 149 | } 150 | show_actions(me); 151 | }, 152 | 153 | // modalView 154 | 155 | '.ck-modal-button, .ck-modal-button *': function(){ 156 | var me = $(this); 157 | if (!me.hasClass('ck-modal-button')) { 158 | me = me.closest('.ck-modal-button'); 159 | } 160 | actions.openModal(me.data()); 161 | }, 162 | 163 | '.ck-modal-link, .ck-modal-link *': function(){ 164 | var me = $(this); 165 | if (!me.hasClass('ck-modal-link')) { 166 | me = me.closest('.ck-modal-link'); 167 | } 168 | actions.openModal(me.data()); 169 | }, 170 | 171 | '.ck-modalview .wrapper > header .confirm': function(){ 172 | modalCard.confirm(); 173 | }, 174 | 175 | '.ck-modalview .wrapper > header .cancel': function(){ 176 | modalCard.cancel(); 177 | }, 178 | 179 | // actionView 180 | 181 | '.ck-actionview .ck-option, .ck-actionview .ck-option > *': function(){ 182 | var me = $(this); 183 | if (!me.hasClass('ck-option')) { 184 | me = me.parent(); 185 | } 186 | actionView.current.select(me); 187 | }, 188 | 189 | '.ck-actionview > footer .confirm': function(){ 190 | actionView.current.confirm(); 191 | }, 192 | 193 | '.ck-actionview > footer .cancel': function(){ 194 | actionView.current.cancel(); 195 | }, 196 | 197 | '.ck-top-overflow': function(){ 198 | show_actions($(this)); 199 | }, 200 | 201 | '.ck-confirm-link': function(){ 202 | var me = this; 203 | if (!me.href) { 204 | me = me.parentNode; 205 | } 206 | actions.confirm('', function(){ 207 | actions.openLink(me.href, me.target); 208 | }, $(me).data()); 209 | }, 210 | 211 | // growl 212 | 213 | '.ck-growl-button': function(){ 214 | growl(this).open(); 215 | } 216 | 217 | }; 218 | 219 | bus.on('ranger:changed', function(ranger, url){ 220 | if (url) { 221 | actions.openLink(tpl.format(url, { 222 | value: ranger.val() 223 | })); 224 | } 225 | }); 226 | 227 | bus.on('actionView:jump', function(actionCard, href, target){ 228 | actions.openLink(href, { 229 | target: target 230 | }); 231 | }); 232 | 233 | var components = { 234 | control: control, 235 | picker: picker, 236 | ranger: ranger, 237 | modalCard: modalCard, 238 | modalView: modalView, 239 | actionView: actionView, 240 | growl: growl 241 | }; 242 | 243 | var actions = { 244 | 245 | alert: function(text, opt) { 246 | return actionView('ckAlert', _.mix({ 247 | title: '提示', 248 | content: text || '', 249 | cancelText: '关闭', 250 | multiselect: false 251 | }, opt)).open(); 252 | }, 253 | 254 | confirm: function(text, cb, opt) { 255 | var re = actionView('ckAlert', _.mix({ 256 | title: '提示', 257 | content: text || '', 258 | confirmText: '确认', 259 | cancelText: '取消', 260 | multiselect: true 261 | }, opt)).open(); 262 | bus.on('actionView:confirmOnThis', cb); 263 | return re; 264 | }, 265 | 266 | openModal: function(opt){ 267 | var tm = +new Date(), 268 | url = opt.jsonUrl || opt.url; 269 | if (url) { 270 | actions.showLoading(); 271 | _modal_tm = tm; 272 | if (opt.jsonUrl) { 273 | net.getJSON(url, callback); 274 | } else if (opt.url) { 275 | net.ajax({ 276 | url: url, 277 | success: callback 278 | }); 279 | } 280 | } else { 281 | modalCard.set(opt).open(); 282 | } 283 | function callback(data){ 284 | if (tm !== _modal_tm) { 285 | return; 286 | } 287 | if (opt.jsonUrl) { 288 | data = data.html; 289 | } 290 | opt.content = data; 291 | actions.hideLoading(); 292 | modalCard.set(opt).open(); 293 | } 294 | }, 295 | 296 | closeModal: function(){ 297 | _modal_tm = 0; 298 | modalCard.cancel(); 299 | return modalCard.event.promise('close'); 300 | }, 301 | 302 | openImage: function(src){ 303 | actions.openLink(src, { 304 | target: '_blank' 305 | }); 306 | }, 307 | 308 | notify: function(content, opt) { 309 | return growl(_.mix({ 310 | content: content 311 | }, opt)).open(); 312 | }, 313 | 314 | showLoading: function(text){ 315 | if (!this.loadingTips) { 316 | this.loadingTips = growl({ 317 | expires: -1, 318 | keepalive: true, 319 | corner: 'center' 320 | }); 321 | } 322 | this.loadingTips.set({ 323 | content: text || '加载中...' 324 | }).open(); 325 | this._loadingStart = +new Date(); 326 | }, 327 | 328 | hideLoading: function(opt){ 329 | opt = _.mix({ duration: 800 }, opt); 330 | var d = +new Date() - this._loadingStart; 331 | if (d < opt.duration) { 332 | setTimeout(function(){ 333 | actions.hideLoading(opt); 334 | }, opt.duration - d); 335 | } else { 336 | if (this.loadingTips) { 337 | this.loadingTips.close(); 338 | } 339 | } 340 | }, 341 | 342 | updatePicker: function(pickerObj, new_val){ 343 | if (Array.isArray(new_val)) { 344 | var old_val = pickerObj.val(); 345 | _.each(old_val, function(v){ 346 | if (!this[v]) { 347 | pickerObj.unselect(v); 348 | } 349 | }, _.index(new_val)); 350 | _.each(new_val, function(v){ 351 | if (!this[v]) { 352 | pickerObj.select(v); 353 | } 354 | }, _.index(old_val)); 355 | } else { 356 | pickerObj.select(new_val); 357 | } 358 | }, 359 | 360 | openLink: function(href, opt){ 361 | opt = opt || {}; 362 | if (typeof href !== 'string') { 363 | var node = href; 364 | href = node.href; 365 | opt.target = opt.target || node.target; 366 | } 367 | if (opt.target && opt.target !== '_self') { 368 | window.open(href, opt.target); 369 | } else { 370 | location.href = href; 371 | } 372 | } 373 | 374 | }; 375 | 376 | var exports = { 377 | 378 | init: function(opt){ 379 | opt = opt || {}; 380 | var wrapper = $(opt.appWrapper); 381 | actionView.forceOptions.parent = wrapper; 382 | growl.defaultOptions.parent = wrapper; 383 | modalCard.set({ 384 | oldStylePage: opt.oldStyle, 385 | parent: wrapper 386 | }); 387 | var tapGesture = momoTap(doc); 388 | set_alias_events(tapGesture.event); 389 | var prevent_click_events = {}; 390 | Object.keys(tap_events).forEach(function(selector){ 391 | this[selector] = nothing; 392 | }, prevent_click_events); 393 | _delegate.on('tap', tap_events) 394 | .on('click', prevent_click_events); 395 | this.brightDelegate.on('change', { 396 | '.ck-ranger': function(e){ 397 | ranger(this).val(e.target.value); 398 | return true; 399 | } 400 | }).on('touchstart', { 401 | '.ck-ranger': function(e){ 402 | ranger(this).val(e.target.value); 403 | ranger(this).changeStart(); 404 | return true; 405 | } 406 | }).on('touchend', { 407 | '.ck-ranger': function(){ 408 | ranger(this).changeEnd(); 409 | return true; 410 | } 411 | }); 412 | }, 413 | 414 | brightDelegate: new BrightSoviet(doc, _soviet_opt), 415 | darkDelegate: new DarkSoviet(doc, _soviet_opt), 416 | 417 | action: actions, 418 | component: components 419 | 420 | }; 421 | 422 | function handle_control(){ 423 | var controller = control(this), 424 | cfg = controller.data(); 425 | if (cfg.disableUrl || cfg.disableJsonUrl) { 426 | controller.toggle(); 427 | } else if (!controller.isEnabled) { 428 | controller.enable(); 429 | } 430 | } 431 | 432 | function toggle_control(){ 433 | control(this).toggle(); 434 | } 435 | 436 | function tap_ck_post(){ 437 | if (!$(this).hasClass('ck-post-button')) { 438 | return tap_ck_post.call(this.parentNode); 439 | } 440 | handle_control.call(this); 441 | } 442 | 443 | function tap_ck_switch(){ 444 | if (!$(this).hasClass('ck-switch')) { 445 | return tap_ck_switch.call(this.parentNode); 446 | } 447 | toggle_control.call(this); 448 | } 449 | 450 | function show_actions(me){ 451 | var opt = _.mix({ 452 | confirmText: '确认', 453 | cancelText: '取消', 454 | multiselect: false 455 | }, me.data()); 456 | opt.options = $(opt.options || '.ck-option', me); 457 | return actionView(me, opt).open(); 458 | } 459 | 460 | function set_alias_events(events) { 461 | for (var ev in events) { 462 | $.Event.aliases[ev] = _soviet_aliases[ev] = 'ck_' + events[ev]; 463 | } 464 | } 465 | 466 | function nothing(){} 467 | 468 | return exports; 469 | 470 | }); 471 | 472 | -------------------------------------------------------------------------------- /cardkit/ui/actionview.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'moui/actionview', 3 | '../bus', 4 | './util' 5 | ], function(actionView, bus, util) { 6 | 7 | var exports = util.singleton({ 8 | 9 | flag: '_ckActionViewUid', 10 | 11 | forceOptions: { 12 | className: 'ck-actionview' 13 | }, 14 | 15 | factory: function(elm, opt){ 16 | return actionView(opt); 17 | }, 18 | 19 | config: function(o, opt){ 20 | o.set(opt); 21 | }, 22 | 23 | extend: function(o, source){ 24 | var eprops = { 25 | component: o 26 | }; 27 | o.event.bind('prepareOpen', function(o){ 28 | exports.current = o; 29 | }).bind('cancelOpen', function(){ 30 | exports.current = null; 31 | }).bind('open', function(o){ 32 | bus.fire('actionView:open', [o]); 33 | if (source) { 34 | source.trigger('actionView:open', eprops); 35 | } 36 | }).bind('close', function(){ 37 | exports.current = null; 38 | bus.unbind('actionView:confirmOnThis'); 39 | bus.fire('actionView:close', [o]); 40 | if (source) { 41 | source.trigger('actionView:close', eprops); 42 | } 43 | }).bind('cancel', function(){ 44 | bus.fire('actionView:cancel', [o]); 45 | if (source) { 46 | source.trigger('actionView:cancel', eprops); 47 | } 48 | }).bind('confirm', function(o, picker){ 49 | bus.fire('actionView:confirmOnThis', [o]) 50 | .fire('actionView:confirm', [o]); 51 | if (source) { 52 | source.trigger('actionView:confirm', eprops); 53 | } 54 | if (picker && picker._lastSelected) { 55 | var elm = picker._lastSelected._node[0]; 56 | if (elm.nodeName === 'A') { 57 | bus.fire('actionView:jump', [o, elm.href, elm.target]); 58 | } 59 | } 60 | }); 61 | } 62 | 63 | }); 64 | 65 | return exports; 66 | 67 | }); 68 | -------------------------------------------------------------------------------- /cardkit/ui/control.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'mo/lang', 3 | 'moui/control', 4 | './util' 5 | ], function(_, control, util) { 6 | 7 | var default_config = { 8 | disableRequest: false, 9 | enableUrl: '', 10 | enableJsonUrl: '', 11 | enableMethod: 'post', 12 | disableUrl: '', 13 | disableJsonUrl: '', 14 | disableMethod: 'post' 15 | }; 16 | 17 | var CkControl = _.construct(control.Control); 18 | 19 | _.mix(CkControl.prototype, { 20 | 21 | _defaults: _.mix({}, CkControl.prototype._defaults, default_config), 22 | 23 | enable: function(){ 24 | var cfg = this._config; 25 | return this.request({ 26 | method: cfg.enableMethod, 27 | url: cfg.enableUrl, 28 | jsonUrl: cfg.enableJsonUrl 29 | }, function(){ 30 | this.superClass.enable.call(this); 31 | }); 32 | }, 33 | 34 | disable: function(){ 35 | var cfg = this._config; 36 | return this.request({ 37 | method: cfg.disableMethod, 38 | url: cfg.disableUrl, 39 | jsonUrl: cfg.disableJsonUrl 40 | }, function(){ 41 | this.superClass.disable.call(this); 42 | }); 43 | }, 44 | 45 | request: function(cfg, fn){ 46 | var self = this; 47 | var cb = function(data, status){ 48 | if (status === 'success') { 49 | self.responseData = data; 50 | } 51 | self.hideLoading(); 52 | fn.call(self); 53 | }; 54 | if (!this._config.disableRequest) { 55 | util.request({ 56 | config: cfg, 57 | before: function(){ 58 | self.showLoading(); 59 | }, 60 | callback: cb 61 | }); 62 | } else { 63 | cb(); 64 | } 65 | return this; 66 | } 67 | 68 | }); 69 | 70 | var exports = util.singleton({ 71 | 72 | flag: '_ckControlUid', 73 | 74 | factory: function(elm, opt){ 75 | return new exports.Control(elm, opt); 76 | }, 77 | 78 | config: function(o, opt){ 79 | o.set(opt); 80 | }, 81 | 82 | extend: function(o, source){ 83 | o.event.bind('enable', function(o){ 84 | source.trigger('control:enable', { 85 | component: o 86 | }); 87 | }).bind('disable', function(o){ 88 | source.trigger('control:disable', { 89 | component: o 90 | }); 91 | }); 92 | } 93 | 94 | }); 95 | 96 | exports.Control = CkControl; 97 | 98 | return exports; 99 | 100 | }); 101 | -------------------------------------------------------------------------------- /cardkit/ui/growl.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'mo/lang', 3 | 'dollar', 4 | 'moui/growl' 5 | ], function(_, $, growl) { 6 | 7 | var FLAG = '_ckGrowlUid', 8 | uid = 0, 9 | lib = {}; 10 | 11 | function exports(elm, opt){ 12 | var id; 13 | var defaults = { 14 | corner: 'bottom' 15 | }; 16 | if (elm.nodeName) { 17 | elm = $(elm); 18 | id = elm[0][FLAG]; 19 | if (id && lib[id]) { 20 | lib[id].close(); 21 | } 22 | id = elm[0][FLAG] = ++uid; 23 | opt = _.mix(defaults, elm.data(), opt); 24 | } else { 25 | opt = _.mix(defaults, elm); 26 | } 27 | opt.className = 'ck-growl'; 28 | _.merge(opt, exports.defaultOptions); 29 | var g = growl(opt); 30 | if (id) { 31 | lib[id] = g; 32 | } 33 | return g; 34 | } 35 | 36 | exports.defaultOptions = {}; 37 | 38 | return exports; 39 | 40 | }); 41 | -------------------------------------------------------------------------------- /cardkit/ui/modalview.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'mo/lang', 3 | 'dollar', 4 | 'moui/modalview' 5 | ], function(_, $, originModal) { 6 | 7 | var default_config = { 8 | className: 'ck-modalview', 9 | openDelay: 400, 10 | closeDelay: 400, 11 | oldStylePage: false, 12 | contentFilter: false 13 | }, 14 | SCRIPT_TYPES = { 15 | 'text/modalview-javascript': 1, 16 | 'text/cardscript': 1, // @deprecated 17 | 'text/jscode': 1 // @deprecated 18 | }, 19 | singleton; 20 | 21 | var ModalView = _.construct(originModal.ModalView); 22 | 23 | _.mix(ModalView.prototype, { 24 | 25 | _defaults: _.mix({}, ModalView.prototype._defaults, default_config), 26 | 27 | init: function() { 28 | this.superMethod('init', arguments); 29 | this.event.bind('confirm', function(modal){ 30 | modal.event.fire('confirmOnThis', arguments); 31 | }).bind('close', function(modal){ 32 |    modal.event.unbind('confirmOnThis'); 33 | }); 34 | return this; 35 | }, 36 | 37 | set: function(opt){ 38 | if (!opt) { 39 | return this; 40 | } 41 | 42 | if (opt.iframeUrl) { 43 | opt.iframe = opt.iframeUrl; 44 | } 45 | 46 | if (opt.source) { 47 | opt.content = $('.' + opt.source).map(function(elm){ 48 | var type = $(elm).attr('type'); 49 | if (SCRIPT_TYPES[type]) { 50 | return ''; 52 | } else { 53 | return elm.innerHTML; 54 | } 55 | }).join(''); 56 | } 57 | 58 | var re = this.superMethod('set', [opt]); 59 | 60 | if (!this.pageNode()[0]) { 61 | this._content.append(this.wrapPageContent('
')); 62 | } 63 | 64 | return re; 65 | }, 66 | 67 | setContent: function(html){ 68 | if (html) { 69 | var filter = this._config.contentFilter; 70 | if (filter) { 71 | html = (new RegExp(filter).exec(html) || [])[1]; 72 | } 73 | html = this.wrapPageContent(html); 74 | } 75 | return this.superMethod('setContent', [html]); 76 | }, 77 | 78 | pageNode: function(){ 79 | return this._content.find('.ck-modal-page'); 80 | }, 81 | 82 | wrapPageContent: function(html){ 83 | var oldstyle = this._config.oldStylePage; 84 | var page_start = oldstyle 85 | ? '
' 88 | : ''; 91 | var page_end = oldstyle ? '
' : ''; 92 | return page_start + html + page_end; 93 | } 94 | 95 | }); 96 | 97 | function exports(opt) { 98 | if (!singleton) { 99 | singleton = new exports.ModalView(opt); 100 | } 101 | return singleton; 102 | } 103 | 104 | exports.ModalView = ModalView; 105 | 106 | return exports; 107 | 108 | }); 109 | -------------------------------------------------------------------------------- /cardkit/ui/picker.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'mo/lang', 3 | 'moui/picker', 4 | './util' 5 | ], function(_, picker, util) { 6 | 7 | _.mix(picker.Picker.prototype._defaults, { 8 | disableRequest: false 9 | }); 10 | 11 | return util.singleton({ 12 | 13 | flag: '_ckPickerUid', 14 | 15 | factory: function(elm, opt){ 16 | return picker(elm, opt); 17 | }, 18 | 19 | defaultOptions: { 20 | options: '.ck-option' 21 | }, 22 | 23 | config: function(o, opt){ 24 | o.set(opt); 25 | }, 26 | 27 | extend: function(o, source){ 28 | o.event.bind('change', function(o, controller){ 29 | var cfg = controller.data(), 30 | eprops = { 31 | component: o 32 | }, 33 | req_opt; 34 | if (!o._config.disableRequest) { 35 | o.showLoading(); 36 | if (controller.isEnabled) { 37 | req_opt = { 38 | method: cfg.enableMethod, 39 | url: cfg.enableUrl, 40 | jsonUrl: cfg.enableJsonUrl 41 | }; 42 | } else { 43 | req_opt = { 44 | method: cfg.disableMethod, 45 | url: cfg.disableUrl, 46 | jsonUrl: cfg.disableJsonUrl 47 | }; 48 | } 49 | util.request({ 50 | config: req_opt, 51 | callback: function(data, status){ 52 | o.hideLoading(); 53 | if (status === 'success') { 54 | o.responseData = data; 55 | source.trigger('picker:response', eprops); 56 | } 57 | } 58 | }); 59 | } 60 | source.trigger('picker:change', eprops); 61 | }); 62 | } 63 | 64 | }); 65 | 66 | }); 67 | -------------------------------------------------------------------------------- /cardkit/ui/ranger.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'moui/ranger', 3 | '../bus', 4 | './growl', 5 | './util' 6 | ], function(ranger, bus, growl, util){ 7 | 8 | return util.singleton({ 9 | 10 | flag: '_ckRangerUid', 11 | 12 | customOptions: { 13 | enableNotify: true 14 | }, 15 | 16 | factory: function(elm, opt){ 17 | return ranger(elm, opt); 18 | }, 19 | 20 | config: function(o, opt){ 21 | o.set(opt); 22 | }, 23 | 24 | extend: function(o, source){ 25 | o.notify = o._config.enableNotify ? growl({ 26 | parent: source.parent(), 27 | corner: 'stick' 28 | }) : null; 29 | o.event.bind('change', function(v){ 30 | if (o.notify) { 31 | o.notify.set({ 32 | content: v 33 | }).open(); 34 | } 35 | }).bind('changed', function(){ 36 | var url = source.trigger('ranger:changed', { 37 | component: o 38 | }).data('url'); 39 | bus.fire('ranger:changed', [o, url]); 40 | }).bind('changeEnd', function(){ 41 | if (o.notify) { 42 | o.notify.close(); 43 | } 44 | }); 45 | } 46 | 47 | }); 48 | 49 | }); 50 | -------------------------------------------------------------------------------- /cardkit/ui/stars.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'moui/slider', 3 | './util' 4 | ], function(slider, util) { 5 | 6 | return util.singleton({ 7 | 8 | flag: '_ckStarsUid', 9 | 10 | factory: function(elm){ 11 | return slider(elm); 12 | }, 13 | 14 | extend: function(o){ 15 | o.event.bind('change', function() { 16 | var value = o.val(); 17 | o.show(value); 18 | }); 19 | } 20 | 21 | }); 22 | 23 | }); 24 | -------------------------------------------------------------------------------- /cardkit/ui/util.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'mo/lang', 3 | 'dollar', 4 | 'mo/network' 5 | ], function(_, $, net){ 6 | 7 | var _default_steps = { 8 | flag: '_ckViewUid', 9 | forceOptions: {}, 10 | defaultOptions: {}, 11 | customOptions: {}, 12 | config: function(){}, 13 | extend: function(){} 14 | }; 15 | 16 | var exports = { 17 | 18 | singleton: function(steps){ 19 | var uid = 0, 20 | lib = {}; 21 | steps = _.merge(steps, _default_steps); 22 | function factory(elm, opt){ 23 | var id = elm; 24 | if (typeof elm === 'object') { 25 | elm = $(elm); 26 | id = elm[0][steps.flag]; 27 | } else { 28 | elm = false; 29 | } 30 | var re = id && lib[id]; 31 | if (re) { 32 | if (opt) { 33 | steps.config(re, opt); 34 | } 35 | } else { 36 | if (elm) { 37 | id = elm[0][steps.flag] = ++uid; 38 | } 39 | opt = _.merge(_.mix(opt || {}, 40 | factory.forceOptions, steps.forceOptions), 41 | steps.defaultOptions, factory.defaultOptions); 42 | re = lib[id] = steps.factory(elm, opt); 43 | _.merge(re._config, 44 | _.merge(_.interset(opt, steps.customOptions), 45 | steps.customOptions)); 46 | steps.extend(re, elm); 47 | } 48 | return re; 49 | } 50 | factory.forceOptions = {}; 51 | factory.defaultOptions = {}; 52 | factory.gc = function(check){ 53 | for (var i in lib) { 54 | if (check(lib[i])) { 55 | delete lib[i]; 56 | } 57 | } 58 | }; 59 | return factory; 60 | }, 61 | 62 | request: function(opt){ 63 | var cfg = opt.config, 64 | url = cfg.jsonUrl || cfg.url; 65 | if (url) { 66 | var data; 67 | url = url.replace(/\?(.+)$/, function($0, $1) { 68 | data = $1.replace(/#.*/, ''); 69 | return ''; 70 | }); 71 | net.ajax({ 72 | url: url, 73 | data: data, 74 | type: cfg.method || 'post', 75 | dataType: cfg.jsonUrl ? 'json' : 'text', 76 | beforeSend: opt.before, 77 | handleError: opt.callback, 78 | success: opt.callback 79 | }); 80 | } else { 81 | opt.callback(); 82 | } 83 | } 84 | 85 | }; 86 | 87 | return exports; 88 | 89 | }); 90 | -------------------------------------------------------------------------------- /dist/css/cardkit.min.css: -------------------------------------------------------------------------------- 1 | .moui-segment .option,.ck-segment .option,.ck-segment .ck-option,.moui-actionview>footer .cancel,.ck-actionview>footer .cancel,.moui-actionview>footer .confirm,.ck-actionview>footer .confirm,.moui-modalview .wrapper>header button.confirm,.ck-modalview .wrapper>header button.confirm,.moui-modalview .wrapper>header button.cancel,.ck-modalview .wrapper>header button.cancel,.ck-post-button,.ckbase-btn,.ck-modal-button,.ck-actions-button,.ck-growl-button,.ck-btn,.moui-switch,.ck-switch,.moui-switch .block,.ck-switch .block,.moui-switch .enable-text,.ck-switch .enable-text,.moui-switch .disable-text,.ck-switch .disable-text,.moui-select,.ck-select{display:inline-block;margin:0;padding:0;text-decoration:none;-moz-appearance:none;-webkit-appearance:none;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0;border:0;text-align:center;cursor:pointer;outline:0}.moui-segment .option,.ck-segment .option,.ck-segment .ck-option,.moui-actionview>footer .cancel,.ck-actionview>footer .cancel,.moui-actionview>footer .confirm,.ck-actionview>footer .confirm,.moui-modalview .wrapper>header button.confirm,.ck-modalview .wrapper>header button.confirm,.moui-modalview .wrapper>header button.cancel,.ck-modalview .wrapper>header button.cancel,.ck-post-button,.ckbase-btn,.ck-modal-button,.ck-actions-button,.ck-growl-button,.ck-btn,.moui-switch,.ck-switch,.moui-switch .block,.ck-switch .block,.moui-switch .enable-text,.ck-switch .enable-text,.moui-switch .disable-text,.ck-switch .disable-text,.moui-select,.ck-select{width:80px;height:29px;background-color:#ececec;background-image:-moz-linear-gradient(bottom,#e2e2e2,#ececec);background-image:-o-linear-gradient(bottom,#e2e2e2,#ececec);background-image:-webkit-linear-gradient(bottom,#e2e2e2,#ececec);background-image:linear-gradient(to top,#e2e2e2,#ececec);border:solid 1px rgba(0,0,0,.3);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff;line-height:29px;font-size:15px;font-weight:700;color:#252525;text-shadow:0 1px 1px #fff}.moui-segment .option:active,.ck-segment .option:active,.ck-segment .ck-option:active,.moui-actionview>footer .cancel:active,.ck-actionview>footer .cancel:active,.moui-actionview>footer .confirm:active,.ck-actionview>footer .confirm:active,.moui-modalview .wrapper>header button.confirm:active,.ck-modalview .wrapper>header button.confirm:active,.moui-modalview .wrapper>header button.cancel:active,.ck-modalview .wrapper>header button.cancel:active,.ck-post-button:active,.ckbase-btn:active,.ck-modal-button:active,.ck-actions-button:active,.ck-growl-button:active,.ck-btn:active,.moui-switch .enable-text,.ck-switch .enable-text,.moui-switch .disable-text,.ck-switch .disable-text,.moui-segment .enabled.option,.ck-segment .enabled.option,.ck-segment .enabled.ck-option,.ck-post-button.enabled{border-color:#b2b2b2;-moz-box-shadow:inset 0 1px 1px rgba(115,115,115,.8);-webkit-box-shadow:inset 0 1px 1px rgba(115,115,115,.8);box-shadow:inset 0 1px 1px rgba(115,115,115,.8);background-color:#dbdbdb;background-image:-moz-linear-gradient(bottom,#dbdbdb,#cdcdcd);background-image:-o-linear-gradient(bottom,#dbdbdb,#cdcdcd);background-image:-webkit-linear-gradient(bottom,#dbdbdb,#cdcdcd);background-image:linear-gradient(to top,#dbdbdb,#cdcdcd)}.moui-segment [data-is-default=true].option,.ck-segment [data-is-default=true].option,.ck-segment [data-is-default=true].ck-option,.moui-actionview>footer [data-is-default=true].cancel,.ck-actionview>footer [data-is-default=true].cancel,.moui-actionview>footer [data-is-default=true].confirm,.ck-actionview>footer [data-is-default=true].confirm,.moui-modalview .wrapper>header button[data-is-default=true].confirm,.ck-modalview .wrapper>header button[data-is-default=true].confirm,.moui-modalview .wrapper>header button[data-is-default=true].cancel,.ck-modalview .wrapper>header button[data-is-default=true].cancel,[data-is-default=true].ck-post-button,[data-is-default=true].ckbase-btn,[data-is-default=true].ck-modal-button,[data-is-default=true].ck-actions-button,[data-is-default=true].ck-growl-button,[data-is-default=true].ck-btn,.ckbase-mainbtn,.ck-mainbtn,.moui-switch .enable-text,.ck-switch .enable-text{border-color:rgba(0,19,79,.85);-moz-box-shadow:inset 0 1px 0 #429bff;-webkit-box-shadow:inset 0 1px 0 #429bff;box-shadow:inset 0 1px 0 #429bff;background-color:#005fbf;background-image:-moz-linear-gradient(bottom,#005fbf,#006ae1);background-image:-o-linear-gradient(bottom,#005fbf,#006ae1);background-image:-webkit-linear-gradient(bottom,#005fbf,#006ae1);background-image:linear-gradient(to top,#005fbf,#006ae1);color:#fff;text-shadow:0 1px 1px #000}.moui-segment [data-is-default=true].option:active,.ck-segment [data-is-default=true].option:active,.ck-segment [data-is-default=true].ck-option:active,.moui-actionview>footer [data-is-default=true].cancel:active,.ck-actionview>footer [data-is-default=true].cancel:active,.moui-actionview>footer [data-is-default=true].confirm:active,.ck-actionview>footer [data-is-default=true].confirm:active,.moui-modalview .wrapper>header button[data-is-default=true].confirm:active,.ck-modalview .wrapper>header button[data-is-default=true].confirm:active,.moui-modalview .wrapper>header button[data-is-default=true].cancel:active,.ck-modalview .wrapper>header button[data-is-default=true].cancel:active,[data-is-default=true].ck-post-button:active,[data-is-default=true].ckbase-btn:active,[data-is-default=true].ck-modal-button:active,[data-is-default=true].ck-actions-button:active,[data-is-default=true].ck-growl-button:active,[data-is-default=true].ck-btn:active,.ckbase-mainbtn:active,.ck-mainbtn:active,.moui-switch .enable-text,.ck-switch .enable-text{-moz-box-shadow:inset 0 1px 1px #024879;-webkit-box-shadow:inset 0 1px 1px #024879;box-shadow:inset 0 1px 1px #024879;background-color:#0077d6;background-image:-moz-linear-gradient(bottom,#0077d6,#0068d6);background-image:-o-linear-gradient(bottom,#0077d6,#0068d6);background-image:-webkit-linear-gradient(bottom,#0077d6,#0068d6);background-image:linear-gradient(to top,#0077d6,#0068d6)}.moui-segment [data-is-danger=true].option,.ck-segment [data-is-danger=true].option,.ck-segment [data-is-danger=true].ck-option,.moui-actionview>footer [data-is-danger=true].cancel,.ck-actionview>footer [data-is-danger=true].cancel,.moui-actionview>footer [data-is-danger=true].confirm,.ck-actionview>footer [data-is-danger=true].confirm,.moui-modalview .wrapper>header button[data-is-danger=true].confirm,.ck-modalview .wrapper>header button[data-is-danger=true].confirm,.moui-modalview .wrapper>header button[data-is-danger=true].cancel,.ck-modalview .wrapper>header button[data-is-danger=true].cancel,[data-is-danger=true].ck-post-button,[data-is-danger=true].ckbase-btn,[data-is-danger=true].ck-modal-button,[data-is-danger=true].ck-actions-button,[data-is-danger=true].ck-growl-button,[data-is-danger=true].ck-btn{border-color:rgba(60,0,0,.85);-moz-box-shadow:inset 0 1px 0 #ff5c5c;-webkit-box-shadow:inset 0 1px 0 #ff5c5c;box-shadow:inset 0 1px 0 #ff5c5c;background-color:#d50000;background-image:-moz-linear-gradient(bottom,#d50000,#e00);background-image:-o-linear-gradient(bottom,#d50000,#e00);background-image:-webkit-linear-gradient(bottom,#d50000,#e00);background-image:linear-gradient(to top,#d50000,#e00);color:#fff;text-shadow:0 1px 1px #000}.moui-segment [data-is-danger=true].option:active,.ck-segment [data-is-danger=true].option:active,.ck-segment [data-is-danger=true].ck-option:active,.moui-actionview>footer [data-is-danger=true].cancel:active,.ck-actionview>footer [data-is-danger=true].cancel:active,.moui-actionview>footer [data-is-danger=true].confirm:active,.ck-actionview>footer [data-is-danger=true].confirm:active,.moui-modalview .wrapper>header button[data-is-danger=true].confirm:active,.ck-modalview .wrapper>header button[data-is-danger=true].confirm:active,.moui-modalview .wrapper>header button[data-is-danger=true].cancel:active,.ck-modalview .wrapper>header button[data-is-danger=true].cancel:active,[data-is-danger=true].ck-post-button:active,[data-is-danger=true].ckbase-btn:active,[data-is-danger=true].ck-modal-button:active,[data-is-danger=true].ck-actions-button:active,[data-is-danger=true].ck-growl-button:active,[data-is-danger=true].ck-btn:active{-moz-box-shadow:inset 0 1px 1px #024879;-webkit-box-shadow:inset 0 1px 1px #024879;box-shadow:inset 0 1px 1px #024879;background-color:#0077d6;background-image:-moz-linear-gradient(bottom,#c50800,#b20600);background-image:-o-linear-gradient(bottom,#c50800,#b20600);background-image:-webkit-linear-gradient(bottom,#c50800,#b20600);background-image:linear-gradient(to top,#c50800,#b20600)}.moui-segment .option,.ck-segment .option,.ck-segment .ck-option,.moui-actionview>footer .cancel,.ck-actionview>footer .cancel,.moui-actionview>footer .confirm,.ck-actionview>footer .confirm,.moui-modalview .wrapper>header button.confirm,.ck-modalview .wrapper>header button.confirm,.moui-modalview .wrapper>header button.cancel,.ck-modalview .wrapper>header button.cancel,.ck-post-button,.ckbase-btn,.ck-modal-button,.ck-actions-button,.ck-growl-button,.ck-btn{margin:0 7px 0 0;white-space:nowrap}.moui-segment .option:last-child,.ck-segment .option:last-child,.ck-segment .ck-option:last-child,.moui-actionview>footer .cancel:last-child,.ck-actionview>footer .cancel:last-child,.moui-actionview>footer .confirm:last-child,.ck-actionview>footer .confirm:last-child,.moui-modalview .wrapper>header button.confirm:last-child,.ck-modalview .wrapper>header button.confirm:last-child,.moui-modalview .wrapper>header button.cancel:last-child,.ck-modalview .wrapper>header button.cancel:last-child,.ck-post-button:last-child,.ckbase-btn:last-child,.ck-modal-button:last-child,.ck-actions-button:last-child,.ck-growl-button:last-child,.ck-btn:last-child{margin-right:0}.moui-segment [data-fluid=true].option,.ck-segment [data-fluid=true].option,.ck-segment [data-fluid=true].ck-option,.moui-actionview>footer [data-fluid=true].cancel,.ck-actionview>footer [data-fluid=true].cancel,.moui-actionview>footer [data-fluid=true].confirm,.ck-actionview>footer [data-fluid=true].confirm,.moui-modalview .wrapper>header button[data-fluid=true].confirm,.ck-modalview .wrapper>header button[data-fluid=true].confirm,.moui-modalview .wrapper>header button[data-fluid=true].cancel,.ck-modalview .wrapper>header button[data-fluid=true].cancel,[data-fluid=true].ck-post-button,[data-fluid=true].ckbase-btn,[data-fluid=true].ck-modal-button,[data-fluid=true].ck-actions-button,[data-fluid=true].ck-growl-button,[data-fluid=true].ck-btn{width:auto;padding:0 10px}.moui-segment [data-style=big].option,.ck-segment [data-style=big].option,.ck-segment [data-style=big].ck-option,.moui-actionview>footer [data-style=big].cancel,.ck-actionview>footer [data-style=big].cancel,.moui-actionview>footer [data-style=big].confirm,.ck-actionview>footer [data-style=big].confirm,.moui-modalview .wrapper>header button[data-style=big].confirm,.ck-modalview .wrapper>header button[data-style=big].confirm,.moui-modalview .wrapper>header button[data-style=big].cancel,.ck-modalview .wrapper>header button[data-style=big].cancel,[data-style=big].ck-post-button,[data-style=big].ckbase-btn,[data-style=big].ck-modal-button,[data-style=big].ck-actions-button,[data-style=big].ck-growl-button,[data-style=big].ck-btn{height:39px;line-height:39px}.moui-segment [disabled].option,.ck-segment [disabled].option,.ck-segment [disabled].ck-option,.moui-actionview>footer [disabled].cancel,.ck-actionview>footer [disabled].cancel,.moui-actionview>footer [disabled].confirm,.ck-actionview>footer [disabled].confirm,.moui-modalview .wrapper>header button[disabled].confirm,.ck-modalview .wrapper>header button[disabled].confirm,.moui-modalview .wrapper>header button[disabled].cancel,.ck-modalview .wrapper>header button[disabled].cancel,[disabled].ck-post-button,[disabled].ckbase-btn,[disabled].ck-modal-button,[disabled].ck-actions-button,[disabled].ck-growl-button,[disabled].ck-btn{color:#a1a1a1}.moui-segment .option:active span,.ck-segment .option:active span,.ck-segment .ck-option:active span,.moui-actionview>footer .cancel:active span,.ck-actionview>footer .cancel:active span,.moui-actionview>footer .confirm:active span,.ck-actionview>footer .confirm:active span,.moui-modalview .wrapper>header button.confirm:active span,.ck-modalview .wrapper>header button.confirm:active span,.moui-modalview .wrapper>header button.cancel:active span,.ck-modalview .wrapper>header button.cancel:active span,.ck-post-button:active span,.ckbase-btn:active span,.ck-modal-button:active span,.ck-actions-button:active span,.ck-growl-button:active span,.ck-btn:active span{position:relative;top:1px}.moui-folder>header,.ck-folder>header,.moui-select,.ck-select{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALAQMAAABFxz8AAAAABlBMVEX///+bm5tR7J1yAAAAAXRSTlMAQObYZgAAADJJREFUCB0FwTERABAAAMB3BpsEQhjFEUEEQYQRRQSj0b+tOobhaGErccqJlImL8HDRfc8xCDsaQayFAAAAAElFTkSuQmCC);background-repeat:no-repeat}.moui-folder.enabled>header,.enabled.ck-folder>header{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALAQMAAABFxz8AAAAABlBMVEX///+ampo+MvaSAAAAAXRSTlMAQObYZgAAADJJREFUCB0FwTERABAAAMB3BpsEQhjFEUEEQYQRRQSj0T8dl/CIi5TJiRKnFrbhOIatfpqZCDvYMKlxAAAAAElFTkSuQmCC);background-repeat:no-repeat}.moui-switch,.ck-switch{border:0;position:relative;width:75px;text-align:left}.moui-switch .block,.ck-switch .block{width:39px;position:absolute;top:0;left:0;-moz-transition:left .1s ease-in;-o-transition:left .1s ease-in;-webkit-transition:left .1s ease-in;transition:left .1s ease-in}.moui-switch .enable-text,.ck-switch .enable-text,.moui-switch .disable-text,.ck-switch .disable-text{width:36px;position:absolute;right:0;top:0;font-weight:400}.moui-switch .enable-text,.ck-switch .enable-text{right:auto;left:0}.moui-switch.enabled .block,.enabled.ck-switch .block{left:33px}.moui-folder,.ck-folder{display:block}.moui-folder>header,.ck-folder>header{display:inline-block;background-position:left center;background-size:10px;font-size:15px;padding:0 0 0 20px;margin:0}.moui-folder>.content,.ck-folder>.content{display:none}.moui-folder.enabled>.content,.enabled.ck-folder>.content{display:block}.moui-segment,.ck-segment{-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.moui-segment .option,.ck-segment .option,.ck-segment .ck-option{width:75px;margin:0 4px 0 0}.moui-tagselector,.ck-tagselector{overflow:hidden;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.moui-tagselector .option,.ck-tagselector .option,.ck-tagselector .ck-option{border:1px solid #dadada;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background:#f2f2f2;color:#252525;display:inline-block;line-height:18px;padding:5px 7px;margin:4px;float:left;-webkit-tap-highlight-color:transparent;-moz-appearance:none;-webkit-appearance:none}.moui-tagselector .option a,.ck-tagselector .option a,.ck-tagselector .ck-option a{display:inline-block;float:left;color:#252525;text-decoration:none;width:100%}.moui-tagselector .enabled.option,.ck-tagselector .enabled.option,.ck-tagselector .enabled.ck-option{background:#3276AF;border-color:#3276AF;-moz-box-shadow:0 1px 0 0 #fff;-webkit-box-shadow:0 1px 0 0 #fff;box-shadow:0 1px 0 0 #fff;color:#fff}.moui-tagselector .enabled.option a,.ck-tagselector .enabled.option a,.ck-tagselector .enabled.ck-option a{color:#fff}.moui-actions,.ck-actions{-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.moui-actions li,.ck-actions li{border-bottom:1px solid #000;opacity:.8}.moui-actions li a,.ck-actions li a{display:inline-block;background:#333;color:#fff;font-size:13px;width:100%;padding:5px 0;text-align:center}.moui-actions li a:active,.ck-actions li a:active,.moui-actions li a.enabled,.ck-actions li a.enabled{background:#666}.moui-actions li:last-child,.ck-actions li:last-child{border:0}.moui-slider{position:relative;display:inline-block;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.moui-slider .slider-field{display:none}.moui-slider .slider-selected,.moui-slider .slider-hover{display:none;position:absolute;left:0}.moui-select,.ck-select{background-position:right center;background-origin:content-box;background-size:10px;padding:0 5px 0 0}.moui-select button.enabled,.ck-select button.enabled,.moui-select span,.ck-select span{-moz-appearance:none;-webkit-appearance:none;display:block;height:100%;text-align:left;background:#fff;padding:0 7.5px;margin:0 15px 0 0;border:0;border-right:1px solid #B2B2B2;border-radius:5px 0 0 5px;font-size:13px;font-weight:400}.moui-select[data-multiselect=true] button.enabled,[data-multiselect=true].ck-select button.enabled{display:none}.moui-select[data-fluid=true],[data-fluid=true].ck-select{width:auto}.moui-select:active,.ck-select:active{border-color:#b2b2b2;-moz-box-shadow:inset 0 1px 1px rgba(115,115,115,.8);-webkit-box-shadow:inset 0 1px 1px rgba(115,115,115,.8);box-shadow:inset 0 1px 1px rgba(115,115,115,.8);background-color:#dbdbdb}.moui-select:active button.enabled,.ck-select:active button.enabled,.moui-select:active span,.ck-select:active span{-moz-box-shadow:inset 0 1px 2px rgba(115,115,115,.8);-webkit-box-shadow:inset 0 1px 2px rgba(115,115,115,.8);box-shadow:inset 0 1px 2px rgba(115,115,115,.8)}.moui-actionview,.ck-actionview{display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:1020;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.moui-actionview .wrapper,.ck-actionview .wrapper{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);-webkit-transform:translateY(50%);transform:translateY(50%);-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-moz-transition-duration:.3s,.2s;-o-transition-duration:.3s,.2s;-webkit-transition-duration:.3s,.2s;transition-duration:.3s,.2s;-moz-transition-delay:.1s,.1s;-o-transition-delay:.1s,.1s;-webkit-transition-delay:.1s,.1s;transition-delay:.1s,.1s}.moui-actionview .wrapper .content,.ck-actionview .wrapper .content{min-height:100%}.moui-actionview .wrapper .content>header,.ck-actionview .wrapper .content>header{padding:0 25px;margin-bottom:25px}.moui-actionview .wrapper .content>header h1,.ck-actionview .wrapper .content>header h1{padding:25px 0 10px;font-size:20px;height:20px;line-height:20px;display:block;color:#fff;border-bottom:1px solid #666}.moui-actionview .wrapper .content>header h1:empty,.ck-actionview .wrapper .content>header h1:empty{border:0;padding:0;height:0}.moui-actionview .wrapper .content>.desc,.ck-actionview .wrapper .content>.desc{color:#fff;padding:0 25px;font-size:15px}.moui-actionview .wrapper .content>article,.ck-actionview .wrapper .content>article{margin:25px;background:#343434;border:solid 1px #141414;padding:0 18px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 0 #494949;-webkit-box-shadow:inset 0 1px 0 #494949;box-shadow:inset 0 1px 0 #494949}.moui-actionview .wrapper .content>article:empty,.ck-actionview .wrapper .content>article:empty{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;border:0;background:0}.moui-actionview>footer,.ck-actionview>footer{position:fixed;bottom:0;left:0;right:0;border-top:1px solid #000;background:rgba(13,13,13,.95);-moz-box-shadow:inset 0 1px 0 #212121;-webkit-box-shadow:inset 0 1px 0 #212121;box-shadow:inset 0 1px 0 #212121;height:79px;overflow:hidden;text-align:center;-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);-webkit-transform:translateY(100%);transform:translateY(100%);-moz-transition:-moz-transform .3s;-o-transition:-o-transform .3s;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.moui-actionview>footer .cancel,.ck-actionview>footer .cancel,.moui-actionview>footer .confirm,.ck-actionview>footer .confirm{line-height:39px;height:39px;width:auto;position:absolute;left:25px;right:25px;top:20px;margin:0}.moui-actionview>footer .confirm,.ck-actionview>footer .confirm{display:none}.moui-actionview>footer .cancel,.ck-actionview>footer .cancel{border-color:#101010;background:#343434;-moz-box-shadow:inset 0 1px 0 #494949;-webkit-box-shadow:inset 0 1px 0 #494949;box-shadow:inset 0 1px 0 #494949;color:#fff;text-shadow:0 1px 1px #000}.moui-actionview>footer .cancel:active,.ck-actionview>footer .cancel:active{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;border-color:#101010;background:#343434}.moui-actionview>footer.multi .confirm,.ck-actionview>footer.multi .confirm{display:inline-block;left:50%;margin:0 0 0 6.25px}.moui-actionview>footer.multi .cancel,.ck-actionview>footer.multi .cancel{right:50%;margin:0 6.25px 0 0}.moui-actionview .shd,.ck-actionview .shd{position:absolute;top:0;bottom:0;left:0;right:0;background:#0d0d0d;opacity:0;-moz-transition:opacity .5s;-o-transition:opacity .5s;-webkit-transition:opacity .5s;transition:opacity .5s}.moui-actionview.confirm-kind .content header,.confirm-kind.ck-actionview .content header{padding-top:30%}.moui-actionview.rendered,.rendered.ck-actionview{display:block}.moui-actionview.active .shd,.active.ck-actionview .shd{opacity:1}.moui-actionview.active .wrapper,.active.ck-actionview .wrapper{opacity:1;-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.moui-actionview.active>footer,.active.ck-actionview>footer{-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.moui-actionview .wrapper .content>article .option,.ck-actionview .wrapper .content>article .option,.ck-actionview .wrapper .content>article .ck-option{display:block;box-sizing:content-box;width:100%;color:#fff;background:0;font-size:15px;font-weight:400;padding:10px 0;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0;border-top:solid 1px #3e3e3e;border-bottom:solid 1px #282828;text-align:center;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;-moz-appearance:none;-webkit-appearance:none;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:0}.moui-actionview .wrapper .content>article .enabled.option,.ck-actionview .wrapper .content>article .enabled.option,.ck-actionview .wrapper .content>article .enabled.ck-option{color:#006ae2}.moui-actionview .wrapper .content>article .option:first-child,.ck-actionview .wrapper .content>article .option:first-child,.ck-actionview .wrapper .content>article .ck-option:first-child{border-top:0}.moui-actionview .wrapper .content>article .option:last-child,.ck-actionview .wrapper .content>article .option:last-child,.ck-actionview .wrapper .content>article .ck-option:last-child{border-bottom:0}.moui-modalview,.ck-modalview{display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1010;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.moui-modalview .wrapper,.ck-modalview .wrapper{position:relative;-moz-transition:-moz-transform .4s;-o-transition:-o-transform .4s;-webkit-transition:-webkit-transform .4s;transition:transform .4s;-moz-transform:translateY(200%);-ms-transform:translateY(200%);-o-transform:translateY(200%);-webkit-transform:translateY(200%);transform:translateY(200%)}.moui-modalview .wrapper>header,.ck-modalview .wrapper>header{height:40px;background:#dfdfdf;border-bottom:1px solid rgba(0,0,0,.2);z-index:10;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0;right:0;-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px;border-radius:3px 3px 0 0;-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.moui-modalview .wrapper>header h1,.ck-modalview .wrapper>header h1{font-size:20px;line-height:40px;text-align:center;display:block;margin:0 70px}.moui-modalview .wrapper>header button.confirm,.ck-modalview .wrapper>header button.confirm,.moui-modalview .wrapper>header button.cancel,.ck-modalview .wrapper>header button.cancel{margin:7.5px 0 0 7.5px;float:left}.moui-modalview .wrapper>header button.confirm,.ck-modalview .wrapper>header button.confirm{margin:7.5px 7.5px 0 0;float:right}.moui-modalview .wrapper>article,.ck-modalview .wrapper>article{background:#f2f2f2}.moui-modalview .wrapper>article>.content,.ck-modalview .wrapper>article>.content{min-height:2000px}.moui-modalview .shd,.ck-modalview .shd{position:absolute;top:0;bottom:0;left:0;right:0;background:#333;opacity:0;-moz-transition:opacity .4s;-o-transition:opacity .4s;-webkit-transition:opacity .4s;transition:opacity .4s}.moui-modalview.rendered,.rendered.ck-modalview{display:block}.moui-modalview.active .shd,.active.ck-modalview .shd{opacity:1}.moui-modalview.active .wrapper,.active.ck-modalview .wrapper{-moz-transform:none;-ms-transform:none;-o-transform:none;-webkit-transform:none;transform:none}.moui-modalview.active .wrapper>header,.active.ck-modalview .wrapper>header{position:fixed}.moui-modalview.active .wrapper>article>.content,.active.ck-modalview .wrapper>article>.content{min-height:inherit}.moui-modalview.loading button.confirm,.loading.ck-modalview button.confirm{opacity:.2}.moui-modalview.loading .wrapper>article>.content,.loading.ck-modalview .wrapper>article>.content{opacity:0}.moui-growl,.ck-growl{display:none;position:fixed;top:50%;left:30px;right:30px;z-index:1050;margin-top:-20px;padding:14px;background:rgba(13,13,13,.95);opacity:0;color:#fff;font-size:20px;text-align:center;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.moui-growl.corner-center,.corner-center.ck-growl{-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);-webkit-transform:scale(0);transform:scale(0);-moz-transition:-moz-transform .3s cubic-bezier(0.175,.885,.32,1.275);-o-transition:-o-transform .3s cubic-bezier(0.175,.885,.32,1.275);-webkit-transition:-webkit-transform .3s cubic-bezier(0.175,.885,.32,1.275);transition:transform .3s cubic-bezier(0.175,.885,.32,1.275)}.moui-growl.corner-bottom,.corner-bottom.ck-growl{top:auto;bottom:-40px;font-size:13px;-moz-transition:bottom .3s cubic-bezier(0.175,.885,.32,1.275);-o-transition:bottom .3s cubic-bezier(0.175,.885,.32,1.275);-webkit-transition:bottom .3s cubic-bezier(0.175,.885,.32,1.275);transition:bottom .3s cubic-bezier(0.175,.885,.32,1.275)}.moui-growl.corner-stick,.corner-stick.ck-growl{font-size:13px;padding:5px 10px;margin:0;position:absolute;left:40px;right:40px;top:-10px;-moz-transition:top .3s cubic-bezier(0.175,.885,.32,1.275);-o-transition:top .3s cubic-bezier(0.175,.885,.32,1.275);-webkit-transition:top .3s cubic-bezier(0.175,.885,.32,1.275);transition:top .3s cubic-bezier(0.175,.885,.32,1.275)}.moui-growl.rendered,.rendered.ck-growl{display:block}.moui-growl.active,.active.ck-growl{opacity:1}.moui-growl.active.corner-center,.active.corner-center.ck-growl{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}.moui-growl.active.corner-bottom,.active.corner-bottom.ck-growl{bottom:10px}.moui-growl.active.corner-stick,.active.corner-stick.ck-growl{top:-35px}.ck-header{height:40px;-moz-box-shadow:0 1px 2px rgba(0,0,0,.35);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:0 1px 2px rgba(0,0,0,.35);border-bottom:1px solid rgba(0,0,0,.2);z-index:10}.ck-header a{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.ck-card,.ckd-page-card,.ckd-page-title,.ckd-page-nav,.ckd-page-actions,.ckd-page-footer{display:none}.ck-page-card{display:block;background:#f2f2f2;min-height:100%;overflow:hidden;margin:0;font:11px Helvetica,sans-serif;color:#252525;line-height:1.6;-moz-box-shadow:0 0 6px rgba(0,0,0,.8);-webkit-box-shadow:0 0 6px rgba(0,0,0,.8);box-shadow:0 0 6px rgba(0,0,0,.8);-moz-transition:-moz-transform .3s;-o-transition:-o-transform .3s;-webkit-transition:-webkit-transform .3s;transition:transform .3s;-webkit-backface-visibility:hidden}.ck-page-card.topbar-enabled .ck-header{-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.ck-page-card[data-fixed-minheight=false]{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.ck-page-card[data-page-active=false]{display:none}.ck-page-card[data-deck-active=false]{display:none}.ck-page-card[data-deck=navdrawer]{position:absolute;top:0;left:0;width:280px;-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0);-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.ck-page-card[data-deck=navdrawer] .ck-page-link-mask{display:none}.ck-page-card[data-deck=navdrawer][data-deck-active=false]{display:block;z-index:-1;bottom:0}.ck-page-card[data-deck=navdrawer][data-page-active=false]{display:none}.ck-page-card[data-deck=modalview]{display:block}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=navdrawer]{display:block;-moz-transform:translateX(280px);-ms-transform:translateX(280px);-o-transform:translateX(280px);-webkit-transform:translateX(280px);transform:translateX(280px);z-index:10;position:fixed;top:0;left:0;right:0}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=navdrawer] .ck-header{position:relative;-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.ck-bugfix-fixed .ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=navdrawer] .ck-header{display:none}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=navdrawer] .ck-top-banner{padding-top:0}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=navdrawer] .ck-top-banner-inner{border-top:0}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=navdrawer] .ck-article{padding-top:0}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=navdrawer] .ck-page-link-mask{display:block}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=modalview]{display:block;position:absolute;top:0;left:0;right:0;bottom:0}.ck-page-card[data-deck-active=false][data-page-active=true][data-curdeck=modalview][data-deck=modalview]{position:static}.ck-page-card pre{word-wrap:break-word}.ck-page-card a{text-decoration:none;color:#006ae2;-webkit-tap-highlight-color:rgba(0,119,220,.2)}.ck-page-link-mask{display:none;position:absolute;top:0;bottom:0;left:0;right:0;z-index:210}.ck-header{position:fixed;top:0;left:0;width:100%;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none;z-index:210;-moz-transition:-moz-transform .3s;-o-transition:-o-transform .3s;-webkit-transition:-webkit-transform .3s;transition:transform .3s;-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);-webkit-transform:translateY(-40px);transform:translateY(-40px)}.ck-in-webview .ck-header{position:relative;-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.ck-in-hybird .ck-header{display:none}.ck-header-shd{background:#333;opacity:.95;position:absolute;top:0;bottom:0;left:0;right:0}.ck-top-title{font-size:20px;font-weight:700;line-height:40px;text-align:center;display:block;position:absolute;left:40px;right:40px;top:0;color:#fff;text-shadow:0 1px 0 #000}.ck-top-overflow-items{display:none}.ck-top-actions .ck-top-act>*,.ck-top-overflow,.ck-top-nav{float:right;display:inline-block;margin:0;padding:0;text-decoration:none;text-indent:-800px;overflow:hidden;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none;width:40px;height:40px;background-color:transparent;background-size:24px 24px;background-repeat:no-repeat;background-position:7px 7px;border:1px solid transparent}.ck-top-actions .ck-top-act>:active,.ck-top-overflow:active,.ck-top-nav:active{background-color:transparent;-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.1);-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.1)}.ck-top-nav{float:left;position:relative;background-image:none}.ck-top-nav.ck-link{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAgMAAAAqbBEUAAAADFBMVEUAAAD///8AAAD////IZVEZAAAABHRSTlMAAFqzoa8xcgAAAClJREFUKM9jCEUCDFTm1P+Hgr9U52StgoKVSJY6MJLJGXUoDodSPVEAAN65RTMMRcUhAAAAAElFTkSuQmCC)}.ck-top-actions{float:right;position:relative;z-index:1}.ck-top-actions .ck-option{display:none}.ck-top-overflow{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAA5FBMVEUAAAD///8AAAD///+qqqr///8AAACZmZn///+ioqIAAAAAAAAAAAAAAAAAAAAAAAAFBQUAAAAAAAAAAAD///8AAAD///////////////////////8AAAD8/PwAAAAAAAAAAAACAgIEBAT///+Kior///+RkZGVlZX///+ZmZl5eXl7e3uCgoKJiYmzs7O0tLT///+5ubny8vL///+5ubn////CwsLz8/P09PT19fXb29ve3t7h4eHi4uLi4uLj4+Pm5ub6+vr7+/v5+fn5+fn////////8/Pz8/Pz9/f3+/v7///9iqQ7iAAAATHRSTlMAAAEBAgIDBAUIGxwdHyAhIzAxMzY3Nzg5PkBBRUVHSFhYWWBlZm1ubnJ2dnl7ioqKjIyMjY6RlZWam5+goKGhpK2trq+vsLGysrKzSXkzoAAAARZJREFUSMft08lOAkEQBmDsUQR0BEHUkX0VFBRBUBYRl5Zl3v99jFX1tx2MBy+eug8k9ae+kErVRHb++CIOOODAD+D93sHPo18BZz39McxZTcFA60FggdxQ6945QC2k1zL/0uCgAeC1OKgxOAnlFaT/AkEgoIDglEAf5VjAA4JHAWMEfQIvKMMYz79BvdkjEDMNrwTeTB0nsPsN9gnETcM7gQnKRZSAekLwrAhEFwgmBOoo2zLDJYKmzNBGUCeQuOVqlBJwdM/BnS8gNeLgJsF7SF9Nl+t5N6uwh0xntlrNOhnsQWW78/Vyen2MTR/ky9VS0tq0X6xUir616WSpWs4fmtP4mnTrgpTauiVl35L7RB1w4J/AJ0RAUE3lLcFnAAAAAElFTkSuQmCC)}.ck-top-overflow .ck-top-act{display:none}.ck-top-banner{display:none;font-size:13px;background:#fff;padding-top:40px;position:relative;border-bottom:1px solid rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.ck-in-webview .ck-top-banner,.no-header .ck-top-banner{padding-top:0}.ck-in-webview .ck-top-banner .ck-top-banner-inner,.no-header .ck-top-banner .ck-top-banner-inner{border-top:0}.with-banner .ck-top-banner{display:block}.ck-top-banner-inner{padding:5px;border-top:1px dashed #efefef}[data-cfg-plain=true] .ck-top-banner-inner{padding:0}.ck-article{padding-top:45px}.ck-in-webview .ck-article,.with-banner .ck-article,.no-header .ck-article{padding-top:0}.ck-footer{height:15px;margin:30px 0 0;padding:0 0 15px;background:#f2f2f2;text-align:center}.ck-footer .copyright{font-size:11px;color:#8e8e8e;margin:5px 0}.ck-box-card:not([data-cfg-paper=true]),.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]),.ck-form-card,.ck-blank-card{margin:10px}.ck-box-card:not([data-cfg-paper=true]) .ck-card-wrap,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-card-wrap,.ck-form-card .ck-card-wrap,.ck-blank-card .ck-card-wrap,.ck-list-card[data-style=split] .ck-item,.ck-mini-card[data-style=slide] .ck-item{background-color:#fff;border:1px solid #fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 0 2px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.2);box-shadow:0 0 2px 0 rgba(0,0,0,.2);word-wrap:break-word}.ck-box-card:not([data-cfg-paper=true]),.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]),.ck-list-card[data-style=split],.ck-mini-card[data-style=slide],.ck-form-card,.ck-blank-card{word-wrap:break-word}.ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap,.ck-list-card[data-style=split] .ck-hd-wrap,.ck-mini-card[data-style=slide] .ck-hd-wrap,.ck-form-card .ck-hd-wrap,.ck-blank-card .ck-hd-wrap{position:relative}.ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap .ck-hd,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap .ck-hd,.ck-list-card[data-style=split] .ck-hd-wrap .ck-hd,.ck-mini-card[data-style=slide] .ck-hd-wrap .ck-hd,.ck-form-card .ck-hd-wrap .ck-hd,.ck-blank-card .ck-hd-wrap .ck-hd{padding:5px 0;font-size:15px;font-weight:700;color:#252525;display:block}.ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap .ck-hd.clickable,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap .ck-hd.clickable,.ck-list-card[data-style=split] .ck-hd-wrap .ck-hd.clickable,.ck-mini-card[data-style=slide] .ck-hd-wrap .ck-hd.clickable,.ck-form-card .ck-hd-wrap .ck-hd.clickable,.ck-blank-card .ck-hd-wrap .ck-hd.clickable{position:relative}.ck-box-card:not([data-cfg-paper=true]) .ck-card-wrap>footer,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-card-wrap>footer,.ck-list-card[data-style=split] .ck-card-wrap>footer,.ck-mini-card[data-style=slide] .ck-card-wrap>footer,.ck-form-card .ck-card-wrap>footer,.ck-blank-card .ck-card-wrap>footer{border-top:1px solid #efefef;margin:0 15px;padding:10px 0}.ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap,.ck-list-card[data-style=split] .ck-hd-wrap,.ck-mini-card[data-style=slide] .ck-hd-wrap,.ck-form-card .ck-hd-wrap,.ck-blank-card .ck-hd-wrap,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-item,.ck-list-card[data-style=split] .ck-initem,.ck-mini-card[data-style=slide] .ck-initem,.ck-form-card .ck-item,.ck-blank-card .ck-card-wrap>div{border-bottom:1px solid #efefef;margin:0 15px;padding:5px 0}.ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap .ck-hd.clickable,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap .ck-hd.clickable,.ck-list-card[data-style=split] .ck-hd-wrap .ck-hd.clickable,.ck-mini-card[data-style=slide] .ck-hd-wrap .ck-hd.clickable,.ck-form-card .ck-hd-wrap .ck-hd.clickable,.ck-blank-card .ck-hd-wrap .ck-hd.clickable,.ck-list-card[data-style=more] .clickable .ck-initem{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAUAQMAAABh4lUrAAAABlBMVEX///+ZmZmOUEqyAAAAAXRSTlMAQObYZgAAADBJREFUCB0FwUERACAIALB5PPyZwCDEIoLRiEIUN81QJJfDJp7VDGO1eDaHS1IM7QMVdAk7tmZXTwAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:right;background-size:5.5px 10px}.ck-box-card:not([data-cfg-paper=true]) .ck-card-wrap>footer,.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-card-wrap>footer,.ck-list-card[data-style=split] .ck-card-wrap>footer,.ck-mini-card[data-style=slide] .ck-card-wrap>footer,.ck-form-card .ck-card-wrap>footer,.ck-blank-card .ck-card-wrap>footer,.ck-list-card .ck-author-info-wrap,.ck-mini-card .ck-author-info-wrap,.ck-list-card .ck-info-wrap,.ck-mini-card .ck-info-wrap,.ck-list-card .ck-desc-wrap,.ck-mini-card .ck-desc-wrap,.ck-list-card .ck-author-desc-wrap,.ck-mini-card .ck-author-desc-wrap,.ck-list-card .ck-meta-wrap,.ck-mini-card .ck-meta-wrap,.ck-list-card .ck-author-meta-wrap,.ck-mini-card .ck-author-meta-wrap{font-size:11px;color:#8e8e8e}[data-cfg-plainhd=true].ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap,[data-cfg-plainhd=true].ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap,[data-cfg-plainhd=true].ck-form-card .ck-hd-wrap,[data-cfg-plainhd=true].ck-blank-card .ck-hd-wrap,.ck-list-card[data-style=split] .ck-hd-wrap,.ck-mini-card[data-style=slide] .ck-hd-wrap{padding:0;margin:10px 0;border:0}[data-cfg-plainhd=true].ck-box-card:not([data-cfg-paper=true]) .ck-card-wrap>section,[data-cfg-plainhd=true].ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-card-wrap>section,[data-cfg-plainhd=true].ck-form-card .ck-card-wrap>section,[data-cfg-plainhd=true].ck-blank-card .ck-card-wrap>section,.ck-list-card[data-style=split] .ck-card-wrap>section,.ck-mini-card[data-style=slide] .ck-card-wrap>section{border-top:0}[data-cfg-plainhd=true].ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap .ck-hd,[data-cfg-plainhd=true].ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap .ck-hd,[data-cfg-plainhd=true].ck-form-card .ck-hd-wrap .ck-hd,[data-cfg-plainhd=true].ck-blank-card .ck-hd-wrap .ck-hd,.ck-list-card[data-style=split] .ck-hd-wrap .ck-hd,.ck-mini-card[data-style=slide] .ck-hd-wrap .ck-hd,.ck-box-card[data-cfg-plain=true] .ck-hd-wrap .ck-hd{padding:0 15px 0 5px;background-origin:content-box;color:#8e8e8e}[data-cfg-plainhd=true].ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap .ck-hdopt-wrap,[data-cfg-plainhd=true].ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap .ck-hdopt-wrap,[data-cfg-plainhd=true].ck-form-card .ck-hd-wrap .ck-hdopt-wrap,[data-cfg-plainhd=true].ck-blank-card .ck-hd-wrap .ck-hdopt-wrap,.ck-list-card[data-style=split] .ck-hd-wrap .ck-hdopt-wrap,.ck-mini-card[data-style=slide] .ck-hd-wrap .ck-hdopt-wrap,.ck-box-card[data-cfg-plain=true] .ck-hd-wrap .ck-hdopt-wrap{bottom:-5px;background:#f2f2f2}[data-cfg-plainhd=true].ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap .ck-link-mask,[data-cfg-plainhd=true].ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-hd-wrap .ck-link-mask,[data-cfg-plainhd=true].ck-form-card .ck-hd-wrap .ck-link-mask,[data-cfg-plainhd=true].ck-blank-card .ck-hd-wrap .ck-link-mask,.ck-list-card[data-style=split] .ck-hd-wrap .ck-link-mask,.ck-mini-card[data-style=slide] .ck-hd-wrap .ck-link-mask,.ck-box-card[data-cfg-plain=true] .ck-hd-wrap .ck-link-mask{padding:0;-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0)}.ck-box-card[data-cfg-plain=true] .ck-card-wrap{padding:0;background:0;border:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.ck-box-card[data-cfg-plain=true] .ck-card-wrap>footer{padding:10px 0 0 5px;margin-top:15px;margin-left:0;margin-right:0;border-color:#e6e6e6}.ck-box-card[data-cfg-plain=true] .ck-card-wrap>section{margin:0;padding-left:15px;padding-right:15px;padding-bottom:0;border-color:#e6e6e6}.ck-box-card[data-cfg-plain=true] .ck-card-wrap>section:first-child{border-top:1px solid #e6e6e6}.ck-box-card[data-cfg-plain=true] .ck-card-wrap>section:last-child{padding-bottom:0}.ck-box-card[data-cfg-plain=true] .ck-card-wrap:first-child>section{padding-top:0;padding-bottom:0;border-top:0}.ck-box-card[data-cfg-plain=true] .ck-hd-wrap{padding:0;margin:10px 0}.ck-box-card[data-cfg-paper=true],.ck-list-card[data-cfg-paper=true]{margin:15px;word-wrap:break-word}.ck-box-card[data-cfg-paper=true] .ck-card-wrap,.ck-list-card[data-cfg-paper=true] .ck-card-wrap{padding:0 0 10px;border-bottom:1px solid #e6e6e6}.ck-box-card[data-cfg-paper=true] .ck-hd-wrap,.ck-list-card[data-cfg-paper=true] .ck-hd-wrap{line-height:1.6;margin-bottom:10px;position:relative}.ck-box-card[data-cfg-paper=true] .ck-hd-wrap .ck-hd,.ck-list-card[data-cfg-paper=true] .ck-hd-wrap .ck-hd{font-size:20px;line-height:1.4;font-weight:700}.ck-box-card[data-cfg-paper=true] .ck-hd-wrap:last-child,.ck-list-card[data-cfg-paper=true] .ck-hd-wrap:last-child{margin-bottom:0}.ck-box-card[data-cfg-paper=true] .ck-hdopt-wrap,.ck-list-card[data-cfg-paper=true] .ck-hdopt-wrap{bottom:-4px;background:#f2f2f2}.ck-box-card[data-cfg-paper=true] .ck-card-wrap>footer,.ck-list-card[data-cfg-paper=true] .ck-card-wrap>footer{border-color:#e6e6e6}.ck-box-card[data-cfg-paper=true] .ck-item,.ck-list-card[data-cfg-paper=true] .ck-item,.ck-box-card[data-cfg-paper=true] .ck-card-wrap>section,.ck-list-card[data-cfg-paper=true] .ck-card-wrap>section{margin:0}.ck-box-card[data-cfg-paper=true] .ck-card-wrap>section,.ck-list-card[data-cfg-paper=true] .ck-card-wrap>section{border-color:#e6e6e6;padding:40px 0 10px;font-size:17px}.ck-box-card[data-cfg-paper=true] .ck-card-wrap>section p,.ck-list-card[data-cfg-paper=true] .ck-card-wrap>section p{margin:0 0 25px}.ck-box-card[data-cfg-paper=true] .ck-card-wrap>section:first-child,.ck-list-card[data-cfg-paper=true] .ck-card-wrap>section:first-child{border-top:0;padding:0}.ck-box-card[data-cfg-paper=true] .ck-item,.ck-list-card[data-cfg-paper=true] .ck-item{padding:10px 0;border-bottom:1px solid #e6e6e6}.ck-box-card[data-cfg-paper=true] .ck-item:last-child,.ck-list-card[data-cfg-paper=true] .ck-item:last-child{margin-bottom:15px}.ck-box-card[data-cfg-paper=true] .ck-initem,.ck-list-card[data-cfg-paper=true] .ck-initem{padding:0}.ck-link-mask{display:block;width:100%;height:100%;padding:0 7.5px;-moz-transform:translateX(-7.5px);-ms-transform:translateX(-7.5px);-o-transform:translateX(-7.5px);-webkit-transform:translateX(-7.5px);transform:translateX(-7.5px);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:absolute;top:0;left:0;z-index:100;-webkit-tap-highlight-color:rgba(0,119,220,.2)}.ck-hdopt-wrap{display:inline-block;position:absolute;bottom:4px;right:0;z-index:110;font-size:13px;line-height:31px;height:31px;background:#fff}.ck-hdopt-wrap .ck-hdopt{margin:0 0 0 5px;position:relative}.ck-box-card:not([data-cfg-paper=true]) .ck-hd-wrap{border-bottom:0}.ck-box-card .ck-card-wrap>section{border-top:1px solid #efefef;margin:0 15px;padding:15px 0;font-size:13px}.ck-box-card .ck-card-wrap>section img{max-width:100%;margin:5px auto;display:block}.ck-box-card .ck-card-wrap>section:first-child{border-top:0}.ck-list-card .ck-list-wrap,.ck-mini-card .ck-list-wrap{overflow:hidden}.ck-list-card .ck-item.blank,.ck-mini-card .ck-item.blank{text-align:center}.ck-list-card .ck-item.blank .ck-initem,.ck-mini-card .ck-item.blank .ck-initem{background:0;padding:10px 0;color:#8e8e8e}.ck-list-card .ck-initem,.ck-mini-card .ck-initem{position:relative;font-size:11px;padding:5px 0;color:#252525;display:block}.ck-list-card .ck-title-box,.ck-mini-card .ck-title-box{display:block;overflow:hidden}.ck-list-card .ck-author-box,.ck-mini-card .ck-author-box{display:block;overflow:hidden;margin:4px 0 0}.ck-list-card .ck-avatar,.ck-mini-card .ck-avatar,.ck-list-card .ck-icon,.ck-mini-card .ck-icon{float:left;margin:2px 10px 0 0}.ck-list-card .ck-avatar img,.ck-mini-card .ck-avatar img,.ck-list-card .ck-icon img,.ck-mini-card .ck-icon img{width:30px;min-height:30px;background:#666;float:left}.ck-list-card .ck-author-set,.ck-mini-card .ck-author-set,.ck-list-card .ck-title-set,.ck-mini-card .ck-title-set{display:block;overflow:hidden;position:relative}.ck-list-card .ck-opt,.ck-mini-card .ck-opt{float:right;margin:2px 0 0 10px;position:relative;z-index:110}.ck-list-card .ck-author-info-wrap,.ck-mini-card .ck-author-info-wrap,.ck-list-card .ck-info-wrap,.ck-mini-card .ck-info-wrap{display:inline;position:absolute;bottom:0;right:0}.ck-list-card .ck-author-info,.ck-mini-card .ck-author-info,.ck-list-card .ck-info,.ck-mini-card .ck-info{display:inline}.ck-list-card .ck-title-line,.ck-mini-card .ck-title-line{font-size:13px;line-height:1.2;display:block;margin:0 0 4px}.ck-list-card .ck-author-line,.ck-mini-card .ck-author-line{line-height:1.2;display:block;margin:0 0 4px}.ck-list-card a.ck-avatar img,.ck-mini-card a.ck-avatar img,.ck-list-card a.ck-author,.ck-mini-card a.ck-author{position:relative;z-index:110}.ck-list-card .ck-title-prefix,.ck-mini-card .ck-title-prefix,.ck-list-card .ck-title-suffix,.ck-mini-card .ck-title-suffix,.ck-list-card .ck-title,.ck-mini-card .ck-title,.ck-list-card .ck-author-prefix,.ck-mini-card .ck-author-prefix,.ck-list-card .ck-author-suffix,.ck-mini-card .ck-author-suffix,.ck-list-card .ck-author,.ck-mini-card .ck-author{display:inline;margin:0 3px 0 0}.ck-list-card .ck-title-prefix,.ck-mini-card .ck-title-prefix,.ck-list-card .ck-title-suffix,.ck-mini-card .ck-title-suffix,.ck-list-card .ck-author-prefix,.ck-mini-card .ck-author-prefix,.ck-list-card .ck-author-suffix,.ck-mini-card .ck-author-suffix{color:#8e8e8e}.ck-list-card .ck-title-tag,.ck-mini-card .ck-title-tag{display:inline-block;font-size:11px;background:#ffc;padding:0 2px;margin:0 3px 0 0;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.ck-list-card .ck-desc-wrap,.ck-mini-card .ck-desc-wrap,.ck-list-card .ck-author-desc-wrap,.ck-mini-card .ck-author-desc-wrap{display:block;line-height:1.2;margin:0 0 4px}.ck-list-card .ck-desc,.ck-mini-card .ck-desc,.ck-list-card .ck-author-desc,.ck-mini-card .ck-author-desc{display:inline;margin:0 3px 0 0}.ck-list-card .ck-content-wrap,.ck-mini-card .ck-content-wrap,.ck-list-card .ck-author-content-wrap,.ck-mini-card .ck-author-content-wrap{font-size:13px;display:block;line-height:1.4;margin:0 0 4px}.ck-list-card .ck-content-wrap img,.ck-mini-card .ck-content-wrap img,.ck-list-card .ck-author-content-wrap img,.ck-mini-card .ck-author-content-wrap img{max-width:100%;margin:5px auto;display:block}.ck-list-card .ck-meta,.ck-mini-card .ck-meta,.ck-list-card .ck-author-meta,.ck-mini-card .ck-author-meta{display:inline;margin:0 3px 0 0}.ck-list-card.no-blank{display:none}.ck-list-card:not([data-cfg-paper=true]):not([data-style=split]) .ck-item:last-child{border:0}.ck-list-card[data-style=more] .ck-author-box,.ck-list-card[data-style=more] .ck-meta-wrap,.ck-list-card[data-style=more] .ck-content-wrap,.ck-list-card[data-style=menu] .ck-author-box,.ck-list-card[data-style=menu] .ck-meta-wrap,.ck-list-card[data-style=menu] .ck-content-wrap{display:none}.ck-list-card[data-style=more] .ck-icon,.ck-list-card[data-style=more] .ck-desc-wrap,.ck-list-card[data-style=more] .ck-opt,.ck-list-card[data-style=more] .ck-info-wrap{display:none}.ck-list-card[data-style=more] .ck-title-line{font-size:15px;padding-right:10px}.ck-list-card[data-style=more] .ck-title{font-weight:700;color:#252525}.ck-list-card[data-style=grid] .ck-author-box,.ck-list-card[data-style=grid] .ck-opt,.ck-list-card[data-style=grid] .ck-info-wrap,.ck-list-card[data-style=grid] .ck-meta-wrap,.ck-list-card[data-style=grid] .ck-content-wrap{display:none}.ck-list-card[data-style=grid] .ck-list{overflow:hidden;margin:0 15px;padding:10px 0;border-bottom:1px solid #efefef}.ck-list-card[data-style=grid] .ck-list:last-child{border-bottom:0}.ck-list-card[data-style=grid] .ck-list .ck-item{float:left;padding:0;margin:0;border:0;text-align:center}.ck-list-card[data-style=grid] .ck-list .ck-icon,.ck-list-card[data-style=grid] .ck-list .ck-icon img{float:none;margin:0}.ck-list-card[data-style=grid] .ck-list .ck-title-line{padding:0}.ck-list-card[data-style=grid] .ck-list .ck-desc-wrap{padding:5px 0 0}.ck-list-card[data-style=grid] footer{border-top:0}.ck-list-card[data-style=grid] .ck-initem{margin:0;padding:0 5px}.ck-list-card[data-style=grid] .ck-link-mask{padding:5px 0;-moz-transform:translateY(-5px);-ms-transform:translateY(-5px);-o-transform:translateY(-5px);-webkit-transform:translateY(-5px);transform:translateY(-5px)}.ck-list-card[data-style=split]{margin:10px 0}.ck-list-card[data-style=split] .ck-hd-wrap{margin-left:10px;margin-right:10px}.ck-list-card[data-style=split] .ck-card-wrap>footer{padding-top:0}.ck-list-card[data-style=split] .ck-item{margin:10px;padding:5px 0}.ck-list-card[data-style=split] .ck-item:first-child{margin-top:2px}.ck-list-card[data-style=split] .ck-initem{border:0}.ck-list-card[data-style=split] .ck-title{font-weight:700}.ck-list-card[data-style=split] .ck-author-box{padding:10px 0 0;margin-top:10px;border-top:1px solid #efefef}.ck-list-card[data-cfg-paper=true]{margin-left:0;margin-right:0}.ck-list-card[data-cfg-paper=true] .ck-card-wrap{padding-bottom:0;border-bottom:0}.ck-list-card[data-cfg-paper=true] .ck-card-wrap>footer,.ck-list-card[data-cfg-paper=true] .ck-hd-wrap,.ck-list-card[data-cfg-paper=true] .ck-list{margin-left:15px;margin-right:15px}.ck-list-card[data-cfg-plain=true]{display:none}.ck-mini-card{margin:20px 0}.ck-mini-card[data-style=slide] .ck-hd-wrap{margin-left:10px;margin-right:10px}.ck-mini-card[data-style=slide] .ck-card-wrap.slide{overflow:hidden}.ck-mini-card[data-style=slide] .ck-card-wrap.slide .ck-list-wrap{-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0);overflow-x:scroll;margin-bottom:-8px}.ck-mini-card[data-style=slide] .ck-card-wrap.slide .ck-list-wrap .ck-list{width:5000px;padding:0 10px 10px 0;overflow:hidden}.ck-mini-card[data-style=slide] .ck-card-wrap.slide .ck-list-wrap .ck-item{padding:5px 0;margin:0 0 0 10px}.ck-mini-card[data-style=slide] .ck-list-wrap{-webkit-overflow-scrolling:touch}.ck-mini-card[data-style=slide] .ck-col{float:left}.ck-mini-card[data-style=slide] .ck-item{margin:0 10px 3px}.ck-mini-card[data-style=slide] .ck-initem{border:0}.ck-mini-card[data-style=slide] .ck-title{font-weight:700}.ck-mini-card[data-style=slide] .ck-author-box{padding:10px 0 0;border-top:1px solid #efefef}.ck-mini-card[data-cfg-plain=true]{display:none}.ck-form-card .ck-item{padding:10px 0;display:block}.ck-form-card .ck-item:first-child{padding-top:15px}.ck-form-card .ck-item:last-child{border:0;padding-bottom:15px}.ck-form-card .ck-item.blank{text-align:center;color:#8e8e8e}.ck-form-card .ck-item .ck-folder,.ck-form-card .ck-item p{margin:10px 0}.ck-form-card .ck-item .ck-folder:first-child,.ck-form-card .ck-item p:first-child{margin-top:0}.ck-form-card .ck-item .ck-folder:last-child,.ck-form-card .ck-item p:last-child{margin-bottom:0}.ck-form-card .ck-item label{font-size:15px}.ck-form-card .ck-item label em{color:#8e8e8e;font-size:13px;margin:0 0 0 5px}.ck-form-card .ck-item label em:first-child{margin-left:0}.ck-form-card .ck-item .ck-title{display:block;line-height:15px;margin:0 0 10px}.ck-form-card .ck-item input[type=text],.ck-form-card .ck-item input[type=number],.ck-form-card .ck-item input[type=password],.ck-form-card .ck-item textarea{font-size:13px;color:#252525;width:100%;line-height:20px;height:40px;padding:10px;border:1px solid #b9b9b9;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-shadow:inset 0 2px 3px 0 rgba(0,0,0,.15);-webkit-box-shadow:inset 0 2px 3px 0 rgba(0,0,0,.15);box-shadow:inset 0 2px 3px 0 rgba(0,0,0,.15);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.ck-form-card .ck-item input[type=number]{width:80px}.ck-form-card .ck-item textarea{height:176px}ck-card,ck-part{display:none}.ck-blank-card .ck-card-wrap>div{padding:10px 0;display:block;border:0;text-align:center;font-size:15px}.ck-ranger{width:100%;padding:10px 0}.ck-modalview .ck-page-card .ck-article{padding-top:45px}.ck-select .ck-option,.ck-actions-button .ck-option{display:none} -------------------------------------------------------------------------------- /dist/pics/drawer_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/dist/pics/drawer_icon.png -------------------------------------------------------------------------------- /dist/pics/fold_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/dist/pics/fold_icon.png -------------------------------------------------------------------------------- /dist/pics/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/dist/pics/menu.png -------------------------------------------------------------------------------- /dist/pics/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/dist/pics/more.png -------------------------------------------------------------------------------- /dist/pics/unfold_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dexteryy/CardKit/c7ed56f22782e73016cc68607467f7e607078537/dist/pics/unfold_icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cardkit", 3 | "description": "CardKit is a mobile UI library provides a series of building blocks which are all components built on DarkDOM and Moui.", 4 | "version": "0.0.0", 5 | "main": "Gruntfile.js", 6 | "engines": { 7 | "node": ">= 0.8.0" 8 | }, 9 | "dependencies": {}, 10 | "devDependencies": { 11 | "grunt-dispatch": "~0.2.0", 12 | "grunt-furnace": "~0.2.0", 13 | "grunt-ozjs": "~0.4.3", 14 | "grunt-contrib-compass": "~0.1.3", 15 | "grunt-contrib-uglify": "~0.2.0", 16 | "grunt-contrib-cssmin": "~0.5.0", 17 | "grunt-contrib-imagemin": "~0.1.2", 18 | "grunt-contrib-jshint": "~0.7.2", 19 | "grunt-contrib-watch": "~0.3.1", 20 | "grunt-contrib-clean": "~0.4.0", 21 | "grunt-contrib-copy": "~0.4.0", 22 | "grunt-contrib-concat": "~0.1.3", 23 | "grunt": "~0.4.0", 24 | "ozma": "~1.9.1", 25 | "ozjs": "~2.6.4" 26 | }, 27 | "peerDependencies": { 28 | "grunt": "~0.4.0" 29 | }, 30 | "jshintConfig": { 31 | "passfail": false, 32 | "browser": true, 33 | "nonstandard": true, 34 | "node": true, 35 | "globals": { 36 | "ActiveXObject": true, 37 | "require": true, 38 | "define": true, 39 | "module": true, 40 | "describe": true, 41 | "it": true, 42 | "before": true, 43 | "after": true, 44 | "beforeEach": true, 45 | "afterEach": true, 46 | "expect": true, 47 | "sinon": true 48 | }, 49 | "devel": false, 50 | "debug": false, 51 | "strict": false, 52 | "esnext": false, 53 | "eqeqeq": false, 54 | "eqnull": true, 55 | "immed": true, 56 | "noarg": true, 57 | "undef": true, 58 | "unused": true, 59 | "trailing": false, 60 | "boss": true, 61 | "evil": true, 62 | "shadow": true, 63 | "proto": true, 64 | "validthis": true, 65 | "expr": true, 66 | "indent": false, 67 | "asi": false, 68 | "laxbreak": true, 69 | "laxcomma": true, 70 | "curly": false, 71 | "nonew": true, 72 | "sub": true, 73 | "loopfunc": true, 74 | "regexdash": true, 75 | "white": false, 76 | "scripturl": true, 77 | "multistr": true 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /scss/cardkit-standalone.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'cardkit/include'; 3 | @import 'cardkit'; 4 | -------------------------------------------------------------------------------- /scss/cardkit.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'cardkit/lib'; 3 | @import 'cardkit/config'; 4 | @import 'cardkit/base'; 5 | @import 'cardkit/card'; 6 | @import 'cardkit/active'; 7 | -------------------------------------------------------------------------------- /scss/cardkit/_active.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "active/control"; 3 | @import "active/picker"; 4 | @import "active/overlay"; 5 | @import "active/popup"; 6 | 7 | -------------------------------------------------------------------------------- /scss/cardkit/_base.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "moui/base"; 3 | @import "moui/control/switch"; 4 | @import "moui/control/folder"; 5 | @import "moui/picker/segment"; 6 | @import "moui/picker/tags"; 7 | @import "moui/picker/actions"; 8 | @import "moui/picker/slider"; 9 | @import "moui/picker/select"; 10 | @import 'moui/actionview/default'; 11 | @import 'moui/modalview/default'; 12 | @import 'moui/growl/default'; 13 | 14 | %ck-header { 15 | height: $moui_nav_h; 16 | @include box-shadow(0 1px 2px rgba(0,0,0,.35)); 17 | border-bottom:1px solid rgba(0,0,0,.2); 18 | z-index:$moui_z_step; 19 | 20 | a { 21 | -webkit-touch-callout: none; 22 | -webkit-tap-highlight-color: rgba(0,0,0,0); 23 | } 24 | 25 | } 26 | 27 | %ck-btn { 28 | @extend %moui-button; 29 | } 30 | 31 | %ck-mainbtn { 32 | @extend %moui-main-button; 33 | } 34 | -------------------------------------------------------------------------------- /scss/cardkit/_card.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "card/page"; 3 | @import "card/common/scaffold"; 4 | @import "card/box"; 5 | @import "card/common/item"; 6 | @import "card/list"; 7 | @import "card/mini"; 8 | @import "card/form"; 9 | 10 | ck-card, 11 | ck-part { 12 | display:none; 13 | } 14 | 15 | .ck-blank-card { 16 | @extend %ck-card; 17 | @extend %card-parts; 18 | 19 | .ck-card-wrap > div { 20 | @extend %item; 21 | padding:$moui_space 0; 22 | display:block; 23 | border:none; 24 | text-align:center; 25 | font-size:$moui_maintitle_size; 26 | } 27 | 28 | } 29 | 30 | -------------------------------------------------------------------------------- /scss/cardkit/_config.scss: -------------------------------------------------------------------------------- 1 | 2 | // http://compass-style.org/reference/compass/support/ 3 | $support-for-original-webkit-gradients : false; 4 | $experimental-support-for-opera : false; 5 | $experimental-support-for-khtml : false; 6 | 7 | $moui_nav_h: 80px/2; 8 | 9 | $ck_view_color: $moui_bg_color; 10 | $ck_view_border_color: #e6e6e6; 11 | $ck_viewbg_color: #666; 12 | $ck_top_btn_size: 80px/2; 13 | 14 | -------------------------------------------------------------------------------- /scss/cardkit/_include.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "moui/include"; 3 | 4 | -------------------------------------------------------------------------------- /scss/cardkit/_lib.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "moui/lib"; 3 | @import "moui/config"; 4 | 5 | -------------------------------------------------------------------------------- /scss/cardkit/active/_control.scss: -------------------------------------------------------------------------------- 1 | 2 | .ckbase-btn, // @deprecated 3 | .ck-btn { 4 | @extend %moui-button; 5 | } 6 | 7 | .ckbase-mainbtn, // @deprecated 8 | .ck-mainbtn { 9 | @extend %moui-main-button; 10 | } 11 | 12 | .ck-post-button { 13 | @extend %ck-btn; 14 | 15 | &.enabled { 16 | @extend %moui-block-pressed; 17 | } 18 | 19 | } 20 | 21 | .ck-switch { 22 | @extend .moui-switch; 23 | } 24 | 25 | .ck-folder { 26 | @extend .moui-folder; 27 | } 28 | 29 | -------------------------------------------------------------------------------- /scss/cardkit/active/_overlay.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-modalview { 3 | @extend .moui-modalview; 4 | 5 | .ck-page-card { 6 | 7 | .ck-article { 8 | padding-top:$moui_nav_h + 5px; 9 | } 10 | 11 | } 12 | 13 | } 14 | 15 | .ck-actionview { 16 | @extend .moui-actionview; 17 | 18 | .wrapper { 19 | 20 | .content { 21 | 22 | & > article { 23 | 24 | .ck-option { 25 | @extend %moui-action-option; 26 | } 27 | 28 | } 29 | 30 | } 31 | 32 | } 33 | 34 | } 35 | 36 | .ck-growl { 37 | @extend .moui-growl; 38 | } 39 | 40 | -------------------------------------------------------------------------------- /scss/cardkit/active/_picker.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-segment { 3 | @extend .moui-segment; 4 | .ck-option { 5 | @extend %moui-segment-option; 6 | } 7 | } 8 | 9 | .ck-tagselector { 10 | @extend .moui-tagselector; 11 | .ck-option { 12 | @extend %moui-tag-option; 13 | } 14 | } 15 | 16 | .ck-actions { 17 | @extend .moui-actions; 18 | } 19 | 20 | .ck-ranger { 21 | width:100%; 22 | padding: 10px 0; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /scss/cardkit/active/_popup.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-modal-button { 3 | @extend .ckbase-btn; 4 | } 5 | 6 | .ck-actions-button { 7 | @extend .ckbase-btn; 8 | } 9 | 10 | .ck-select { 11 | @extend .moui-select; 12 | } 13 | 14 | .ck-select, 15 | .ck-actions-button { 16 | 17 | .ck-option { 18 | display:none; 19 | } 20 | 21 | } 22 | 23 | .ck-growl-button { 24 | @extend .ckbase-btn; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /scss/cardkit/card/_box.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-box-card { 3 | 4 | &:not([data-cfg-paper="true"]) { 5 | @extend %ck-card; 6 | @extend %card-parts; 7 | 8 | .ck-hd-wrap { 9 | border-bottom:0; 10 | } 11 | 12 | } 13 | 14 | .ck-card-wrap > section { 15 | border-top:1px solid $moui_border_color; 16 | margin:0 $moui_morespace; 17 | padding:$moui_morespace 0; 18 | font-size:$moui_title_size; 19 | 20 | img { 21 | max-width:100%; 22 | margin:$moui_space/2 auto; 23 | display:block; 24 | } 25 | 26 | &:first-child { 27 | border-top:0; 28 | } 29 | 30 | } 31 | 32 | &[data-cfg-plain="true"] { 33 | @extend %plain-card; 34 | } 35 | 36 | &[data-cfg-paper="true"] { 37 | @extend %paper-card; 38 | } 39 | 40 | } 41 | 42 | -------------------------------------------------------------------------------- /scss/cardkit/card/_form.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-form-card { 3 | @extend %ck-card; 4 | @extend %card-parts; 5 | 6 | .ck-item { 7 | @extend %item; 8 | padding:$moui_space 0; 9 | display:block; 10 | 11 | &:first-child { 12 | padding-top:$moui_morespace; 13 | } 14 | 15 | &:last-child { 16 | border:none; 17 | padding-bottom:$moui_morespace; 18 | } 19 | 20 | &.blank { 21 | text-align:center; 22 | color:$moui_desc_color; 23 | } 24 | 25 | .ck-folder, 26 | p { 27 | margin:$moui_space 0; 28 | 29 | &:first-child { 30 | margin-top:0; 31 | } 32 | 33 | &:last-child { 34 | margin-bottom:0; 35 | } 36 | 37 | } 38 | 39 | label { 40 | font-size:$moui_maintitle_size; 41 | //margin:0 0 0 $moui_space/2; 42 | 43 | em { 44 | color:$moui_desc_color; 45 | font-size:$moui_title_size; 46 | margin:0 0 0 $moui_space/2; 47 | 48 | &:first-child { 49 | margin-left:0; 50 | } 51 | 52 | } 53 | 54 | } 55 | 56 | .ck-title { 57 | display:block; 58 | line-height:$moui_maintitle_size; 59 | margin:0 0 $moui_space 0; 60 | } 61 | 62 | input[type="text"], 63 | input[type="number"], 64 | input[type="password"], 65 | textarea { 66 | font-size:$moui_title_size; 67 | color:$moui_text_color; 68 | width:100%; 69 | line-height:20px; 70 | height:(20px + 2 * $moui_space); 71 | padding:$moui_space; 72 | border:1px solid rgb(185,185,185); 73 | @include box-sizing(border-box); 74 | @include box-shadow(inset 0px 2px 3px 0px rgba(0,0,0,0.15)); 75 | @include border-radius($moui_radius); 76 | } 77 | 78 | input[type="number"] { 79 | width: 80px; 80 | } 81 | 82 | textarea { 83 | height:(352px/2); 84 | } 85 | 86 | } 87 | 88 | } 89 | -------------------------------------------------------------------------------- /scss/cardkit/card/_list.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-list-card { 3 | @extend %list-parts; 4 | 5 | &.no-blank { 6 | display:none; 7 | } 8 | 9 | &:not([data-cfg-paper="true"]):not([data-style="split"]) { 10 | @extend %ck-card; 11 | @extend %card-parts; 12 | 13 | .ck-item { 14 | @extend %item; 15 | 16 | &:last-child { 17 | border:none; 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | &[data-style="more"], 25 | &[data-style="menu"] { 26 | 27 | .ck-author-box, 28 | .ck-meta-wrap, 29 | .ck-content-wrap { 30 | display:none; 31 | } 32 | 33 | } 34 | 35 | &[data-style="more"] { 36 | 37 | .ck-icon, 38 | .ck-desc-wrap, 39 | .ck-opt, 40 | .ck-info-wrap { 41 | display:none; 42 | } 43 | 44 | .ck-title-line { 45 | font-size:$moui_maintitle_size; 46 | padding-right:$moui_space; 47 | } 48 | 49 | .ck-title { 50 | font-weight:bold; 51 | color:$moui_text_color; 52 | } 53 | 54 | .clickable { 55 | 56 | .ck-initem { 57 | @extend %more-link; 58 | } 59 | 60 | } 61 | 62 | } 63 | 64 | &[data-style="menu"] { 65 | 66 | } 67 | 68 | &[data-style="grid"] { 69 | 70 | .ck-author-box, 71 | .ck-opt, 72 | .ck-info-wrap, 73 | .ck-meta-wrap, 74 | .ck-content-wrap { 75 | display:none; 76 | } 77 | 78 | .ck-list { 79 | overflow:hidden; 80 | margin:0 $moui_morespace; 81 | padding:$moui_space 0; 82 | border-bottom:1px solid $moui_border_color; 83 | 84 | &:last-child { 85 | border-bottom:none; 86 | } 87 | 88 | .ck-item { 89 | float:left; 90 | padding:0; 91 | margin:0; 92 | border:none; 93 | text-align:center; 94 | } 95 | 96 | .ck-icon, 97 | .ck-icon img { 98 | float:none; 99 | margin:0; 100 | } 101 | 102 | .ck-title-line { 103 | padding:0; 104 | } 105 | 106 | .ck-desc-wrap { 107 | padding:5px 0 0 0; 108 | } 109 | 110 | } 111 | 112 | footer { 113 | border-top:none; 114 | } 115 | 116 | .ck-initem { 117 | margin:0; 118 | padding:0 5px; 119 | } 120 | 121 | .ck-link-mask { 122 | padding:$moui_space/2 0; 123 | @include transform(translateY(-$moui_space/2)); 124 | } 125 | 126 | } 127 | 128 | &[data-style="split"] { 129 | margin:$moui_space 0; 130 | @extend %card-parts; 131 | @extend %plain-hd-parts; 132 | 133 | .ck-hd-wrap { 134 | margin-left: $moui_space; 135 | margin-right: $moui_space; 136 | } 137 | 138 | .ck-card-wrap > footer { 139 | padding-top:0; 140 | } 141 | 142 | .ck-item { 143 | margin:$moui_space; 144 | @extend %ck-card-wrap; 145 | padding:5px 0; 146 | 147 | &:first-child { 148 | margin-top:2px; 149 | } 150 | 151 | } 152 | 153 | .ck-initem { 154 | @extend %item; 155 | border:none; 156 | //padding:$moui_space 0; 157 | } 158 | 159 | .ck-title { 160 | font-weight:bold; 161 | } 162 | 163 | .ck-author-box { 164 | padding:$moui_space 0 0 0; 165 | margin-top:$moui_space; 166 | border-top:1px solid $moui_border_color; 167 | } 168 | 169 | } 170 | 171 | &[data-cfg-paper="true"] { 172 | @extend %paper-card; 173 | margin-left:0; 174 | margin-right:0; 175 | 176 | .ck-card-wrap { 177 | padding-bottom:0; 178 | border-bottom:none; 179 | } 180 | 181 | .ck-card-wrap > footer, 182 | .ck-hd-wrap, 183 | .ck-list { 184 | margin-left:$moui_morespace; 185 | margin-right:$moui_morespace; 186 | } 187 | 188 | .ck-link-mask { 189 | //padding:$moui_space/2; 190 | //@include transform(translateX(-$moui_space/2) translateY(-$moui_space/2)); 191 | } 192 | 193 | } 194 | 195 | &[data-cfg-plain="true"] { 196 | display:none; 197 | } 198 | 199 | } 200 | -------------------------------------------------------------------------------- /scss/cardkit/card/_mini.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-mini-card { 3 | @extend %list-parts; 4 | margin: $moui_space*2 0; 5 | 6 | &[data-style="slide"] { 7 | @extend %card-parts; 8 | @extend %plain-hd-parts; 9 | 10 | .ck-hd-wrap { 11 | margin-left: $moui_space; 12 | margin-right: $moui_space; 13 | } 14 | 15 | .ck-card-wrap.slide { 16 | overflow:hidden; 17 | 18 | .ck-list-wrap { 19 | @include transform(translateX(0)); 20 | overflow-x:scroll; 21 | margin-bottom:-8px; 22 | 23 | .ck-list { 24 | width:5000px; 25 | padding:0 10px 10px 0; 26 | overflow:hidden; 27 | } 28 | 29 | .ck-item { 30 | padding:5px 0; 31 | margin:0 0 0 10px; 32 | } 33 | 34 | } 35 | 36 | } 37 | 38 | .ck-list-wrap { 39 | -webkit-overflow-scrolling: touch; 40 | } 41 | 42 | .ck-col { 43 | float:left; 44 | } 45 | 46 | .ck-item { 47 | margin:0 $moui_space 3px $moui_space; 48 | @extend %ck-card-wrap; 49 | } 50 | 51 | .ck-initem { 52 | @extend %item; 53 | border:none; 54 | } 55 | 56 | .ck-title { 57 | font-weight:bold; 58 | } 59 | 60 | .ck-author-box { 61 | padding:$moui_space 0 0 0; 62 | border-top:1px solid $moui_border_color; 63 | } 64 | 65 | } 66 | 67 | &[data-cfg-plain="true"] { 68 | display:none; 69 | } 70 | 71 | } 72 | -------------------------------------------------------------------------------- /scss/cardkit/card/_page.scss: -------------------------------------------------------------------------------- 1 | 2 | .ck-card, // @deprecated 3 | .ckd-page-card, 4 | .ckd-page-title, 5 | .ckd-page-nav, 6 | .ckd-page-actions, 7 | .ckd-page-footer { 8 | display:none; 9 | } 10 | 11 | .ck-page-card { 12 | display:block; 13 | background:$ck_view_color; 14 | min-height:100%; 15 | overflow:hidden; 16 | margin:0; 17 | font:$moui_text_size Helvetica,sans-serif; 18 | color:$moui_text_color; 19 | line-height:1.6; 20 | @include box-shadow(0px 0px 6px rgba(0,0,0,.8)); 21 | @include transition(transform 0.3s); 22 | -webkit-backface-visibility: hidden; 23 | 24 | &.topbar-enabled { 25 | 26 | .ck-header { 27 | @include transform(translateY(0)); 28 | } 29 | 30 | } 31 | 32 | &[data-fixed-minheight="false"] { 33 | @include box-shadow(none); 34 | } 35 | 36 | &[data-page-active="false"] { 37 | display:none; 38 | } 39 | 40 | &[data-deck-active="false"] { 41 | display:none; 42 | } 43 | 44 | &[data-deck="navdrawer"] { 45 | position:absolute; 46 | top:0; 47 | left:0; 48 | width:280px; 49 | @include transform(translateX(0)); 50 | @include box-shadow(none); 51 | 52 | .ck-page-link-mask { 53 | display:none; 54 | } 55 | 56 | &[data-deck-active="false"] { 57 | display:block; 58 | z-index:-1; 59 | bottom:0; 60 | } 61 | 62 | &[data-page-active="false"] { 63 | display:none; 64 | } 65 | 66 | } 67 | 68 | &[data-deck="modalview"] { 69 | display:block; 70 | } 71 | 72 | &[data-deck-active="false"][data-page-active="true"][data-curdeck="navdrawer"] { 73 | display:block; 74 | @include transform(translateX(280px)); 75 | z-index:$moui_z_step; 76 | position:fixed; 77 | top:0; 78 | left:0; 79 | right:0; 80 | 81 | .ck-header { 82 | position:relative; 83 | @include transform(translateY(0)); 84 | 85 | .ck-bugfix-fixed & { 86 | display:none; 87 | } 88 | 89 | } 90 | 91 | .ck-top-banner { 92 | padding-top:0; 93 | } 94 | 95 | .ck-top-banner-inner { 96 | border-top:0; 97 | } 98 | 99 | .ck-article { 100 | padding-top:0; 101 | } 102 | 103 | .ck-page-link-mask { 104 | display:block; 105 | } 106 | 107 | } 108 | 109 | &[data-deck-active="false"][data-page-active="true"][data-curdeck="modalview"] { 110 | display:block; 111 | position:absolute; 112 | top:0; 113 | left:0; 114 | right:0; 115 | bottom:0; 116 | //@include box-shadow(0px 0px 10px rgba(0,0,0,.35)); 117 | //@include transform(scale(0.9)); 118 | //@include transform-origin(50% 50%); 119 | 120 | &[data-deck="modalview"] { 121 | position:static; 122 | } 123 | 124 | } 125 | 126 | } 127 | 128 | .ck-page-card { 129 | 130 | pre { 131 | word-wrap: break-word; 132 | } 133 | 134 | a { 135 | text-decoration:none; 136 | color:$moui_active_color; 137 | -webkit-tap-highlight-color: $moui_highlight_color; 138 | } 139 | 140 | .ck-link-mask { 141 | //@include user-select(none); 142 | } 143 | 144 | } 145 | 146 | .ck-page-link-mask { 147 | display:none; 148 | position:absolute; 149 | top:0; 150 | bottom:0; 151 | left:0; 152 | right:0; 153 | z-index:$moui_z_view + $moui_z_step; 154 | } 155 | 156 | .ck-header { 157 | @extend %ck-header; 158 | position:fixed; 159 | top:0; 160 | left:0; 161 | width:100%; 162 | @include user-select(none); 163 | z-index:$moui_z_view + $moui_z_step; 164 | @include transition(transform 0.3s); 165 | @include transform(translateY(-$moui_nav_h)); 166 | 167 | .ck-in-webview & { 168 | position:relative; 169 | @include transform(translateY(0)); 170 | } 171 | 172 | .ck-in-hybird & { 173 | display:none; 174 | } 175 | 176 | } 177 | 178 | .ck-header-shd { 179 | background:#333; 180 | opacity:.95; 181 | position:absolute; 182 | top:0; 183 | bottom:0; 184 | left:0; 185 | right:0; 186 | } 187 | 188 | .ck-top-title { 189 | font-size:$moui_article_size; 190 | font-weight:bold; 191 | line-height: $moui_nav_h; 192 | text-align:center; 193 | display:block; 194 | position:absolute; 195 | left: $moui_space*4 + 0px; 196 | right: $moui_space*4 + 0px; 197 | top:0; 198 | color:#fff; 199 | @include text-shadow(0px 1px 0px rgba(0,0,0,1)); 200 | } 201 | 202 | .ck-top-overflow-items { 203 | display:none; 204 | } 205 | 206 | .ck-top-actions .ck-top-act > *, 207 | .ck-top-overflow, 208 | .ck-top-nav { 209 | float:right; 210 | display:inline-block; 211 | margin:0; 212 | padding:0; 213 | text-decoration:none; 214 | text-indent:-800px; 215 | overflow:hidden; 216 | @include box-shadow(none); 217 | @include user-select(none); 218 | 219 | width:$ck_top_btn_size; 220 | height:$ck_top_btn_size; 221 | background-color: transparent; 222 | background-size:24px 24px; 223 | background-repeat:no-repeat; 224 | background-position:7px 7px; 225 | border:1px solid transparent; 226 | 227 | &:active { 228 | background-color: transparent; 229 | @include box-shadow(inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1)); 230 | } 231 | 232 | } 233 | 234 | .ck-top-nav { 235 | float:left; 236 | position:relative; 237 | background-image:none; 238 | 239 | &.ck-link { 240 | background-image:inline-image('menu.png'); 241 | } 242 | 243 | } 244 | 245 | .ck-top-actions { 246 | float:right; 247 | position:relative; 248 | z-index:1; 249 | 250 | .ck-option { 251 | display:none; 252 | } 253 | 254 | } 255 | 256 | .ck-top-overflow { 257 | background-image:inline-image('more.png'); 258 | 259 | .ck-top-act { 260 | display:none; 261 | } 262 | 263 | } 264 | 265 | 266 | .ck-top-banner { 267 | display:none; 268 | font-size:13px; 269 | background:#fff; 270 | padding-top:$moui_nav_h; 271 | position:relative; 272 | border-bottom:1px solid rgba(0,0,0,.2); 273 | @include box-shadow(0 1px 2px rgba(0,0,0,.1)); 274 | 275 | .ck-in-webview &, 276 | .no-header & { 277 | padding-top:0; 278 | 279 | .ck-top-banner-inner { 280 | border-top:0; 281 | } 282 | 283 | } 284 | 285 | .with-banner & { 286 | display:block; 287 | } 288 | 289 | } 290 | 291 | .ck-top-banner-inner { 292 | padding: $moui_space/2; 293 | border-top:1px dashed $moui_border_color; 294 | 295 | [data-cfg-plain="true"] & { 296 | padding:0; 297 | } 298 | 299 | } 300 | 301 | .ck-article { 302 | padding-top:$moui_nav_h + 5px; 303 | 304 | .ck-in-webview &, 305 | .with-banner &, 306 | .no-header & { 307 | padding-top:0; 308 | } 309 | 310 | } 311 | 312 | .ck-footer { 313 | height:15px; 314 | margin:30px 0 0 0; 315 | padding:0 0 15px 0; 316 | background:$ck_view_color; 317 | text-align:center; 318 | 319 | .copyright { 320 | font-size:$moui_text_size; 321 | color:$moui_desc_color; 322 | margin:5px 0; 323 | } 324 | 325 | } 326 | 327 | -------------------------------------------------------------------------------- /scss/cardkit/card/common/_item.scss: -------------------------------------------------------------------------------- 1 | 2 | %list-parts { 3 | 4 | .ck-list-wrap { 5 | overflow:hidden; 6 | } 7 | 8 | .ck-item { 9 | 10 | &.blank { 11 | text-align:center; 12 | 13 | .ck-initem { 14 | background:none; 15 | padding:$moui_space 0; 16 | color:$moui_desc_color; 17 | } 18 | 19 | } 20 | 21 | } 22 | 23 | .ck-initem { 24 | position:relative; 25 | font-size: $moui_text_size; 26 | padding:($moui_space/2) 0; 27 | color:$moui_text_color; 28 | display:block; 29 | } 30 | 31 | .ck-title-box { 32 | display:block; 33 | overflow:hidden; 34 | } 35 | 36 | .ck-author-box { 37 | display:block; 38 | overflow:hidden; 39 | margin:4px 0 0 0; 40 | } 41 | 42 | .ck-avatar, 43 | .ck-icon { 44 | float:left; 45 | margin:2px $moui_space 0 0; 46 | 47 | img { 48 | width:(60px / 2); 49 | min-height:30px; 50 | background:#666; 51 | float:left; 52 | } 53 | 54 | } 55 | 56 | .ck-author-set, 57 | .ck-title-set { 58 | display:block; 59 | overflow:hidden; 60 | position:relative; 61 | } 62 | 63 | .ck-opt { 64 | float:right; 65 | margin:2px 0 0 $moui_space; 66 | position:relative; 67 | z-index:$moui_z_item + $moui_z_step; 68 | } 69 | 70 | .ck-author-info-wrap, 71 | .ck-info-wrap { 72 | display:inline; 73 | @extend %info-text; 74 | position:absolute; 75 | bottom:0; 76 | right:0; 77 | } 78 | 79 | .ck-author-info, 80 | .ck-info { 81 | display:inline; 82 | } 83 | 84 | .ck-title-line { 85 | font-size:$moui_title_size; 86 | line-height:1.2; 87 | display:block; 88 | margin:0 0 4px 0; 89 | } 90 | 91 | .ck-author-line { 92 | line-height:1.2; 93 | display:block; 94 | margin:0 0 4px 0; 95 | } 96 | 97 | a.ck-avatar img, 98 | a.ck-author { 99 | position:relative; 100 | z-index:$moui_z_item + $moui_z_step; 101 | } 102 | 103 | .ck-title-prefix, 104 | .ck-title-suffix, 105 | .ck-title, 106 | .ck-author-prefix, 107 | .ck-author-suffix, 108 | .ck-author { 109 | display:inline; 110 | margin:0 3px 0 0; 111 | } 112 | 113 | .ck-title-prefix, 114 | .ck-title-suffix, 115 | .ck-author-prefix, 116 | .ck-author-suffix { 117 | color:$moui_desc_color; 118 | } 119 | 120 | .ck-title-tag { 121 | display:inline-block; 122 | font-size: $moui_text_size; 123 | background:#ffc; 124 | padding:0px 2px; 125 | margin:0 3px 0 0; 126 | @include border-radius($moui_radius); 127 | } 128 | 129 | .ck-desc-wrap, 130 | .ck-author-desc-wrap { 131 | @extend %info-text; 132 | display:block; 133 | line-height:1.2; 134 | margin:0 0 4px 0; 135 | } 136 | 137 | .ck-desc, 138 | .ck-author-desc { 139 | display:inline; 140 | margin:0 3px 0 0; 141 | } 142 | 143 | .ck-content-wrap, 144 | .ck-author-content-wrap { 145 | font-size:$moui_title_size; 146 | display:block; 147 | line-height: 1.4; 148 | margin:0 0 4px 0; 149 | 150 | img { 151 | max-width:100%; 152 | margin:$moui_space/2 auto; 153 | display:block; 154 | } 155 | 156 | } 157 | 158 | .ck-meta-wrap, 159 | .ck-author-meta-wrap { 160 | @extend %info-text; 161 | } 162 | 163 | .ck-meta, 164 | .ck-author-meta{ 165 | display:inline; 166 | margin:0 3px 0 0; 167 | } 168 | 169 | } 170 | -------------------------------------------------------------------------------- /scss/cardkit/card/common/_scaffold.scss: -------------------------------------------------------------------------------- 1 | 2 | %ck-card { 3 | margin:$moui_space; 4 | 5 | .ck-card-wrap { 6 | @extend %ck-card-wrap; 7 | } 8 | 9 | } 10 | 11 | %ck-card-wrap { 12 | background-color:#fff; 13 | border:1px solid rgb(255,255,255); 14 | @include border-radius($moui_radius); 15 | @include box-shadow(0 0px 2px 0 rgba(0, 0, 0, .2)); 16 | word-wrap: break-word; 17 | } 18 | 19 | %card-parts { 20 | word-wrap: break-word; 21 | 22 | .ck-hd-wrap { 23 | @extend %item; 24 | position:relative; 25 | 26 | .ck-hd { 27 | padding:($moui_space/2) 0; 28 | font-size:$moui_maintitle_size; 29 | font-weight:bold; 30 | color:$moui_text_color; 31 | display:block; 32 | } 33 | 34 | .ck-hd.clickable { 35 | @extend %more-link; 36 | position:relative; 37 | } 38 | 39 | } 40 | 41 | .ck-card-wrap > footer { 42 | @extend %info-text; 43 | border-top:1px solid $moui_border_color; 44 | margin:0 $moui_morespace; 45 | padding:($moui_space) 0; 46 | } 47 | 48 | &[data-cfg-plainhd="true"] { 49 | @extend %plain-hd-parts; 50 | } 51 | 52 | } 53 | 54 | %item { 55 | border-bottom:1px solid $moui_border_color; 56 | margin:0 $moui_morespace; 57 | padding:($moui_space/2) 0; 58 | } 59 | 60 | %more-link { 61 | background: { 62 | image: inline-image('drawer_icon.png'); 63 | repeat: no-repeat; 64 | position: right; 65 | size: 5.5px $moui_space; 66 | } 67 | } 68 | 69 | %info-text { 70 | font-size:$moui_text_size; 71 | color:$moui_desc_color; 72 | } 73 | 74 | %plain-hd-parts { 75 | 76 | .ck-hd-wrap { 77 | @extend %plain-hd; 78 | padding:0; 79 | margin:$moui_space 0; 80 | border:none; 81 | } 82 | 83 | .ck-card-wrap > section { 84 | border-top:none; 85 | } 86 | 87 | } 88 | 89 | %plain-hd { 90 | 91 | .ck-hd { 92 | padding:0 $moui_morespace 0 5px; 93 | background-origin: content-box; 94 | color:$moui_desc_color; 95 | //font-weight:normal; 96 | } 97 | 98 | .ck-hdopt-wrap { 99 | bottom:-5px; 100 | background:$ck_view_color; 101 | } 102 | 103 | .ck-link-mask { 104 | padding:0; 105 | @include transform(translateX(0)); 106 | //padding:0; 107 | //@include transform(translateX(0)); 108 | } 109 | 110 | } 111 | 112 | %plain-card { 113 | 114 | .ck-card-wrap { 115 | padding:0; 116 | background:none; 117 | border:none; 118 | @include border-radius(0); 119 | @include box-shadow(none); 120 | 121 | & > footer { 122 | padding:$moui_space 0 0 $moui_space/2; 123 | margin-top:$moui_morespace; 124 | margin-left:0; 125 | margin-right:0; 126 | border-color:$ck_view_border_color; 127 | } 128 | 129 | & > section { 130 | margin:0; 131 | padding-left:$moui_morespace; 132 | padding-right:$moui_morespace; 133 | padding-bottom:0; 134 | border-color:$ck_view_border_color; 135 | 136 | &:first-child { 137 | border-top:1px solid $ck_view_border_color; 138 | } 139 | 140 | &:last-child { 141 | padding-bottom:0; 142 | } 143 | 144 | } 145 | 146 | &:first-child { 147 | 148 | & > section { 149 | padding-top:0; 150 | padding-bottom:0; 151 | border-top:0; 152 | } 153 | 154 | } 155 | 156 | } 157 | 158 | .ck-hd-wrap { 159 | @extend %plain-hd; 160 | padding:0; 161 | margin:$moui_space 0; 162 | } 163 | 164 | } 165 | 166 | %paper-card { 167 | margin:$moui_morespace; 168 | word-wrap: break-word; 169 | 170 | .ck-card-wrap { 171 | padding:0 0 ($moui_space) 0; 172 | border-bottom:1px solid $ck_view_border_color; 173 | } 174 | 175 | .ck-hd-wrap { 176 | //border-bottom:1px solid $ck_view_border_color; 177 | //padding:0 0 $moui_space 0; 178 | line-height:1.6; 179 | margin-bottom:$moui_space; 180 | position:relative; 181 | 182 | .ck-hd { 183 | font-size: $moui_hdtitle_size; 184 | line-height:1.4; 185 | font-weight:bold; 186 | } 187 | 188 | &:last-child { 189 | margin-bottom:0; 190 | } 191 | 192 | } 193 | 194 | .ck-hdopt-wrap { 195 | bottom:-4px; 196 | background:$ck_view_color; 197 | } 198 | 199 | .ck-card-wrap > footer { 200 | border-color:$ck_view_border_color; 201 | } 202 | 203 | .ck-item, 204 | .ck-card-wrap > section { 205 | margin:0; 206 | } 207 | 208 | .ck-card-wrap > section { 209 | border-color:$ck_view_border_color; 210 | padding:40px 0 $moui_space 0; 211 | //line-height:(54px/2); 212 | font-size:(34px/2); 213 | 214 | p { 215 | margin:0 0 (50px/2) 0; 216 | } 217 | 218 | &:first-child { 219 | border-top:0; 220 | padding:0; 221 | } 222 | 223 | } 224 | 225 | .ck-item { 226 | padding:$moui_space 0; 227 | border-bottom:1px solid $ck_view_border_color; 228 | 229 | &:first-child { 230 | //padding-top:0; 231 | } 232 | 233 | &:last-child { 234 | margin-bottom:$moui_morespace; 235 | } 236 | 237 | } 238 | 239 | .ck-initem { 240 | padding:0; 241 | } 242 | 243 | } 244 | 245 | .ck-link-mask { 246 | display:block; 247 | width:100%; 248 | height:100%; 249 | //padding:0 (($moui_space + $moui_space)/2); 250 | //@include transform(translateX(-($moui_space + $moui_space)/2)); 251 | padding:0 (($moui_morespace)/2); 252 | @include transform(translateX(-($moui_morespace)/2)); 253 | @include border-radius($moui_radius); 254 | position:absolute; 255 | top:0; 256 | left:0; 257 | z-index:$moui_z_item; 258 | //-webkit-tap-highlight-color: rgba(0,0,0,0); 259 | -webkit-tap-highlight-color: $moui_highlight_color; 260 | 261 | //&.ck-link-mask-active { 262 | //&:active { 263 | //background:$moui_active_color; 264 | //opacity:.4; 265 | //z-index:$moui_z_item + $moui_z_step * 4; 266 | //} 267 | 268 | } 269 | 270 | .ck-hdopt-wrap { 271 | display:inline-block; 272 | position:absolute; 273 | bottom:$moui_space/2 - 1px; 274 | right:0; 275 | z-index:$moui_z_item + $moui_z_step; 276 | font-size:$moui_title_size; 277 | line-height:$moui_btn_h+2px; 278 | height:$moui_btn_h+2px; 279 | background:#fff; 280 | 281 | .ck-hdopt { 282 | margin:0 0 0 5px; 283 | position:relative; 284 | } 285 | 286 | } 287 | -------------------------------------------------------------------------------- /scss/config.rb: -------------------------------------------------------------------------------- 1 | 2 | generated_images_dir = 'dist/pics' 3 | -------------------------------------------------------------------------------- /tpl/cardkit/box.tpl: -------------------------------------------------------------------------------- 1 |
6 | 7 | {% if (hasSplitHd) { %} 8 | {%= hdwrap %} 9 | {% } %} 10 | 11 |
12 | 13 | {% if (!hasSplitHd) { %} 14 | {%= hdwrap %} 15 | {% } %} 16 | 17 | {% if (!isBlank) { %} 18 |
{%= component.collect.join('') || content %}
19 | {% } %} 20 | 21 | {%= component.ft %} 22 | 23 |
24 | 25 |
26 | -------------------------------------------------------------------------------- /tpl/cardkit/box/collect.tpl: -------------------------------------------------------------------------------- 1 |
{%= content %}
2 | -------------------------------------------------------------------------------- /tpl/cardkit/box/content.tpl: -------------------------------------------------------------------------------- 1 |
{%= content %}
2 | -------------------------------------------------------------------------------- /tpl/cardkit/form.tpl: -------------------------------------------------------------------------------- 1 |
4 | 5 | {% if (hasSplitHd) { %} 6 | {%= hdwrap %} 7 | {% } %} 8 | 9 |
10 | 11 | {% if (!hasSplitHd) { %} 12 | {%= hdwrap %} 13 | {% } %} 14 | 15 | {% if (component.item.length) { %} 16 | {% component.item.forEach(function(item){ %} 17 | {%= item %} 18 | {% }); %} 19 | {% } else { %} 20 |
21 | {% if (component.blank) { %} 22 | {%= component.blank %} 23 | {% } else { %} 24 | {%=(state.blankText || '目前还没有内容')%} 25 | {% } %} 26 |
27 | {% } %} 28 | 29 | {%= component.ft %} 30 | 31 |
32 | 33 |
34 | -------------------------------------------------------------------------------- /tpl/cardkit/form/content.tpl: -------------------------------------------------------------------------------- 1 |
{%= content %}
2 | -------------------------------------------------------------------------------- /tpl/cardkit/form/item.tpl: -------------------------------------------------------------------------------- 1 |
2 | {%= component.title %} 3 | {%= content %} 4 |
5 | -------------------------------------------------------------------------------- /tpl/cardkit/form/title.tpl: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item.tpl: -------------------------------------------------------------------------------- 1 |
3 | 4 |
5 | 6 | {% if (itemLink && !isItemLinkAlone) { %} 7 | 10 | {% } %} 11 | 12 |
13 | 14 | {%= component.opt.join('') %} 15 | {%= component.icon %} 16 | 17 |
18 | 19 | {% if (itemContent) { %} 20 |
21 | {%= component.titlePrefix.join('') %} 22 | {%= itemContent %} 23 | {%= component.titleSuffix.join('') %} 24 | {%= component.titleTag.join('') %} 25 |
26 | {% } %} 27 | 28 | {% if (component.info.length) { %} 29 |
30 | {%= component.info.join('') %} 31 |
32 | {% } %} 33 | 34 | {% if (component.desc.length) { %} 35 |
36 | {%= component.desc.join('') %} 37 |
38 | {% } %} 39 | 40 |
41 | 42 | {% if (component.content.length) { %} 43 |
44 | {%= component.content.join('') %} 45 |
46 | {% } %} 47 | 48 | {% if (component.meta.length) { %} 49 |
50 | {%= component.meta.join('') %} 51 |
52 | {% } %} 53 | 54 |
55 | 56 | {% if (component.author || component.authorDesc.length || component.authorMeta.length) { %} 57 |
58 | 59 | {%= component.avatar %} 60 | 61 |
62 | 63 |
64 | {%= component.authorPrefix.join('') %} 65 | {%= component.author %} 66 | {%= component.authorSuffix.join('') %} 67 |
68 | 69 | {% if (component.authorInfo.length) { %} 70 |
71 | {%= component.authorInfo.join('') %} 72 |
73 | {% } %} 74 | 75 | {% if (component.authorDesc.length) { %} 76 |
77 | {%= component.authorDesc.join('') %} 78 |
79 | {% } %} 80 | 81 |
82 | 83 | {% if (component.authorMeta.length) { %} 84 |
85 | {%= component.authorMeta.join('') %} 86 |
87 | {% } %} 88 | 89 |
90 | {% } %} 91 | 92 |
93 | 94 |
95 | 96 | -------------------------------------------------------------------------------- /tpl/cardkit/item/author.tpl: -------------------------------------------------------------------------------- 1 | {% if (context.authorLink) { %} 2 | {%= content %} 5 | {% } else { %} 6 | {%= content %} 7 | {% } %} 8 | -------------------------------------------------------------------------------- /tpl/cardkit/item/author_desc.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/author_info.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/author_meta.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/author_prefix.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/author_suffix.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/avatar.tpl: -------------------------------------------------------------------------------- 1 | {% if (state.imgUrl) { %} 2 | {% if (context.authorLink) { %} 3 | 6 | 7 | 8 | {% } else { %} 9 | 10 | 11 | 12 | {% } %} 13 | {% } %} 14 | -------------------------------------------------------------------------------- /tpl/cardkit/item/content.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/desc.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/icon.tpl: -------------------------------------------------------------------------------- 1 | {% if (state.imgUrl) { %} 2 | {% if (context.isItemLinkAlone) { %} 3 | 6 | 7 | 8 | {% } else { %} 9 | 10 | 11 | 12 | {% } %} 13 | {% } %} 14 | -------------------------------------------------------------------------------- /tpl/cardkit/item/info.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/meta.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/opt.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/title.tpl: -------------------------------------------------------------------------------- 1 | {% if (context.isItemLinkAlone) { %} 2 | {%= content %} 5 | {% } else { %} 6 | {%= content %} 7 | {% } %} 8 | 9 | -------------------------------------------------------------------------------- /tpl/cardkit/item/title_prefix.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/title_suffix.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/item/title_tag.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/list.tpl: -------------------------------------------------------------------------------- 1 |
7 | 8 | {% if (hasSplitHd) { %} 9 | {%= hdwrap %} 10 | {% } %} 11 | 12 |
13 | 14 | {% if (!hasSplitHd) { %} 15 | {%= hdwrap %} 16 | {% } %} 17 | 18 |
19 | 20 | {% if (component.item.length) { %} 21 | 22 |
23 | {% component.item.forEach(function(item, i){ %} 24 | 25 | {% if (i && (i % state.col === 0)) { %} 26 |
27 | {% } %} 28 | 29 | {%= item %} 30 | 31 | {% }); %} 32 |
33 | 34 | {% } else { %} 35 | 36 |
37 |
38 |
39 | {% if (component.blank) { %} 40 | {%= component.blank %} 41 | {% } else { %} 42 | {%=(state.blankText || '目前还没有内容')%} 43 | {% } %} 44 |
45 |
46 |
47 | 48 | {% } %} 49 | 50 |
51 | 52 | {%= component.ft %} 53 | 54 |
55 | 56 |
57 | 58 | -------------------------------------------------------------------------------- /tpl/cardkit/mini.tpl: -------------------------------------------------------------------------------- 1 |
3 | 4 | {% if (hasSplitHd) { %} 5 | {%= hdwrap %} 6 | {% } %} 7 | 8 |
9 | 10 | {% if (!hasSplitHd) { %} 11 | {%= hdwrap %} 12 | {% } %} 13 | 14 |
15 | 16 | {% if (component.item.length) { %} 17 | 18 |
19 | {% component.item.forEach(function(item){ %} 20 |
21 | {%= item %} 22 |
23 | {% }); %} 24 |
25 | 26 | {% } else { %} 27 | 28 |
29 |
30 |
31 | {% if (component.blank) { %} 32 | {%= component.blank %} 33 | {% } else { %} 34 | {%=(state.blankText || '目前还没有内容')%} 35 | {% } %} 36 |
37 |
38 |
39 | 40 | {% } %} 41 | 42 |
43 | 44 | {%= component.ft %} 45 | 46 |
47 | 48 |
49 | 50 | -------------------------------------------------------------------------------- /tpl/cardkit/page.tpl: -------------------------------------------------------------------------------- 1 | 2 |
10 | 11 | {% if (hasHeader) { %} 12 |
13 |
14 | {%= component.nav %} 15 | {%= component.title %} 16 | {%= component.actionbar %} 17 |
18 | {% } %} 19 | 20 | {%= component.banner %} 21 | 22 |
23 | {% if (!isBlank) { %} 24 | {%= content %} 25 | {% } else { %} 26 |
27 |
28 | {% if (component.blank) { %} 29 | {%= component.blank %} 30 | {% } else { %} 31 |
{%=(state.blankText || '目前还没有内容')%}
32 | {% } %} 33 |
34 |
35 | {% } %} 36 |
37 | 38 | {% if (component.footer) { %} 39 |
{%= component.footer %}
40 | {% } %} 41 | 42 | 43 | 44 |
45 | 46 | -------------------------------------------------------------------------------- /tpl/cardkit/page/actionbar.tpl: -------------------------------------------------------------------------------- 1 |
2 | 3 | {% if (overflowActions.length) { %} 4 | 6 | {% overflowActions.forEach(function(action){ %} 7 | {%= action %} 8 | {% }); %} 9 | 10 | {% } %} 11 | 12 | {% visibleActions.forEach(function(action){ %} 13 | {%= action %} 14 | {% }); %} 15 | 16 |
17 | -------------------------------------------------------------------------------- /tpl/cardkit/page/actionbar/action.tpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | {%= content %} 6 | 7 | -------------------------------------------------------------------------------- /tpl/cardkit/page/banner.tpl: -------------------------------------------------------------------------------- 1 |
3 |
{%= content %}
4 |
5 | -------------------------------------------------------------------------------- /tpl/cardkit/page/nav.tpl: -------------------------------------------------------------------------------- 1 | {% if (content) { %} 2 | {%= content %} 3 | {% } else { %} 4 | 5 | {% } %} 6 | -------------------------------------------------------------------------------- /tpl/cardkit/page/title.tpl: -------------------------------------------------------------------------------- 1 |
{%= content %}
2 | -------------------------------------------------------------------------------- /tpl/cardkit/scaffold/ft.tpl: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tpl/cardkit/scaffold/hd.tpl: -------------------------------------------------------------------------------- 1 | 2 | {% if (hdLink) { %} 3 | 6 | {% } %} 7 | {%= content %} 8 | 9 | -------------------------------------------------------------------------------- /tpl/cardkit/scaffold/hd_opt.tpl: -------------------------------------------------------------------------------- 1 | {%= content %} 2 | -------------------------------------------------------------------------------- /tpl/cardkit/scaffold/hdwrap.tpl: -------------------------------------------------------------------------------- 1 | 2 | {% if (component.hd) { %} 3 |
4 | 5 | {%= component.hd %} 6 | 7 | {% if (component.hdOpt.length) { %} 8 |
9 | {%= component.hdOpt.join('') %} 10 |
11 | {% } %} 12 | 13 |
14 | {% } %} 15 | --------------------------------------------------------------------------------