<div id="playerimgdiv"> 
<div id="playercontent"> 
<div id="carouselExampleIndicators" class="carousel slide <{if $jsplaystyle eq  0}>carousel-fade<{/if}>" data-ride="carousel">
<div id='operate_box'>
<button id="carouselPause" class="btn btn-outline-primary btn-sm" aria-label="<{$smarty.const._THEME_GB_12}>" tabindex="0"><{$smarty.const._THEME_GB_12}></button>
<button id="carouselPlay" class="btn btn-outline-success btn-sm" aria-label="<{$smarty.const._THEME_GB_13}>" style="display:none;" tabindex="0"><{$smarty.const._THEME_GB_13}></button>
</div>

<{if $xoops_isadmin}>
<div id="playerimgdivadmin"><a href="<{xoAppUrl}>modules/neothemesadmin/admin/playeradmin.php"><{$smarty.const._THEME_IMGADMIN}></a></div>
<{/if}>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only"><{$smarty.const._THEME_GB_14}></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only"><{$smarty.const._THEME_GB_15}></span>
</a>


<{if $jsbuttom}>
<ol class="carousel-indicators">
<{foreach item=tplvar from=$jsbuttom }>
<li tabindex="0"  aria-labelledby="image-title-<{$tplvar.a}>"  data-target="#carouselExampleIndicators" data-slide-to="<{$tplvar.a}>" class="<{$tplvar.active}> a11y_red"><span id="image-title-<{$tplvar.a}>" class="sr-only"><{$smarty.const._THEME_GB_10|sprintf:$tplvar.content}></span></li>
<{/foreach}>
</ol>
<{/if}>

<div class="carousel-inner" >
  <{if $flashimg}>
    <{foreach from=$flashimg item=jsimg name=jsimg}>
    <div tabindex="1" aria-label="<{$jsimg.content}>" class="<{if $smarty.foreach.jsimg.iteration eq 1}>carousel-item active<{else}>carousel-item<{/if}>">
        <{if $webreptil2}>
          <img tabindex="0" class="a11y_red <{if $smarty.foreach.jsimg.iteration eq 1}>carousel-item active<{else}>carousel-item<{/if}> carousel-item-link" <{if $jsimg.url}>data-url="<{$jsimg.url}>" data-target="<{if $jsimg.target eq 0}>_self<{else}>_blank<{/if}>"<{/if}>  title="<{$jsimg.content}>" class="d-block w-100" alt="<{$xoops_sitename}>" src="<{xoAppUrl}>themes/<{$xoops_theme}>/default/xoops.jpg">
        <{else}>
          <img tabindex="0" class="a11y_red d-block w-100 carousel-item-link" <{if $jsimg.url}>data-url="<{$jsimg.url}>" data-target="<{if $jsimg.target eq 0}>_self<{else}>_blank<{/if}>"<{/if}>  alt="<{$jsimg.content}>" src="<{xoAppUrl}>uploads/<{$xoops_theme}>/p<{$jsimg.imgid}>.png?state=<{$smarty.const._MS_SHARED270|date}>">
        <{/if}>
    </div>
    <{/foreach}>
  <{else}>
  <div class="item active">
    <div tabindex="0" class="carousel-item-link" title="<{$xoops_sitename}>">
      <img alt="<{$xoops_sitename}>" src="<{xoAppUrl}>themes/<{$xoops_theme}>/default/p1.png">
    </div>
  </div>
  <{/if}>
</div>


</div></div>
<{include file="$theme_name/alstpl.tpl"}>
</div>



<script>
$(document).ready(function() {

// 初始化 carousel 設定
$('#carouselExampleIndicators').carousel({
  interval: <{$themesvar.intervaltume}>,
  touch: true // 開啟觸摸滑動
});

const isTabPressed_13 = setupTabKeyDetection("#playerimgdiv");

// 建立 aria-live 區域，確保螢幕閱讀器能朗讀
if ($('#imageDescription').length === 0) {
    $('body').append('<div id="imageDescription" aria-live="polite" style="position: absolute; left: -9999px;"></div>');
}

// 當焦點進入 carousel，開始監聽圖片變化
$('#carouselExampleIndicators').on('focusin', function () {
   if (isTabPressed_13()) {
    // 先讀取當前 active 圖片的 alt
    readActiveImageAlt();

    // 監聽圖片變化
    $(this).on('slid.bs.carousel', function () {
        readActiveImageAlt();
    });
    }
});

// 當焦點離開 carousel，停止監聽
$('#carouselExampleIndicators').on('focusout', function () {
   if (isTabPressed_13()) {
    $(this).off('slid.bs.carousel');
    }
});

// 讀取當前 active 圖片的 alt 並更新到 aria-live 區域
function readActiveImageAlt() {
    var $activeImg = $('.carousel-inner .carousel-item.active img');
    var imgAlt = $activeImg.attr('alt') || '目前沒有圖片說明';
    // 更新 aria-live，確保閱讀器讀取
    $('#imageDescription').text(imgAlt);
}



    // 控制暫停
 $('#carouselPause').on('click', function() {
        $('#carouselExampleIndicators').carousel('pause');
        $('#carouselPause').hide();
        setTimeout(function() {
        $(".carousel-inner .active img").focus();
        $(".carousel-inner .carousel-item").css({
        "padding": "12px",
        });
        object_rnter_triggers_link($date_id=".carousel-inner .active img");
        $('#carouselPlay').show();
        }, 300);
     });


  $('#carouselPause').on('focusin', function() {
   if (isTabPressed_13()) {
        $('.carousel-control-prev').remove();
        $('.carousel-control-next').remove();
   }
    });

  $('.carousel-inner .carousel-item .a11y_red').on('blur', function() {
     $("#carouselPlay").focus(); 
       setTimeout(function() {  
       $(".carousel-inner .carousel-item").css({
       "padding": "0px"
        });
        }, 50);
   });

    // 控制播放
    $('#carouselPlay').on('click', function() {
        $('#carouselExampleIndicators').carousel('cycle');
        $('#carouselPlay').hide();
        $('#carouselPause').show();
        $("#carouselPause").focus();
    });

  $('.carousel-indicators li:last-child').on('focusout', function() {
   if (isTabPressed_13()) {
        $('#carouselPlay').hide();
        $('#carouselPause').hide();
        $("#carouselExampleIndicators").blur();
        $('#carousel-inner').blur();
        $('#carousel-indicators').blur();
        $(".carousel-inner .active img").blur();
   }
    });

    // 左右箭頭觸發暫停
    $('.carousel-control-prev, .carousel-control-next').on('focusin', function() {
        $('#carouselExampleIndicators').carousel('pause');



    });

  // 讓圓點導航能正常 TAB 切換
  $('.carousel-indicators li').on('focus', function() {
    var slideIndex = $(this).data('slide-to');  // 取得圓點對應的圖片索引
    $('#carouselExampleIndicators').carousel(slideIndex);  // 切換到指定幻燈片
    $('#carouselExampleIndicators').carousel('pause');
  });


  // 使用 Enter 鍵開啟對應圖片的連結
  $('.carousel-indicators li').on('keydown', function(event) {
    if (event.key === 'Enter') {
      // 根據選擇的原點來獲取相應的輪播項目
      var slideIndex = $(this).data('slide-to');
      var url = $('.carousel-inner .carousel-item').eq(slideIndex).find('img').data('url');  // 取得圖片的 data-url 屬性
      var target = $('.carousel-inner .carousel-item').eq(slideIndex).find('img').data('target') || '_self';  // 取得 data-target 屬性，默認為 _self
      if (url) {
        window.open(url, target);  // 開啟指定連結
      }
    }
  });

  // 點擊圖片也能開啟連結
  $('.carousel-item-link').on('click', function() {
    var url = $(this).data('url');
    var target = $(this).data('target') || '_self';
    if (url) {
      window.open(url, target);  // 開啟指定連結
    }
  });
})
</script>