37 |
55 |
38 |
54 | 39 | 40 | 41 |
42 |
43 | No thanks.
44 |
52 |
53 | ', {
87 | text: item.value
88 | });
89 | $(CONTENT_WRAPPER_SELECTOR).html($text);
90 | $(LEVEL_SELECTOR).text(item.Difficulty);
91 |
92 | if (counter === (total - 1)) {
93 | utils.display_message(message);
94 | }
95 | $.each(LEVELS, function (level, color) {
96 | if (level === $(LEVEL_SELECTOR).text()) {
97 | $(LEVEL_SELECTOR).css('background-color', color);
98 | }
99 | });
100 |
101 | $(HIDDEN_INPUT_SELECTOR).attr('value', '{
102 | "title": "New Pen from The Practice App!",
103 | "html": ""
104 | }');
105 | var progress_percentage = ((100 / total) * counter) + '%';
106 | $('.progress').css('width', progress_percentage);
107 | };
108 |
109 | var setup_bindings = function () {
110 | $(ACTION_SELECTOR).on('click', function () {
111 | counter = (counter + 1) % total;
112 | render_item();
113 | });
114 | Mousetrap.bind('right', function () {
115 | $(ACTION_SELECTOR).trigger('click');
116 | });
117 | Mousetrap.bind('enter', function () {
118 | $(FORM_SELECTOR).trigger('submit');
119 | });
120 | };
121 |
122 | var init = function () {
123 | get_data();
124 | render_item();
125 | setup_bindings();
126 | };
127 |
128 | return {
129 | init: init
130 | };
131 | }());
132 |
133 | var dribbble = (function () {
134 | 'use strict';
135 |
136 | var data = {};
137 | var counter = 0;
138 | var total = 11;
139 |
140 | var get_data = function () {
141 | var jsonUrl = 'https://api.dribbble.com/v1/shots/';
142 | var randomPage = utils.random_number(1, 29);
143 | data = utils.get_json(jsonUrl, {
144 | page: randomPage,
145 | access_token: '6ed972085fecb7078ef53a3056562c05de38514ebd7d095b6a84f6dba7743031'
146 | });
147 | };
148 |
149 | var render_shot = function () {
150 | if (counter > (total - 1) || (counter === 0)) {
151 | get_data();
152 | }
153 | $(CONTENT_WRAPPER_SELECTOR).empty();
154 | var shot = data[counter];
155 |
156 | var $image = $(' ', {
235 | text: utils.get_value(issue, 'created_at')
236 | });
237 |
238 | $(CONTENT_WRAPPER_SELECTOR)
239 | .html($body)
240 | .prepend($title)
241 | .append($timestamp);
242 |
243 | if (utils.get_value(issue, 'pull_request') !== '') {
244 | var $pull_request = $(' ', {
245 | html: marked('Current pull request: ' + issue.pull_request.html_url)
246 | });
247 | $(CONTENT_WRAPPER_SELECTOR).append($pull_request);
248 | }
249 | $('#solve').attr('href', utils.get_value(issue, 'html_url'));
250 |
251 | $(CONTENT_HOLDER_SELECTOR)
252 | .scrollTop(0)
253 | .perfectScrollbar('update');
254 |
255 | $(CONTENT_WRAPPER_SELECTOR).find('code').each(function (i, el) {
256 | hljs.highlightBlock(el);
257 | });
258 | };
259 |
260 | var setup_bindings = function () {
261 | $(LANGUAGE_SELECTOR).on('change', function () {
262 | get_data();
263 | render_issue();
264 | });
265 |
266 | $(ACTION_SELECTOR).on('click', function () {
267 | counter = (counter + 1) % total;
268 | render_issue();
269 | });
270 |
271 | Mousetrap.bind('right', function () {
272 | $(ACTION_SELECTOR).trigger('click');
273 | });
274 |
275 | Mousetrap.bind('enter', function () {
276 | $('#solve').trigger('click');
277 | });
278 | };
279 |
280 | var init = function () {
281 | utils.display_message(message);
282 | render_issue();
283 | setup_bindings();
284 | };
285 |
286 | return {
287 | init: init
288 | };
289 | }());
290 |
291 | var core = (function () {
292 | 'use strict';
293 |
294 | var init = function () {
295 | $(ACTION_SELECTOR).on('click', function (event) {
296 | event.preventDefault();
297 | });
298 |
299 | switch ($('article').attr('class')) {
300 | case 'block-random':
301 | random.init();
302 | break;
303 | case 'block-dribbble':
304 | dribbble.init();
305 | break;
306 | case 'block-github':
307 | github.init();
308 | break;
309 | }
310 | };
311 |
312 | return {
313 | init: init
314 | };
315 | }());
316 |
317 | core.init();
318 |
--------------------------------------------------------------------------------
/assets/js/main.min.js:
--------------------------------------------------------------------------------
1 | var ACTION_SELECTOR=".suggestionApp-action",CONTENT_WRAPPER_SELECTOR=".suggestionApp-content",FORM_SELECTOR=".suggestionApp-prompts form",NOTICE_SELECTOR=".items-notice",HIDDEN_INPUT_SELECTOR=".hiddenInput",utils=function(){"use strict";var t=function(t,e){return Math.floor(Math.random()*(e-t+1))+t},e=function(t,e){for(var n=[],r=e>t?1:-1,i=t;e>=i;i+=r)n.push(i);return n},n=function(t){var e="items-notice_show";$(NOTICE_SELECTOR).html(t),$(NOTICE_SELECTOR).removeClass(e),$(NOTICE_SELECTOR).addClass(e),setTimeout(function(){$(NOTICE_SELECTOR).removeClass(e)},4e3)},r=function(t,e){return t&&t[e]||""},i=function(t,e){return JSON.parse($.ajax({type:"GET",url:t,dataType:"json",global:!1,async:!1,data:e,success:function(t){return t}}).responseText)};return{random_number:t,range:e,display_message:n,get_json:i,get_value:r}}(),random=function(){"use strict";var t={},e=0,n=$(NOTICE_SELECTOR),r=n.data("total"),i=n.data("message")||"";i=i.replace(/\#\{total\}/g,r);var a=".suggestionApp-level",o={Advanced:"rgb(138, 44, 44)",Intermediate:"rgb(170, 170, 28)",Easy:"rgb(31, 145, 36)"},u=function(){var e="random.json";t=utils.get_json(e,{})},s=function(){var n=t[e],u=$(" ",{text:n.value});$(CONTENT_WRAPPER_SELECTOR).html(u),$(a).text(n.Difficulty),e===r-1&&utils.display_message(i),$.each(o,function(t,e){t===$(a).text()&&$(a).css("background-color",e)}),$(HIDDEN_INPUT_SELECTOR).attr("value",'{\r\n "title": "New Pen from The Practice App!",\r\n "html": ""\r\n }');var s=100/r*e+"%";$(".progress").css("width",s)},c=function(){$(ACTION_SELECTOR).on("click",function(){e=(e+1)%r,s()}),Mousetrap.bind("right",function(){$(ACTION_SELECTOR).trigger("click")}),Mousetrap.bind("enter",function(){$(FORM_SELECTOR).trigger("submit")})},l=function(){u(),s(),c()};return{init:l}}(),dribbble=function(){"use strict";var t={},e=0,n=11,r=function(){var e="https://api.dribbble.com/v1/shots/",n=utils.random_number(1,29);t=utils.get_json(e,{page:n,access_token:"6ed972085fecb7078ef53a3056562c05de38514ebd7d095b6a84f6dba7743031"})},i=function(){(e>n-1||0===e)&&r(),$(CONTENT_WRAPPER_SELECTOR).empty();var i=t[e],a=$(" ",{text:utils.get_value(e,"created_at")});if($(CONTENT_WRAPPER_SELECTOR).html(o).prepend(a).append(u),""!==utils.get_value(e,"pull_request")){var c=$(" ",{html:marked("Current pull request: "+e.pull_request.html_url)});$(CONTENT_WRAPPER_SELECTOR).append(c)}$("#solve").attr("href",utils.get_value(e,"html_url")),$(n).scrollTop(0).perfectScrollbar("update"),$(CONTENT_WRAPPER_SELECTOR).find("code").each(function(t,e){hljs.highlightBlock(e)})},l=function(){$(e).on("change",function(){s(),c()}),$(ACTION_SELECTOR).on("click",function(){r=(r+1)%i,c()}),Mousetrap.bind("right",function(){$(ACTION_SELECTOR).trigger("click")}),Mousetrap.bind("enter",function(){$("#solve").trigger("click")})},E=function(){utils.display_message(u),c(),l()};return{init:E}}(),core=function(){"use strict";var t=function(){switch($(ACTION_SELECTOR).on("click",function(t){t.preventDefault()}),$("article").attr("class")){case"block-random":random.init();break;case"block-dribbble":dribbble.init();break;case"block-github":github.init()}};return{init:t}}();core.init();
--------------------------------------------------------------------------------
/dev/css/main.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif;
3 | /* 1 */
4 | -ms-text-size-adjust: 100%;
5 | /* 2 */
6 | -webkit-text-size-adjust: 100%;
7 | /* 2 */ }
8 |
9 | body {
10 | margin: 0; }
11 |
12 | article,
13 | aside,
14 | details,
15 | figcaption,
16 | figure,
17 | footer,
18 | header,
19 | hgroup,
20 | main,
21 | nav,
22 | section,
23 | summary {
24 | display: block; }
25 |
26 | audio,
27 | canvas,
28 | progress,
29 | video {
30 | display: inline-block;
31 | /* 1 */
32 | vertical-align: baseline;
33 | /* 2 */ }
34 |
35 | audio:not([controls]) {
36 | display: none;
37 | height: 0; }
38 |
39 | [hidden],
40 | template {
41 | display: none; }
42 |
43 | a {
44 | background: transparent; }
45 |
46 | a:active,
47 | a:hover {
48 | outline: 0; }
49 |
50 | abbr[title] {
51 | border-bottom: 1px dotted; }
52 |
53 | b,
54 | strong {
55 | font-weight: bold; }
56 |
57 | dfn {
58 | font-style: italic; }
59 |
60 | h1 {
61 | font-size: 2em;
62 | margin: 0.67em 0; }
63 |
64 | mark {
65 | background: #ff0;
66 | color: #000; }
67 |
68 | small {
69 | font-size: 80%; }
70 |
71 | sub,
72 | sup {
73 | font-size: 75%;
74 | line-height: 0;
75 | position: relative;
76 | vertical-align: baseline; }
77 |
78 | sup {
79 | top: -0.5em; }
80 |
81 | sub {
82 | bottom: -0.25em; }
83 |
84 | img {
85 | border: 0; }
86 |
87 | svg:not(:root) {
88 | overflow: hidden; }
89 |
90 | figure {
91 | margin: 1em 40px; }
92 |
93 | hr {
94 | -moz-box-sizing: content-box;
95 | box-sizing: content-box;
96 | height: 0; }
97 |
98 | pre {
99 | overflow: auto; }
100 |
101 | code,
102 | kbd,
103 | pre,
104 | samp {
105 | font-family: monospace, monospace;
106 | font-size: 1em; }
107 |
108 | button,
109 | input,
110 | optgroup,
111 | select,
112 | textarea {
113 | color: inherit;
114 | /* 1 */
115 | font: inherit;
116 | /* 2 */
117 | margin: 0;
118 | /* 3 */ }
119 |
120 | button {
121 | overflow: visible; }
122 |
123 | button,
124 | select {
125 | text-transform: none; }
126 |
127 | button,
128 | html input[type="button"], input[type="reset"],
129 | input[type="submit"] {
130 | -webkit-appearance: button;
131 | /* 2 */
132 | cursor: pointer;
133 | /* 3 */ }
134 |
135 | button[disabled],
136 | html input[disabled] {
137 | cursor: default; }
138 |
139 | button::-moz-focus-inner,
140 | input::-moz-focus-inner {
141 | border: 0;
142 | padding: 0; }
143 |
144 | input {
145 | line-height: normal; }
146 |
147 | input[type="checkbox"],
148 | input[type="radio"] {
149 | box-sizing: border-box;
150 | /* 1 */
151 | padding: 0;
152 | /* 2 */ }
153 |
154 | input[type="number"]::-webkit-inner-spin-button,
155 | input[type="number"]::-webkit-outer-spin-button {
156 | height: auto; }
157 |
158 | input[type="search"] {
159 | -webkit-appearance: textfield;
160 | /* 1 */
161 | -moz-box-sizing: content-box;
162 | -webkit-box-sizing: content-box;
163 | /* 2 */
164 | box-sizing: content-box; }
165 |
166 | input[type="search"]::-webkit-search-cancel-button,
167 | input[type="search"]::-webkit-search-decoration {
168 | -webkit-appearance: none; }
169 |
170 | fieldset {
171 | border: 1px solid #c0c0c0;
172 | margin: 0 2px;
173 | padding: 0.35em 0.625em 0.75em; }
174 |
175 | legend {
176 | border: 0;
177 | /* 1 */
178 | padding: 0;
179 | /* 2 */ }
180 |
181 | textarea {
182 | overflow: auto; }
183 |
184 | optgroup {
185 | font-weight: bold; }
186 |
187 | table {
188 | border-collapse: collapse;
189 | border-spacing: 0; }
190 |
191 | td,
192 | th {
193 | padding: 0; }
194 |
195 | *, *:before, *:after {
196 | box-sizing: border-box; }
197 |
198 | body, html {
199 | overflow-x: hidden;
200 | height: 100%;
201 | font-family: 'Open Sans', sans-serif; }
202 |
203 | .wrap {
204 | max-width: 1200px;
205 | padding: 0 1em; }
206 |
207 | .group:after {
208 | content: "";
209 | display: table;
210 | clear: both; }
211 |
212 | .pageContent {
213 | position: relative;
214 | word-break: break-word; }
215 |
216 | .main-header {
217 | padding: 1em;
218 | color: white;
219 | background-color: #333;
220 | position: absolute;
221 | width: 100%;
222 | z-index: 999; }
223 | .main-header p {
224 | padding-top: 10px;
225 | margin: 0;
226 | display: inline-block; }
227 | .main-header a {
228 | float: right;
229 | color: white;
230 | padding: 10px;
231 | border: solid 1px white;
232 | text-decoration: none; }
233 | .main-header a.attribution {
234 | float: none;
235 | padding: 0;
236 | border: none; }
237 | .main-header a:nth-of-type(1) {
238 | margin-left: 1em; }
239 | .main-header.home {
240 | position: relative; }
241 |
242 | .items-notice {
243 | width: 100%;
244 | background-color: orange;
245 | color: white;
246 | text-align: center;
247 | font-size: 0em;
248 | padding: 1em;
249 | position: absolute;
250 | z-index: 5;
251 | opacity: 0;
252 | transition: .25s ease opacity; }
253 |
254 | .items-notice_show {
255 | display: block;
256 | font-size: 2em;
257 | margin-top: 76px;
258 | opacity: 1; }
259 |
260 | .btn {
261 | font-size: .5em;
262 | text-decoration: none;
263 | color: white;
264 | padding: 1em;
265 | border: solid white;
266 | background-color: transparent;
267 | outline: none;
268 | display: inline-block; }
269 |
270 | article a {
271 | color: white;
272 | text-decoration: none;
273 | font-style: italic; }
274 | article a:hover {
275 | text-decoration: underline; }
276 |
277 | form {
278 | display: inline-block;
279 | margin-left: 1em; }
280 | form input {
281 | background-color: transparent;
282 | padding: 0;
283 | outline: none;
284 | border: none; }
285 |
286 | .ps-container .ps-scrollbar-x-rail {
287 | position: absolute;
288 | /* please don't change 'position' */
289 | bottom: 3px;
290 | /* there must be 'bottom' for ps-scrollbar-x-rail */
291 | height: 8px;
292 | -webkit-border-radius: 4px;
293 | -moz-border-radius: 4px;
294 | border-radius: 4px;
295 | opacity: 0;
296 | filter: alpha(opacity=0);
297 | -o-transition: background-color 0.2s linear, opacity 0.2s linear;
298 | -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
299 | -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
300 | transition: background-color 0.2s linear, opacity 0.2s linear; }
301 |
302 | .ps-container:hover .ps-scrollbar-x-rail,
303 | .ps-container.hover .ps-scrollbar-x-rail {
304 | opacity: 0.6;
305 | filter: alpha(opacity=60); }
306 |
307 | .ps-container .ps-scrollbar-x-rail:hover,
308 | .ps-container .ps-scrollbar-x-rail.hover {
309 | background-color: #eee;
310 | opacity: 0.9;
311 | filter: alpha(opacity=90); }
312 |
313 | .ps-container .ps-scrollbar-x-rail.in-scrolling {
314 | background-color: #eee;
315 | opacity: 0.9;
316 | filter: alpha(opacity=90); }
317 |
318 | .ps-container .ps-scrollbar-y-rail {
319 | position: absolute;
320 | /* please don't change 'position' */
321 | right: 3px;
322 | /* there must be 'right' for ps-scrollbar-y-rail */
323 | width: 8px;
324 | -webkit-border-radius: 4px;
325 | -moz-border-radius: 4px;
326 | border-radius: 4px;
327 | opacity: 0;
328 | filter: alpha(opacity=0);
329 | -o-transition: background-color 0.2s linear, opacity 0.2s linear;
330 | -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
331 | -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
332 | transition: background-color 0.2s linear, opacity 0.2s linear; }
333 |
334 | .ps-container:hover .ps-scrollbar-y-rail,
335 | .ps-container.hover .ps-scrollbar-y-rail {
336 | opacity: 0.6;
337 | filter: alpha(opacity=60); }
338 |
339 | .ps-container .ps-scrollbar-y-rail:hover,
340 | .ps-container .ps-scrollbar-y-rail.hover {
341 | background-color: #eee;
342 | opacity: 0.9;
343 | filter: alpha(opacity=90); }
344 |
345 | .ps-container .ps-scrollbar-y-rail.in-scrolling {
346 | background-color: #eee;
347 | opacity: 0.9;
348 | filter: alpha(opacity=90); }
349 |
350 | .ps-container .ps-scrollbar-x {
351 | position: absolute;
352 | /* please don't change 'position' */
353 | bottom: 0;
354 | /* there must be 'bottom' for ps-scrollbar-x */
355 | height: 8px;
356 | background-color: #aaa;
357 | -webkit-border-radius: 4px;
358 | -moz-border-radius: 4px;
359 | border-radius: 4px;
360 | -o-transition: background-color 0.2s linear;
361 | -webkit-transition: background-color 0.2s linear;
362 | -moz-transition: background-color 0.2s linear;
363 | transition: background-color 0.2s linear; }
364 |
365 | .ps-container.ie6 .ps-scrollbar-x {
366 | font-size: 0;
367 | /* fixed scrollbar height in xp sp3 ie6 */ }
368 |
369 | .ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
370 | .ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
371 | background-color: #999; }
372 |
373 | .ps-container .ps-scrollbar-y {
374 | position: absolute;
375 | /* please don't change 'position' */
376 | right: 0;
377 | /* there must be 'right' for ps-scrollbar-y */
378 | width: 8px;
379 | background-color: #aaa;
380 | -webkit-border-radius: 4px;
381 | -moz-border-radius: 4px;
382 | border-radius: 4px;
383 | -o-transition: background-color 0.2s linear;
384 | -webkit-transition: background-color 0.2s linear;
385 | -moz-transition: background-color 0.2s linear;
386 | transition: background-color 0.2s linear; }
387 |
388 | .ps-container.ie6 .ps-scrollbar-y {
389 | font-size: 0;
390 | /* fixed scrollbar height in xp sp3 ie6 */ }
391 |
392 | .ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
393 | .ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
394 | background-color: #999; }
395 |
396 | .ps-container.ie .ps-scrollbar-x,
397 | .ps-container.ie .ps-scrollbar-y {
398 | visibility: hidden; }
399 |
400 | .ps-container.ie:hover .ps-scrollbar-x,
401 | .ps-container.ie:hover .ps-scrollbar-y,
402 | .ps-container.ie.hover .ps-scrollbar-x,
403 | .ps-container.ie.hover .ps-scrollbar-y {
404 | visibility: visible; }
405 |
406 | /*
407 |
408 | Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull ', {
87 | text: item.value
88 | });
89 | $(CONTENT_WRAPPER_SELECTOR).html($text);
90 | $(LEVEL_SELECTOR).text(item.Difficulty);
91 |
92 | if (counter === (total - 1)) {
93 | utils.display_message(message);
94 | }
95 | $.each(LEVELS, function (level, color) {
96 | if (level === $(LEVEL_SELECTOR).text()) {
97 | $(LEVEL_SELECTOR).css('background-color', color);
98 | }
99 | });
100 |
101 | $(HIDDEN_INPUT_SELECTOR).attr('value', '{
102 | "title": "New Pen from The Practice App!",
103 | "html": ""
104 | }');
105 | var progress_percentage = ((100 / total) * counter) + '%';
106 | $('.progress').css('width', progress_percentage);
107 | };
108 |
109 | var setup_bindings = function () {
110 | $(ACTION_SELECTOR).on('click', function () {
111 | counter = (counter + 1) % total;
112 | render_item();
113 | });
114 | Mousetrap.bind('right', function () {
115 | $(ACTION_SELECTOR).trigger('click');
116 | });
117 | Mousetrap.bind('enter', function () {
118 | $(FORM_SELECTOR).trigger('submit');
119 | });
120 | };
121 |
122 | var init = function () {
123 | get_data();
124 | render_item();
125 | setup_bindings();
126 | };
127 |
128 | return {
129 | init: init
130 | };
131 | }());
132 |
133 | var dribbble = (function () {
134 | 'use strict';
135 |
136 | var data = {};
137 | var counter = 0;
138 | var total = 11;
139 |
140 | var get_data = function () {
141 | var jsonUrl = 'https://api.dribbble.com/v1/shots/';
142 | var randomPage = utils.random_number(1, 29);
143 | data = utils.get_json(jsonUrl, {
144 | page: randomPage,
145 | access_token: '6ed972085fecb7078ef53a3056562c05de38514ebd7d095b6a84f6dba7743031'
146 | });
147 | };
148 |
149 | var render_shot = function () {
150 | if (counter > (total - 1) || (counter === 0)) {
151 | get_data();
152 | }
153 | $(CONTENT_WRAPPER_SELECTOR).empty();
154 | var shot = data[counter];
155 |
156 | var $image = $(' ', {
235 | text: utils.get_value(issue, 'created_at')
236 | });
237 |
238 | $(CONTENT_WRAPPER_SELECTOR)
239 | .html($body)
240 | .prepend($title)
241 | .append($timestamp);
242 |
243 | if (utils.get_value(issue, 'pull_request') !== '') {
244 | var $pull_request = $(' ', {
245 | html: marked('Current pull request: ' + issue.pull_request.html_url)
246 | });
247 | $(CONTENT_WRAPPER_SELECTOR).append($pull_request);
248 | }
249 | $('#solve').attr('href', utils.get_value(issue, 'html_url'));
250 |
251 | $(CONTENT_HOLDER_SELECTOR)
252 | .scrollTop(0)
253 | .perfectScrollbar('update');
254 |
255 | $(CONTENT_WRAPPER_SELECTOR).find('code').each(function (i, el) {
256 | hljs.highlightBlock(el);
257 | });
258 | };
259 |
260 | var setup_bindings = function () {
261 | $(LANGUAGE_SELECTOR).on('change', function () {
262 | get_data();
263 | render_issue();
264 | });
265 |
266 | $(ACTION_SELECTOR).on('click', function () {
267 | counter = (counter + 1) % total;
268 | render_issue();
269 | });
270 |
271 | Mousetrap.bind('right', function () {
272 | $(ACTION_SELECTOR).trigger('click');
273 | });
274 |
275 | Mousetrap.bind('enter', function () {
276 | $('#solve').trigger('click');
277 | });
278 | };
279 |
280 | var init = function () {
281 | utils.display_message(message);
282 | render_issue();
283 | setup_bindings();
284 | };
285 |
286 | return {
287 | init: init
288 | };
289 | }());
290 |
291 | var core = (function () {
292 | 'use strict';
293 |
294 | var init = function () {
295 | $(ACTION_SELECTOR).on('click', function (event) {
296 | event.preventDefault();
297 | });
298 |
299 | switch ($('article').attr('class')) {
300 | case 'block-random':
301 | random.init();
302 | break;
303 | case 'block-dribbble':
304 | dribbble.init();
305 | break;
306 | case 'block-github':
307 | github.init();
308 | break;
309 | }
310 | };
311 |
312 | return {
313 | init: init
314 | };
315 | }());
316 |
317 | core.init();
318 |
--------------------------------------------------------------------------------
/dev/scss/main.scss:
--------------------------------------------------------------------------------
1 | @import "partials/normalize";
2 | @import "partials/globals";
3 | @import "partials/pages";
4 | @import "partials/colors";
5 | @import "partials/buttons";
6 | @import "partials/scrollbar";
7 | @import "partials/hljs";
8 | @import "modules/blocks";
9 | @import "modules/suggestionApp";
10 |
--------------------------------------------------------------------------------
/dev/scss/modules/_blocks.scss:
--------------------------------------------------------------------------------
1 | .block-container {
2 | height: 100%;
3 | width: 100%;
4 |
5 | &.home {
6 | height: 93.7%;
7 |
8 | a {
9 | text-decoration: none;
10 | }
11 | }
12 | }
13 |
14 | %block {
15 | height: 33.33%;
16 | display: table;
17 | width: 100%;
18 | color: white;
19 |
20 | &:hover {
21 | background-repeat: no-repeat;
22 | }
23 |
24 | .btn {
25 | transition: .2s ease;
26 |
27 | &:hover {
28 | background-color: $btn_hover;
29 | }
30 | }
31 | }
32 |
33 | .block-content {
34 | display: table-cell;
35 | vertical-align: middle;
36 | text-align: center;
37 | font-size: 2em;
38 | transition: .25s linear;
39 | font-family: 'Open Sans', sans-serif;
40 |
41 | &:hover {
42 | cursor: pointer;
43 | background-color: $block_hover;
44 | transform: translateX(20%);
45 | }
46 | }
47 |
48 | .block-random, .block-dribbble, .block-github {
49 | @extend %block;
50 | }
51 |
52 | .block-random {
53 | background-color: $random;
54 |
55 | &:hover {
56 | background-image: url("../../assets/img/practice.png");
57 | }
58 |
59 | .progress {
60 | background-color: $orange;
61 | height: 5px;
62 | transition: .5s ease;
63 | position: fixed;
64 | top: 75px;
65 | left: 0;
66 | }
67 |
68 | .suggestionApp-level {
69 | display: block;
70 | margin: 0 auto;
71 | max-width: 220px;
72 | margin-top: 1.5em;
73 | padding: 10px;
74 | }
75 | }
76 |
77 | .block-dribbble {
78 | background-color: $dribbble;
79 |
80 | &:hover {
81 | background-image: url("../../assets/img/dribbble.png");
82 | }
83 | }
84 |
85 | .block-github {
86 | background-color: $github;
87 |
88 | &:hover {
89 | background-image: url("../../assets/img/github.png");
90 | }
91 | }
92 |
93 | //inner blocks
94 |
95 | .block-container-single {
96 | height: 100%;
97 |
98 | .block-content {
99 | &:hover {
100 | cursor: inherit;
101 | background-color: transparent;
102 | transform: translateX(0);
103 | }
104 | }
105 |
106 | .block-random, .block-dribbble, .block-github {
107 | &:hover {
108 | background-image: none;
109 | }
110 | }
111 |
112 | .block-random, .block-dribbble, .block-github {
113 | height: 100%;
114 | }
115 | }
116 |
117 | //inner dribbble
118 |
119 | .block-dribbble {
120 | .suggestionApp {
121 | background-color: transparent;
122 | }
123 |
124 | .suggestionApp-prompts {
125 | margin-top: 1em;
126 | }
127 |
128 | img {
129 | max-width: 100%;
130 | }
131 | }
132 |
133 | //inner github
134 |
135 | .suggestionApp-languages {
136 | color: gray;
137 | margin: 1em 0;
138 | }
139 |
140 | .block-github {
141 | code {
142 | width: 95%;
143 | }
144 |
145 | pre {
146 | overflow: visible;
147 | }
148 |
149 | .suggestionApp {
150 | background-color: transparent;
151 | padding-top: 3em;
152 | }
153 |
154 | .suggestionApp-content {
155 | font-size: .75em;
156 | text-align: left;
157 | max-width: 1200px;
158 | word-break: break-word;
159 |
160 | img {
161 | max-width: 100%;
162 | }
163 | }
164 |
165 | .suggestionApp-prompts {
166 | margin-bottom: 1em;
167 | }
168 | }
169 |
170 | .content-holder {
171 | position: relative;
172 | overflow: hidden;
173 | max-height: 600px;
174 | }
175 |
--------------------------------------------------------------------------------
/dev/scss/modules/_suggestionApp.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .suggestionApp {
4 | max-width: 75%;
5 | margin: 0 auto;
6 | }
--------------------------------------------------------------------------------
/dev/scss/partials/_buttons.scss:
--------------------------------------------------------------------------------
1 | .btn {
2 | font-size: .5em;
3 | text-decoration: none;
4 | color: white;
5 | padding: 1em;
6 | border: solid white;
7 | background-color: transparent;
8 | outline: none;
9 | display: inline-block;
10 | }
11 |
12 | article {
13 | a {
14 | color: white;
15 | text-decoration: none;
16 | font-style: italic;
17 |
18 | &:hover {
19 | text-decoration: underline;
20 | }
21 | }
22 | }
23 |
24 | form {
25 | display: inline-block;
26 | margin-left: 1em;
27 |
28 | input {
29 | background-color: transparent;
30 | padding: 0;
31 | outline: none;
32 | border: none;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/dev/scss/partials/_colors.scss:
--------------------------------------------------------------------------------
1 | //colors
2 |
3 | $random: rgb(38, 38, 66);
4 | $github: #4183c4;
5 | $dribbble: #de467f;
6 |
7 | $orange: #F89406;
8 | $btn_hover: rgb(199, 199, 199);
9 | $block_hover: rgba(0, 0, 0, 0.44);
10 |
--------------------------------------------------------------------------------
/dev/scss/partials/_globals.scss:
--------------------------------------------------------------------------------
1 | //global things like wrappers and stuff
2 |
3 | *, *:before, *:after {
4 | box-sizing: border-box;
5 | }
6 |
7 | body, html {
8 | overflow-x: hidden;
9 | height: 100%;
10 | font-family: 'Open Sans', sans-serif;
11 | }
12 |
13 |
14 |
15 | .wrap {
16 | max-width: 1200px;
17 | padding: 0 1em;
18 | }
19 |
20 | //clearin floats
21 |
22 | .group:after {
23 | content: "";
24 | display: table;
25 | clear: both;
26 | }
27 |
28 | .pageContent {
29 | position:relative;
30 | word-break: break-word;
31 | }
32 |
33 | .main-header {
34 | padding: 1em;
35 | color: white;
36 | background-color: #333;
37 | position: absolute;
38 | width: 100%;
39 | z-index: 999;
40 | p {
41 | padding-top:10px;
42 | margin:0;
43 | display:inline-block;
44 | }
45 | a {
46 | float:right;
47 | color:white;
48 | padding:10px;
49 | border: solid 1px white;
50 | text-decoration:none;
51 | &.attribution {
52 | float: none;
53 | padding: 0;
54 | border: none;
55 | }
56 | &:nth-of-type(1) {
57 | margin-left: 1em;
58 | }
59 | }
60 | &.home {
61 | position:relative;
62 | }
63 | }
64 |
65 |
--------------------------------------------------------------------------------
/dev/scss/partials/_hljs.scss:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull Build Something Inspired by a Dribbble Shot! Solve This Random Github Issue!
45 | Practice your skills by getting random suggestions or creative inspiration! Receive a Random Coding Challenge Turn a Dribbble Shot into Code Solve a random Github issue Build Something Random!
45 |
46 |
47 | ', {
157 | src: shot.images.normal
158 | });
159 | var $br = $('
');
160 | var $link = $('', {
161 | href: shot.html_url,
162 | text: shot.user.name,
163 | target: '_blank'
164 | });
165 | var $name = $('', {
166 | text: shot.title + ' by '
167 | });
168 | $name.append($link);
169 |
170 | $(CONTENT_WRAPPER_SELECTOR).append($image, $br, $name);
171 |
172 | $(HIDDEN_INPUT_SELECTOR).attr('value', '{
173 | "title": "New Pen from The Practice App!",
174 | "html": "
"
175 | }');
176 | };
177 |
178 | var setup_bindings = function () {
179 | $(ACTION_SELECTOR).on('click', function () {
180 | counter = (counter + 1) % total;
181 | render_shot();
182 | });
183 |
184 | Mousetrap.bind('right', function () {
185 | counter = (counter + 1) % total;
186 | render_shot();
187 | });
188 |
189 | Mousetrap.bind('enter', function () {
190 | $(FORM_SELECTOR).trigger('submit');
191 | });
192 | };
193 |
194 | var init = function () {
195 | render_shot();
196 | setup_bindings();
197 | };
198 |
199 | return {
200 | init: init
201 | };
202 | }());
203 |
204 |
205 | var github = (function () {
206 | 'use strict';
207 |
208 | var data = {};
209 | var LANGUAGE_SELECTOR = '#language-select';
210 | var CONTENT_HOLDER_SELECTOR = '.content-holder';
211 | var counter = 0;
212 | var total = $(NOTICE_SELECTOR).data('total');
213 | var randomPages = utils.range(0, total).sort(function () { return Math.random() - 0.5 });
214 | var pageCounter = 0;
215 | var message = $(NOTICE_SELECTOR).data('message');
216 |
217 | var get_data = function () {
218 | var language = $(LANGUAGE_SELECTOR).val();
219 | var jsonUrl = 'https://api.github.com/search/issues?q=language:' + encodeURIComponent(language) + '+state:open&page=' + randomPages[pageCounter];
220 | pageCounter = (pageCounter + 1) % total;
221 | data = utils.get_json(jsonUrl, {});
222 | data.items.sort(function () { return Math.random() - 0.5 });
223 | };
224 |
225 | var render_issue = function () {
226 | if ((counter > (total - 1)) || (counter === 0)) {
227 | get_data();
228 | }
229 | var issue = data.items[counter];
230 | var $title = $('
', {
231 | text: utils.get_value(issue, 'title')
232 | });
233 | var $body = $(marked(utils.get_value(issue, 'body')));
234 | var $timestamp = $('
",{src:i.images.normal}),o=$("
"),u=$("",{href:i.html_url,text:i.user.name,target:"_blank"}),s=$("",{text:i.title+" by "});s.append(u),$(CONTENT_WRAPPER_SELECTOR).append(a,o,s),$(HIDDEN_INPUT_SELECTOR).attr("value",'{\r\n "title": "New Pen from The Practice App!",\r\n "html": "
![](\''+i.images.normal+"'/)
",{text:utils.get_value(e,"title")}),o=$(marked(utils.get_value(e,"body"))),u=$("
', {
157 | src: shot.images.normal
158 | });
159 | var $br = $('
');
160 | var $link = $('', {
161 | href: shot.html_url,
162 | text: shot.user.name,
163 | target: '_blank'
164 | });
165 | var $name = $('', {
166 | text: shot.title + ' by '
167 | });
168 | $name.append($link);
169 |
170 | $(CONTENT_WRAPPER_SELECTOR).append($image, $br, $name);
171 |
172 | $(HIDDEN_INPUT_SELECTOR).attr('value', '{
173 | "title": "New Pen from The Practice App!",
174 | "html": "
"
175 | }');
176 | };
177 |
178 | var setup_bindings = function () {
179 | $(ACTION_SELECTOR).on('click', function () {
180 | counter = (counter + 1) % total;
181 | render_shot();
182 | });
183 |
184 | Mousetrap.bind('right', function () {
185 | counter = (counter + 1) % total;
186 | render_shot();
187 | });
188 |
189 | Mousetrap.bind('enter', function () {
190 | $(FORM_SELECTOR).trigger('submit');
191 | });
192 | };
193 |
194 | var init = function () {
195 | render_shot();
196 | setup_bindings();
197 | };
198 |
199 | return {
200 | init: init
201 | };
202 | }());
203 |
204 |
205 | var github = (function () {
206 | 'use strict';
207 |
208 | var data = {};
209 | var LANGUAGE_SELECTOR = '#language-select';
210 | var CONTENT_HOLDER_SELECTOR = '.content-holder';
211 | var counter = 0;
212 | var total = $(NOTICE_SELECTOR).data('total');
213 | var randomPages = utils.range(0, total).sort(function () { return Math.random() - 0.5 });
214 | var pageCounter = 0;
215 | var message = $(NOTICE_SELECTOR).data('message');
216 |
217 | var get_data = function () {
218 | var language = $(LANGUAGE_SELECTOR).val();
219 | var jsonUrl = 'https://api.github.com/search/issues?q=language:' + encodeURIComponent(language) + '+state:open&page=' + randomPages[pageCounter];
220 | pageCounter = (pageCounter + 1) % total;
221 | data = utils.get_json(jsonUrl, {});
222 | data.items.sort(function () { return Math.random() - 0.5 });
223 | };
224 |
225 | var render_issue = function () {
226 | if ((counter > (total - 1)) || (counter === 0)) {
227 | get_data();
228 | }
229 | var issue = data.items[counter];
230 | var $title = $('
', {
231 | text: utils.get_value(issue, 'title')
232 | });
233 | var $body = $(marked(utils.get_value(issue, 'body')));
234 | var $timestamp = $('
42 |
350 |
43 |
349 |
44 |
47 |
348 |
41 |
43 |
48 |
50 |
55 |
57 |
43 |
62 |
63 |
44 |
61 |
49 | No thanks.
50 |
58 |
59 |
60 |