javascript - Brad Birdsall の Swipe 2.0 を使用した純粋な JavaScript の iOS ナビゲーションバー

Question

純粋な JavaScript では、ページが水平方向と垂直方向にスクロールするナビゲーションバーが必要です。ページが「穏やかに」処理されている場合、私が持っているコードは機能するようです。ただし、特にページをラバーバンドゾーンにドラッグし、同時にスクロールすると、ページがかなり簡単にずれてしまいます。

ページを非表示にして (style.display='none' を使用)、再表示するか、スクロールバーでページをダブルクリックすると、ページは自動的に再配置されます。

シミュレートされたダブルクリックが手動でダブルクリックするのと同じ効果を持たないように、ダブルクリックをシミュレートするために最善を尽くしました。(しかし、私は JavaScript にかなり慣れていないので、そこに何かを見落としている可能性があります。または、問題を修正している double 以外のイベントである可能性があります。)

コードをここに投稿しようとしましたが、30000 文字の制限に達し、コードを 32K (Brad の Swipe 2.0 を含む) に削減したため、Swipe 2.0 を削除しました ( https://github.com/bradbirdsallで入手可能)。 /スワイプ）。Swipe 2.0 を含む私の Web サイト ( http://www.datewise.com/testa.html ) にもコードを投稿しました。この問題は iPhone でしか確認できないため、コードを jsfiddle に投稿するのは意味がないと思います (私の知る限り、iPhone は jsfiddle でコードを実行しません)。

私の知る限り、問題を確認するには iPhone で実行する必要があります。これは、私がテストした唯一のものです。問題を確認するには、携帯電話を縦向きにしてください。最初の画面で、色を選択します。たとえば、黄色を選択すると、黄色のページが表示されます。左右にスクロールすると、ナビゲーションバーが表示されたままになります。慎重に、正確に垂直方向に下にスクロールし、ナビゲーションバーに戻ります。これまでのところ、すべてがうまくいくはずです。

問題を作成する簡単な方法は、電話を横向きに回転させてから縦向きに戻すことです。サンプルコードでローテーションを処理することはできましたが、問題を簡単かつ確実に示すことはできませんでした。斜めにスクロールしても、この問題モードに入ることができます (これが、「正確に垂直に慎重にスクロールする」ように指定した理由です)。次に、もう一度左右にスクロールします。最後に、ナビゲーションバーの下をダブルクリックすると、ページが自動的に修正されます。

非表示にして再表示することで問題が修正されていることを確認するには、ナビゲーション画面のポイントボックスを使用します。これにより、style.display 設定のみが変更されます。次に、コンボボックスを使用して同じページカラーページに戻ります (ここでも、style.display 設定のみが変更されます)。

匿名関数「end: function(event)」の最後にある2つの手動ソリューションの1つをシミュレートすることにより、ダブルクリックまたはstyle.displayがどのように機能するかを模倣するようなソリューションが1つあると思います。「配置の問題を修正するために追加されました」というコメントを探すことで、私の試みた解決策を確認できます。

これが私のコードのコピーです：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>

<title>AppTitle</title>
<style type='text/css'>
html, body, div, form {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
</style>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi' />

<form id='form0' style='position:relative; z-index:100' ontouchmove='BlockMove(event);'>
   <div id='nav' style='z-index:100; position:fixed; width:"320px"; height="44px"; background:black;'>
      <canvas id='navCanvas' width='320px' height='44px'>
         Your browser does not support HTML5 Canvas.
      </canvas>
   </div>
</form>

<form id='form1' style='position:relative; z-index:1'>
    <div id='mySwipe' class='swipe'>
        <div class='swipe-wrap'>
            <div>
                <canvas id='canvas1' width='50' height='50'>
                    Your browser does not support HTML5 Canvas.
                </canvas>
            </div>
            <div>
                <canvas id='canvas2' width='50' height='50'>
                    Your browser does not support HTML5 Canvas.
                </canvas>
            </div>
            <div>
                <canvas id='canvas3' width='50' height='50'>
                    Your browser does not support HTML5 Canvas.
                </canvas>
            </div>

        </div>
    </div>
</form>
<form id='form3' style='position:relative' ontouchmove='BlockMove(event);'>
   <div id='homeForm'; style='position:relative; height:100%; width:100%; z-index:1' ontouchmove='BlockMove(event);'>
      <div id='d1' style='position:absolute; top:0; left:0; z-index:1'>
         <canvas id='homeCanvas' width='400' height='300' style='border:1px solid #d3d3d3'>
            Your browser does not support the HTML5 canvas tag.
         </canvas>
      </div>
      <div id='dHomeColorList' style='position:absolute; z-index:2'>
         <select name='homeColorList' id='homeColorList' onChange='homeColorChange()'
             style="font:'20px Arial, Helvetica, sans-serif'; width:140px">
            <option value='Please select'>Please select</option>
            <option value='0'>Yellow</option>
            <option value='1'>Pink</option>
            <option value='2'>Blue</option>
         </select>
      </div>
   </div>
</form>

</head>

<body onload='canvasApp()' onunload='closeMe()'>

<script type='text/javascript'>
   var eventHandlerNavBarLaunched = false;
   var fromSchedule='home', saveDisease, saveRequest;
   var FontGrp_Headers='bold 18px Arial, Helvetica, sans-serif';
   var FontGrp_SmallHeaders='bold 14px Arial, Helvetica, sans-serif';
   var currDisplayType='splash';
   var arrowLeft=0, arrowTop=0, arrowRight=0, arrowBottom=0;

function BlockMove(event) {
   event.preventDefault();
}

function apparentWidth() {
  return screen.availWidth;
}

function apparentHeight() {
   var rtnVal=screen.height;
   if (rtnVal <= 480) {
       rtnVal=480;
   } else if (rtnVal <= 568) {
      rtnVal=568;
   }
  return rtnVal;
}

function closeMe() {
   if (eventHandlerNavBarLaunched) {
      var navCanvas = document.getElementById('navCanvas');
      if (navCanvas.removeEventListener)
         navCanvas.removeEventListener('mouseup', navBarMouseUp, false);
      else if (navCanvas.detachEvent)
         navCanvas.detachEvent('on' + 'mouseup', navBarMouseUp);
      eventHandlerNavBarLaunched=false;
   }       
}

function placeColoredTxt(ctx, fontGroup, left, right, top, bottom, text1, color) {
   var currWidth, currHeight, x, y;
   currWidth=right-left;
   currHeight=bottom-top;
   ctx.font=fontGroup;
   ctx.textAlign='center';
   ctx.fillStyle=color;
   x=Math.floor(left+currWidth/2);
   y=Math.floor(4+top+currHeight/2);
   ctx.fillText(text1,x,y);
}

function canvasApp () {

   var theCanvas, ctx, myCanvas;
   var pageNo;
   var availableWidth, availableHeight;
   var availableWidth;
   var availableHeight;
   var mouseUp={};

   for (j=0; j<=3; j++) {
      drawScreen(j);
   } 

   window.mySwipe = Swipe(document.getElementById('mySwipe'));
   if (!eventHandlerNavBarLaunched) {
      var navCanvas = document.getElementById('navCanvas');
      addEvent(navCanvas, 'mouseup', navBarMouseUp);
      addEvent(navCanvas, 'unload', closeMe);
      eventHandlerNavBarLaunched = true;
   }

   showArea('home', '');

   if (typeof String.prototype.trim != 'function') { // detect native implementation
       String.prototype.trim = function () {
          return this.replace(/^\s+/, '').replace(/\s+$/, '');
      };
   }

   //---------------------------------------------------------------
   // canvasApp() functions
   function addEvent(target, eventType, eventHandler) {
      if (target.addEventListener)
         target.addEventListener(eventType, eventHandler, false);
      else if (target.attachEvent)
         target.attachEvent('on' + eventType, eventHandler);
   }

   function windowToCanvas(x, y, cnvs)
   {
      var bbox = cnvs.getBoundingClientRect();
      return {x:Math.floor(x-bbox.left * (cnvs.width / bbox.width)),
              y:Math.floor(y-bbox.top * (cnvs.height / bbox.height))
             }
   };

   function navBarMouseUp(e) {
      var loc=windowToCanvas(e.clientY, e.clientX, document.getElementById('navCanvas'));
      e.preventDefault();
      procMouseUp(loc);
   }

   function getMyCanvas(pageNo) {
      switch (pageNo) {
         case 0:
            theCanvas = document.getElementById('homeCanvas');
            ctx = theCanvas.getContext('2d');
            break;
         case 1:    
            theCanvas = document.getElementById('canvas1');
            ctx = theCanvas.getContext('2d');
            break;
         case 2:    
            theCanvas = document.getElementById('canvas2');
            ctx = theCanvas.getContext('2d');
            break;
         case 3:    
            theCanvas = document.getElementById('canvas3');
            ctx = theCanvas.getContext('2d');
            break;
      }
      return ctx;
   }

   function drawScreen(i) {
      var j, fillPage=false;
      pageNo = i;
      ctx = getMyCanvas(pageNo);

      availableWidth = apparentWidth();
      availableHeight= apparentHeight();

      if (i>0 && availableHeight<770) {
         availableHeight=770;
      }

      ctx.canvas.width=availableWidth;
      ctx.canvas.height=availableHeight;

      //ctx.canvas.style.marginLeft='-8px';
      ctx.canvas.style.marginLeft='0px';
      ctx.canvas.style.marginTop='-8px';
      ctx.canvas.style.padding='0 0 0 0';
      ctx.canvas.style.border ='0 0 0 0';
      ctx.canvas.width=availableWidth;
      ctx.canvas.height=availableHeight;

      switch (pageNo) {
         case 0:
            calcHomePage(ctx, availableHeight, availableWidth);
            break;
         case 1:
            ctx.fillStyle='#ff0';

            fillPage=true;

            break;
         case 2:
            ctx.fillStyle='#f0f';

            fillPage=true;

            break;
         case 3:
            ctx.fillStyle='#0ff';

            fillPage=true;

            break;         
      }
      if (fillPage) {
         ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
         ctx.fill();

         ctx.fillStyle='#666';
         ctx.font = FontGrp_Headers;
         ctx.textAlign='center';
         for (j=100; j<availableHeight; j+=100) {
            ctx.fillText(j, availableWidth/2, j);
         }
      }
   }
}

function procMouseUp(loc) {
   var pressedButton = '', x, y;
   x = Math.round(loc.x, 0);
   y = Math.round(loc.y, 0);
   if (x>arrowTop & x<arrowBottom & y>arrowLeft & y<arrowRight) {
      switch(fromSchedule) {
         case 'ages':
         case 'Ages':
            switchArea('ages');
            drawNavigation('Home', 'Color Specific');
            break;
         case 'home':
         case 'Home':
            switchArea('home');
            break;
      }
   }
} 

function drawNavigation(fromScrn, currTitle) { // Draw the navigation bar
   var navElement = document.getElementById('navCanvas');
   var navCtx = navElement.getContext('2d');
   var grd;
   var btnLeft=45, btnTop=18, btnHeight=28, btnWidth=50, cornerRadius=5;
   var font = FontGrp_Headers;

   navElement.style.textAlign='center';
   navElement.style.alignmentBaseline='middle';
   navElement.style.zIndex=100;
   navElement.style.display='inline';
   availableWidth = apparentWidth();
   navCtx.canvas.width=availableWidth;
   width = availableWidth-60;

   grd = navCtx.createLinearGradient(0, 0, 0, 44);
   grd.addColorStop(0, '#000');
   grd.addColorStop(1, '#000');
   navCtx.fillStyle = grd;
   navCtx.fill();

   if (fromScrn.length > 0) {
      drawArrow(navCtx, fromScrn, btnTop, btnLeft, btnHeight, btnWidth, cornerRadius);
   }
   placeColoredTxt(navCtx, FontGrp_Headers, 100, availableWidth-20, 1, 44, currTitle, '#fff');
   fromSchedule = fromScrn;
}

function calcHomePage(ctx, availableHeight, availableWidth) {  // Calculate the appearance of the home page
   var child = document.getElementById('dHomeColorList');
   var left=140;

   var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
   grd.addColorStop(0,'#58a2e2');
   grd.addColorStop(1,'#1863c0');
   ctx.fillStyle=grd;
   ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
   ctx.fill();

   ctx.fillStyle='#fff';
   ctx.fillRect(25,95,availableWidth - 50,availableHeight - 95-2);

   sectionTop = 130;
   line = sectionTop;
   spacing = 44;
   ctx.fillStyle='#000';
   ctx.font = FontGrp_Headers;
   ctx.textAlign='center';
   ctx.fillText('Color Schedules', availableWidth/2, line);
   line += (2/3) * spacing;
   ctx.textAlign='right';
   width = ctx.measureText('Colors').width-20;
   ctx.fillStyle ='#CCC';   

   ctx.fillText('Colors', 50+width, line);
   child.style.top = line-26 + 'px';
   child.style.left= left + 'px';
   line += spacing;   
}

function homeColorChange() {
   var child = document.getElementById('homeColorList');

   if (child.selectedIndex > 0) {
      showArea('ages', 'home');
      mySwipe.slide(child.value, 20); // Open Brad Birdsall's slider at page (child.value)
   }
   child.selectedIndex=0;
}

function switchArea(areaName) {
   var homePage = document.getElementById('homeForm');
   var navPage = document.getElementById('nav');
   var sliderPage = document.getElementById('mySwipe');

   switch (areaName) {
      case 'home':
         homePage.style.display='inline';
         navPage.style.display='none';
         sliderPage.style.display='none';
         window.scrollTo(0,0);
         break;
      case 'ages':
         homePage.style.display='none';
         navPage.style.display='inline';
         sliderPage.style.display='inline';
         window.scrollTo(0,0);
         break;
    }
} 

function showArea(areaName, txtTitle) {
   var currCtx, grd;

   switch (areaName) {
      case 'home':
         switchArea(areaName);
         break;
      case 'ages':
         switchArea(areaName);
         drawNavigation('Home', 'Color Specific');
         break;
      default:
         alert('Unrecognized command passed to showArea, areaName: [' + areadName + ']');
         break;
   }
}

function drawArrow(context, text, top, left, height, width, cornerRadius) {
   // Draw the pointed rectangle box on left side of the navigation bar
   var keyGradient = context.createLinearGradient(left, top, left, top + height);
   var drawingTop=top/2, drawingLeft=left/2;
   keyGradient.addColorStop(0,   'rgb(208, 208, 210)');
   keyGradient.addColorStop(1.0, 'rgb(162, 162, 166)');
   context.save();
   context.fillStyle=keyGradient;
   context.beginPath();
   context.moveTo(drawingLeft-(height/2), (height/2) + drawingTop);  //A
   context.lineTo(drawingLeft, height + drawingTop); //B

   if (cornerRadius>0) {
      context.lineTo(width + drawingLeft - cornerRadius, height + drawingTop); //C
      context.arcTo(width + drawingLeft, height + drawingTop, width + drawingLeft, height + drawingTop - cornerRadius, cornerRadius); //D
      context.lineTo(width + drawingLeft, drawingTop + cornerRadius); //E
      context.arcTo(width + drawingLeft, drawingTop, width + drawingLeft - cornerRadius, drawingTop, cornerRadius); //F
   } else {
      context.lineTo(width + drawingLeft, height + drawingTop); //CD
      context.lineTo(width + drawingLeft, drawingTop); //EF
   }
   context.lineTo(drawingLeft, drawingTop); //G
   context.closePath();
   context.stroke();
   context.fill();
   context.font=FontGrp_SmallHeaders;
   context.fillStyle='#fff';
   context.textAlign='center';
   context.fillText(text, left + (width)/2 - (height/4) - context.measureText(text).width/2, top + (height)/2 - context.measureText('M').width/2);
   context.restore();

   arrowTop=drawingTop;
   arrowLeft=(left/2)-(height/4);
   arrowBottom=drawingTop+height;
   arrowRight=arrowLeft+width;
}

/*
 *
 * Swipe 2.0
 *
 * Brad Birdsall
 * Copyright 2013, MIT License
 * <Get this code at https://github.com/bradbirdsall/Swipe>
 *
*/

</script>

</body>
</html>

これは、ダブルクリックシミュレーションを配置しようとした Swipe 2.0 の一部です。

   end: function(event) {

      // measure duration
      var duration = +new Date - start.time;

      // determine if slide attempt triggers next/prev slide
      var isValidSlide =
            Number(duration) < 250               // if slide duration is less than 250ms
            && Math.abs(delta.x) > 20            // and if slide amt is greater than 20px
            || Math.abs(delta.x) > width/2;      // or if slide amt is greater than half the width

      // determine if slide attempt is past start and end
      var isPastBounds =
            !index && delta.x > 0                            // if first slide and slide amt is greater than 0
            || index == slides.length - 1 && delta.x < 0;    // or if last slide and slide amt is less than 0

      // determine direction of swipe (true:right, false:left)
      var direction = delta.x < 0;

      // if not scrolling vertically
      if (!isScrolling) {

        if (isValidSlide && !isPastBounds) {

          if (direction) {

            move(index-1, -width, 0);
            move(index, slidePos[index]-width, speed);
            move(index+1, slidePos[index+1]-width, speed);
            index += 1;

          } else {

            move(index+1, width, 0);
            move(index, slidePos[index]+width, speed);
            move(index-1, slidePos[index-1]+width, speed);
            index += -1;

          }

          options.callback && options.callback(index, slides[index]);

        } else {

          move(index-1, -width, speed);
          move(index, 0, speed);
          move(index+1, width, speed);

        }

      }

      // kill touchmove and touchend event listeners until touchstart called again
      element.removeEventListener('touchmove', events, false)
      element.removeEventListener('touchend', events, false)

      //---------------------------------------------------------------
      // Added to try to fix alignment problem

       var obj = document.getElementById('form1');
       var clickEvt = document.createEvent('MouseEvents');
       clickEvt.initEvent("dblclick");
       obj.dispatchEvent(clickEvt);


      // End added code
      //---------------------------------------------------------------

    },

javascript - Brad Birdsall の Swipe 2.0 を使用した純粋な JavaScript の iOS ナビゲーション バー

1 に答える 1

Related

Reference

javascript - Brad Birdsall の Swipe 2.0 を使用した純粋な JavaScript の iOS ナビゲーションバー