194 |
195 |
--------------------------------------------------------------------------------
/Resources/modules/taskboard/css/s.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Hai!
3 | *
4 | * This is a style-sheet that makes Taskboard 10k look pretty.
5 | * At least I hope it does.
6 | *
7 | * I'm really glad that anyone is interested what I've done here :)
8 | * It was quite fun to play with HTML5 and bits of CSS3 to making it
9 | * all fit into 10k.
10 | *
11 | * ====================================================================
12 | *
13 | * TABLE OF CONTENTS:
14 | *
15 | * -- Generic styles (basic reset)
16 | *
17 | * -- Card styles [section.card]
18 | * ---- Card colors
19 | * ---- Special card states
20 | * ---- Card text
21 | *
22 | * -- Tags [span.tag]
23 | *
24 | * -- Action toolbars [menu]
25 | * ---- Action icons
26 | *
27 | * -- Deck with new cards [aside#deck]
28 | *
29 | * -- Footer [footer]
30 | *
31 | */
32 |
33 |
34 | /*
35 | * Generic styles (basic reset)
36 | * ==============================
37 | */
38 |
39 | html, body,
40 | section, aside, menu, footer,
41 | div, h2, p, ul, li,
42 | span, a { margin: 0; padding: 0 }
43 |
44 | ul, li { list-style: none }
45 |
46 | section, aside, menu, footer { display: block } /* -- make sure HTML5 elements are blocks */
47 |
48 | body { font-family: georgia, times, serif; }
49 |
50 | a { outline: 0; color: #05C; }
51 |
52 |
53 | /*
54 | * Card styles
55 | * =============
56 | */
57 |
58 | .card {
59 | position: absolute;
60 |
61 | width: 284px;
62 | min-height: 50px;
63 | padding: 7px;
64 |
65 | background: #FC3;
66 | border: 1px solid #FD5;
67 |
68 | -moz-border-radius: 5px;
69 | -webkit-border-radius: 5px;
70 | border-radius: 5px;
71 |
72 | -moz-box-shadow: 3px 3px 5px rgba(0,0,0,.2); /* -- repeating rgba shadow color 3 times */
73 | -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.2); /* is not very nice when you count every byte */
74 | box-shadow: 3px 3px 5px rgba(0,0,0,.2); /* so this is shortest value possible ;) */
75 |
76 | /* cursor: url(grab.cur); -- custom cursors are nice, but the they weight too much for 10k */
77 | cursor: -moz-grab; /* lucky that at least Firefox defines drag & drop cursors :) */
78 | }
79 |
80 | .edit .card { cursor: default; } /* -- when in edit mode don't show drag & drop cursor */
81 |
82 | /* Card colors
83 | ------------- */
84 |
85 | /* .yellow { background: #FC3; border-color: #FD5 } -- yellow is default */
86 | .orange { background: #F91; border-color: #FA3 }
87 | .blue { background: #0AC; border-color: #0BC }
88 | .red { background: #E43; border-color: #E54 }
89 | .green { background: #8C4; border-color: #9D6 }
90 |
91 | /*
92 | -- previous colour pallettes
93 |
94 | -- vivid palette
95 |
96 | .yellow { background: #FD6; border-color: #FE7 }
97 | .orange { background: #FA2; border-color: #FB3 }
98 | .blue { background: #1CD; border-color: #1DD }
99 | .red { background: #F50; border-color: #F61 }
100 | .green { background: #4B4; border-color: #4C4 }
101 |
102 | -- autumn palette
103 |
104 | .yellow { background: #FC3; border-color: #FC3 }
105 | .orange { background: #E83; border-color: #E83 }
106 | .blue { background: #089; border-color: #089 }
107 | .red { background: #D44; border-color: #D44 }
108 | .green { background: #9B4; border-color: #9B4 }
109 |
110 | */
111 |
112 |
113 | /* -- let's treat white cards a little bit special */
114 | .white {
115 | background: #FFF;
116 | border: 1px dashed #DDD;
117 |
118 | -moz-box-shadow: none;
119 | -webkit-box-shadow: none;
120 | box-shadow: none;
121 | }
122 |
123 | .white:hover { border-color: #AAA }
124 |
125 | /* Special card states
126 | --------------------- */
127 |
128 | .drag {
129 | cursor: move;
130 | /* cursor: url(grabbing.cur); -- bye bye nice user experience */
131 | cursor: -moz-grabbing;
132 |
133 | opacity: .8;
134 | }
135 |
136 | .pick {
137 | z-index: 100;
138 |
139 | -moz-transform: scale(1.03); /* -- subtle scale... for those supporting it ;) */
140 | -webkit-transform: scale(1.03);
141 | transform: scale(1.03);
142 |
143 | -moz-box-shadow: 8px 8px 5px rgba(0,0,0,.2);
144 | -webkit-box-shadow: 8px 8px 5px rgba(0,0,0,.2);
145 | box-shadow: 8px 8px 5px rgba(0,0,0,.2);
146 | }
147 |
148 | /* -- to focus on selected and edited cards we make others transparent */
149 | .mark .card, .edit .card { opacity: .3 }
150 | .mark .card.mark, .edit .card.edit { opacity: 1 }
151 |
152 |
153 | /* Card text
154 | ------------- */
155 |
156 | .text {
157 | overflow: hidden;
158 | padding: 2px;
159 | min-height: 1em;
160 | }
161 |
162 | .edit > .text {
163 | background: rgba(255,255,255,.5);
164 | outline: 1px solid #FFF;
165 | }
166 |
167 | .edit.white .text {
168 | background: #F4F4F4; /* no need for rgba, card is white anyway */
169 | outline-color: #EEE;
170 | }
171 |
172 | .text a { text-decoration:none; }
173 |
174 | .text a:hover {
175 | border-bottom: 1px solid;
176 | background: rgba(255,255,255,.3);
177 | }
178 |
179 |
180 | /*
181 | * Tags
182 | * ======
183 | */
184 |
185 | .tag {
186 | background: rgba(255,255,255,.4);
187 | padding: .1em .3em .1em .2em;
188 | cursor: pointer;
189 |
190 | -moz-border-radius: 10px;
191 | -webkit-border-radius: 10px;
192 | border-radius: 10px;
193 |
194 | -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); /* -- only -webkit, because of Chrome (see comment for .tag.mark) */
195 | }
196 |
197 | /* -- hovered tag */
198 | .tag.hover { background: rgba(255,255,255,.8) }
199 |
200 | /* -- selected tag */
201 | .tag.mark {
202 | background: rgba(255,255,255,.9);
203 |
204 | -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.2);
205 | -webkit-box-shadow: none; /* inset 1px 1px 1px rgba(100,100,100,.5); -- inset shadow + border radius looks like shit in Chrome */
206 | box-shadow: inset 1px 1px 1px rgba(0,0,0,.2);
207 | }
208 |
209 | /* -- make tags on white cards noticable */
210 | .white .tag { background: #EEE }
211 | .white .tag.hover,
212 | .white .tag.mark { background: #DDD }
213 |
214 |
215 | /*
216 | * Action toolbars
217 | * =======================
218 | */
219 |
220 | body > menu { position: fixed; top: 5px; left: 5px; } /* -- global actions bar */
221 |
222 | .card menu { position: absolute; top: -10px; right: 0; } /* -- card actions bar */
223 | .card.edit menu, .drag menu { display: none } /* -- hide card actions when editing or dragging */
224 | .edit menu.edit { display: block; left: 0; }
225 |
226 | /* Action icons
227 | -------------- */
228 |
229 | menu a {
230 | float: left;
231 | height: 20px; width: 20px;
232 |
233 | background: url(../img/i.png) no-repeat 2px 0;
234 | }
235 |
236 | menu a:hover {
237 | position: relative; top: -2px; height: 22px;
238 |
239 | /* -- background icons get blurry on scale, so it's not pretty enough to waste all these bytes
240 | -webkit-transform: scale(1.1);
241 | -moz-transform: scale(1.1);
242 | transform: scale(1.1);
243 | */
244 | }
245 |
246 | menu a:active { top: -1px; }
247 |
248 | /* -- one char classes, because bytes are precious in 10k apart */
249 | /* menu .b { background-position: 0 0 } -- b is default so, again, let's save some bytes */
250 | menu .i { background-position: 2px -20px }
251 | menu .h { background-position: 2px -40px }
252 | menu .p { background-position: 2px -60px }
253 | menu .e { background-position: 2px -80px }
254 | menu .c { background-position: 2px -100px }
255 | menu .r,
256 | menu .d { background-position: 2px -120px }
257 |
258 |
259 | /*
260 | * Deck with new cards
261 | * =====================
262 | */
263 |
264 | #deck {
265 | position: fixed;
266 | top: 10px; left: -280px;
267 | }
268 |
269 | #deck .white { border-color: #AAA }
270 |
271 | /* -- disable deck when cards are selected or edited */
272 | .mark #deck, .edit #deck { opacity: .3 }
273 |
274 | .edit #deck .card,
275 | .mark #deck .card {
276 | cursor: default;
277 | opacity: 1;
278 | }
279 |
280 |
281 | /*
282 | * Footer
283 | * ========
284 | */
285 |
286 | footer {
287 | position: fixed;
288 | bottom: 0; right: 0;
289 | padding: 5px;
290 | font-size: .7em;
291 | opacity: .6;
292 | }
293 |
294 | footer:hover { opacity: 1 }
295 |
--------------------------------------------------------------------------------
/Resources/modules/taskboard/img/i.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runawaygo/HtmlOnClient/e7c29dd62f8f238448f49a5bc69c6927b57cb168/Resources/modules/taskboard/img/i.png
--------------------------------------------------------------------------------
/Resources/modules/taskboard/js/s.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Hai!
3 | *
4 | * This is a script that makes Taskboard 10k awesome ;)
5 | * At least it's my very humble opinion.
6 | *
7 | * So, you want to know how it was all done?
8 | * Great! But make sure you are brave enough to go down into dungerons
9 | * of this script. There is a lot of magic down there.
10 | *
11 | * Really. This whole thing had to fit into 10k limit, so not very best
12 | * JavaScript programming practices were used in some places. And it is
13 | * very likely that there are pieces of code that will be not easy to
14 | * decypher.
15 | *
16 | * So you still want to move forward?
17 | *
18 | * You were warned ;)
19 | *
20 | * ====================================================================
21 | *
22 | *
23 | */
24 |
25 | (function (document, $, storage) { // let's pull all of this into context of nice function
26 |
27 | // So here we start with very long definition of constants.
28 | // These are strings and other values used a lot in the script.
29 | // Sometimes they may feel as an overhead, but it was all done
30 | // to make this script nicely minify.
31 |
32 | // CONSTANTS
33 | // ===========
34 |
35 | var HTML_CARD = "
",
36 |
37 | // some class names
38 | DRAG = "drag",
39 | EDIT = "edit",
40 | PICK = "pick",
41 | MARK = "mark",
42 |
43 | // selectors
44 | CARD = ".card",
45 | TEXT = ".text",
46 | TAG = ".tag",
47 | ACTION = "menu a",
48 |
49 | HAS_MARK = ':has(.' + MARK + ')',
50 |
51 | DOT = ".", // :) used to turn class names into selectors
52 |
53 | // events
54 | CLICK = "click",
55 | DBLCLICK = "dblclick",
56 | HOVER = "hover",
57 | KEYDOWN = "keydown",
58 | MOUSEDOWN = "mousedown",
59 | MOUSEUP = "mouseup",
60 | MOUSEMOVE = "mousemove",
61 |
62 | // other strings
63 | CONTENTEDITABLE = "contentEditable",
64 |
65 | VALUE = "value",
66 |
67 | TOP = "top",
68 | LEFT = "left",
69 |
70 | STORAGE_KEY = "board",
71 |
72 | TRUE = !0 + "", // == "true" // little inconsistency, but I use "true" only as a string
73 | FALSE = !1, // == false // and false more as boolean
74 |
75 | COLORS = ['white', 'green', 'blue', 'red', 'orange', 'yellow'],
76 |
77 | // checks if class name contains one of the colors
78 | R_COLORCLASS = new RegExp('\\b(' + COLORS.join(')|(') + ')\\b'),
79 |
80 | // checks if event type is mouseenter or mouseover
81 | R_MOUSEIN = /^mouse(enter|over)/i,
82 |
83 | // namespace object for actions triggered by toolbar icons
84 | ACTIONS = {
85 |
86 | // clears board by removing saved data & reloads the page
87 | r: function () {
88 | if (confirm("Are you sure you want to clear all saved data?")) {
89 | storage.removeItem(STORAGE_KEY); // .clear() would be fine too, but I don't want to remove
90 | // data of other demos on 10k apart domain :)
91 | location.reload();
92 | }
93 | },
94 |
95 | // CARD ACTIONS
96 |
97 | // edit
98 | e: function ($card) {
99 | $card[DBLCLICK](); // hacky way of saying .trigger("dblclick"),
100 | // because dblclick launches edit mode
101 | // see line 484 where it is handled
102 | },
103 |
104 | // change color, by switching to next color from the list
105 | // 'cause color pickers are so unusable...
106 | // and, anyway, there are only six colors, right?
107 | c: function ($card) {
108 | var color = $card.color();
109 | if (color) {
110 | $card.rC(color); // .removeClass -- I guess this is the first place I use my short alias
111 | // you will find more about that around line 359 where
112 | // they are defined
113 | color = COLORS.indexOf(color);
114 | color = COLORS[++color < 6 ? color : 0]; // 6 is COLORS.length
115 | $card.aC(color); // .addClass
116 | save();
117 | }
118 | },
119 |
120 | // delete
121 | d: function ($card) {
122 | if (confirm("Are you sure you want to delete this card?")) {
123 | $card.fadeOut(function () {
124 | $card.remove();
125 | save();
126 | });
127 | }
128 | },
129 |
130 | // TEXT FORMATTING
131 |
132 | // bold -- yes, you guesed it right ;)
133 | b: function () {
134 | document.execCommand("bold", FALSE, "");
135 | },
136 |
137 | // italic
138 | i: function () {
139 | document.execCommand("italic", FALSE, "");
140 | },
141 |
142 | // heading
143 | h: function () {
144 | block("p", "h2");
145 | },
146 |
147 | // paragraph
148 | p: function () {
149 | block("h2", "p");
150 | }
151 |
152 | },
153 |
154 | // list of some more or less useful tips
155 | TIPS = [
156 | "Need a new card? Just grab it from a deck on the left",
157 | "Move cards around to arrange them in any way you want: todo list? kanban board?",
158 | "Double-click card to edit",
159 | "You can use hotkeys when editing text, just check Ctrl+I or Ctrl+B",
160 | //"Just guess what ESC and Ctrl+S do", -- let them discover it... cause Ctrl+S is not working in IE9
161 | "Every change is immediately saved in your browser",
162 | "You've already noticed #tags, didn't you?",
163 | "Ctrl+H makes a
Heading
and Ctrl+G turns text into a paragraph",
164 | 0, // pause
165 | "It's not a tip... I just had some spare bytes below 10k limit ;)"
166 | ],
167 |
168 | // Now, these down there can be finally called variables
169 | // even though some of them don't change much
170 |
171 | // VARIABLES
172 | // ===========
173 |
174 | // jQuery objects with application elements
175 | $document = $(document),
176 | $body = $(document.body),
177 |
178 | $board, // -- contains all the cards added by user
179 | $deck, //