Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

firstrun: CSS arrows, changed the close behaviour.

Browse Source
This commit is contained in:
Nicolas Stepien 2011-06-20 02:00:44 +02:00
parent e0fe93d204
commit e3aff3ab6e
2 changed files with 60 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
4chan_x.user.js
View File

@ -2475,24 +2475,19 @@
};
firstRun = {
init: function() {
var a, aa, css, dialog, style, _i, _len, _results;
css = " #navtopr, #navbotr { font-size: 3em; position: relative; z-index: 99999; } ";
var css, dialog, style;
css = " #navtopr, #navbotr { position: relative; } #navtopr::before { content: ''; height: 50px; width: 100px; background: red; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform-origin: 100% 200%; -moz-transform-origin: 100% 200%; -o-transform-origin: 100% 200%; position: absolute; top: 100%; right: 100%; z-index: 999; } #navtopr::after { content: ''; border-top: 100px solid red; border-left: 100px solid transparent; position: absolute; top: 100%; right: 100%; z-index: 999; } #navbotr::before { content: ''; height: 50px; width: 100px; background: red; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform-origin: 100% -100%; -moz-transform-origin: 100% -100%; -o-transform-origin: 100% -100%; position: absolute; bottom: 100%; right: 100%; z-index: 999; } #navbotr::after { content: ''; border-bottom: 100px solid red; border-left: 100px solid transparent; position: absolute; bottom: 100%; right: 100%; z-index: 999; } ";
style = $.addStyle(css);
style.className = 'firstrun';
dialog = $.el('div', {
id: 'overlay',
innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> link for options.<br>There is another link at the bottom of the page.</div></div>"
className: 'firstrun',
innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> links for options.<br>There is one on top of and the other at the bottom of the page.</div></div>"
});
$.append(d.body, dialog);
aa = $$('#navtopr a, navbotr a');
_results = [];
for (_i = 0, _len = aa.length; _i < _len; _i++) {
a = aa[_i];
_results.push($.bind(a, 'click', firstRun.click));
}
return _results;
return $.bind(dialog, 'click', firstRun.close);
},
click: function() {
close: function() {
$.setValue('firstrun', true);
$.rm($('style.firstrun', d.head));
return $.rm($('#overlay'));

61
script.coffee
View File

@ -1853,9 +1853,57 @@ firstRun =
init: ->
css = "
#navtopr, #navbotr {
font-size: 3em;
position: relative;
z-index: 99999;
}
#navtopr::before {
content: '';
height: 50px;
width: 100px;
background: red;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform-origin: 100% 200%;
-moz-transform-origin: 100% 200%;
-o-transform-origin: 100% 200%;
position: absolute;
top: 100%;
right: 100%;
z-index: 999;
}
#navtopr::after {
content: '';
border-top: 100px solid red;
border-left: 100px solid transparent;
position: absolute;
top: 100%;
right: 100%;
z-index: 999;
}
#navbotr::before {
content: '';
height: 50px;
width: 100px;
background: red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform-origin: 100% -100%;
-moz-transform-origin: 100% -100%;
-o-transform-origin: 100% -100%;
position: absolute;
bottom: 100%;
right: 100%;
z-index: 999;
}
#navbotr::after {
content: '';
border-bottom: 100px solid red;
border-left: 100px solid transparent;
position: absolute;
bottom: 100%;
right: 100%;
z-index: 999;
}
"
style = $.addStyle css
@ -1863,14 +1911,13 @@ firstRun =
dialog = $.el 'div',
id: 'overlay'
innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> link for options.<br>There is another link at the bottom of the page.</div></div>"
className: 'firstrun'
innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> links for options.<br>There is one on top of and the other at the bottom of the page.</div></div>"
$.append d.body, dialog
aa = $$ '#navtopr a, navbotr a'
for a in aa
$.bind a, 'click', firstRun.click
$.bind dialog, 'click', firstRun.close
click: ->
close: ->
$.setValue 'firstrun', true
$.rm $ 'style.firstrun', d.head
$.rm $ '#overlay'