Jump back to first?

[koenpopma]

Hi Léo,

I would like to create a similar website like Reverse Büro, where it is possible to navigate between the items (left / right) and sections (up / down) regardless which item is active, and if you switch between sections it jumps back to the first item.
I do not get it done with the new script. What is the solution?

Thanks in advance,

Koen.

[trinione]

Hi Koen:
I would try an approach that combines me creating the 'ascesorFloorName' and 'direction' options in their own variables so I would have easy access to them, and then I would use the new TRIGGER feature.

For example :

var $aryAscensorFloorName = ['Home','Implementation','Options','Triggers','Smartphone','Smartphone 2'];
var $aryAscensorDirection = [[1,0],[1,1],[2,1],[2,2],[2,3],[1,3]];

var ascensor = $('#ascensorBuilding').ascensor({
    childType: 'section',
    ascensorFloorName: $aryAscensorFloorName,
    time: 250,
    windowsOn: 0,
    direction: $aryAscensorDirection,
    easing: 'easeInOutQuad',
    keyNavigation: true,
    loop: false,
    queued: "y",
    overflow:"hidden"
});

---

Then I would use the new .trigger() feature accordingly:

// Go to previous floor
ascensor.trigger("prev");

// Go to next floor
ascensor.trigger("next");

// Go to the 5th floor (JS calcul from 0)
ascensor.trigger("scrollToFloor", 4);

// Go up, down, left or right
ascensor.trigger("scrollToDirection" ,"up");
ascensor.trigger("scrollToDirection" ,"down");
ascensor.trigger("scrollToDirection" ,"left");
ascensor.trigger("scrollToDirection" ,"right");

HOPE THIS HELPS or at least points you in the right direction.

[koenpopma]

Thanks a lot ... but the question remains:

My ascensorDirectionArray:
[0,0],
[1,0], [1,1], [1,2], [1,3],
[2,0], [2,1], [2,2],
[3,0],
[4,0]

Is it possible to go from [1,1] or [1,2] or [1,3] to jump to [2,0] rather than those directly below?
Thereby it is also not possible to [1.3] to [0.0] to navigate using the up arrow.
In addition, loop set to 'true', does not make it loop between [0,0] and [4,0], and vice versa.

I need some kind of 'switch floor'-function using the up and down arrows.

Can you help me with such a feature? Maybe afterwards add to the script itself?

Thanks for the feedback.

Koen

[koenpopma]

Hello Léo,

Here is an example with instructions of how I want it to work: http://www.koenpopma.com/github/ascensor/.
Just like: http://www.reverseburo.com/.

Greetings,

Koen

[trinione]

Léo, is is possible to enhance my solution and included in the library?

I have added an option named 'directionStart', can be 'x', 'y' or say 'n' (for none, it would be ignored in the code and the default action of going up to the next 'level' occurs.

The 'x' allows for jumping horizontally (Left/Right arrows).
The 'y' allows for jumping vertically (Up/down arrows).

JUST FIND AND CHANGE THE handleChocolateDirection function to this:

        function handleChocolateDirection(addCoordY, addCoordX) {
            if (self.options.directionStart == "y") {
                var directionStartYFloor = -1;
                var floorReference = [ self.options.direction[floorActive][0], self.options.direction[floorActive][1]];

                // down movement
                if (addCoordY == 1 && addCoordX == 0) {
                    findLevel = floorReference[0] + 1;
                    for(var i = 0; i < self.options.direction.length; i++) {
                        if(self.options.direction[i][0] == findLevel) {
                            directionStartYFloor = i;
                            scrollToStage(directionStartYFloor, self.options.time);
                            break;
                        }
                    }
                    return;
                }

                // up movement
                if (addCoordY == -1 && addCoordX == 0) {
                    findLevel = floorReference[0] - 1;
                    for(var i = 0; i < self.options.direction.length; i++) {
                        if(self.options.direction[i][0] === findLevel) {
                            directionStartYFloor = i;
                            scrollToStage(directionStartYFloor, self.options.time);
                            break;
                        }
                    }
                    return;
                }
            }
            if (self.options.directionStart == "x") {
                var directionStartXFloor = -1;
                var floorReference = [ self.options.direction[floorActive][0], self.options.direction[floorActive][1]];

                // right movement
                if (addCoordY == 0 && addCoordX == 1) {
                    findLevel = floorReference[1] + 1;
                    for(var i = 0; i < self.options.direction.length; i++) {
                        if(self.options.direction[i][1] == findLevel) {
                            directionStartXFloor = i;
                            scrollToStage(directionStartXFloor, self.options.time);
                            break;
                        }
                    }
                    return;
                }

                // left movement
                if (addCoordY == 0 && addCoordX == -1) {
                    findLevel = floorReference[1] - 1;
                    for(var i = 0; i < self.options.direction.length; i++) {
                        if(self.options.direction[i][1] === findLevel) {
                            directionStartXFloor = i;
                            scrollToStage(directionStartXFloor, self.options.time);
                            break;
                        }
                    }
                    return;
                }
            }
            var floorReference = [ self.options.direction[floorActive][0] + addCoordY, self.options.direction[floorActive][1] + addCoordX ];
            $.each(self.options.direction, function(index) {
                "" + floorReference == "" + self.options.direction[index] && scrollToStage(index, self.options.time);
            });
        }

ADD to the ascensor options in ascensor.js like this:

   var pluginName = "ascensor", defaults = {
......
        touchSwipeIntegration: !1,
        queued: !1,
>>  directionStart: "n"  <<
 };

IN YOUR CODE include the directionStart option like so:

    var ascensor = $('#ascensorBuilding').ascensor({
.......
        direction: [[1,0],[1,1],[1,2],[1,3],[2,0],[2,1],[2,2]],
        directionStart: "y",
.....
});

And that's it!

ENJOY!

As I said, I think this is a start and can be enhanced and added to the library as it is a very neat feature.

[trinione]

Léo / Koen:
Here is a quick testing file. 3x3 layout if you need it.

Set and unset the 'queued' option accordingly to see the different sliding effects.

<div id="ascensorBuilding">
    <section>
  <div>Home</div>
    </section>
    <section>
        <div>Product</div>
    </section>
    <section>
        <div>Services</div>
    </section>
    <section>
        <div>Activity</div>
    </section>
    <section>
        <div>Home2</div>
    </section>
    <section>
        <div>Product2</div>
    </section>
    <section>
        <div>Services2</div>
    </section>
    <section>
        <div>Activity2</div>
    </section>
    <section>
        <div>Home3</div>
    </section>
    <section>
        <div>Product3</div>
    </section>
    <section>
        <div>Services3</div>
    </section>
    <section>
        <div>Activity3</div>
    </section>
</div>

    var $aryAscensorFloorName = ['Home','Product','Services','Activity','Home2','Product2','Services2','Activity2','Home3','Product3','Services3','Activity3'];
    var $aryAscensorDirection = [[1,0],[1,1],[1,2],[1,3],[2,0],[2,1],[2,2],[2,3],[3,0],[3,1],[3,2],[3,3]];

    var ascensor = $('#ascensorBuilding').ascensor({
        childType: 'section',
        ascensorFloorName: $aryAscensorFloorName,
        time: 250,
        windowsOn: 0,
        direction: $aryAscensorDirection,
        directionStart: "y",
        easing: 'easeInOutQuad',
        keyNavigation: true,
        loop: true,
        queued: 0,
        overflow:"hidden"
    });

[koenpopma]

RE: Cool. Thanks. I'll let you know if i succeed.

Love the approach, the startdirection is about the behavior of the up and down arrows. This has no effect on the left / right arrows to switch from floor (at the first or after the last item of the floor group). Do you have a solution for that too, Leo or Trinione?

(Although "loop" has already been set to "true") I noticed it doesn't loop between [1,0] and [4,0]... is that possible?

[kirkas]

Ok,

This is a more complicated issue. The way we did it for reverseBuro was by specifying direction for every single floor.

The hack work that way.

1. we disable the ascensor keydown option & our own keydown function.
2. we create a customDirection array, containing custom direction information (up/down in that case).

I've put together a JSfiddle here: http://jsfiddle.net/kirkas/taCJn/ @koenpopma

Also, even if that code seems logic and well done, it apply only for that specific case and include different navigation concept level. My goal is to come up with a solution working for all.

I'm gonna separate this issue in two issue:

Jump: Add an option to jump through floor to floor, on same axis, even if white space in between.
Data Attribute: Specify next/prev/up/down target by using data-attribute if present

PS: @trinione , Good code, i will definitely use some of that logic! fork and pull request next time :)

[kirkas]

Jump option: #20
Data attribute: #21

[trinione]

@kirkas : I don't know what you mean by 'fork and pull request'. I am new to github and only figured out the markup a few days ago. If you have a link you can direct me to, I don't mind reading and learning. Thanks.

[kirkas]

The idea is that you fork this project, it mean that you create your own repository from mine.

exemple:
_original repo_
https://github.com/kirkas/Ascensor.js
_once forked will create_
https://github.com/trinione/Ascensor.js

You can then modify the code as you wish (see end page of https://github.com/kirkas/Ascensor.js to understand my workflow).

Once you considerate it done, create a pull request on github & i will review and ultimately merge those repository together.

More here: https://help.github.com/articles/using-pull-requests

[trinione]

Got yuh!

[koenpopma]

Hey Léo/Trinione,

Love the approach directionStart within the script (just changed chocolate-function), could you also hack the arrows if 'startDirection' is set (like: x, y of n) -> within the script? Like the example of Kirkas; to use left/right arrows as the prev/next arrows.

if (self.options.directionStart) {
// hack arrows
}

[kirkas]

I'm working on it, i've created a map generator, i now need to tidy up and write some test.

please post future comment here #20 or #21 Depending on your comment