From 2a622f27266cf7e938ba6b80cfa9ae2b1be59d1f Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Tue, 30 Aug 2011 22:58:31 +0200 Subject: [PATCH] added left/right navigation arrows --- img/left.png | Bin 0 -> 2525 bytes img/right.png | Bin 0 -> 2526 bytes lib/ComicBook.js | 35 ++++++++++++++++++++++++++++++----- styles.css | 30 ++++++++++++++++++++++++++++-- 4 files changed, 58 insertions(+), 7 deletions(-) create mode 100644 img/left.png create mode 100644 img/right.png diff --git a/img/left.png b/img/left.png new file mode 100644 index 0000000000000000000000000000000000000000..c90ff008c7fedfbdf440e3897dcecd686612804f GIT binary patch literal 2525 zcmbVO2{cr18^1%Mz7~?T{+WiTFmq>y!DJg|hAE?oA+#`NE+(@zbA=&Wl9VE)NYSbV zDWsB23(Exd08<(6 zR4-&r7`rr7k^AS4OeL}yz%)PDTO0yMa-N6o0P!FWB;fD_OS}!4NFakC`q#i9)}*`;vKN*9 z%N9a8V8UQnLdM}DBO|eqM66gEio@I4*^TKS5G)Z6OIfrC=0sVFWX9tfsE~{+^4hx%+2BV~mJ53qz!o(7^tG6|p z$>H)vWAs>genv}$r2KUdk1iDp(LeG_=KsMy-S&UQ{Zp3r|KtpZID;Dl$A5rj{0Kqd z*!DN{5#o3AKq91Lq)2Owddqu}jssX8Y}y2M^_hBl&CSgR4jxoozTDs6?@FU3ZrDI1 zk&I1EgL%Bn9XmQYI;1e{?c-B=`t<1NsFs%2j2SbuwY6u?oT;OuqpPc{r>Cc{uWw*r zU}$JKYu2pUvuFSH*I#qy%rP=DLONvb+_@MG#@N`{#KdIYym_XkreQ0;o-q#GCe&# zmo8n(VzHJjTju5EeYdP zfk8n*91bTqIGD@j@_0N5fqN1Xrqod_=c}z@9Y;5fM_3Pu};^O1u6A}^<6BCn?k~VDE zker;napT66l$1@IHl?PfZr;2(EiG-!mMvSiZcR^5-?nYr_U+p+qZB3{{8v+`2__92M!>$J$UHQp~Hs{ zA31X5=+UEvg@wnC9Xo#f_=yuIPM$njR8&-4TwGF8a_ZEn(o&?zr_Y=@Q&v`1US3{N zQE~R{*~-ewbLY;TKY#whg$q?xRTnQ_tgf!Ubm>w}O^rfwy?X81wc6U+ zy1KgS*RR*t*EcjY+_-V$=FOY8Zr!?l`*vevV^dQTg0wq#?%ch5_ujpG_wV0-@ZiD2 zhYue;deqX=^7!%N*4Eaxwzl^6_9suCJbn7~*|TQ|_BuN|pFe;8;>C-uuCDIx?w+2W z-rnB6zP^_)U%qhC@-WpTB(h^7ZT2 zfq{X+!9k@`IW#mhJUsmE+qduEzmJTJAYi8YBo`x}7%kY#(;FfGYXI|#bAkatrHetO zu%lYvv@)e#=qYMJ=L;0ho%@IL(~Kpm+nQf0i*qN5J}1`;nlV*_>o=p?&_iGIw~&HV z|DMi+F%RVZagVyQgn=6KUy}R0H-^1h4lJGquLwO6jV9id9ux0{Zdq*!!_nq2|o#ErFvNJ2WJ9lEiY?G3*M%6jm%2SD~ z5L8Ofn)&*`wwR=3j5aEj#Hu9UI>-pnASvdPSiMM+To=%18|ve?-)gRRj~8oNzloRHQ-oS?2! zFL88z4*;m9_-TQwu#N>q^=4}X&Z~Dkt5G+Jovzt6usdl^L2*N&LaoJG`JK|NI!IIU zauULq#YN&xVyC2isxqfcFI`wO9769i*;C)|I87sO0#Ql*lyLrAw1O8Wo|^!aDXTXE zDuXp2)$&Wq0K(Ef9jXy%&f1eAQ&CgoIYSHfYfjKnBqt~>^y7A=s%1_}EqBi-f0}w& z<>Xh-!R?A0W|Yy2JQk||xa15W|$R&q%)c6Sel$CpHD`RRiao`p8&KPGO zJDj0MVr8!yLpx}m8>w)0obEmYor=Ahxo_^@3PYuRZUprwQC3VtGA9FjS`Xam-6O&$4 z=n`TY4CUF4qGR01dz`m|%qRYntgIYc1}^)L_#DXgygGzise9hE<$l2PAZUt#AiTCs zZZwdhY4pCEntprUs{FdE2Hu$~mppA177sWs8W?&h)Cvr-sT3LmTpKXk<-YY*)SN}Fbm2uwo(dX=3rtLGsl|0tXYyuvJ}xGT2M%f zLYtH&X%Sjvtt4BKO72nV-upZ~|NA`md%knN@BPlZzrXjKlgx0iUb0AW5dZ*7Y;CB{ z$QnI&Nr@x(kKG5Rk!2N3bBA5{zHlg02mzLCz7GW2a+!XRGsI+v2i=2A0YKcB3djSRV=h#FD zA(sdTS5`y-%b1O}Fb7S;NQeS11T(=fZXi!Y3Nu6h&`U!0bH`XT_=5!wFhl=z%H5s; zQusm$G{E3=SvVpNB;ql6J$*w%!}TBmhsR-Y1T3DQi#H_c5lA>3_-mjMYeKd!$(c(3 zWecIq(EcziAYrkgp`n;iJq%yyhs7Hk8_($=5Ofg^T~Rm>W`^nVM5^-|sE~*yCX_j0(<-4ig}`6i9%9_4Py$hcnl89<<7ykfJaHseD#27vjOTR5LX41jFXANpwR) zIv#JRk256Th(>t4B|*>7QlC!1=@Im;s5Ikw9egqmh_JQ>D?(S|O47<3woxgBlc6L@)R#r|-*X!!)VlWsi7K_8-@OV6dK+x0E)7RHGFfbqziAet$85tqHLn4t(OiWBo zP0h^A%+1X$EG)=mvZbY^m6a8RLZMQrG#ZUgr(0WF+t}FH+S+c|uwmoIjdpf+_V)G; z4i1ivjtmCF$;rvt+1bU##nsi-&CPAorcIkSZ+3Tg-?C-P)~#DTJUq5-+qQlCc27@F zFE1}|Z*L}(>Eq+WVzJn4HUvSwzP^5be*XUc91ds4jvWC30fB*mTrQW#PHA3l8K$dTOK+`PQJqeqYC=jRs`6dXH-)b{v^6DLld zJXu&+cGI{vSFT*Sdi82`b@jDt*REf`UQ<(3TU%RKhoI)h&6_uG-MV%A_U$`& z?$p=U-@SXcp`qd4y?giX-*0SeY-(z1ZfU3S$0sHxK7Rc8>C>ml$;qjy zsn4H3Pft&O`SRuK*RS8ceVdt?`TqSo0%odPdvZh|WEpwM#o!YgW2jHtu;w@=`9@nD?l5$rf2}N7Q}p24G0y z+$aOc(4<~5UA;e55d1hNx+lJL{~&4&Jwm%#?0wr7zdTg2)78fIAo3>yV>kgkGo2q= zZ@O@0Gk>unpmFPoyW|MUNj+mkGLTT{g9RH;c76d2n#8VoB=LbnJDpeJ=Lr{_CBY_% zY%6iO^2=3YIZE6ARJIm&sKsm|2ir7HP%Mtb1BhneXTzqeYIM2(nZI zavBmBBm-1`RJxcWkm@hBNSgfNrgE%=c)?v6tN;fDNQ9%Lfij)OMeC)=D!0oNRKaJK zWH~iU2~-%?Zjq7{=(*4aCFLEl)&US}NXwFOUjV2vP&hGZ@>K6-@;|^+HByr*lGn_a zm#>m=y%7!nQVW2V&^|i!Rp+x@-E^o|-Hhj0jMQkPHGh-p zkvj`V@(8utE#B6>d0|!%8n^bnRl4`#e&@X9M^JhYDS|die7ViCYof~ zYIL2a@l?*e0WIP=`mKyy;dLdQoP1*0RPiTKatypEwnvF;NePC&g2^KBfT zWPTi|mrrYo@_eu@sH0SUr~NDMpb>WPMUKUb(BW#`JeA7bT?*c)74tJndDJ=@1?255 V<(|xK(4G6^vZXmtORc

'); + $(canvas).after('

'); } // I am using recursion instead of a forEach loop so that the next image is @@ -352,7 +373,8 @@ function ComicBook(id, srcs, opts) { : window.innerWidth / width; // scale down if the window is narrower than the page break; - default:throw "invalid zoomMode"; + default: + throw "invalid zoomMode"; } var canvas_width = page.width * zoom_scale; @@ -402,6 +424,9 @@ function ComicBook(id, srcs, opts) { // revert page mode back to double if it was auto switched for a double page spread if (is_double_page_spread) { options.displayMode = "double"; } + // resize navigation controls + $(".control.navigate").height(window.innerHeight); + // user callback if (typeof options.afterDrawPage === "function") { options.afterDrawPage(pointer + 1); @@ -550,7 +575,7 @@ function ComicBook(id, srcs, opts) { e.stopPropagation(); - window.scroll(0,0); // make sure the top of the page is in view + window.scroll(0, 0); // make sure the top of the page is in view // western style (left to right) if (!options.manga) { diff --git a/styles.css b/styles.css index a723729..ec77338 100644 --- a/styles.css +++ b/styles.css @@ -9,15 +9,41 @@ body { } .control { - background-color: #000; color: #fff; background-color: #111; margin: 5px; padding: 8px; + opacity: .9; +} + +.control.floating { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - opacity: .9; +} + +.control.navigate { + position: fixed; + top: 0; + cursor: pointer; + width: 128px; + background: center no-repeat; + opacity: 0; +} + +.control.navigate:hover { + display: block; + opacity: 1; +} + +.control.navigate.left { + left: 0; + background-image: url(img/left.png); +} + +.control.navigate.right { + right: 0; + background-image: url(img/right.png); } .ui-draggable {