5

I am using turn.js in my application and would like to implement the vertical flipping similar to http://pageflip-books.com/documentation-configuration.php - VerticalMode

Can anyone let me know, how can I implement the vertical flipping in turn.js?

needhelpinphp
  • 61
  • 1
  • 5

3 Answers3

0

Just rotate the continer div by 90 degrees, and then rotate internal childs by -90 degrees to cancel the rotation.

Swesh
  • 150
  • 1
  • 17
0

Rotating the container by -90 degrees and the pictures by 90 degrees does produce a vertical flip-book, but the mouse event co-ordinates do not get flipped, so the animated flipping does not work as expected—you have to hover the mouse in unexpected places, and make mouse gestures in unexpected directions to make it work.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Masher
  • 1
  • So, I came across the same question, tried what was suggested and added information (that it nearly works, but not quite - and why). I then asked a follow-up question. Why the delete recommendations? – Masher Aug 22 '17 at 18:50
  • Because an answer box is not the appropriate place for asking follow-up questions. The only thing you should put into an answer is an answer to the question that was asked here. – Cody Gray - on strike Aug 23 '17 at 06:23
  • ...well maybe the site should _let_ you do that then. I tried that first and was told that I did not have enough reputation. – Masher Aug 23 '17 at 20:06
  • The "Ask Question" button is blue, and located at the upper-right side of the page. I'm not sure what it wasn't letting you do. Perhaps you're referring to adding a comment? Yeah, because [this is a Q&A site](https://stackoverflow.com/tour); the focus is on questions and answers. We don't really want comments. They're only there for when clarification is needed, and we block new users from leaving comments to keep down spam. – Cody Gray - on strike Aug 23 '17 at 20:09
0

1. rotate each page -90deg
2. rotate the whole book(calendar) 90deg
3. change mouse(touch) event coordinate from vertical page horizontal one

turn.js-coordinate translate method

      _translateCoordinate: function(e) {
            if (!e) {
                return e;
            }
            var data = this.data().f;
            var pos = data.parent.offset();
            var oldX = e.pageX - pos.left;
            var oldY = e.pageY - pos.top;

            var newX = oldY + pos.left;
            var newY = this.height() - oldX + pos.top;

            return {
                pageX: newX,
                pageY: newY
            };
        },

turn.js-coordinate translate usage

      _eventMove: function(e) {
            var data = this.data().f;

            if (!data.disabled) {
                e = (isTouch) ? e.originalEvent.touches : [e];

                if (data.corner) {
                    var pos = data.parent.offset();
                    var posInNewCoordinate = 
                    flipMethods._translateCoordinate.call(this, e[0]); // here

                    data.corner.x = posInNewCoordinate.pageX - pos.left;
                    data.corner.y = posInNewCoordinate.pageY - pos.top;

 _cornerActivated: function(e) {
            if (e.originalEvent === undefined) {
                return false;
            }

            e = (isTouch) ? e.originalEvent.touches : [e];

            var posInNewCoordinate = 
                flipMethods._translateCoordinate.call(this, e[0]); // here
            var data = this.data().f,
                pos = data.parent.offset(),
                width = this.width(),
                height = this.height(),
                c = {
                    x: Math.max(0, posInNewCoordinate.pageX - pos.left),
                    y: Math.max(0, posInNewCoordinate.pageY - pos.top)
                },
HTML 
<!doctype html>
<html>

<head>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="turn.js"></script>

    <style type="text/css">
        #calendar,
        .calendar-wrapper {
            transform-origin: 0% 0% 0px;
        }

        #calendar .turn-page {
            background-image: url('paper-texture.png');
            background-repeat: repeat;
        }

        .page-wrapper>.page {
            height: 800px;
            width: 600px;
            transform-origin: 0% 0% 0px;
        }
    </style>
</head>

<body>
    <div>
        <div class="calendar-wrapper">
            <div id="calendar">
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/01.jpg);"></div>
                </div>
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/02.jpg);"></div>
                </div>
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/03.jpg);"></div>
                </div>
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/04.jpg);"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(window).ready(function() {
            var $page = $('.page-wrapper>.page');
            var $calendarWrapper = $('.calendar-wrapper');
            var $pageWrapper = $('.page-wrapper');
            var $calendar = $('#calendar');

            var height = $page.height();
            var width = $page.width();

            $page.css('transform', `translate3d(0px, ${width}px, 0px) rotate(-90deg)`);

            $calendarWrapper.height(width);
            $calendarWrapper.width(height);
            $calendarWrapper.css('transform', `translate3d(${width}px, 0px, 0px) rotate(90deg)`)

            $pageWrapper.height(width);
            $pageWrapper.width(height);

            $calendar.height(width);
            $calendar.width(height);

            $calendar.turn({
                display: 'single',
                acceleration: true,
                gradients: false,
                gradients: !$.isTouch,
                elevation: 50,
                when: {
                    turned: function(e, page) {
                        /*console.log('Current view: ', $(this).turn('view'));*/
                    }
                }
            });
        });
    </script>
</body>

</html>
Kevin Liu
  • 3
  • 4