Presentation support and some slight changes

index.php

@@ -577,6 +577,18 @@ tr:hover .post_menu_button{opacity:1;}
 .left{display:inline-block;vertical-align:top;width:25%;padding-right:1.5em;padding-bottom:4rem;position:sticky;top:2em;
 overflow:auto;max-height:calc(100vh - 2.6em);}
 .center{display:inline-block;vertical-align:top;width:50%;overflow:visible;padding-bottom:4rem;}
+.center_slides{display:block;vertical-align:top;width:100%;overflow:visible;padding-bottom:4rem;font-size:5vmin;user-select:none;}
+.center_slides .print_column{display:table;position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;z-index:90;}
+.center_slides .print_column .post{display:table-cell;vertical-align:middle;padding:5vmin !important;max-height:100vh;width:100vw;overflow:auto;}
+.center_slides .active_post{background-color:%white%;}.center_slides .post{background-color:%white%;}
+.center_slides .post_access{display:none;}
+.center_slides .post_menu_button{display:none !important;}
+.center_slides .post_width{display:block;vertical-align:middle;max-height:100vh;overflow-y:auto;overflow-x:hidden;width:100%;}
+.center_slides .linked_posts{display:none;}.center_slides .ref_compact{position:relative!important;display:block!important;}
+.slides_buttons{position:fixed;z-index:200;right:0.5rem;bottom:0.5rem;user-select:none;background-color:%white%aa;padding:0.5rem;font-family:monospace;}
+.slides_buttons a{text-decoration: none;}
+.center_slides .imd{text-align:center;pointer-events:none;}
+.imd_float{float:right;width:50% !important;clear:both;margin-left:0.5em !important;}
 .center_wide{display:inline-block;vertical-align:top;width:75%;padding-left:0.3em;overflow:visible;padding-bottom:4rem;}
 .center_full{display:inline-block;vertical-align:top;width:100%;overflow:visible;padding-bottom:4rem;}
 .center_wide .p_thumb{height:12rem;margin:0;margin-right:1em;margin-bottom:1em;box-shadow:5px 5px 15px 2px black;}
@@ -589,8 +601,8 @@ input:checked~.linked_posts{display:none;}
 .center_exp{display:block;width:80%;margin:0 auto;overflow:visible;padding-bottom:1em;}
 .table_top{position:relative;left:calc(-50% - 0.45em);width:calc(200% + 0.6em);background:%white%;z-index:1;
 box-shadow:0px 0px 2em 1em %white%;margin-top:2em;margin-bottom:2em;}
-textarea,input[type=text],input[type=password]{width:100%;display:block;font-family:inherit;max-height:60vh;font-size:inherit;}
-select,textarea,input[type=text],input[type=password]{background:none;border:none;border-bottom:1px solid %black%;color:%black%;}
+textarea,input[type=text],input[type=password]{font-family:monospace;width:100%;display:block;font-family:inherit;max-height:60vh;font-size:inherit;}
+select,textarea,input[type=text],input[type=password]{font-family:monospace;background:none;border:none;border-bottom:1px solid %black%;color:%black%;}
 .text_highlight input{border-bottom:1px solid %white%;color:%white%;}
 .button{background:none;border:none;font-family:inherit;color:%black%;font-size:inherit;font-weight:bold;}
 .post{position:relative;scroll-margin:3.5em;}
@@ -1548,6 +1560,7 @@ blockquote{border-left:2px solid black;}
         if(preg_match('/\{\s*WIDE\s*\}/imu',$first_post['content'],$m)){ $first_post['wide'] = true; }
         if(preg_match('/\{\s*NO_TIME\s*\}/imu',$first_post['content'],$m)){ $first_post['no_time'] = true; }
         if(preg_match('/\{\s*NO_TITLE\s*\}/imu',$first_post['content'],$m)){ $first_post['no_title'] = true; }
+        if(preg_match('/\{\s*SLIDES\s*\}/imu',$first_post['content'],$m)){ $first_post['slides'] = true; }
         if(preg_match('/\{\s*HEADER\s+(.*?)\}/imu',$first_post['content'],$m)){ $first_post['header'] = trim($m[1]); }
         if(preg_match('/\{\s*FOOTER\s+(.*?)\}/imu',$first_post['content'],$m)){ $first_post['footer'] = trim($m[1]); }
         
@@ -1556,6 +1569,7 @@ blockquote{border-left:2px solid black;}
         if(isset($first_post['header'])) $th['header']=$first_post['header'];
         if(isset($first_post['footer'])) $th['footer']=$first_post['footer'];
         if(isset($first_post['no_time'])) $th['no_time']=$first_post['no_time'];
+        if(isset($first_post['slides'])) $th['slides']=$first_post['slides'];
         if(isset($first_post['no_title'])) $th['no_title']=$first_post['no_title'];
         if(preg_match('/\{\s*INTERESTING\s+(.*?)\}/imu',$first_post['content'],$m)){
             $th['interesting'] = []; if(preg_match_all('/(\S+)(\s|$)/u',$m[1],$matches,PREG_SET_ORDER)){
@@ -2785,7 +2799,7 @@ blockquote{border-left:2px solid black;}
                              "$1$2$4 target='_blank'$5$6<sup>↗</sup>$7",$html);
         $html = preg_replace("/<p>\s*\@.*?<\/p>/mu","",$html);
         $html = preg_replace("/\{\s*(REVERSED|INTERESTING|HEADER|FOOTER)\s+(.*?)\}/imu","",$html);
-        $html = preg_replace("/\{\s*(REVERSED|NO_TIME|NO_TITLE)\s*\}/imu","",$html);
+        $html = preg_replace("/\{\s*(REVERSED|NO_TIME|NO_TITLE|SLIDES)\s*\}/imu","",$html);
         $html = preg_replace("/\{\s*WIDE\s*\}/imu","",$html,-1,$rep_count); if($rep_count){$print_wide=true;}
         $images = []; $images_noclick = []; $images_orig_src_list = [];
         $html = preg_replace_callback(
@@ -2794,11 +2808,13 @@ blockquote{border-left:2px solid black;}
                         if(isset($m[1])&&$m[1]&&$m[1][1]=='a'){ $height="";
                             if(preg_match("/([0-9]{1,2})em/u",$m[0],$hm)){$height=' style="height:'.$hm[1].'em;"';}
                             return "<a class='imbtn'".$height.substr($m[0],2); }
-                        $orig_src = $src = $m[5]; $keep = false; $original = false;
+                        $orig_src = $src = $m[5]; $keep = false; $original = false; $float=false;
                         if (preg_match('/alt=[\'\"].*keep_inline.*[\'\"]/u',$m[3]) ||
                             preg_match('/alt=[\'\"].*keep_inline.*[\'\"]/u',$m[7])) { $keep=true; }
                         if ($keep && preg_match('/alt=[\'\"].*original.*[\'\"]/u',$m[3]) ||
                                      preg_match('/alt=[\'\"].*original.*[\'\"]/u',$m[7])) { $original=true; }
+                        if (preg_match('/alt=[\'\"].*float.*[\'\"]/u',$m[3]) ||
+                            preg_match('/alt=[\'\"].*float.*[\'\"]/u',$m[7])) { $keep=true;$original=true;$float=true; }
                         if(($im = &$this->FindImage($m[5]))!=NULL && isset($im['thumb'])){ 
                             $src = $im['thumb']; $orig_src=$im['file'];
                         }if($im == NULL){ $im = &$this->NULL_IMAGE_DUMMY; }
@@ -2813,14 +2829,15 @@ blockquote{border-left:2px solid black;}
                             $media_start = "<video controls".$dataset."><source src='"; $media_end="' type='".$im['video']."'></video";
                             $src = $orig_src; $dataset="";
                         }
+                        $float_add=""; if($float){ $float_add=" imd_float"; }
                         if($this->InHereMode){
-                            $click = "<div class='imd'>"."<a href='?here=".$im['file']."' class='original_img'>".
+                            $click = "<div class='imd$float_add'>"."<a href='?here=".$im['file']."' class='original_img'>".
                                         $media_start.($original?$orig_src:$src).$media_end."></a></div>";
                             $ret=""; if($keep) { $ret = $click; }
                             else { $images[] = $click; }
                             return $ret;
                         }else{
-                            $click ="<div class='imd'><a href='?show_image={$im['name']}' target='_blank' onclick='event.preventDefault();'>".
+                            $click ="<div class='imd$float_add'><a href='?show_image={$im['name']}' target='_blank' onclick='event.preventDefault();'>".
                                 $media_start.($original?$orig_src:$src).$media_end.$dataset."></a></div>";
                             $images_noclick[]=$media_start.$src.$media_end.">"; $images_orig_src_list[]=$orig_src;
                             $ret = "";
@@ -3748,12 +3765,12 @@ blockquote{border-left:2px solid black;}
         </div>
         </div>
     <?php }
-    function MakePostSection(&$post){
-        $this->Anchors = [];
+    function MakePostSection(&$post){ $is_thread = isset($post['tid']['count'])&&$post['tid']['count']>1;
+        $this->Anchors = []; if(isset($post['slides']) || ($is_thread&&isset($post['tid']['slides']))) $centerclass='center_slides'; else $centerclass='center';
         if(isset($this->TagID)){ ?><style><?=$this->CssNumberID($this->TagID);?>{display:block;}</style><?php } ?>
-        <div class='center' id='div_center'><br class='hidden_on_print' />
+        <div class='<?=$centerclass;?>' id='div_center'><br class='hidden_on_print' />
             <h2 class='hidden_on_print'>
-            <?php $th=NULL; $is_thread = isset($post['tid']['count'])&&$post['tid']['count']>1;
+            <?php $th=NULL;
                 $is_wide = (isset($post['wide'])&&$post['wide']) || ($is_thread && isset($post['tid']['wide']) && $post['tid']['wide']);
                 if($is_thread){ $th = $post['tid'];?> <?=$this->T('话题')?> <?php }else{ ?> <?=$this->T('详细')?>
             <?php } ?></h2>
@@ -3808,7 +3825,58 @@ blockquote{border-left:2px solid black;}
             $this->MakeCommentSection($post);
             ?>
         </div>
-    <?php
+    <?php if(isset($post['slides']) || ($is_thread&&isset($post['tid']['slides']))){ ?>
+        <div class='slides_buttons code' onclick="event.stopPropagation();">
+            <a onclick="SlidesFontCheck(-1)">T-</a> <a onclick="SlidesFontCheck(1)">T+</a>&nbsp;
+            <a onclick="SlidesStart(null)"><<</a> <a onclick="SlidesCheck(-1);"><</a>
+            <a onclick="SlidesStart(1)"><span id="slides_now">1</span>/<span id="slides_total">1</span></a>
+            <a onclick="SlidesCheck(1);">></a> <a onclick="SlidesEnd();">X</a>
+        </div>
+        <script>
+        function SlidesStart(from_here){
+            slides=document.querySelectorAll('.print_column > .post'); if(!slides || !slides[0]) return;
+            sdone=0; fp=0; if(from_here){
+                urlParams = new URLSearchParams(window.location.search);
+                fp = urlParams.get('post');
+            }
+            document.querySelector("#slides_total").innerText=slides.length; cur=document.querySelector("#slides_now");
+            for(i=0;i<slides.length;i++){ slides[i].style.display="none";
+                if(from_here && slides[i].dataset.postId==fp){ slides[i].style.display="table-cell";sdone=1; ClickPost(slides[i],0,true); cur.innerText=i+1; }
+            } if(!sdone){ slides[0].style.display="table-cell"; ClickPost(slides[0],0,true); cur.innerText=1; }
+            c=document.querySelector('.center'); if(!c) return;
+            c.classList.remove('center'); c.classList.add('center_slides'); if(c.dataset.fontSize){ c.style.fontSize=c.dataset.fontSize; }
+            c=document.querySelector('.left'); if(!c) return; c.style.display="none";
+        }
+        function SlidesCheck(offset){
+            slides=document.querySelectorAll('.print_column > .post'); if(!slides || !slides[0]) return; cur=document.querySelector("#slides_now");
+            for(i=0;i<slides.length;i++){ if(slides[i].style.display=="table-cell" && slides[i+offset] && (i+offset)>=0){
+                    slides[i+offset].style.display="table-cell"; slides[i].style.display="none"; ClickPost(slides[i+offset],0,true); cur.innerText=i+offset+1; break;
+                }
+            }
+        }
+        function SlidesFontCheck(offset){
+            c=document.querySelector('.center_slides'); if(!c) return;
+            f=5; if(c.style.fontSize){ f=parseInt(c.style.fontSize); }
+            f+=offset; if(f<=0) f=1; if(f>12) f=12; c.style.fontSize=""+f+"vmin"; c.dataset.fontSize=c.style.fontSize;
+        }
+        function SlidesEnd(){
+            c=document.querySelector('.center_slides'); if(!c) return;
+            c.classList.remove('center_slides'); c.classList.add('center'); c.style.fontSize="";
+            c=document.querySelector('.left'); if(!c) return; c.style.display="inline-block";
+            slides=document.querySelectorAll('.print_column > .post'); if(!slides || !slides[0]) return;
+            for(i=0;i<slides.length;i++){ slides[i].style.display=""; }
+        }
+        //document.addEventListener("wheel", function(event){ if(event.deltaY>0) SlidesCheck(1); else SlidesCheck(-1); }, { passive: false });
+        document.addEventListener("click", function(event){ SlidesCheck(1); });
+        document.addEventListener('keydown', function(event) {
+            const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
+            switch(key){
+                case "ArrowUp": case "ArrowLeft": SlidesCheck(-1); break; case "ArrowDown": case "ArrowRight": SlidesCheck(1); break;
+                case "Escape": SlidesEnd(); break;
+            }
+        });
+        </script>
+    <?php }
     }
     function MakePostSectionExp(&$post){
         $this->Anchors = []; $is_thread = isset($post['tid']);
@@ -4750,7 +4818,7 @@ blockquote{border-left:2px solid black;}
         </body>
         </html>
     <?php }
-    function MakeFooter(&$p){ $no_title=isset($p['tid']['first']['no_title']);?>
+    function MakeFooter(&$p){ $is_slides=(isset($p['slides']) || (isset($p['tid'])&&isset($p['tid']['slides']))); $no_title=isset($p['tid']['first']['no_title']);?>
         <div class='small_footer'><div>
             <hr />
             <?php if(isset($p['tid']['footer'])){ ?><div class='show_on_print'><?=$p['tid']['footer'];?></div><?php } ?>
@@ -4780,6 +4848,7 @@ blockquote{border-left:2px solid black;}
         </div>
         <?php $this->MakeImageOverlay(); $this->MakePageEnd(); ?>
         <script>
+            <?php if($is_slides){ ?>SlidesStart(null);<?php } ?>
             <?=$this->ExtraScripts?>
             if(back = document.getElementById('button_back')){
                 if(document.referrer.indexOf(location.protocol + "//" + location.host) == 0){
@@ -4796,12 +4865,12 @@ blockquote{border-left:2px solid black;}
                 trans.href='https://translate.google.com/translate?sl=auto&tl=en-US&u='+encodeURIComponent(document.location.href);
             }
             function ClickPost(p,e,pushstate){if(e)e.preventDefault();
-                id=p.dataset.postId; list=p.parentNode;active=list.getElementsByClassName('active_post');
-                lp=p.querySelector('.lpctrl');
+                id=p.dataset.postId; if(!id)return; list=p.parentNode;active=list.getElementsByClassName('active_post');
                 if(active&&active[0]&&active[0]!=p){
                     if(pushstate){window.history.pushState('?post='+id,null,'?post='+id);}
                     active[0].classList.remove('active_post'); p.classList.add('active_post');
                 }
+                if(!active[0]){ window.location.href="?post="+id; }
             }function InitLabel(){
                 lb=document.querySelector('#mtitle'); lb.removeAttribute('for'); lb.onclick=function()
                     {c=document.querySelector('#titlectrl');if(c.checked)c.checked=false;else c.checked=true;}
@@ -5045,11 +5114,12 @@ blockquote{border-left:2px solid black;}
                 var menus = document.querySelectorAll('.pop_menu');
                 [].forEach.call(menus, function(m){m.style.display='none';});
             }
-            var posts = document.querySelectorAll('.center .post');
+            var posts = document.querySelectorAll('.center .post'); if(!posts || !posts[0]) posts = document.querySelectorAll('.center_slides .post'); 
             [].forEach.call(posts, function(p){
                 if(s=p.querySelector('._menu_hook')) s.addEventListener("click", function() {
                     ShowPostMenu(this.parentNode);ClickPost(this.parentNode,null,true)
                 });
+                p.addEventListener("dblclick", function(){ ClickPost(this,null,true); lp=this.querySelector('.lpctrl'); if(lp){ if(lp.checked)lp.checked=false;else lp.checked=true; }});
             });
             var post_clickables = document.querySelectorAll('.center .post a');
             [].forEach.call(post_clickables, function(p){
@@ -5251,7 +5321,7 @@ blockquote{border-left:2px solid black;}
                     if(i<images_filtered.length-1) nextimg=images_filtered[i+1];
                     prevsrc=previmg?previmg.dataset.imgsrc:null; nextsrc=nextimg?nextimg.dataset.imgsrc:null; 
                     img.dataset.prevsrc = prevsrc; img.dataset.nextsrc = nextsrc; 
-                    function wrap(imgsrc){return function(){ShowBigImage(imgsrc, 1);}}
+                    function wrap(imgsrc){return function(event){ShowBigImage(imgsrc, 1);}}
                     var clone = img.cloneNode(true); img.replaceWith(clone);
                     clone.addEventListener("click", wrap(img.dataset.imgsrc));
                 }