From a404c9c2b1908f4b9181d8e60f11b846812757fb Mon Sep 17 00:00:00 2001 From: =?utf8?q?David=20=E2=80=98Bombe=E2=80=99=20Roden?= Date: Fri, 31 Jul 2015 10:53:34 +0200 Subject: [PATCH] Rework pretty much all image displaying code --- .../pterodactylus/sone/web/ImageBrowserPage.java | 2 + src/main/resources/static/css/sone.css | 8 +- src/main/resources/static/images/broken-album.png | Bin 0 -> 6293 bytes src/main/resources/static/images/broken-image.png | Bin 0 -> 1384 bytes src/main/resources/static/javascript/sone.js | 18 ++++ src/main/resources/templates/imageBrowser.html | 100 +++++++++------------ .../resources/templates/include/browseAlbums.html | 48 ++++++++-- .../resources/templates/include/pagination.html | 1 + .../resources/templates/include/viewAlbum.html | 52 +++-------- .../resources/templates/include/viewImage.html | 12 +++ src/main/resources/templates/include/viewPost.html | 16 +--- 11 files changed, 139 insertions(+), 118 deletions(-) create mode 100644 src/main/resources/static/images/broken-album.png create mode 100644 src/main/resources/static/images/broken-image.png create mode 100644 src/main/resources/templates/include/viewImage.html diff --git a/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java b/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java index 5674ee8..58aee5c 100644 --- a/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java +++ b/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java @@ -72,6 +72,7 @@ public class ImageBrowserPage extends SoneTemplatePage { templateContext.set("albumRequested", true); templateContext.set("album", album.orNull()); templateContext.set("page", request.getHttpRequest().getParam("page")); + templateContext.set("albumPage", request.getHttpRequest().getParam("albumPage")); return; } String imageId = request.getHttpRequest().getParam("image", null); @@ -86,6 +87,7 @@ public class ImageBrowserPage extends SoneTemplatePage { Optional sone = webInterface.getCore().getSone(soneId); templateContext.set("soneRequested", true); templateContext.set("sone", sone.orNull()); + templateContext.set("albumPage", request.getHttpRequest().getParam("albumPage")); return; } String mode = request.getHttpRequest().getParam("mode", null); diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index 68c9878..49f2cba 100644 --- a/src/main/resources/static/css/sone.css +++ b/src/main/resources/static/css/sone.css @@ -734,6 +734,11 @@ textarea { width: 95%; } +#sone .images { + display: table; + width: 100%; +} + #sone .album-row, #sone .image-row { display: table-row; border-collapse: separate; @@ -748,7 +753,8 @@ textarea { position: relative; margin-top: 1ex; margin-bottom: 1ex; - height: 120px; + height: 122px; + overflow: hidden; } #sone .image { diff --git a/src/main/resources/static/images/broken-album.png b/src/main/resources/static/images/broken-album.png new file mode 100644 index 0000000000000000000000000000000000000000..324d9c4960765931d8190cb0cbdd65b75f231c0c GIT binary patch literal 6293 zcmZ8`2Q*w=)b@-~qjy2Hh|UN>ln4_qqL&#GbtHO;-Up*c^fHKEBZfirAPgc(2qF3i zA$liKL%#dI|62dI)_2$1=gi!D=A5(c*?T|FvnS3#PlNgf`wb8XMEzJ(%?Rj=01F@| z1zO*db9bO4_J%!%lLHru-1a5#ox(%&sW&iw`dT&_dE#U2Ztvr7<7Ef( z_xG1@dg0>z+{VLB!rjXucTb5O1Y%=&tfmSN$lJ{icC|3g?|;asujH58T5vx!k)y&d zFF=WQzMJ9)uaS5euF>2O33e+t@-wY_$t=QvMNewEwfz+Wvn4A(RRvC1D z5&82*ViGJS4o&-QU?zN6*@$eQs&Oj&-d~7pIBJXmCaop6fA^W zec$yt|Fxy(3w!lc1e`~^0XEB%$nIY$#^Dn8_Fe!#!QpUcDCIzF)ZT1E?CyLEYe)a` zGGDuY)%Q44beCtzANAi^w&2{^hziUy!iH>Y$>&E-PR@;pZwm_}HJ0r^uWD)}EF@g~ zY^G~01C+R?rlvj?2XTy%-gf(qIlOO`($plAnVI>@tkP==%b+EINUoqm%goYrxPb{XGj+F= zZEy^6#DlhJwo;Y#Mm=e`>gt(`c0Wx@q=SRiqW3M8c%uh4yAY_rhpDZj)z7w4uU|0{ zDDE&&OolEH%|Q_y29!(j(9VHM^G%<*uP_tsO86@a3Bgld=RCT%Uw^dDli*43 z<@e9YUH=?RN9_kMde`g7l9)vw3%$IWK{B{5s0DIq7|8;<_=S2;gX~Nj&mdSwA9hnjav{X<4LrOjYk;SgIz&EhNk)8vSO);UTSf1@twu4LKPnT z%nVyMG9{9Xc4#+8gDWs<@oLW>{f)M@u8zmNQvuzUb0?n=1KRSsL3Q`8bhwlKp0vS;GjM}K0g!VzCRX$leoaWL&Ez&RJ?tQnlrAZd);QSo z?mX~;cgw6-GDAE{zGX!j^I%7S9sdb^NKL&4NtAv~)zHuY%u@1I=&NJKv~^fM9E+r* zDykYX+~la+H6KeM<%-zhkRkdZ)M^DjeNlFf>DPt5Ep;gB9S#w#d%XLpFW~IXOE&^Yujp4nEL)aC0AWZQ`j!X+iYmcDE2duS`?2?v}_Twe%MO zwA>2<^2Lj!kjs-n!LG}NeXomOP67e~*{@%FiX9kLda=|opa!6(q?CH;XJ4P?fUeDU5|WdvKz}y%!?f@BM@Zz&y%Gpi_gXM1}k-~apFx$h@0UhGeBj`ASZwS-FXPgP76tC-Lt8n!4@ zo_^?2`qA~lfyX4cBk)*2R8*AUJ^BEjNpg>>Zo5 zw6u=C{^zjKFJIWHhuqZIi`d3F7eNwyzCoiPC@4(AC(?_>!^Hu%APqS3`6@KbsjQCK zQ0g@t>`1CytOavqQRe+Xm${vwCy>4aV8NqU8qbX}-pTi_vY(?VS>Z@MeSKh&QYz=M zQa5}^?))Q7Np{i$vAR$8A78QHfBdkyO@hq^a#>{Lxa-K;e%RtY6byqN6G6d(c*Le< z5LoNUT|a3_Njx48qJ8+MZi_HkWojoB-Fq{>uhrv6M8Q_a#(}jks6lhhn|O)v-kZ?s z8QH#{8H4Wq;qji^SM3NAb~5XRI?in_BODMx!!OxvaY@+;5!?K&^E*Op3{lhJ&u$B> zDwKx(y5ysT)M^X=7B+(JTqK=H5o3 zRz^i032N{CdH`UKuCBI7BpNBH85Z_1Tm|^>a&bQ^F@Xy}zPnOVJwPHrxh{5wXi0pB zNU&aZa)Io0b#w+mZ59%+V!E(v?{4hE-9g0AhGUYc)u7cSo{XT_l6LeY4YM^<<7`@a z?|{d4QOqzCE>gbLATFzrF=+cU)Eox@c({rRi9N7rNJxksqad!P#<@M@i&4p-0S!Ja zY2ZH>f+OThOW$*cT};e&J@o8p{u>}oXF{or{{7n*fTo{3bkeEIhXEZ(gV^cqzWr0_ zd-pyrE%Ai@mu2yIG)h;DWn~IyK2(dL`YT1ebavLdWh>qYX+nI#dE7q*+3phK$)hHt z^o3G22S9#)e$Ik|ub~yAj))nJ#RGc$Z{a!CTFIhM%P{fAnZedE<%L=+e`AbWvpt#>8X&Oa2kwzlmQ! zkV2SaK~MFG_Ca`qvB~Erc~w^ATzsRl3*{#rgiQ2i~o)ECeC-g719$Y=0` zdjsNeBjsuf_Pl2@^C&!im9h~_93`&F=(d}7>ma;l@Nx6oii+6GOk6Z^LJ+=)7N4tG zEDHi+w~9}|xtnM!WC;iw3BbqhJAg5hP)%1yACq7e(GQW~^|Ju{V}nBfUSAz?Mmaye z#D^$be|2%8hbjJmtal*A(drM7W3)&^jk4n6a21}SV_8gU(oT`cBtw*6FIioEeNXWI z2f=+sJFqB%B$BBBS~bNv!Wx*y9!E6_4#8+Fy72tErXV@GcUnYt(I`wexHmR-YKfC z!IZGeQs?U7EK`nJ($&>H(s^%|mhSmzZcxK-+Q3d}i7IW;z(gIKvG^UBV8`+JC7wtz zb~?&Th+E&W!l(L{!(%Pb^z?M#=-eQd&`3R zMcg!3uBE_BO-+rJ{L``+YMz_(k3Wk^>3N=AgWypgISCP%u(yS~K(2->f(uiO>0S*! zhWRP*0>ODtMrQC*y|f4;rKR%~b(bqS7D7e?7q^UkT08pqENZ9V&vydB!UJ>SDl1w6 zYi3k&WAXumK9lm2-z2HC?acPLZy^I3fp<@$^)+duf=pkqR`FrdoNm^e;{Q>V#=t@3q24_?hjc$E*x#6;r=3Q>aoAEF+f?}R02@_iK(ei zKnnhBZK1Bvh7_>}KhGFoH6Ed-zm4z^#|!#Q&#_zo8F43|eo#K8;jVGywlOu$5(i~& zMkST9HH!S?k>2Qr^Oi^9$_H?+3Cy^$eKiWKh_6wQx`|NLum=toLu2mWj{Y%geHyNR_klf|*=-F#aQ-JA{B_dZYCd>HZtuC+c+ zv+z`}IO-TX%`rO3 zS>0qK)$kL8ke{DFJK0-sIclEbhim{~DMM3?pq%;kt!#*dDZa1qwrEUNL=y?#%!y1O zeQ>K=5Z+7o9bf?j-)YM?U13Xj@MJ`W$pfS$EmD`XqS>m|!1650nGGfyUO9JCC_qoo z=A(jFLd#@9?U^jPG|REHg%(9~QDa()1{xwX{n(|n^JgN|Mg1#3mbxRAuFqCD?|XpI z&zGDVylp-<%ii}L0+^K zc0S(}zLu8C>lF;oP2CGvdu^_CUbdMn(k{02=@TiybcZHb(Fm%c8|ZX=#m6rI>QEI8 zurkJ}`7BnKmq!~2som$ax3!Hj5c&w9-0VBMRgSA$GiMdh(A1EJ=W&7LICy&>zgRJX zyfAQ$MgM`FaM5TriO+irFE@zCj~)_S_+7#^#08W&%nC3fN}`#uG5q%r!4#yC35kh= zQzIKg4`6e07k~GUjN9|%4G$wB>D<|?r3bxkUyPYtf_5kWP-B(EJ!0lOE=YB z9mGC_UvVUHJ-~kW1P@D}49sA})4!9Jmmj=3U35Rp{8ZM24g^z_ixnqkx&yrbKXtr3 zgb^Jc9c4`Jw{yX0@&o$aH0I;Fx_0%(uX}_Gx%{d!#bPPM0UvUxz5WK$$^$zAdPVT> zxh=|;h9HOKACymQmbi%=p00k*3Ou!3nBcLEv$$tQ?n13>pxFVml+_UwYCnsC*b#GJV}Xf-o;0Tp4=2vTUqF1uf=eY2bgkLvAJxg)+wX0aG0f ztpU;yn9NNtD`K3cdv+5%pE_)prwgjJ?)pL?6ciO# zzp*w|141H+Q@$tlwg$YvVOES4YBk)Dy|S``l`Tk8RxvK+LDHhrnFd)`GJerOnd?o` z)6?@5e6>2)$R3`7t*?)=ZnZ2=rp)iY>FO%Hz79>grT9i63po9P0s)rz!(!SHOu*#Jl_!NuAU>nn{R6*4Y-Nel&ht2+2GVbkw%4=gmw5O_n#%Qee$!R z$4dRlp}$J8E5LajuaAn-j+Bs(NCTOosM`5HU$XLr5MXaB_eB=%chSL?=L-INoU_#; zr)A~zbc$BKsZi3l0GYXotF5g9eWPie#?%t2zI_AWMKTG~`Lh@sQR{?!FqxlFzMiy< z%s>1LyzGfmGBSO+?wx~kIe+$k$~12eW#wB+0xy842@E>%BhT+d1KCDERb&F z=VwAH&YpO5v0b}U)oBt*kpTwDO*&*Zvta&jVd|Ng&9s-?KN_?0+|CH1U4shF(;dsP@H)b)^yg5O0z zZ0_Fp!}_%D*9$73jrl*EL>F?W;-6Oz>)aQWBf5)}jwOFIsZHfB)XmY%j!AAL4{) z|298grPF^RVU)X==IFtg4HK*9N6f3vr}m6q%+_avc|NXDsa9eC5#0Ec$gx9s zZ#>I!NP1vXb=stu{xghESC4*bS4_cF_YY-imbefm(;F(A&<;pXul*0FYlu~#I?C)H z!Iw%NOLNPJ>w@GU*<{~5AO6O_KnbthJeNge^bo0RQwZaWO`7sL`Tct~?cK@8IL3cd z`p_eN@M3+?;+D93po3E)&iDMd=?Z=FnqBpN6&M;7uq&r$`n ze~j5oefIUps49Q|z;I(HtKrX>#*#KhFNY1wrI8U`VY#$Pc+gsi<`fR@-YQP>Qb@(p zzouR@lE@n$=JW;Q6@g8Ag{x^(VUKAn->9gP2NC6Fc>gnPb zQZeW4-TisD!z9{1s=Ku#MH-W8HciiIxcu@; zRnMCx5=iPq7R(50fN4VE++nR?=~>%;Bf-aZwz+4WM52a0<9-J51N;YezO|6=ZDifR zUBi1O=XmF-v$hEx{0S_7SZlJ)&$++;$mr83yt{BwvEYNM8b>a{xL*AaB8lG^^Sbmm z^n6(MgGpa7P4>a_N8CC}dvy05aBjKDc0*;KLRyROWA37UgVPMRkBA@X*pOS}cup`) z{DIj=R%f>zK;AmRG|`0VKbjPk-blqyNN%~wQsMIbN0Zfsf%v03a*!vbTnh!$H@1>{E%Mz<9&R)U+XofAGmM3 z?sAkFqmz}O*1l((xCGuPht#}H5m&h3y5h&J(?$**@(Ul`_S?qjw1-3V{P zA4@0KHWcyP>)I8F0C|b=Hpke{F}0W|f02^6;1Rgg zb)mTCfr*2MveWyIjgJ`)nmHW}FP2rf;j-d~U7@_fk=}rhvCA03lYsnn!426?E&us8 zy!)=P&sQYDrF;#$#{{MrVY`S6&u?cRtbMcIb+Quc4x=N>qtW*R2`*N+Q`MUN0$h-LW@^xu^Ch zlk1MTI?P*k#k48q=}t z!l~tb)yx%UOy8b^E_Gj=I^1UF`RM!a_E&%Z@%O`o<^1xWwp?bJ{rBTH z-S+eIKVNOrB#fuh=(K5C~O=giZaexXLPciQRCpA*v} zzyJDLv~&0EylppgCIqTYKKbd@zlgVsGd5YV#23}@EMI=MuFRzAr;MDfRGC`CM+q_R z8@WHGWSTXnpKqIcGGHI0(`Jt3W8x;g2A_W@d}nz0SupB|_#Lr@%|8w}H*BzUI{l+* zwo-|Zd*Jdadr1?U}8a zf1|wlf?@=y1Ob{A@ZxBDVCB!H-TxU&mi=7g^S%EEuvBF5boFyt=akR{ E0Omw!h5!Hn literal 0 HcmV?d00001 diff --git a/src/main/resources/static/javascript/sone.js b/src/main/resources/static/javascript/sone.js index 07c5b3d..3235f51 100644 --- a/src/main/resources/static/javascript/sone.js +++ b/src/main/resources/static/javascript/sone.js @@ -1878,6 +1878,22 @@ var currentSoneMenuId; /** Timeout handler for the next-to-show Sone context menu. */ var currentSoneMenuTimeoutHandler; +function replaceImagesWithErrorWithBrokenImages() { + var replaceImage = function(imageElement, sourcePath) { + $(imageElement).attr("src", sourcePath) + .attr("width", "160") + .attr("height", "120") + .attr("style", "position: absolute; top: 0px; left: 0px; opacity: .25"); + }; + + $(".image-in-album .image img").error(function () { + replaceImage(this, "images/broken-image.png"); + }); + $(".album .image img").error(function () { + replaceImage(this, "images/broken-album.png"); + }); +} + $(document).ready(function() { /* rip out the status update textarea. */ @@ -2005,6 +2021,8 @@ $(document).ready(function() { /* activate status polling. */ setTimeout(getStatus, 5000); + replaceImagesWithErrorWithBrokenImages(); + /* reset activity counter when the page has focus. */ $(window).focus(function() { focus = true; diff --git a/src/main/resources/templates/imageBrowser.html b/src/main/resources/templates/imageBrowser.html index a237c7f..3a720b6 100644 --- a/src/main/resources/templates/imageBrowser.html +++ b/src/main/resources/templates/imageBrowser.html @@ -391,51 +391,46 @@ <%first>

<%= Page.ImageBrowser.Header.Images|l10n|html>

<%include include/pagination.html pageParameter=="page"> +
<%/first> - <%if loop.count|mod divisor==3>
<%/if> -
- -
- <% image|image-link max-width==250 max-height==250 mode==enlarge title=image.title> -
-
-
<% image.title|html>
-
<% image.description|parse sone=image.sone|render>
-
- <%if album.sone.local> -
- - - - -
- - -
- -
<%include include/pagination.html pageParameter=="page"><%/last> <%/foreach> <%if album.sone.local> @@ -614,32 +609,19 @@ <%first>

<%= Page.ImageBrowser.Header.Albums|l10n|html>

<%include include/pagination.html pagination=albumPagination pageParameter=="page"> +
<%/first> - <%if loop.count|mod divisor==3>
<%/if> + <%if loop.even>
<%/if>
-
- - <%ifnull album.albumImage> - <% album.title|html> (<%album.sone.niceName|html>) - <%else> - <% album.albumImage|image-link max-width==250 max-height==250 mode==enlarge title=album.title> - <%/if> - -
-
-
<%album.sone.niceName|html>
-
<% album.title|html> (<%= View.Sone.Stats.Images|l10n 0=album.images.size>)
-
<% album.description|parse sone=album.sone|render>
-
+ <%include include/viewAlbum.html>
<%= false|store key==endRow> - <%if loop.count|mod divisor==3 offset==1><%= true|store key==endRow><%/if> + <%if loop.odd><%= true|store key==endRow><%/if> <%last><%= true|store key==endRow><%/last> - <%if endRow> -
- <%/if> + <%if endRow>
<%/if> <%last> +
<%include include/pagination.html pagination=albumPagination pageParameter=="page"> <%/last> <%/foreach> diff --git a/src/main/resources/templates/include/browseAlbums.html b/src/main/resources/templates/include/browseAlbums.html index 74bf714..4961e74 100644 --- a/src/main/resources/templates/include/browseAlbums.html +++ b/src/main/resources/templates/include/browseAlbums.html @@ -1,9 +1,47 @@ -<%foreach albums album> - <%first>

<%= Page.ImageBrowser.Header.Albums|l10n|html>

<%/first> - <%if loop.count|mod divisor==3>
<%/if> - <%include include/viewAlbum.html> +<%foreach albums album|paginate pageSize=core.preferences.imagesPerPage page=albumPage> + <%first> +

<%= Page.ImageBrowser.Header.Albums|l10n|html>

+ <%include include/pagination.html pageParameter=="albumPage"> +
+ <%/first> + <%if loop.even>
<%/if> +
+ + <%include include/viewAlbum.html> +
<%= false|store key==endRow> - <%if loop.count|mod divisor==3 offset==1><%= true|store key==endRow><%/if> + <%if loop.odd><%= true|store key==endRow><%/if> <%last><%= true|store key==endRow><%/last> <%if endRow>
<%/if> + <%last> +
+ <%include include/pagination.html pageParameter=="albumPage"> + <%/last> + + <%if album.sone.local> +
+ + + + +
+ + +
+ + +
+ <%/if> <%/foreach> diff --git a/src/main/resources/templates/include/pagination.html b/src/main/resources/templates/include/pagination.html index 80248d4..b2bafcd 100644 --- a/src/main/resources/templates/include/pagination.html +++ b/src/main/resources/templates/include/pagination.html @@ -7,4 +7,5 @@
<%if ! pagination.last>»<%else>»<%/if>
+
<%/if> diff --git a/src/main/resources/templates/include/viewAlbum.html b/src/main/resources/templates/include/viewAlbum.html index 0821909..8a3d6de 100644 --- a/src/main/resources/templates/include/viewAlbum.html +++ b/src/main/resources/templates/include/viewAlbum.html @@ -1,45 +1,17 @@ -
- -
- - <%ifnull album.albumImage> - <% album.title|html> - <%else> -
- <% album.albumImage|image-link class==album-image max-width==250 max-height==250 mode==enlarge title=album.title> -
-
[link album]
+
+
+ + <%ifnull album.images.random> + + <%else> + <% album.images.random|image-link max-width==160 max-height==120 mode==enlarge title=album.title> <%/if>
-
-
<% album.title|html> (<%= View.Sone.Stats.Images|l10n 0=album.images.size>)
-
<% album.description|parse sone=album.sone|render>
+
+
[link album]
+
<% album.title|html>
+
<% =View.Post.LinkedAlbum.SizeAndAuthor|l10n 0=album.sone.niceName 1=album.images.size|html|replace needle=="[link]" replacement==''|replace needle=='[/link]' replacement==''|replace needle=='' replacement=album.sone.id>
+
<% album.description|parse sone=album.sone|render>
- <%if album.sone.local> -
- - - - -
- - -
- - -
- <%/if>
diff --git a/src/main/resources/templates/include/viewImage.html b/src/main/resources/templates/include/viewImage.html new file mode 100644 index 0000000..4e9087b --- /dev/null +++ b/src/main/resources/templates/include/viewImage.html @@ -0,0 +1,12 @@ +
+
+ + <% image|image-link max-width==160 max-height==120 mode==enlarge title=image.title> + +
+
+
[link image]
+
<% image.title|html>
+
<% image.description|parse sone=image.sone|render>
+
+
diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html index d150d4f..5ce2d28 100644 --- a/src/main/resources/templates/include/viewPost.html +++ b/src/main/resources/templates/include/viewPost.html @@ -38,19 +38,9 @@
<%foreach parts part> <%if part.class.simpleName|match value==AlbumPart> -
-
-
-
- <% part.album.albumImage|image-link max-width==160 max-height==90 mode==enlarge title=part.album.title> -
-
-
-
<% part.album.title|html>
-
<% =View.Post.LinkedAlbum.SizeAndAuthor|l10n 0=part.album.sone.niceName 1=part.album.images.size|html|replace needle=="[link]" replacement==''|replace needle=='[/link]' replacement==''|replace needle=='' replacement=part.album.sone.id>
-
<% part.album.description|parse sone=part.album.sone|render>
-
-
+ <% part.album.images.random|store key==image> +
+ <%include include/viewAlbum.html album=part.album>
<%/if> <%/foreach> -- 2.7.4