app/Plugin/HigashiyamaForProduct/Resource/template/default/stand_reading.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  6.     <title>東山書房 / 立ち読み専用ページ</title>
  7.     <meta name="viewport" content="width = 1050, user-scalable = no" />
  8.     <script type="text/javascript" src="{{ asset('HigashiyamaForProduct/turnjs/js/jquery-3.7.1.min.js', 'plugin') }}"></script>
  9.     <script type="text/javascript" src="{{ asset('HigashiyamaForProduct/turnjs/js/jquery-ui-1.8.20.custom.min.js', 'plugin') }}"></script>
  10.     <script type="text/javascript" src="{{ asset('HigashiyamaForProduct/turnjs/js/modernizr.2.5.3.min.js', 'plugin') }}"></script>
  11.     <script type="text/javascript" src="{{ asset('HigashiyamaForProduct/turnjs/js/hash.js', 'plugin') }}"></script>
  12. </head>
  13. <body class="LC_Page_Products_Stand_Reading">
  15. <div id="canvas">
  16.     <div class="flipbook-viewport">
  17.         <div class="container">
  18.             <div class="flipbook">
  19.                 <!-- Next button -->
  20.                 <div ignore="1" class="next-button"></div>
  21.                 <!-- Previous button -->
  22.                 <div ignore="1" class="previous-button"></div>
  23.                 {% for filename in standing_files %}
  24.                     <div style="background-image:url({{ asset(filename, 'save_image') }})"></div>
  25.                 {% else %}
  26.                     <div style="background-image:url({{ asset(''|no_image_product, 'save_image') }})"></div>
  27.                 {% endfor %}
  28.             </div>
  29.         </div>
  30.     </div>
  31. </div>
  33. <script src="{{ asset('HigashiyamaForProduct/turnjs/js/platform.js', 'plugin') }}"></script>
  34. <script type="text/javascript">
  36. function loadApp() {
  37.     var flipbook = $('.flipbook');
  39.     // Check if the CSS was already loaded
  40.     if (flipbook.width()==0 || flipbook.height()==0) {
  41.         setTimeout(loadApp, 10);
  42.         return;
  43.     }
  45.     // Create the flipbook
  46.     var monitorW = window.parent.screen.width;
  47.     var monitorH = window.parent.screen.height;
  49.     var windowW = $(window).width();
  51.     var windowW = $('#canvas').width();
  53.     var os = platform.os.toString().toLowerCase();
  54.     var displayMode = '';
  55.     var frameH = '';
  56.     //    hs,wsの設定値を変更する際には、モーダルウィンドウの設定値も見直すこと
  57.     if((os.indexOf("android") !== -1) || (os.indexOf("ios") !== -1)) {
  58.         //左右のボタン分、切り替えの余裕をみる
  59.         if (windowW >= 750){
  60.             displayMode = 'single';
  61.             ws = 750;
  62.             hs = 1088;
  63.             $('.epub-iframe').css({'min-height':'1190px','lemin-width':'750px'});
  64.         } else {
  65.             displayMode = 'single';
  66.             ws = 375;
  67.             hs = 544;
  68.         }
  69.     }else{
  70.         if(monitorH >= 1080){
  71.             if (windowW >= 1050){
  72.                 displayMode = 'double';
  73.                 ws = 1000;
  74.                 hs = 725;
  75.                 $('.flipbook-viewport .flipbook').css({'left':'-500px'});
  76.             } else if (windowW >= 800){
  77.                 displayMode = 'double';
  78.                 ws = 750;
  79.                 hs = 544;
  80.                 $('.flipbook-viewport .flipbook').css({'left':'-375px'});
  81.             } else {
  82.                 displayMode = 'single';
  83.                 ws = 375;
  84.                 hs = 544;
  85.             }
  86.         } else {
  87.             if (windowW >= 800){
  88.                 displayMode = 'double';
  89.                 ws = 750;
  90.                 hs = 544;
  91.                 $('.flipbook-viewport .flipbook').css({'left':'-375px'});
  92.             } else {
  93.                 displayMode = 'single';
  94.                 ws = 375;
  95.                 hs = 544;
  96.             }
  97.         }
  98.     }
  99.     flipbook.turn({
  100.         display: displayMode,
  101.         // Width
  102.         width:ws,
  103.         // Height
  104.         height:hs,
  105.         // Elevation// 自動でページをめくったときの高さ
  106.         elevation: 50,
  107.         // Enable gradients
  108.         gradients: true,
  109.         // Auto center this flipbook
  110.         autoCenter: true,
  111.         duration: 1000,
  112.         //pages: 6,
  113.         // Events
  114.         when: {
  115.             turning: function(event, page, view) {
  117.                 var book = $(this),
  118.                 currentPage = book.turn('page'),
  119.                 pages = book.turn('pages');
  121.                 // Update the current URI
  123.                 Hash.go('page/' + page).update();
  125.                 // Show and hide navigation buttons
  127.                 disableControls(page);
  129.             },
  131.             turned: function(event, page, view) {
  133.                 disableControls(page);
  135.                 $(this).turn('center');
  137.                 if (page==1) {
  138.                     $(this).turn('peel', 'br');
  139.                 }
  141.             },
  143.             missing: function (event, pages) {
  145.                 // Add pages that aren't in the flipbook
  147.                 for (var i = 0; i < pages.length; i++)
  148.                     addPage(pages[i], $(this));
  150.             }
  151.         }
  153.     });
  155.     //最新のjqueryではデフォルトのresizeViewport();が動かない
  157.     // Using arrow keys to turn the page
  159.     $(document).keydown(function(e){
  161.         var previous = 37, next = 39, esc = 27;
  163.         switch (e.keyCode) {
  164.             case previous:
  166.                 // left arrow
  167.                 $('.flipbook').turn('previous');
  168.                 e.preventDefault();
  170.             break;
  171.             case next:
  173.                 //right arrow
  174.                 $('.flipbook').turn('next');
  175.                 e.preventDefault();
  177.             break;
  178.             case esc:
  180.                 $('.flipbook-viewport').zoom('zoomOut');
  181.                 e.preventDefault();
  183.             break;
  184.         }
  185.     });
  187.     // URIs - Format #/page/1
  189.     Hash.on('^page\/([0-9]*)$', {
  190.         yep: function(path, parts) {
  191.             var page = parts[1];
  193.             if (page!==undefined) {
  194.                 if ($('.flipbook').turn('is'))
  195.                     $('.flipbook').turn('page', page);
  196.             }
  198.         },
  199.         nop: function(path) {
  201.             if ($('.flipbook').turn('is'))
  202.                 $('.flipbook').turn('page', 1);
  203.         }
  204.     });
  207.     // Regions
  209.     if ($.isTouch) {
  210.         $('.flipbook').bind('touchstart', regionClick);
  211.     } else {
  212.         $('.flipbook').click(regionClick);
  213.     }
  215.     // Events for the next button
  217.     $('.next-button').bind($.mouseEvents.over, function() {
  218.         $(this).addClass('next-button-hover');
  220.     }).bind($.mouseEvents.out, function() {
  222.         $(this).removeClass('next-button-hover');
  224.     }).bind($.mouseEvents.down, function() {
  226.         $(this).addClass('next-button-down');
  228.     }).bind($.mouseEvents.up, function() {
  230.         $(this).removeClass('next-button-down');
  232.     }).click(function() {
  234.         $('.flipbook').turn('next');
  236.     });
  238.     // Events for the next button
  240.     $('.previous-button').bind($.mouseEvents.over, function() {
  242.         $(this).addClass('previous-button-hover');
  244.     }).bind($.mouseEvents.out, function() {
  246.         $(this).removeClass('previous-button-hover');
  248.     }).bind($.mouseEvents.down, function() {
  250.         $(this).addClass('previous-button-down');
  252.     }).bind($.mouseEvents.up, function() {
  254.         $(this).removeClass('previous-button-down');
  256.     }).click(function() {
  258.         $('.flipbook').turn('previous');
  260.     });
  263.     $('.flipbook').addClass('animated');
  265. }
  268. // Load the HTML4 version if there's not CSS transform
  269. yepnope({
  270.     test : Modernizr.csstransforms,
  271.     yep: ['{{ asset('HigashiyamaForProduct/turnjs/js/turn.js', 'plugin') }}'],
  272.     nope: ['{{ asset('HigashiyamaForProduct/turnjs/js/turn.html4.min.js', 'plugin') }}', '{{ asset('HigashiyamaForProduct/turnjs/css/jquery.ui.html4.css', 'plugin') }}'],
  273.     both: [ '{{ asset('HigashiyamaForProduct/turnjs/css/jquery.ui.css', 'plugin') }}', '{{ asset('HigashiyamaForProduct/turnjs/js/stand_reading.js', 'plugin') }}', '{{ asset('HigashiyamaForProduct/turnjs/css/stand_reading.css', 'plugin') }}'],
  274.     complete: loadApp
  275. });
  277. </script>
  279. </body>
  280. </html>