diff options
author | Yorhel <git@yorhel.nl> | 2020-07-08 15:41:11 +0200 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2020-07-08 15:41:21 +0200 |
commit | 85c30e85784364359f3dd5e704e7d39bd8489ac1 (patch) | |
tree | d651faaa3338787e1cb1c75ad1e8916126d5d71c | |
parent | 378768fcf7df9524f84d3bbb3a133766c7395726 (diff) |
VN::Page: Use image hiding mechanism from Char::Page for cover image
This deprecates the 'image_nsfw' field.
-rw-r--r-- | data/style.css | 28 | ||||
-rw-r--r-- | lib/VNWeb/Chars/Page.pm | 58 | ||||
-rw-r--r-- | lib/VNWeb/Images/Lib.pm | 52 | ||||
-rw-r--r-- | lib/VNWeb/VN/Page.pm | 36 |
4 files changed, 74 insertions, 100 deletions
diff --git a/data/style.css b/data/style.css index 6b369278..933fa592 100644 --- a/data/style.css +++ b/data/style.css @@ -428,20 +428,14 @@ div.postsearch td.tc3 { width: 90px; } /***** VN page *******/ -#nsfw_chk:checked ~ * { cursor: pointer; } -#nsfw_chk:checked ~ * > #nsfw_show { display: none; } -#nsfw_chk:not(:checked) ~ * > #nsfw_hid { display: none; } - #nsfwhide_chk:checked ~ * #nsfwshown { display: none; } #nsfwhide_chk:not(:checked) ~ * .nsfw { display: none; } div.vndetails { margin: 0 auto; max-width: 820px; } div.vnimg { float: left; width: 250px; margin: 0 10px; } -div.vnimg i { display: block; width: 100%; text-align: center; font-size: 11px; } div.vnimg p { text-align: center; padding: 0px; margin: 0; } div.vndetails h2 { margin: 5px 0 0 0; } .vndesc p { padding: 0 0 0 5px; } -p#nsfw_hid { display: block; cursor: pointer; } div.vndetails table { float: left; width: 500px; } div.vndetails table td.key { width: 90px; } div.vndetails table dt { float: left; font-style: italic; } @@ -633,6 +627,19 @@ div.producerbrowse { padding-bottom: 10px } +/***** Image hover thingy (VNWeb::Images::Lib::images_) ****/ + +.imghover { margin: 0 auto; display: block; text-align: center } +.imghover input:checked ~ div.imghover--warning { display: none } +.imghover input:not(:checked) ~ div.imghover--visible { display: none } +.imghover div.imghover--visible { position: relative } +.imghover div.imghover--visible a { border-bottom: 0 } +.imghover div.imghover--visible .imghover--overlay { display: none; white-space: nowrap; font-size: 11px } +.imghover:hover div.imghover--visible .imghover--overlay { display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: $secbg$; border: 0 } +.imghover div.imghover--warning { border: 1px solid $border$; background: $secbg$; box-sizing: border-box; padding: 10px 5px } + + + /***** Char page (also used on VN page) *****/ div.chardetails { margin: 0 auto; width: 800px; } @@ -644,15 +651,6 @@ div.chardetails table { float: left; width: 530px; } div.chardetails table td.key { width: 100px; } div.chardetails.charsep { margin-top: 30px } -.imghover { margin: 0 auto; position: relative; display: block; text-align: center } -.imghover input:checked ~ div.imghover--warning { display: none } -.imghover input:not(:checked) ~ div.imghover--visible { display: none } -.imghover div.imghover--visible a { border-bottom: 0 } -.imghover div.imghover--visible .imghover--overlay { display: none; white-space: nowrap; font-size: 11px } -.imghover:hover div.imghover--visible { position: absolute } -.imghover:hover div.imghover--visible .imghover--overlay { display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: $secbg$; border: 0 } -.imghover div.imghover--warning { border: 1px solid $border$; background: $secbg$; box-sizing: border-box; padding: 10px 5px } - /***** Char edit *****/ diff --git a/lib/VNWeb/Chars/Page.pm b/lib/VNWeb/Chars/Page.pm index 77aa3c97..536778c3 100644 --- a/lib/VNWeb/Chars/Page.pm +++ b/lib/VNWeb/Chars/Page.pm @@ -1,6 +1,7 @@ package VNWeb::Chars::Page; use VNWeb::Prelude; +use VNWeb::Images::Lib 'image_', 'enrich_image_obj'; sub enrich_seiyuu { @@ -15,15 +16,10 @@ sub enrich_seiyuu { } -sub enrich_image { - enrich_obj image => id => 'SELECT id, width, height, c_votecount AS votecount, c_sexual_avg AS sexual_avg, c_violence_avg AS violence_avg FROM images WHERE id IN', @_; -} - - sub enrich_item { my($c) = @_; - enrich_image $c; + enrich_image_obj image => $c; enrich_merge vid => 'SELECT id AS vid, title, original FROM vn WHERE id IN', $c->{vns}; enrich_merge rid => 'SELECT id AS rid, title AS rtitle, original AS roriginal FROM releases WHERE id IN', grep $_->{rid}, $c->{vns}->@*; enrich_merge tid => @@ -64,55 +60,11 @@ sub fetch_chars { }, $l; enrich_seiyuu $vid, $l; - enrich_image $l; + enrich_image_obj image => $l; $l } -# This and enrich_image() can prolly be used for VN cover images as well. -sub image_ { - my($c) = @_; - my $img = $c->{image}; - return p_ 'No image' if !$img; - - # XXX: no clue why I chose these thresholds. - my $sex = $img->{sexual_avg} > 1.3 ? 2 : $img->{sexual_avg} > 0.4 ? 1 : 0 if $img->{votecount}; - my $vio = $img->{violence_avg} > 1.3 ? 2 : $img->{violence_avg} > 0.4 ? 1 : 0 if $img->{votecount}; - my $sexd = ['Safe', 'Suggestive', 'Explicit']->[$sex] if $img->{votecount}; - my $viod = ['Tame', 'Violent', 'Brutal' ]->[$vio] if $img->{votecount}; - my $sexp = auth->pref('max_sexual')||0; - my $viop = auth->pref('max_violence')||0; - my $sexh = $sex > $sexp && $sexp >= 0 if $img->{votecount}; - my $vioh = $vio > $viop if $img->{votecount}; - my $hidden = $sexp < 0 || $sexh || $vioh || (!$img->{votecount} && ($sexp < 2 || $viop < 2)); - my $hide_on_click = $sexp < 0 || $sex || $vio || !$img->{votecount}; - - label_ class => 'imghover', style => "width: $img->{width}px; height: $img->{height}px", sub { - input_ type => 'checkbox', class => 'visuallyhidden', $hidden ? () : (checked => 'checked') if $hide_on_click; - div_ class => 'imghover--visible', sub { - img_ src => tuwf->imgurl($img->{id}), alt => $c->{name}; - a_ class => 'imghover--overlay', href => "/img/$img->{id}?view=".viewset(show_nsfw=>1), - $img->{votecount} ? sprintf '%s / %s (%d)', $sexd, $viod, $img->{votecount} : 'Not flagged'; - }; - div_ class => 'imghover--warning', sub { - if($img->{votecount}) { - txt_ 'This image has been flagged as:'; - br_; br_; - txt_ 'Sexual: '; $sexh ? b_ class => 'standout', $sexd : txt_ $sexd; - br_; - txt_ 'Violence '; $vioh ? b_ class => 'standout', $viod : txt_ $viod; - } else { - txt_ 'This image has not yet been flagged'; - } - br_; br_; - span_ class => 'fake_link', 'Show me anyway'; - br_; br_; - b_ class => 'grayedout', 'This warning can be disabled in your account'; - } if $hide_on_click; - } -} - - sub _rev_ { my($c) = @_; revision_ c => $c, \&enrich_item, @@ -137,7 +89,7 @@ sub _rev_ { a_ href => "/c$c->{id}", title => $c->{name}, "c$c->{id}" } ], [ main_spoil => 'Spoiler', fmt => sub { txt_ fmtspoil $_ } ], - [ image => 'Image', empty => 0, fmt => \&image_ ], + [ image => 'Image', fmt => sub { image_ $_ } ], [ vns => 'Visual novels', fmt => sub { a_ href => "/v$_->{vid}", title => $_->{original}||$_->{title}, "v$_->{vid}"; if($_->{rid}) { @@ -159,7 +111,7 @@ sub chartable_ { my $view = viewget; div_ mkclass(chardetails => 1, charsep => $sep), sub { - div_ class => 'charimg', sub { image_ $c }; + div_ class => 'charimg', sub { image_ $c->{image}, $c->{name} }; table_ class => 'stripe', sub { thead_ sub { tr_ sub { td_ colspan => 2, sub { $link diff --git a/lib/VNWeb/Images/Lib.pm b/lib/VNWeb/Images/Lib.pm index 6437281e..667d5cd2 100644 --- a/lib/VNWeb/Images/Lib.pm +++ b/lib/VNWeb/Images/Lib.pm @@ -3,7 +3,7 @@ package VNWeb::Images::Lib; use VNWeb::Prelude; use Exporter 'import'; -our @EXPORT = qw/enrich_image validate_token/; +our @EXPORT = qw/enrich_image validate_token image_ enrich_image_obj/; # Enrich images so that they match the format expected by the 'ImageResult' Elm @@ -62,4 +62,54 @@ sub validate_token { $ok; } + +# Display (or not) an image with preference toggle and hover-information. +# Given $img is assumed to be an object generated by enrich_image_obj(). +sub image_ { + my($img, $alt) = @_; + return p_ 'No image' if !$img; + + # XXX: no clue why I chose these thresholds. + my $sex = $img->{sexual_avg} > 1.3 ? 2 : $img->{sexual_avg} > 0.4 ? 1 : 0 if $img->{votecount}; + my $vio = $img->{violence_avg} > 1.3 ? 2 : $img->{violence_avg} > 0.4 ? 1 : 0 if $img->{votecount}; + my $sexd = ['Safe', 'Suggestive', 'Explicit']->[$sex] if $img->{votecount}; + my $viod = ['Tame', 'Violent', 'Brutal' ]->[$vio] if $img->{votecount}; + my $sexp = auth->pref('max_sexual')||0; + my $viop = auth->pref('max_violence')||0; + my $sexh = $sex > $sexp && $sexp >= 0 if $img->{votecount}; + my $vioh = $vio > $viop if $img->{votecount}; + my $hidden = $sexp < 0 || $sexh || $vioh || (!$img->{votecount} && ($sexp < 2 || $viop < 2)); + my $hide_on_click = $sexp < 0 || $sex || $vio || !$img->{votecount}; + + label_ class => 'imghover', style => "width: $img->{width}px; height: $img->{height}px", sub { + input_ type => 'checkbox', class => 'visuallyhidden', $hidden ? () : (checked => 'checked') if $hide_on_click; + div_ class => 'imghover--visible', sub { + img_ src => tuwf->imgurl($img->{id}), $alt ? (alt => $alt) : (); + a_ class => 'imghover--overlay', href => "/img/$img->{id}?view=".viewset(show_nsfw=>1), + $img->{votecount} ? sprintf '%s / %s (%d)', $sexd, $viod, $img->{votecount} : 'Not flagged'; + }; + div_ class => 'imghover--warning', sub { + if($img->{votecount}) { + txt_ 'This image has been flagged as:'; + br_; br_; + txt_ 'Sexual: '; $sexh ? b_ class => 'standout', $sexd : txt_ $sexd; + br_; + txt_ 'Violence '; $vioh ? b_ class => 'standout', $viod : txt_ $viod; + } else { + txt_ 'This image has not yet been flagged'; + } + br_; br_; + span_ class => 'fake_link', 'Show me anyway'; + br_; br_; + b_ class => 'grayedout', 'This warning can be disabled in your account'; + } if $hide_on_click; + } +} + + +sub enrich_image_obj { + my $field = shift; + enrich_obj $field => id => 'SELECT id, width, height, c_votecount AS votecount, c_sexual_avg AS sexual_avg, c_violence_avg AS violence_avg FROM images WHERE id IN', @_; +} + 1; diff --git a/lib/VNWeb/VN/Page.pm b/lib/VNWeb/VN/Page.pm index c718a53a..721fdd0f 100644 --- a/lib/VNWeb/VN/Page.pm +++ b/lib/VNWeb/VN/Page.pm @@ -2,6 +2,7 @@ package VNWeb::VN::Page; use VNWeb::Prelude; use VNWeb::Releases::Lib; +use VNWeb::Images::Lib 'image_', 'enrich_image_obj'; use VNDB::Func 'fmtrating'; use POSIX 'strftime'; @@ -13,6 +14,7 @@ sub enrich_vn { enrich_merge vid => 'SELECT id AS vid, title, original FROM vn WHERE id IN', $v->{relations}; enrich_merge aid => 'SELECT id AS aid, title_romaji, title_kanji, year, type, ann_id, lastfetch FROM anime WHERE id IN', $v->{anime}; enrich_extlinks v => $v; + enrich_image_obj image => $v; # This fetches rather more information than necessary for infobox_(), but it'll have to do. # (And we'll need it for the releases tab anyway) @@ -87,40 +89,12 @@ sub rev_ { a_ href => tuwf->imgurl($_->{scr}), 'data-iv' => "$_->{width}x$_->{height}", $_->{scr}; txt_ $_->{nsfw} ? ' (Not safe)' : ' (Safe)'; }], - [ image => 'Image', fmt => sub { - !viewget->{show_nsfw} && $_[0]{img_nsfw} - ? a_ href => tuwf->imgurl($_), '(NSFW)' - : img_ src => tuwf->imgurl($_) - } ], - [ img_nsfw => 'Image NSFW', fmt => sub { txt_ $_ ? 'Not safe' : 'Safe' } ], + [ image => 'Image', fmt => sub { image_ $_ } ], + [ img_nsfw => 'Image NSFW (unused)', fmt => sub { txt_ $_ ? 'Not safe' : 'Safe' } ], revision_extlinks 'v' } -sub infobox_img_ { - my($v) = @_; - p_ 'No image uploaded yet.' if !$v->{image}; - img_ src => tuwf->imgurl($v->{image}), alt => $v->{title} if $v->{image} && !$v->{img_nsfw}; - - p_ class => 'nsfw_pic', sub { - input_ id => 'nsfw_chk', type => 'checkbox', class => 'visuallyhidden', tuwf->authPref('show_nsfw') ? (checked => 'checked') : (); - label_ for => 'nsfw_chk', sub { - span_ id => 'nsfw_show', sub { - txt_ 'This image has been flagged as Not Safe For Work.'; - br_; br_; - span_ class => 'fake_link', 'Show me anyway'; - br_; br_; - txt_ '(This warning can be disabled in your account)'; - }; - span_ id => 'nsfw_hid', sub { - img_ src => tuwf->imgurl($v->{image}), alt => $v->{title}; - i_ 'Flagged as NSFW'; - }; - }; - } if $v->{image} && $v->{img_nsfw}; -} - - sub infobox_relations_ { my($v) = @_; return if !$v->{relations}->@*; @@ -349,7 +323,7 @@ sub infobox_ { h2_ class => 'alttitle', lang_attr($v->{c_olang}), $v->{original} if $v->{original}; div_ class => 'vndetails', sub { - div_ class => 'vnimg', sub { infobox_img_ $v }; + div_ class => 'vnimg', sub { image_ $v->{image}, $v->{title}; }; table_ class => 'stripe', sub { tr_ sub { |