├── README.md
├── fonts
└── Impact-Label-fontfacekit
│ ├── Impact_label-webfont.woff
│ ├── Impact_label_reversed-webfont.woff
│ └── stylesheet.css
├── images
└── vCanvas.jpg
├── index.html
├── scripts
├── base.js
├── commands.js
├── csster.js
├── git-cheatsheet.js
└── styles.js
└── styles
└── 1200.css
/README.md:
--------------------------------------------------------------------------------
1 | Git Cheatsheet 中文版
2 | ==================
3 |
4 | NOP Software 做的一个非常好的交互式 Git 常用命令参考，形象地解释了几个重要状态之间的关系，在我刚接触 Git 的时候有相当的帮助。翻译出来，希望能帮助更多正在 Git 入门的朋友。
5 |
6 | 传送门：[https://amio.github.io/git-cheatsheet-chs](http://amio.github.io/git-cheatsheet-chs)
7 |
8 | Git 熟手往往想不到新入门可能会碰到的困难，如果看这个还是有什么地方不明白的话，欢迎在 [Issue](https://github.com/amio/git-cheatsheet-chs/issues) 中提出，也许我们还可以再改进它。
9 |
--------------------------------------------------------------------------------
/fonts/Impact-Label-fontfacekit/Impact_label-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amio/git-cheatsheet-chs/516ef9ad978ed56d99853d865634188901816479/fonts/Impact-Label-fontfacekit/Impact_label-webfont.woff
--------------------------------------------------------------------------------
/fonts/Impact-Label-fontfacekit/Impact_label_reversed-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amio/git-cheatsheet-chs/516ef9ad978ed56d99853d865634188901816479/fonts/Impact-Label-fontfacekit/Impact_label_reversed-webfont.woff
--------------------------------------------------------------------------------
/fonts/Impact-Label-fontfacekit/stylesheet.css:
--------------------------------------------------------------------------------
1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 23, 2010 01:59:24 AM America/New_York */
2 |
3 | @font-face {
4 | font-family: 'ImpactLabelRegular';
5 | src: url('Impact_label-webfont.eot');
6 | src: local('☺'), url('Impact_label-webfont.woff') format('woff'), url('Impact_label-webfont.ttf') format('truetype'), url('Impact_label-webfont.svg#webfont4r1DatUq') format('svg');
7 | font-weight: normal;
8 | font-style: normal;
9 | }
10 |
11 | @font-face {
12 | font-family: 'ImpactLabelReversedRegular';
13 | src: url('Impact_label_reversed-webfont.eot');
14 | src: local('☺'), url('Impact_label_reversed-webfont.woff') format('woff'), url('Impact_label_reversed-webfont.ttf') format('truetype'), url('Impact_label_reversed-webfont.svg#webfont6oy8XCTs') format('svg');
15 | font-weight: normal;
16 | font-style: normal;
17 | }
18 |
--------------------------------------------------------------------------------
/images/vCanvas.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amio/git-cheatsheet-chs/516ef9ad978ed56d99853d865634188901816479/images/vCanvas.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Git Cheatsheet 中文版
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
31 |
32 |
33 |
34 |
35 |
Git Cheatsheet Chs
36 |
37 |
39 |
(c) Andrew Peterson 2009-2012 All Rights Reserved.
40 |
41 |
42 |
45 |
47 |
49 |
51 |
52 |
53 |
56 |
57 |
60 |
61 |
62 |
63 |
68 |
');
24 | }
--------------------------------------------------------------------------------
/scripts/commands.js:
--------------------------------------------------------------------------------
1 | var commands = [
2 |
3 | { left: "workspace", right: "index", direction: "status",
4 | cmd: "status",
5 | tags: 'Basic Snapshotting',
6 | docs: "显示在工作目录中与本地版本库最新版本不同的(文件)路径、与 index 不同的(文件)路径以及未加入 git 的(文件)路径。" },
7 | { left: "workspace", right: "index", direction: "status",
8 | cmd: "diff",
9 | tags: 'Basic Snapshotting, Inspection and Comparison,Patching',
10 | docs: "显示未加入 index 的修改内容" },
11 | { left: "workspace", right: "local_repo", direction: "status",
12 | cmd: "diff ",
13 | tags: 'Basic Snapshotting,Inspection and Comparison,Patching',
14 | docs: "将当前工作目录与指定的 进行比较。可以使用「HEAD」来指定与最新版本进行比较；也可以使用分支的名称，与另外一个分支进行比较。" },
15 |
16 | { left: "workspace", right: "index", direction: "up",
17 | cmd: "add ",
18 | tags: 'Basic Snapshotting',
19 | docs: "将工作目录中的新文件或修改的文件添加到 index，以供稍后提交至版本库。使用「add --interactive」可以交互式地添加文件。" },
20 | { left: "workspace", right: "index", direction: "up",
21 | cmd: "add -u",
22 | tags: 'Basic Snapshotting',
23 | docs: "将工作目录中有修改的文件（不包含新文件）添加至 index。相当于在提交时使用「git commit -a」命令所添加的文件。"},
24 | { left: "workspace", right: "index", direction: "up",
25 | cmd: "rm ",
26 | tags: 'Basic Snapshotting',
27 | docs: "从工作目录和 index 中移除指定文件。" },
28 | { left: "workspace", right: "index", direction: "up",
29 | cmd: "mv ",
30 | tags: 'Basic Snapshotting',
31 | docs: "在工作目录和 index 中移动指定文件。" },
32 |
33 | { left: "workspace", right: "local_repo", direction: "up",
34 | cmd: "commit -a -m 'msg'",
35 | tags: 'Basic Snapshotting',
36 | docs: "提交所有自上次提交以来修改过的文件（不包括未加入 git 追踪的文件）并从 index 中移除工作目录里已经删除的文件。" },
37 |
38 | { left: "workspace", right: "index", direction: "dn",
39 | cmd: "checkout or ",
40 | tags: 'Branching and Merging',
41 | docs: "更新工作目录中的指定文件或目录，覆盖所有本地修改。『不』切换分支。" },
42 |
43 | { left: "index", right: "index", direction: "status",
44 | cmd: "reset HEAD ...",
45 | tags: 'Basic Snapshotting',
46 | docs: "将指定文件从预备下次提交的快照中移除（不影响工作目录下正在进行的修改）。" },
47 |
48 | { left: "index", right: "local_repo", direction: "dn",
49 | cmd: "reset --soft HEAD^",
50 | tags: 'Basic Snapshotting',
51 | docs: "撤销上次提交，将其内容放入 index 快照。" },
52 |
53 | { left: "workspace", right: "local_repo", direction: "dn",
54 | cmd: "reset --hard",
55 | tags: 'Basic Snapshotting',
56 | docs: "清空工作目录中的所有修改和 index 快照，与本地版本库同步。" +
57 | "警告：工作目录中所有未提交的修改都将丢失。通常用于合并冲突而打算重新开始的情况。添加「ORIG_HEAD」参数可以撤销最近一次合并操作及之后的所有改动。" },
58 |
59 | { left: "workspace", right: "local_repo", direction: "dn",
60 | cmd: "checkout ",
61 | tags: 'Branching and Merging',
62 | docs: "更新 index 和工作目录以切换到指定分支，并且更新 HEAD 到此分支。" },
63 | { left: "workspace", right: "local_repo", direction: "dn",
64 | cmd: "checkout -b ",
65 | tags: 'Branching and Merging',
66 | docs: "创建并切换到一个新的分支。" },
67 |
68 | { left: "workspace", right: "local_repo", direction: "dn",
69 | cmd: "merge ",
70 | tags: 'Branching and Merging',
71 | docs: "将 中的内容合并到当前分支。使用 --no-commit 参数可以防止合并之后自动提交，以便审查合并结果之后再进行提交。" },
72 |
73 | { left: "workspace", right: "local_repo", direction: "dn",
74 | cmd: "rebase ",
75 | tags: 'Patching',
76 | docs: "撤销自从 分支以来的所有修改提交（commit），然后将这些提交逐个应用于 的 HEAD 上。" },
77 |
78 | { left: "workspace", right: "local_repo", direction: "dn",
79 | cmd: "cherry-pick ",
80 | tags: 'Patching',
81 | docs: "将指定 commit 中的修改合并到当前分支。" },
82 | { left: "workspace", right: "local_repo", direction: "dn",
83 | cmd: "revert ",
84 | docs: "撤销 中的修改内容并将结果提交。此项操作需要工作目录中干净无修改。" },
85 |
86 | { left: "index", right: "local_repo", direction: "status",
87 | cmd: "diff --cached []",
88 | tags: 'Basic Snapshotting,Inspection and Comparison,Patching',
89 | docs: "查看 index 中的修改内容和最新提交的区别。也可以指定某个提交进行比较。"},
90 | { left: "index", right: "local_repo", direction: "up",
91 | cmd: "commit -m 'msg'",
92 | tags: 'Basic Snapshotting',
93 | docs: "将 index 中的修改内容提交，并附上对此次修改的描述。" },
94 | { left: "index", right: "local_repo", direction: "up",
95 | cmd: "commit --amend",
96 | tags: 'Basic Snapshotting',
97 | docs: '将当前 index 中的修改内容合并到上一次提交中。'},
98 |
99 | { left: "local_repo", right: "local_repo", direction: "status",
100 | cmd: "log",
101 | tags: 'Branching and Merging, Inspection and Comparison',
102 | docs: '查看提交历史记录，最新的排在最顶端。选项：' +
103 | '--decorate 将分支以及标签信息显示在相应的提交旁边' +
104 | '--stat 包含文件的增删改信息' +
105 | '--author=foo 只显示指定作者的提交' +
106 | '--after="MMM DD YYYY" 如 "Jun 20 2008"，只显示某个日期之后的提交' +
107 | '--before="MMM DD YYYY" 只显示某个日期之前的提交' +
108 | '--merge 只显示跟当前合并冲突有关的提交' },
109 | { left: "local_repo", right: "local_repo", direction: "status",
110 | cmd: "diff ",
111 | tags: 'Basic Snapshotting, Inspection and Comparison,Patching',
112 | docs: "查看任意两次提交之间的区别。" },
113 | { left: "local_repo", right: "local_repo", direction: "status",
114 | cmd: "branch",
115 | tags: 'Branching and Merging',
116 | docs: "列出所有分支。选项 -r 指定查看远端的分支，选项 -a 则同时查看远端和本地所有分支。" },
117 | { left: "local_repo", right: "local_repo", direction: "status",
118 | cmd: "branch -d ",
119 | tags: 'Branching and Merging',
120 | docs: "删除指定分支。使用 -D 选项则强制删除。" },
121 | { left: 'local_repo', right: 'remote_repo', direction: 'dn',
122 | cmd: "branch --track ",
123 | tags: 'Branching and Merging',
124 | docs: '创建一个映射到指定远端分支的本地分支。'},
125 |
126 | { left: "workspace", right: "remote_repo", direction: "dn",
127 | cmd: "clone ",
128 | tags: 'Creating Projects',
129 | docs: "下载 指定的仓库，并将工作目录签出为 master 分支的最新版本。" },
130 | { left: "workspace", right: "remote_repo", direction: "dn",
131 | cmd: "pull ",
132 | tags: 'Sharing and Updating',
133 | docs: "获取远端仓库中的指定版本，并将其合并到当前分支。" },
134 | { left: "workspace", right: "remote_repo", direction: "dn",
135 | cmd: "reset --hard /",
136 | tags: 'Basic Snapshotting',
137 | docs: "将本地工作目录重置为远端分支版本。使用 'reset --hard origin/master' 会抛弃所有本地 master 分支上的提交，可以用于合并失败时重新开始。" },
138 | { left: "local_repo", right: "remote_repo", direction: "dn",
139 | cmd: "fetch ",
140 | tags: 'Sharing and Updating',
141 | docs: "从远端仓库下载所有内容（包括分支和标签）。" },
142 | { left: "local_repo", right: "remote_repo", direction: "up",
143 | cmd: "push",
144 | tags: 'Sharing and Updating',
145 | docs: '将所有本地分支的修改推送到远端仓库上的相应分支，但不包括那些从未推送到远端仓库过的分支。'},
146 | { left: "local_repo", right: "remote_repo", direction: "up",
147 | cmd: "push ",
148 | tags: 'Sharing and Updating',
149 | docs: "将一个新的（或现有）分支推送到远端仓库" },
150 | { left: "local_repo", right: "remote_repo", direction: "up",
151 | cmd: "push :",
152 | tags: 'Sharing and Updating',
153 | docs: "将一个新的（或现有）分支推送到远端仓库的不同名分支上。" },
154 |
155 | { left: "remote_repo", right: "remote_repo", direction: "status",
156 | cmd: "branch -r",
157 | tags: 'Branching and Merging',
158 | docs: "列出远端仓库的所有分支。" },
159 |
160 | { left: "remote_repo", right: "remote_repo", direction: "status",
161 | cmd: "push :",
162 | tags: 'Sharing and Updating',
163 | docs: "删除远端仓库的指定分支。" },
164 |
165 | { left: "workspace", right: "workspace", direction: "dn",
166 | cmd: "clean",
167 | tags: 'Administration',
168 | docs: '清除当前目录以及所有层级子目录中未加入版本控制的文件。' },
169 |
170 | { left: "stash", right: "workspace", direction: "dn",
171 | cmd: "stash save []",
172 | tags: 'Branching and Merging',
173 | docs: '将目前的修改内容保存到一个新的 stash 中。运行 "git reset --hard" 可以清除之。 ' +
174 | ' 是可选的，事实上如果只想立刻做个快照的话 "save" 也可以省略。' },
175 | { left: "stash", right: "workspace", direction: "up",
176 | cmd: "stash apply []",
177 | tags: 'Branching and Merging',
178 | docs: "从指定的 stash 记录中恢复修改到当前工作目录。默认使用最后一次保存的 stash 记录。" },
179 | { left: "stash", right: "workspace", direction: "up",
180 | cmd: "stash pop",
181 | tags: 'Branching and Merging',
182 | docs: '应用最后一次保存的（或指定的） stash 记录并删除 stash 对它的记录。'},
183 | { left: "stash", right: "stash", direction: "status",
184 | cmd: "stash list",
185 | tags: 'Branching and Merging',
186 | docs: "列出目前所有保存的 stash 记录。" },
187 | { left: "stash", right: "stash", direction: "status",
188 | cmd: "stash show []",
189 | tags: 'Branching and Merging',
190 | docs: "以 diff 显示指定 stash 记录中记录的修改内容。未指定 的话则采用最后一条 stash 记录。" },
191 | { left: "stash", right: "stash", direction: "status",
192 | cmd: "stash drop []",
193 | tags: 'Branching and Merging',
194 | docs: "删除 stash 列表中的一条记录。未指定 的话则删除最新一条。" },
195 | { left: "stash", right: "stash", direction: "status",
196 | cmd: "stash clear",
197 | tags: 'Branching and Merging',
198 | docs: "清除所有 stash 记录。此项操作不可逆。" },
199 | { left: "stash", right: "local_repo", direction: "up",
200 | cmd: "stash branch []",
201 | tags: 'Branching and Merging',
202 | docs: '根据指定的 stash 记录创建一个新的分支，新的分支起点为创建该 stash 记录时所在的提交，并将该 stash 记录中的修改内容应用于' +
203 | '工作目录和 index。如果操作成功并且 的格式为 stash@{}，则一并删除此 stash 记录。' +
204 | '未指定 的话则采用最新一条记录。\r' +
205 | '当你在某个分之上执行了 stash save 之后此分支进行了太多修改提交导致严重冲突无法合并回去的时候，这条命令就非常有用了。' +
206 | '因为新的恢复操作会应用在创建 stash 记录时的提交基础上，所以不会产生任何冲突。' }
207 |
208 | ];
--------------------------------------------------------------------------------
/scripts/csster.js:
--------------------------------------------------------------------------------
1 | // csster.js
2 | // version 1.0.2
3 | // Copyright (c) Andrew J. Peterson / ndpsoftware.com
4 | // All Rights Reserved
5 | //
6 | // See http://github.com/ndp/csster
7 | //
8 | // Generated Fri May 25 20:28:34 PDT 2012
9 | //
10 | //
11 | if (!Csster) {
12 | var Csster = {}
13 | }
14 |
15 | function isArray(object) {
16 | return typeof object === 'object' &&
17 | Object.prototype.toString.call(object) === '[object Array]';
18 | }
19 |
20 |
21 | // A R R A Y s
22 | // "each_with_index" from Ruby style
23 | function arrayEach(a, iterator) {
24 | for (var i = 0; i < a.length;) {
25 | iterator(a[i], i++);
26 | }
27 | return a;
28 | };
29 |
30 |
31 | function arrayInject(a, memo, iterator) {
32 | arrayEach(a, function(value, index) {
33 | memo = iterator(memo, value, index);
34 | });
35 | return memo;
36 | };
37 |
38 | function arrayFlatten(a) {
39 | return arrayInject(a, [], function(array, value) {
40 | if (isArray(value))
41 | return array.concat(arrayFlatten(value));
42 | array.push(value);
43 | return array;
44 | });
45 | };
46 |
47 |
48 | // S T R I N G s
49 | function dasherize(s) {
50 | return s.replace(/([A-Z])/g, function($1) {
51 | return "-" + $1.toLowerCase();
52 | });
53 | }
54 |
55 |
56 | // H A S H e s
57 | // mergeHashInto(hashA, hashB, hashC...)
58 | // merge all properties from B, C into hash A.
59 | function mergeHashInto(r) {
60 | for (var i = 1; i < arguments.length; i++) {
61 | for (var k in arguments[i]) {
62 | r[k] = arguments[i][k];
63 | }
64 | }
65 | return r;
66 | }
67 |
68 | function mergeHashes() {
69 | var result = {};
70 | for (var i = 0; i < arguments.length; i++) {
71 | for (var k in arguments[i]) {
72 | result[k] = arguments[i][k];
73 | }
74 | }
75 | return result;
76 | }
77 | if (!Csster) {
78 | var Csster = {}
79 | }
80 |
81 | /**
82 | * Remove redundant parents from selectors that include more than one ID
83 | * selector. eg. #page #top => "#top"
84 | */
85 | Csster.propertyPreprocessors = [];
86 | Csster.rulesPostProcessors = [];
87 |
88 |
89 | // Lifted from jQuery: http://docs.jquery.com/Utilities/jQuery.browser
90 | Csster.browser = {};
91 | (function() {
92 | function uaMatch(ua) {
93 | ua = ua.toLowerCase();
94 |
95 | var match = /(webkit)[ \/]([\w.]+)/.exec(ua) ||
96 | /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) ||
97 | /(msie) ([\w.]+)/.exec(ua) ||
98 | !/compatible/.test(ua) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) ||
99 | [];
100 |
101 | return { browser: match[1] || "", version: match[2] || "0" };
102 | }
103 |
104 | var browserMatch = uaMatch(navigator.userAgent);
105 | if (browserMatch.browser) {
106 | Csster.browser[ browserMatch.browser ] = true;
107 | Csster.browser.version = browserMatch.version;
108 | }
109 | })();
110 |
111 |
112 | /**
113 | * Add more valid properties to the list of valid property names.
114 | */
115 | Csster.addPropertyNames = function(propertyNames) {
116 | if (!Csster.propertyNamesHash) {
117 | Csster.propertyNamesHash = {};
118 | }
119 | for (var a = 0; a < arguments.length; a++) {
120 | var names = arrayFlatten([arguments[a]]);
121 | for (var i = 0; i < names.length; i++) {
122 | var name = names[i];
123 | Csster.propertyNamesHash[name] = true;
124 | }
125 | }
126 | };
127 |
128 |
129 | Csster.addPropertyNames(['accelerator',
130 | 'azimuth',
131 | 'background',
132 | 'background-attachment',
133 | 'background-color',
134 | 'background-image',
135 | 'background-position',
136 | 'background-position-x',
137 | 'background-position-y',
138 | 'background-repeat',
139 | 'behavior',
140 | 'border',
141 | 'border-bottom',
142 | 'border-bottom-right-radius',
143 | 'border-bottom-left-radius',
144 | 'border-bottom-color',
145 | 'border-bottom-style',
146 | 'border-bottom-width',
147 | 'border-collapse',
148 | 'border-color',
149 | 'border-left',
150 | 'border-left-color',
151 | 'border-left-style',
152 | 'border-left-width',
153 | 'border-radius',
154 | 'border-right',
155 | 'border-right-color',
156 | 'border-right-style',
157 | 'border-right-width',
158 | 'border-spacing',
159 | 'border-style',
160 | 'border-top',
161 | 'border-top-color',
162 | 'border-top-style',
163 | 'border-top-width',
164 | 'border-top-left-radius',
165 | 'border-top-right-radius',
166 | 'border-width',
167 | 'box-shadow',
168 | 'bottom',
169 | 'caption-side',
170 | 'clear',
171 | 'clip',
172 | 'color',
173 | 'content',
174 | 'counter-increment',
175 | 'counter-reset',
176 | 'cue',
177 | 'cue-after',
178 | 'cue-before',
179 | 'cursor',
180 | 'direction',
181 | 'display',
182 | 'elevation',
183 | 'empty-cells',
184 | 'filter',
185 | 'float',
186 | 'font',
187 | 'font-family',
188 | 'font-size',
189 | 'font-size-adjust',
190 | 'font-stretch',
191 | 'font-style',
192 | 'font-variant',
193 | 'font-weight',
194 | 'height',
195 | 'ime-mode',
196 | 'include-source',
197 | 'layer-background-color',
198 | 'layer-background-image',
199 | 'layout-flow',
200 | 'layout-grid',
201 | 'layout-grid-char',
202 | 'layout-grid-char-spacing',
203 | 'layout-grid-line',
204 | 'layout-grid-mode',
205 | 'layout-grid-type',
206 | 'letter-spacing',
207 | 'left',
208 | 'line-break',
209 | 'line-height',
210 | 'list-style',
211 | 'list-style-image',
212 | 'list-style-position',
213 | 'list-style-type',
214 | 'margin',
215 | 'margin-bottom',
216 | 'margin-left',
217 | 'margin-right',
218 | 'margin-top',
219 | 'marker-offset',
220 | 'marks',
221 | 'max-height',
222 | 'max-width',
223 | 'min-height',
224 | 'min-width',
225 | '-ms-filter',
226 | 'opacity',
227 | 'orphans',
228 | 'outline',
229 | 'outline-color',
230 | 'outline-style',
231 | 'outline-width',
232 | 'overflow',
233 | 'overflow-X',
234 | 'overflow-Y',
235 | 'padding',
236 | 'padding-bottom',
237 | 'padding-left',
238 | 'padding-right',
239 | 'padding-top',
240 | 'page',
241 | 'page-break-after',
242 | 'page-break-before',
243 | 'page-break-inside',
244 | 'pause',
245 | 'pause-after',
246 | 'pause-before',
247 | 'pitch',
248 | 'pitch-range',
249 | 'play-during',
250 | 'position',
251 | 'quotes',
252 | 'richness',
253 | 'right',
254 | 'size',
255 | 'speak',
256 | 'speak-header',
257 | 'speak-numeral',
258 | 'speak-punctuation',
259 | 'speech-rate',
260 | 'stress',
261 | 'scrollbar-arrow-color',
262 | 'scrollbar-base-color',
263 | 'scrollbar-dark-shadow-color',
264 | 'scrollbar-face-color',
265 | 'scrollbar-highlight-color',
266 | 'scrollbar-shadow-color',
267 | 'scrollbar-3d-light-color',
268 | 'scrollbar-track-color',
269 | 'table-layout',
270 | 'text-align',
271 | 'text-align-last',
272 | 'text-decoration',
273 | 'text-indent',
274 | 'text-justify',
275 | 'text-offset',
276 | 'text-overflow',
277 | 'text-shadow',
278 | 'text-transform',
279 | 'text-autospace',
280 | 'text-kashida-space',
281 | 'text-underline-position',
282 | 'top',
283 | 'unicode-bidi',
284 | 'vertical-align',
285 | 'visibility',
286 | 'voice-family',
287 | 'volume',
288 | 'white-space',
289 | 'widows',
290 | 'width',
291 | 'word-break',
292 | 'word-spacing',
293 | 'word-wrap',
294 | 'writing-mode',
295 | 'z-index',
296 | 'zoom']);
297 | Csster.addPropertyNames([
298 | '-moz-binding',
299 | '-moz-border-radius',
300 | '-moz-border-radius-topleft',
301 | '-moz-border-radius-topright',
302 | '-moz-border-radius-bottomright',
303 | '-moz-border-radius-bottomleft',
304 | '-moz-border-top-colors',
305 | '-moz-border-right-colors',
306 | '-moz-border-bottom-colors',
307 | '-moz-border-left-colors',
308 | '-moz-box-shadow',
309 | '-moz-opacity',
310 | '-moz-outline',
311 | '-moz-outline-color',
312 | '-moz-outline-style',
313 | '-moz-outline-width',
314 | '-moz-user-focus',
315 | '-moz-user-input',
316 | '-moz-user-modify',
317 | '-moz-user-select'
318 | ]);
319 | Csster.addPropertyNames([
320 | '-webkit-animation',
321 | '-webkit-animation-delay',
322 | '-webkit-animation-direction',
323 | '-webkit-animation-duration',
324 | '-webkit-animation-iteration-count',
325 | '-webkit-animation-name',
326 | '-webkit-animation-play-state',
327 | '-webkit-animation-timing-function',
328 | '-webkit-appearance',
329 | '-webkit-backface-visibility',
330 | '-webkit-background-clip',
331 | '-webkit-background-composite',
332 | '-webkit-background-origin',
333 | '-webkit-background-size',
334 | '-webkit-border-bottom-left-radius',
335 | '-webkit-border-bottom-right-radius',
336 | '-webkit-border-horizontal-spacing',
337 | '-webkit-border-image',
338 | '-webkit-border-radius',
339 | '-webkit-border-top-left-radius',
340 | '-webkit-border-top-right-radius',
341 | '-webkit-border-vertical-spacing',
342 | '-webkit-box-align',
343 | '-webkit-box-direction',
344 | '-webkit-box-flex',
345 | '-webkit-box-flex-group',
346 | '-webkit-box-lines',
347 | '-webkit-box-ordinal-group',
348 | '-webkit-box-orient',
349 | '-webkit-box-pack',
350 | '-webkit-box-reflect',
351 | '-webkit-box-shadow',
352 | '-webkit-box-sizing',
353 | '-webkit-column-break-after',
354 | '-webkit-column-break-before',
355 | '-webkit-column-break-inside',
356 | '-webkit-column-count',
357 | '-webkit-column-gap',
358 | '-webkit-column-rule',
359 | '-webkit-column-rule-color',
360 | '-webkit-column-rule-style',
361 | '-webkit-column-rule-width',
362 | '-webkit-column-width',
363 | '-webkit-columns',
364 | '-webkit-dashboard-region',
365 | '-webkit-line-break',
366 | '-webkit-margin-bottom-collapse',
367 | '-webkit-margin-collapse',
368 | '-webkit-margin-start',
369 | '-webkit-margin-top-collapse',
370 | '-webkit-marquee',
371 | '-webkit-marquee-direction',
372 | '-webkit-marquee-increment',
373 | '-webkit-marquee-repetition',
374 | '-webkit-marquee-speed',
375 | '-webkit-marquee-style',
376 | '-webkit-mask',
377 | '-webkit-mask-attachment',
378 | '-webkit-mask-box-image',
379 | '-webkit-mask-clip',
380 | '-webkit-mask-composite',
381 | '-webkit-mask-image',
382 | '-webkit-mask-origin',
383 | '-webkit-mask-position',
384 | '-webkit-mask-position-x',
385 | '-webkit-mask-position-y',
386 | '-webkit-mask-repeat',
387 | '-webkit-mask-size',
388 | '-webkit-nbsp-mode',
389 | '-webkit-padding-start',
390 | '-webkit-perspective',
391 | '-webkit-perspective-origin',
392 | '-webkit-rtl-ordering',
393 | '-webkit-tap-highlight-color',
394 | '-webkit-text-fill-color',
395 | '-webkit-text-security',
396 | '-webkit-text-size-adjust',
397 | '-webkit-text-stroke',
398 | '-webkit-text-stroke-color',
399 | '-webkit-text-stroke-width',
400 | '-webkit-touch-callout',
401 | '-webkit-transform',
402 | '-webkit-transform-origin',
403 | '-webkit-transform-origin-x',
404 | '-webkit-transform-origin-y',
405 | '-webkit-transform-origin-z',
406 | '-webkit-transform-style',
407 | '-webkit-transition',
408 | '-webkit-transition-delay',
409 | '-webkit-transition-duration',
410 | '-webkit-transition-property',
411 | '-webkit-transition-timing-function',
412 | '-webkit-user-drag',
413 | '-webkit-user-modify',
414 | '-webkit-user-select']);
415 |
416 |
417 | /*
418 | Returns the CSS-correct lowercase property name, if it's recognized
419 | as a property. Null otherwise.
420 | */
421 | Csster.propertyNameOf = function(p) {
422 | name = dasherize(p);
423 | return Csster.propertyNamesHash[name] ? name : null;
424 | }
425 |
426 | Csster.formatProperty = function(p, value) {
427 | p = Csster.propertyNameOf(p);
428 | if (value && typeof value == 'number' &&
429 | p != 'z-index' && p != 'opacity' && p != 'zoom') {
430 | value = '' + value + 'px';
431 | }
432 | return p + ": " + value + ";\r";
433 | };
434 |
435 |
436 | Csster.preprocessProperties = function(properties) {
437 | for (var i = 0; i < Csster.propertyPreprocessors.length; i++) {
438 | Csster.propertyPreprocessors[i].apply(properties, [properties])
439 | }
440 | }
441 |
442 | Csster.trimString = function(s) {
443 | return s.replace(/^\s*/, "").replace(/\s*$/, "");
444 | }
445 |
446 | Csster.expandAndFlatten = function(selector, properties) {
447 |
448 | //selector = selector.trim();
449 |
450 | Csster.preprocessProperties(properties);
451 |
452 | // ...all properties that look like properties
453 | // Output selector...
454 | var props = {};
455 | for (var p in properties) {
456 | if (Csster.propertyNameOf(p)) {
457 | props[p] = properties[p];
458 | delete properties[p];
459 | }
460 | }
461 |
462 | // ... finally, sub-selectors
463 | var rules = [
464 | {sel: selector, props: props}
465 | ];
466 | for (p in properties) {
467 |
468 | if (typeof properties[p] === 'string' || typeof properties[p] === 'number') {
469 | throw "Unknown CSS property \"" + p + "\". Rule rejected.";
470 | }
471 |
472 | var subs = p.split(',');
473 | for (var s = 0; s < subs.length; s++) {
474 | var str = subs[s];
475 | var ampRule = (str.substr(0, 1) == '&');
476 | subs[s] = selector + (ampRule ? str.substr(1) : ' ' + Csster.trimString(str));
477 | }
478 | rules.push(Csster.expandAndFlatten(subs.join(','), properties[p]));
479 | }
480 |
481 | return rules;
482 | }
483 |
484 |
485 | Csster.insertStylesheet = function (rules) {
486 |
487 | // IE doesn't seem to matter: http://msdn.microsoft.com/en-us/library/ms535871(v=VS.85).aspx
488 |
489 | var formatProperties = function(props) {
490 | var result = '';
491 | for (var p in props) {
492 | result += Csster.formatProperty(p, props[p]);
493 | }
494 | return result;
495 | };
496 |
497 | // convert rules to textual string
498 | var s = '';
499 | for (var i = 0; i < rules.length; i++) {
500 | s += rules[i].sel + ' { ';
501 | s += formatProperties(rules[i].props);
502 | s += '}\r';
503 | }
504 |
505 | var e = document.createElement('STYLE');
506 | var a = document.createAttribute('type');
507 | a.nodeValue = 'text/css';
508 | e.setAttributeNode(a);
509 | var head = document.getElementsByTagName('HEAD')[0];
510 | head.appendChild(e);
511 | try {
512 | e.appendChild(document.createTextNode(s));
513 | } catch(e) {
514 | var ss = document.styleSheets[document.styleSheets.length - 1];
515 | ss.cssText = '' + ss.cssText + s;
516 | }
517 | }
518 |
519 |
520 | Csster.processRules = function(input) {
521 |
522 | // @param cssRule { selector: { prop1: value, prop2: value, subselector: { prop3: value}}
523 | var resolveRuleHash = function(cssRule) {
524 | var result = [];
525 | for (var key in cssRule) {
526 | result.push(Csster.expandAndFlatten(key, cssRule[key]));
527 | }
528 | return result;
529 | };
530 |
531 |
532 | var rules = [];
533 | arrayEach(arrayFlatten([input]),function(r) {
534 | rules.push(resolveRuleHash(r));
535 | });
536 | rules = arrayFlatten(rules);
537 |
538 | Csster.postProcessRules(rules);
539 | return rules;
540 | };
541 |
542 | Csster.postProcessRules = function(rules) {
543 | for (var i = 0; i < Csster.rulesPostProcessors.length; i++) {
544 | Csster.rulesPostProcessors[i].apply(rules, [rules])
545 | }
546 | };
547 |
548 |
549 | Csster.style = function(cssRules) {
550 | var s = Csster.processRules(cssRules);
551 | Csster.insertStylesheet(s);
552 | };
553 |
554 |
555 |
556 |
557 |
558 | /*
559 | * Functions that return a set of properties and their values.
560 | * They can be inserted as style rules using "has" property.
561 | */
562 |
563 | /**
564 | * Return rounded corner properties. Call with an optional side and a radius.
565 | *
566 | * roundedCorners(10);
567 | * roundedCorners('left', 8);
568 | * roundedCorners('tl', 6);
569 | *
570 | * @param side tl, tr, bl, br, left, right, top or bottom or "all", the default
571 | * @param radius pixel measurement
572 | */
573 | function roundedCorners(side, radius) {
574 | if (!radius) {
575 | radius = side || 10;
576 | side = 'all';
577 | }
578 | if (side == 'all') {
579 | return {
580 | '-moz-border-radius': radius,
581 | 'border-radius': radius,
582 | '-webkit-border-radius': radius
583 | // behavior: 'url(src/border-radius.htc)',
584 | // position: 'relative',zoom: '1'
585 | }
586 | } else {
587 | var rules = {};
588 | if (side == 'tl' || side == 'top' || side == 'left') {
589 | rules['-moz-border-radius-topleft'] = radius;
590 | rules['-webkit-border-top-left-radius'] = radius;
591 | rules['border-top-left-radius'] = radius;
592 | }
593 | if (side == 'tr' || side == 'top' || side == 'right') {
594 | rules['-webkit-border-top-right-radius'] = radius;
595 | rules['-moz-border-radius-topright'] = radius;
596 | rules['border-top-right-radius'] = radius;
597 | }
598 | if (side == 'bl' || side == 'bottom' || side == 'left') {
599 | rules['-webkit-border-bottom-left-radius'] = radius;
600 | rules['-moz-border-radius-bottomleft'] = radius;
601 | rules['border-bottom-left-radius'] = radius;
602 | }
603 | if (side == 'br' || side == 'bottom' || side == 'right') {
604 | rules['-webkit-border-bottom-right-radius'] = radius;
605 | rules['-moz-border-radius-bottomright'] = radius;
606 | rules['border-bottom-right-radius'] = radius;
607 | }
608 | return rules;
609 | }
610 | }
611 |
612 |
613 | /*
614 | Cross-browser box shadow code.
615 |
616 | offsetOrDirection: an array holding the x offset and y offset
617 | radius: radius of the shadow
618 | color: color of the shadow
619 |
620 | */
621 | function boxShadow(offsetOrDirection, radius, color) {
622 | var xOffset, yOffset, strength, direction;
623 | if (typeof offsetOrDirection.length == 'undefined') {
624 | throw 'Not yet supported'
625 | } else if (offsetOrDirection.length == 2) {
626 | xOffset = offsetOrDirection[0];
627 | yOffset = offsetOrDirection[1];
628 | strength = 4;
629 | direction = 135; // should be angle (atan) of above numbers
630 | } else {
631 | throw "boxShadow requires a direction (degree) or [xOffset, yOffset] in px measurements."
632 | }
633 |
634 | return {
635 | '-moz-box-shadow': '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
636 | '-webkit-box-shadow': '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
637 | boxShadow: '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
638 | '-ms-filter': "progid:DXImageTransform.Microsoft.Shadow(Strength=" + strength + ", Direction=" + direction + ", Color='" + color + "')",// IE 8
639 | filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=" + strength + ", Direction=" + direction + ", Color='" + color + "')" // IE 5.5 - 7
640 | };
641 | }
642 |
643 | /**
644 | Basic Phark image replacement, defined here:
645 | http://www.mezzoblue.com/tests/revised-image-replacement/
646 |
647 | Supports sprites with option image positioning parameters (which default to 0).
648 | These values will (generally) be negative.
649 |
650 | width: width in pixels
651 | height: height in pixels
652 | img: url for the image, suitable for putting into a url() wrapper
653 |
654 | */
655 | function imageReplacement(width, height, img, imgXPosition, imgYPosition) {
656 | if (typeof width == 'undefined' || typeof height == 'undefined' || typeof img == 'undefined') {
657 | throw "imageReplacement() requires width, height and img";
658 | }
659 | return {
660 | display: 'block',
661 | width: width,
662 | height: height,
663 | backgroundImage: 'url(' + img + ')',
664 | backgroundRepeat: 'no-repeat',
665 | backgroundPosition: '' + (imgXPosition || 0) + 'px ' + (imgYPosition || 0) + 'px',
666 | textIndent: -20000,
667 | overflow: 'hidden'
668 | };
669 | }
670 |
671 |
672 | function clearfix() {
673 | css = {
674 | display: 'inline-block',
675 | '&:after': {
676 | content: ' ',
677 | display: 'block',
678 | width: 0,
679 | height: 0,
680 | lineHeight: 0,
681 | fontSize: 0,
682 | clear: 'both',
683 | visibility: 'hidden'
684 | }
685 | };
686 | if (Csster.browser.msie) {
687 | css['zoom'] = '1'
688 | }
689 | return css;
690 | }
691 |
692 |
693 | // http://stackoverflow.com/questions/148251/css-centering-tricks
694 | function horizontalCentering(width) {
695 | return {
696 | width: width,
697 | position: 'absolute',
698 | left: '50%',
699 | marginLeft: -(width / 2)
700 | }
701 | }
702 |
703 | // http://stackoverflow.com/questions/148251/css-centering-tricks
704 | function verticalCentering(height) {
705 | return {
706 | height: height,
707 | position: 'absolute',
708 | top: '50%',
709 | marginTop: -(height / 2)
710 | }
711 | }
712 |
713 | function linearGradient(startingPoint, color1, color2, etc) {
714 | var prefix = '',
715 | result = '';
716 | if (Csster.browser.webkit) {
717 | prefix = '-webkit';
718 | } else if (Csster.browser.mozilla) {
719 | prefix = '-moz';
720 | }
721 |
722 |
723 | var stops = [];
724 | for (var i = 0; i < arguments.length; i++) {
725 | var argument = arguments[i];
726 | if (typeof argument == 'string') {
727 | stops.push(argument);
728 | } else if ($.isArray(argument)) {
729 | for (var j = 0; j < argument.length; j++) {
730 | stops.push(argument[j]);
731 | }
732 | } else {
733 | for (p in arguments[i]) {
734 | stops.push(argument[p] + (p != 0 && p != '100' ? (' ' + p + '%') : '') );
735 | }
736 | }
737 | }
738 |
739 |
740 | result = prefix + '-linear-gradient(';
741 | for (i = 0; i < stops.length; i++) {
742 | if (i !== 0) result += ', ';
743 | result += stops[i];
744 | }
745 | result += ')';
746 | return result;
747 | }
748 |
749 | // },generateLinearGradient:function() {
750 | // var props = c.gradientProps,
751 | // g = props.type + "-gradient(",e = "";
752 | // $sample = c.sample,
753 | // gCount = a.getPaletteLength(),
754 | // palette = a.getPalette();
755 | // if (props.xStart !== props.xEnd) {
756 | // g = g + props.xStart + " "
757 | // }
758 | // if (props.yStart !== props.yEnd) {
759 | // g = g + props.yStart
760 | // }
761 | // g = g + ", ";
762 | // var h = c.getColor;
763 | // $.each(palette, function(i, j) {
764 | // if (i > 0) {
765 | // e = e + " "
766 | // }
767 | // e = e + h(j) + " " + j.position + "%,"
768 | // });
769 | // g = g + e;
770 | // g = g.substr(0, g.length - 1) + ")";
771 | // return g
772 | // generateWebkitGradient:function() {
773 | // var j = c.gradientProps,l = "-webkit-gradient(" + j.type + "," + c.fetchGradientStart() + "," + c.fetchGradientEnd() + ",",g = "";
774 | // var e = a.getPalette(),f = e.length,k,m;
775 | // for (var h = 0; h < f; h++) {
776 | // m = e[h];
777 | // k = (m.position / 100);
778 | // g = g + "color-stop(" + k + ", rgb(" + m.rgb.r + "," + m.rgb.g + "," + m.rgb.b + ")),"
779 | // }
780 | // l = l + g;
781 | // l = l.substr(0, l.length - 1) + ");";
782 | // return l
783 |
784 |
785 | (function() {
786 |
787 |
788 | var HTML4_COLORS = {
789 | 'black' : '#000000',
790 | 'silver' : '#c0c0c0',
791 | 'gray' : '#808080',
792 | 'white' : '#ffffff',
793 | 'maroon' : '#800000',
794 | 'red' : '#ff0000',
795 | 'purple' : '#800080',
796 | 'fuchsia': '#ff00ff',
797 | 'green' : '#008000',
798 | 'lime' : '#00ff00',
799 | 'olive' : '#808000',
800 | 'yellow' : '#ffff00',
801 | 'navy' : '#000080',
802 | 'blue' : '#0000ff',
803 | 'teal' : '#008080',
804 | 'aqua' : '#00ffff'
805 | };
806 |
807 | /*
808 | Use a singleton cache of all color strings we see.
809 | Each key points to a structure, which can have hex, rgb, etc. values in it.
810 | */
811 | var immutableCache = {};
812 |
813 | // returns (or creates) the cached color structure
814 | var colorCache = function(c) {
815 | if (!immutableCache[c]) immutableCache[c] = {};
816 | return immutableCache[c];
817 | };
818 |
819 | String.prototype.toHexColor = function() {
820 | if (this.substr(0, 1) == '#' && this.length == 7) {
821 | colorCache(this)['hex'] = '' + this;
822 | } else if (this.substr(0, 1) == '#' && this.length == 4) {
823 | colorCache(this)['hex'] = '#' + this.substr(1, 1) + this.substr(1, 1) +
824 | this.substr(2, 1) + this.substr(2, 1) +
825 | this.substr(3, 1) + this.substr(3, 1);
826 | } else {
827 | colorCache(this)['hex'] = HTML4_COLORS[this];
828 | }
829 | return colorCache(this)['hex'];
830 | };
831 |
832 | String.prototype.toRGB = function() {
833 | var cache = colorCache(this);
834 | if (cache.rgb) return cache.rgb;
835 | var h = this.toHexColor();
836 | cache.rgb = [parseInt(h.substr(1, 2), 16),parseInt(h.substr(3, 2), 16),parseInt(h.substr(5, 2), 16)];
837 | return cache.rgb;
838 | };
839 |
840 | String.prototype.red = function() {
841 | return this.toRGB()[0];
842 | };
843 | String.prototype.green = function() {
844 | return this.toRGB()[1];
845 | };
846 | String.prototype.blue = function() {
847 | return this.toRGB()[2];
848 | };
849 | String.prototype.lighten = function(percent) {
850 | var hsl = this.toHSL();
851 | var newHSL = [hsl[0],hsl[1],Math.min(100, hsl[2] + percent)];
852 | return Csster.hslToHexColor(newHSL);
853 | };
854 |
855 | String.prototype.darken = function(percent) {
856 | var hsl = this.toHSL();
857 | var newHSL = [hsl[0],hsl[1],Math.max(0, hsl[2] - percent)];
858 | return Csster.hslToHexColor(newHSL);
859 | };
860 |
861 |
862 | /**
863 | * Increase or decrease the saturation of a color.
864 | * @param percent positive values increase saturation, negative values desaturate.
865 | */
866 | String.prototype.saturate = function(percent) {
867 | var hsl = this.toHSL();
868 | var newHSL = [hsl[0],Math.min(100, Math.max(0, hsl[1] + percent)), hsl[2]];
869 | return Csster.hslToHexColor(newHSL);
870 | };
871 |
872 | // [0..360, 0..100, 0.100]
873 | // Ref. http://www.easyrgb.com/index.php?X=MATH&H=18#text18
874 | String.prototype.toHSL = function() {
875 | var rgb = this.toRGB();
876 | var r = this.red() / 255,g = this.green() / 255,b = this.blue() / 255;
877 | var max = Math.max(r, g, b), min = Math.min(r, g, b);
878 | var d = max - min; // Delta RGB value
879 | var h, s, l = (max + min) / 2;
880 |
881 |
882 | if (d == 0) { // gray?, no chroma...
883 | h = 0; // HSl results from 0 to 1
884 | s = 0;
885 | } else {
886 | // Chromatic data...
887 | s = d / ( l < 0.5 ? ( max + min ) : ( 2 - max - min ));
888 |
889 | var del_R = ( ( ( max - r ) / 6 ) + ( d / 2 ) ) / d;
890 | var del_G = ( ( ( max - g ) / 6 ) + ( d / 2 ) ) / d;
891 | var del_B = ( ( ( max - b ) / 6 ) + ( d / 2 ) ) / d;
892 |
893 | if (r == max) h = del_B - del_G;
894 | else if (g == max) h = ( 1 / 3 ) + del_R - del_B;
895 | else if (b == max) h = ( 2 / 3 ) + del_G - del_R;
896 |
897 | if (h < 0) h += 1;
898 | if (h > 0) h -= 1;
899 | }
900 |
901 | h = Math.round(h * 360);
902 | if (h < 0) h += 360;
903 |
904 | var cache = colorCache(this);
905 | cache.hsl = [h, Math.round(s * 100), Math.round(l * 100)];
906 | return cache.hsl;
907 | };
908 |
909 | Csster.hslToHexColor = function(h, s, l) {
910 | if (isArray(h)) {
911 | l = h[2] || 0;
912 | s = h[1] || 0;
913 | h = h[0] || 0;
914 | }
915 | //HSL from 0 to 1
916 | s = s / 100.0;
917 | l = l / 100.0;
918 | h = ((h + 360) % 360.0) / 360;
919 |
920 | function hsl2rgb(h, s, l) {
921 | // HSL 0 to 1
922 | //RGB results from 0 to 255
923 | var r,g,b;
924 |
925 | if (s == 0) {
926 | r = l * 255;
927 | g = l * 255;
928 | b = l * 255;
929 | } else {
930 | var var_2 = (l < 0.5) ? l * ( 1 + s ) : (( l + s ) - ( s * l ));
931 | var var_1 = 2 * l - var_2;
932 |
933 | r = 255 * h2rgb(var_1, var_2, h + ( 1 / 3 ));
934 | g = 255 * h2rgb(var_1, var_2, h);
935 | b = 255 * h2rgb(var_1, var_2, h - ( 1 / 3 ));
936 | }
937 | return [r,g,b];
938 | }
939 |
940 | function h2rgb(v1, v2, vH) {
941 | if (vH < 0) vH += 1;
942 | if (vH > 1) vH -= 1;
943 | if (( 6 * vH ) < 1) return ( v1 + ( v2 - v1 ) * 6 * vH );
944 | if (( 2 * vH ) < 1) return ( v2 );
945 | if (( 3 * vH ) < 2) return ( v1 + ( v2 - v1 ) * ( ( 2 / 3 ) - vH ) * 6 );
946 | return ( v1 );
947 | }
948 |
949 | function hex2(n) {
950 | var h = Math.round(n).toString(16);
951 | if (h.length == 1) h = '0' + h;
952 | return h.substr(0, 1) + h.substr(1, 1);
953 | }
954 |
955 | var rgb = hsl2rgb(h, s, l);
956 | return "#" + hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
957 | };
958 |
959 |
960 | })();
961 |
962 |
963 | /*
964 | Returns a function to process macros with the given property key
965 | To use:
966 |
967 | Csster.propertyPreprocessors.push(Csster.macroPreprocessor('macro'));
968 |
969 | */
970 | Csster.macroPreprocessor = function(macroPropertyName) {
971 | return function(properties) {
972 | function extractMacros(p) {
973 | var props = {};
974 | var a = arrayFlatten([p]); // support single or multiple sets of properties
975 | for (var i = 0; i < a.length; i++) {
976 | for (var mp in a[i]) {
977 | if (mp == macroPropertyName) {
978 | mergeHashInto(props, extractMacros(a[i][mp]));
979 | } else {
980 | props[mp] = a[i][mp];
981 | }
982 | }
983 | }
984 | return props;
985 | }
986 |
987 | var macros = properties[macroPropertyName];
988 | if (macros) {
989 | mergeHashInto(properties, extractMacros(macros));
990 | delete properties[macroPropertyName]
991 | }
992 | }
993 | };
994 |
995 |
996 |
997 | /**
998 | * Rule post-processor to remove "redundant" id selectors. For example,
999 | * if the generated selected ends up being '#a #b #c', this post-processor
1000 | * will reduce it to '#c'. In general this is great, as it makes the rules
1001 | * more readable on the output side. You are, however, losing the specificity,
1002 | * creating a cascade you might not expect.
1003 | *
1004 | * To wire it in:
1005 | * Csster.rulesPostProcessors.push(Csster.compressSelectors);
1006 | */
1007 | Csster.compressSelectors = function(rules) {
1008 | for (var i = 0; i < rules.length; i++) {
1009 | while (rules[i].sel.match(/.*#.*#.*/)) {
1010 | rules[i].sel = rules[i].sel.replace(/^.*#.*#/, '#');
1011 | }
1012 | }
1013 | };
1014 |
1015 | Csster.propertyPreprocessors.push(Csster.macroPreprocessor('has'));
1016 | if (typeof jQuery != 'undefined') {
1017 | (function($) {
1018 | $.fn.csster = function(rules) {
1019 | var newRules = {};
1020 | newRules[this.selector] = rules;
1021 | Csster.style(newRules);
1022 | return this;
1023 | }
1024 | })(jQuery);
1025 | }
--------------------------------------------------------------------------------
/scripts/git-cheatsheet.js:
--------------------------------------------------------------------------------
1 | var clickMode = false;
2 |
3 | function showDocs(doc, cmd) {
4 | var $info = $('#info');
5 | $info.find('.cmd').html('' + cmd + '');
6 | $info.find('.doc').html(doc);
7 | }
8 |
9 | function showDocsForElement($el) {
10 | var doc = $el.attr('data-docs') || '',
11 | cmd = $el.html();
12 | showDocs(doc, cmd);
13 | }
14 |
15 | function currentLoc() {
16 | return $('#diagram .loc.current').attr('id');
17 | }
18 |
19 | function nextLoc() {
20 | selectLoc(next(locs(), currentLoc()));
21 | }
22 |
23 | function prevLoc() {
24 | selectLoc(prev(locs(), currentLoc()));
25 | }
26 |
27 | function locs() {
28 | var locs = $('#diagram>.loc').map(function () {
29 | return this.id
30 | });
31 | return $.makeArray(locs);
32 | }
33 |
34 | function selectLoc(id) {
35 | // console.log('selectLoc id=',id)
36 | $('#commands>div').removeClass('selected');
37 | clickMode = false;
38 | $('body').removeClass('stash workspace index local_repo remote_repo').addClass(id);
39 | $('#diagram .loc.current').removeClass('current');
40 | $('#' + id).addClass('current');
41 |
42 | showDocsForElement($('#' + id));
43 | window.location.href = '#loc=' + id + ';';
44 |
45 | _gaq.push(['_trackEvent', 'git-cheatsheet', 'select-loc', id, null]);
46 | }
47 |
48 | $(function () {
49 |
50 | (function addBarsToLocDivs() {
51 | jQuery('.loc').append('');
52 | })();
53 |
54 | $('body').keydown(function (e) {
55 | var $cmds = $('#commands>div:visible').toArray();
56 | if (e.keyCode == 39) {
57 | nextLoc();
58 | return false;
59 | } else if (e.keyCode == 37) {
60 | prevLoc();
61 | return false;
62 | } else if (e.keyCode == 40) {
63 | var cmd = next($cmds, $('#commands>div.selected')[0]);
64 | if (cmd) selectCommand($(cmd));
65 | return false;
66 | } else if (e.keyCode == 38) {
67 | var cmd = prev($cmds, $('#commands>div.selected')[0]);
68 | if (cmd) selectCommand($(cmd));
69 | return false;
70 | } else {
71 | // console.log(e);
72 | }
73 | });
74 |
75 | var left_offset = $('#commands').offset().left;
76 | for (var i = 0, c; i < commands.length; i++) {
77 | c = commands[i];
78 | var left = $("#" + c.left + " div.bar").offset().left - left_offset;
79 | var right = $("#" + c.right + " div.bar").offset().left - left_offset;
80 | var width = right - left;
81 | if (width < 1) {
82 | left -= 90;
83 | width = 200;
84 | } else {
85 | left += 10;
86 | width -= 20;
87 | }
88 | var $e = $("").
89 | css('margin-left', left + 'px').
90 | css('width', width + 'px').
91 | addClass(c.left).
92 | addClass(c.right).
93 | addClass(c.direction);
94 | $('#commands').append($e);
95 |
96 | if (c.docs) {
97 | $e.attr('data-docs', esc(c.docs));
98 | }
99 | }
100 |
101 | $('[data-docs]').live('mouseover', function () {
102 | if ($(this).parents('#commands').length) return; // handled separately
103 | showDocsForElement($(this));
104 | _gaq.push(['_trackEvent', 'git-cheatsheet', 'mouseover', $(this).text(), null]);
105 | });
106 |
107 | $.fn.hoverClass = function (klass) {
108 | return $(this).hover(function () {
109 | $(this).addClass(klass);
110 | }, function () {
111 | $(this).removeClass(klass);
112 | });
113 | };
114 |
115 | function selectCommand($cmd) {
116 | $('#commands>div').removeClass('selected');
117 | $cmd.addClass('selected');
118 |
119 | var doc = $cmd.attr('data-docs') || '',
120 | cmd = 'git ' + $cmd.html();
121 | showDocs(doc, cmd);
122 |
123 | _gaq.push(['_trackEvent', 'git-cheatsheet', 'select', 'git ' + $cmd.text(), null]);
124 | }
125 |
126 | $('#commands>div').mouseover(function () {
127 | if ($(this).hasClass('selected') || clickMode) return;
128 | selectCommand($(this));
129 | });
130 |
131 | $("#diagram .loc").click(function () {
132 | selectLoc(this.id);
133 | }).hoverClass('hovered');
134 |
135 | var oldBodyClass = '';
136 | $('div.stash,div.workspace,div.index,div.local_repo,div.remote_repo').hover(function () {
137 | oldBodyClass = $('body').attr('class');
138 | },
139 | function () {
140 | $('body').attr('class', oldBodyClass);
141 | });
142 |
143 | // Highlight given location specified by hash.
144 | var hash = window.location.hash;
145 | if (hash && hash.length > 1) {
146 | var m = hash.match(/loc=([^;]*);/);
147 | if (m && m.length == 2) {
148 | selectLoc(m[1]);
149 | }
150 | }
151 |
152 | });
--------------------------------------------------------------------------------
/scripts/styles.js:
--------------------------------------------------------------------------------
1 | var colors = {
2 | stash: '#bf3030',
3 | workspace: '#ff4040',
4 | index: '#ff9640',
5 | local_repo: '#cd0074',
6 | remote_repo:'#bf3030'
7 | };
8 |
9 |
10 | var upColor = colors.workspace.darken(10).saturate(-30);
11 | var dnColor = colors.workspace.darken(0).saturate(-30);
12 | var statusColor = '#846C6C';
13 |
14 | var c;
15 |
16 | var css = {
17 | 'html,body': {
18 | margin: 0,
19 | padding: 0,
20 | background: 'url(images/vCanvas.jpg)'
21 | },
22 | 'a,a:link,a:visited': {
23 | color: colors.local_repo,
24 | textDecoration: 'none'
25 | },
26 | 'a:hover': {
27 | color: colors.local_repo.darken(10),
28 | textDecoration: 'underline'
29 | },
30 | 'em:before':{
31 | opacity:.5,
32 | content:'"<"'
33 | },
34 | 'em:after':{
35 | opacity:.5,
36 | content:'">"'
37 | },
38 | 'span.optional:before':{
39 | opacity:.5,
40 | content:'"["'
41 | },
42 | 'span.optional:after':{
43 | opacity:.5,
44 | content:'"]"'
45 | },
46 | '#hd': {
47 | '*': {
48 | margin: 0,
49 | padding: 0
50 | },
51 | h1: {
52 | font: '50px ImpactLabelRegular, ImpactLabelReversedRegular, verdana'
53 | },
54 | h2: {
55 | paddingTop: 3,
56 | textAlign: 'right',
57 | color: colors.local_repo,
58 | font: 'normal 25px ImpactLabelReversedRegular,ImpactLabelRegular, verdana'
59 | },
60 | h3: {
61 | textAlign: 'right',
62 | marginTop: 2,
63 | color: '#333',
64 | font: '16px/16px courier, monospaced'
65 | },
66 | h6: {
67 | textAlign: 'right',
68 | color: colors.local_repo.saturate(-60).lighten(10),
69 | position: 'fixed',
70 | bottom: 10,
71 | left: 20,
72 | font: '12px courier, monospaced'
73 | }
74 | },
75 | '#diagram': {
76 | marginTop: 20,
77 | position: 'relative',
78 | height: '6.3in',
79 | marginBottom: '2cm',
80 | padding: '1px 0'
81 | },
82 | '.loc': {
83 | position: 'relative',
84 | height: '100%',
85 | cursor: 'pointer',
86 | opacity:.7,
87 | has: boxShadow([3,3], 2, '#ccc'),
88 | '.bar': {
89 | position: 'absolute',
90 | left: '45%',
91 | top: 50,
92 | border: '1px dashed white',
93 | 'border-top': 'none',
94 | width: 10,
95 | height: 535
96 | },
97 | 'label': {
98 | position: 'absolute',
99 | top: 0,
100 | width: '100%',
101 | 'text-align': 'center',
102 | padding: '20px 0',
103 | font: '30px ImpactLabelReversedRegular, ImpactLabelRegular, verdana',
104 | color: '#333'
105 | },
106 | 'p': {
107 | bottom: 0,
108 | position: 'absolute',
109 | padding: '0 20px',
110 | font: '15px courier, monospaced',
111 | color: 'white',
112 | visibility: 'hidden'
113 | },
114 | '&.hovered': {
115 | has: boxShadow([2,2], 6, '#999')
116 | },
117 | '&.current': {
118 | has: boxShadow([4,4], 6, '#555'),
119 | p: {
120 | visibility: 'visible'
121 | },
122 | 'label': {
123 | color: 'white'
124 | }
125 | }
126 |
127 | },
128 | '#commands': {
129 | position: 'absolute',
130 | top: 90,
131 | left: 0,
132 | width: '100%',
133 | font: '15px courier, monospaced',
134 | height: 0,
135 | '> div': {
136 | color: '#dddddd',
137 | marginBottom: 4,
138 | 'float': 'left',
139 | clear: 'left',
140 | padding: '2px 5px',
141 | // height: 16,
142 | lineHeight: 13,
143 | position: 'relative',
144 | opacity:0.3,
145 | display:'none',
146 | // whiteSpace:'nowrap',
147 | // textOverflow:'ellipsis',
148 | // overflow:'hidden',
149 | cursor: 'pointer',
150 | '&.selected': {
151 | padding: '2px 5px',
152 | // has: boxShadow([1,1], 5, '#992667')
153 | has: boxShadow([1,1], 3, '#999'),
154 | opacity:0.8
155 | },
156 | '&.up': {
157 | color: upColor.lighten(50),
158 | '> .arrow': {
159 | width: 0,
160 | height: 0,
161 | border: '9px solid transparent',
162 | position: 'absolute',
163 | right: '-18px',
164 | top: 0
165 | }
166 | },
167 | '&.dn': {
168 | color: dnColor.lighten(50),
169 | '> .arrow': {
170 | width: 0,
171 | height: 0,
172 | border: '9px solid transparent',
173 | position: 'absolute',
174 | left: '-18px',
175 | top: 0
176 | }
177 | },
178 | '&.status': {
179 | 'border-color': statusColor.lighten(20),
180 | 'background-color': statusColor,
181 | color: statusColor.lighten(50),
182 | '&.selected': {
183 | 'background-color': statusColor.darken(5)
184 | }
185 | }
186 | }
187 | },
188 | '#info': {
189 | position: 'fixed',
190 | bottom: 0,
191 | left: 0,
192 | width: '100%',
193 | padding: '10px 0',
194 | font: '15px/20px courier, monospaced',
195 | zIndex: 1,
196 | '.screen': {
197 | zIndex: -1,
198 | position: 'absolute',
199 | left: -20,
200 | top: 0,
201 | height: '100%',
202 | width: '150%',
203 | backgroundColor: '#F6EBD9',
204 | opacity: 0.5
205 | },
206 | // height: 60,
207 | '.cmd, .doc': {
208 | minHeight: '3em',
209 | fontSize: 18
210 | },
211 | '.cmd':{
212 | float: 'left',
213 | marginRight: 20,
214 | width: '35%',
215 | color: 'black',
216 | textAlign: 'right',
217 | textDecoration: 'underline'
218 | },
219 | '.doc':{
220 | float: 'left',
221 | width: '55%',
222 | color: 'black'.lighten(30)
223 | }
224 | },
225 | '#remote_repo .bar, #local_repo .bar': {
226 | top: 85,
227 | height: 500
228 | }
229 | };
230 |
231 | $(function() {
232 | $.each(['stash','workspace','index','local_repo','remote_repo'], function(index, value) {
233 | var width = $('#' + value).innerWidth();
234 | $('#' + value).css('width', width - 2);
235 |
236 | css['#' + value] = {
237 | border: '1px dotted transparent',// + colors[value],
238 | color: colors[value],
239 | backgroundColor: colors[value].saturate(-50).lighten(20)
240 | };
241 | css['#' + value + ' .bar'] = { borderColor: colors[value].darken(20)};
242 | css['body.' + value + ' #' + value] = {
243 | color: 'white',
244 | backgroundColor: colors[value].lighten(0)
245 | };
246 | css['body.' + value + ' #commands > div.' + value] = {
247 | display: 'block',
248 | opacity:0.9,
249 | '&.selected': {
250 | opacity: 1.0
251 | }
252 | };
253 |
254 | css['body.' + value + ' #commands'] = {
255 | 'div.up':{
256 | backgroundColor:c = colors[value].darken(0).saturate(-10),
257 | borderColor:c,
258 | '> .arrow':{
259 | 'border-left-color':c
260 | },
261 | '&.selected':{
262 | 'background-color':c.darken(10),
263 | '> .arrow':{
264 | 'border-left-color':c.darken(10)
265 | }
266 | }
267 | },
268 | 'div.dn':{
269 | backgroundColor:c = colors[value].darken(5).saturate(-10),
270 | borderColor:c,
271 | '> .arrow':{
272 | 'border-right-color':c
273 | },
274 | '&.selected':{
275 | 'background-color':c.darken(10),
276 | '> .arrow':{
277 | 'border-right-color':c.darken(10)
278 | }
279 | }
280 | }
281 | }
282 | });
283 |
284 |
285 | Csster.style(css);
286 |
287 | });
288 |
--------------------------------------------------------------------------------
/styles/1200.css:
--------------------------------------------------------------------------------
1 | html,body { padding: 0; margin: 0 }
2 |
3 | /* Containers
4 | ----------------------------------------------------------------------------------------------------*/
5 | .container_16 {
6 | margin-left: auto;
7 | margin-right: auto;
8 | width: 1200px;
9 | }
10 |
11 |
12 | /* Grid >> Children (Alpha ~ First, Omega ~ Last)
13 | ----------------------------------------------------------------------------------------------------*/
14 |
15 | .alpha {
16 | margin-left: 0 !important;
17 | }
18 |
19 | .omega {
20 | margin-right: 0 !important;
21 | }
22 |
23 |
24 | /* Grid >> Global
25 | ----------------------------------------------------------------------------------------------------*/
26 |
27 | .grid_1,
28 | .grid_2,
29 | .grid_3,
30 | .grid_4,
31 | .grid_5,
32 | .grid_6,
33 | .grid_7,
34 | .grid_8,
35 | .grid_9,
36 | .grid_10,
37 | .grid_11,
38 | .grid_12,
39 | .grid_13,
40 | .grid_14,
41 | .grid_15,
42 | .grid_16{
43 | display:inline;
44 | float: left;
45 | position: relative;
46 | margin-left: 10.0px;
47 | margin-right: 10.0px;
48 | }
49 |
50 |
51 | /* Grid >> 2 Columns
52 | ----------------------------------------------------------------------------------------------------*/
53 |
54 | .container_16 .grid_1{
55 | width:55px;
56 | }
57 |
58 | .container_16 .grid_2{
59 | width:130px;
60 | }
61 |
62 | .container_16 .grid_3{
63 | width:205px;
64 | }
65 |
66 | .container_16 .grid_4{
67 | width:280px;
68 | }
69 |
70 | .container_16 .grid_5{
71 | width:355px;
72 | }
73 |
74 | .container_16 .grid_6{
75 | width:430px;
76 | }
77 |
78 | .container_16 .grid_7{
79 | width:505px;
80 | }
81 |
82 | .container_16 .grid_8{
83 | width:580px;
84 | }
85 |
86 | .container_16 .grid_9{
87 | width:655px;
88 | }
89 |
90 | .container_16 .grid_10{
91 | width:730px;
92 | }
93 |
94 | .container_16 .grid_11{
95 | width:805px;
96 | }
97 |
98 | .container_16 .grid_12{
99 | width:880px;
100 | }
101 |
102 | .container_16 .grid_13{
103 | width:955px;
104 | }
105 |
106 | .container_16 .grid_14{
107 | width:1030px;
108 | }
109 |
110 | .container_16 .grid_15{
111 | width:1105px;
112 | }
113 |
114 | .container_16 .grid_16{
115 | width:1180px;
116 | }
117 |
118 |
119 | /* Prefix Extra Space >> 2 Columns
120 | ----------------------------------------------------------------------------------------------------*/
121 |
122 | .container_16 .prefix_1 {
123 | padding-left:75px;
124 | }
125 |
126 | .container_16 .prefix_2 {
127 | padding-left:150px;
128 | }
129 |
130 | .container_16 .prefix_3 {
131 | padding-left:225px;
132 | }
133 |
134 | .container_16 .prefix_4 {
135 | padding-left:300px;
136 | }
137 |
138 | .container_16 .prefix_5 {
139 | padding-left:375px;
140 | }
141 |
142 | .container_16 .prefix_6 {
143 | padding-left:450px;
144 | }
145 |
146 | .container_16 .prefix_7 {
147 | padding-left:525px;
148 | }
149 |
150 | .container_16 .prefix_8 {
151 | padding-left:600px;
152 | }
153 |
154 | .container_16 .prefix_9 {
155 | padding-left:675px;
156 | }
157 |
158 | .container_16 .prefix_10 {
159 | padding-left:750px;
160 | }
161 |
162 | .container_16 .prefix_11 {
163 | padding-left:825px;
164 | }
165 |
166 | .container_16 .prefix_12 {
167 | padding-left:900px;
168 | }
169 |
170 | .container_16 .prefix_13 {
171 | padding-left:975px;
172 | }
173 |
174 | .container_16 .prefix_14 {
175 | padding-left:1050px;
176 | }
177 |
178 | .container_16 .prefix_15 {
179 | padding-left:1125px;
180 | }
181 |
182 |
183 | /* Suffix Extra Space >> 2 Columns
184 | ----------------------------------------------------------------------------------------------------*/
185 |
186 | .container_16 .suffix_1 {
187 | padding-right:75px;
188 | }
189 |
190 | .container_16 .suffix_2 {
191 | padding-right:150px;
192 | }
193 |
194 | .container_16 .suffix_3 {
195 | padding-right:225px;
196 | }
197 |
198 | .container_16 .suffix_4 {
199 | padding-right:300px;
200 | }
201 |
202 | .container_16 .suffix_5 {
203 | padding-right:375px;
204 | }
205 |
206 | .container_16 .suffix_6 {
207 | padding-right:450px;
208 | }
209 |
210 | .container_16 .suffix_7 {
211 | padding-right:525px;
212 | }
213 |
214 | .container_16 .suffix_8 {
215 | padding-right:600px;
216 | }
217 |
218 | .container_16 .suffix_9 {
219 | padding-right:675px;
220 | }
221 |
222 | .container_16 .suffix_10 {
223 | padding-right:750px;
224 | }
225 |
226 | .container_16 .suffix_11 {
227 | padding-right:825px;
228 | }
229 |
230 | .container_16 .suffix_12 {
231 | padding-right:900px;
232 | }
233 |
234 | .container_16 .suffix_13 {
235 | padding-right:975px;
236 | }
237 |
238 | .container_16 .suffix_14 {
239 | padding-right:1050px;
240 | }
241 |
242 | .container_16 .suffix_15 {
243 | padding-right:1125px;
244 | }
245 |
246 |
247 | /* Push Space >> 2 Columns
248 | ----------------------------------------------------------------------------------------------------*/
249 |
250 | .container_16 .push_1 {
251 | left:75px;
252 | }
253 |
254 | .container_16 .push_2 {
255 | left:150px;
256 | }
257 |
258 | .container_16 .push_3 {
259 | left:225px;
260 | }
261 |
262 | .container_16 .push_4 {
263 | left:300px;
264 | }
265 |
266 | .container_16 .push_5 {
267 | left:375px;
268 | }
269 |
270 | .container_16 .push_6 {
271 | left:450px;
272 | }
273 |
274 | .container_16 .push_7 {
275 | left:525px;
276 | }
277 |
278 | .container_16 .push_8 {
279 | left:600px;
280 | }
281 |
282 | .container_16 .push_9 {
283 | left:675px;
284 | }
285 |
286 | .container_16 .push_10 {
287 | left:750px;
288 | }
289 |
290 | .container_16 .push_11 {
291 | left:825px;
292 | }
293 |
294 | .container_16 .push_12 {
295 | left:900px;
296 | }
297 |
298 | .container_16 .push_13 {
299 | left:975px;
300 | }
301 |
302 | .container_16 .push_14 {
303 | left:1050px;
304 | }
305 |
306 | .container_16 .push_15 {
307 | left:1125px;
308 | }
309 |
310 |
311 | /* Pull Space >> 2 Columns
312 | ----------------------------------------------------------------------------------------------------*/
313 |
314 | .container_16 .pull_1 {
315 | right:75px;
316 | }
317 |
318 | .container_16 .pull_2 {
319 | right:150px;
320 | }
321 |
322 | .container_16 .pull_3 {
323 | right:225px;
324 | }
325 |
326 | .container_16 .pull_4 {
327 | right:300px;
328 | }
329 |
330 | .container_16 .pull_5 {
331 | right:375px;
332 | }
333 |
334 | .container_16 .pull_6 {
335 | right:450px;
336 | }
337 |
338 | .container_16 .pull_7 {
339 | right:525px;
340 | }
341 |
342 | .container_16 .pull_8 {
343 | right:600px;
344 | }
345 |
346 | .container_16 .pull_9 {
347 | right:675px;
348 | }
349 |
350 | .container_16 .pull_10 {
351 | right:750px;
352 | }
353 |
354 | .container_16 .pull_11 {
355 | right:825px;
356 | }
357 |
358 | .container_16 .pull_12 {
359 | right:900px;
360 | }
361 |
362 | .container_16 .pull_13 {
363 | right:975px;
364 | }
365 |
366 | .container_16 .pull_14 {
367 | right:1050px;
368 | }
369 |
370 | .container_16 .pull_15 {
371 | right:1125px;
372 | }
373 |
374 |
375 | /* Clear Floated Elements
376 | ----------------------------------------------------------------------------------------------------*/
377 |
378 | .clear {
379 | clear: both;
380 | display: block;
381 | overflow: hidden;
382 | visibility: hidden;
383 | width: 0;
384 | height: 0;
385 | }
386 |
387 |
388 | .clearfix:after {
389 | clear: both;
390 | content: ' ';
391 | display: block;
392 | font-size: 0;
393 | line-height: 0;
394 | visibility: hidden;
395 | width: 0;
396 | height: 0;
397 | }
398 |
399 | .clearfix {
400 | display: inline-block;
401 | }
402 |
403 | * html .clearfix {
404 | height: 1%;
405 | }
406 |
407 | .clearfix {
408 | display: block;
409 | }
--------------------------------------------------------------------------------