Is this possible?

[koenpopma]

What I would like to accomplish is that each floor (up and down) jumps back to the first element of each level of floors (above or below).

Simply put: all movements of "up and down" navigate to the first element of the next / previous level.

Difficulty: The floors are created dynamically, so manually adding "data-ascensor-..."-directions is not a possibility.

In addition: This is how ReverseBuro worked (their are now offline?).

For example

[1,0], [1,1], [1,2], [1,3], [1,4] goes “up” to [0,0]
[1,0], [1,1], [1,2], [1,3], [1,4] goes “down” to [2,0]

For example

Floor 17 [5,2] goes “up” to Floor 13 [4,0]
Floor 17 [5,2] goes “down” to Floor 19 [6,0]

Code example

loop: “increment-to-zero”
UP      [ y-1, 0 ]
DOWN    [ y+1, 0 ]
LEFT    prev()
RIGHT   next()

With an example image:

[kirkas]

That's quite a hard one. You mention you create the floor dynamically, would it be possible to add the data- attribute when you generate those floor? Do you have any example of code I could look at?

PS: ReverseBuro effect was done by forcing ascensor behavior, each floor would get a data-ascensor-top/bottom attribute.

[koenpopma]

Hi. Here is my script which is outputted through php. http://www.koenpopma.com/ascensor/

PHP (simplified version)

<?
// Structure
$website = array(

    // HOME
    "home" => array(
        array(
            "title"     =>  "Homepage",
            "content"   =>  "Content"
        ),
    ),

    // WORK
    "Project 1" => array(
        array(
            "title"     =>  "Start",
            "content"   =>  "At first we did..."
        ),
        array(
            "title"     =>  "Middle",
            "content"   =>  "And then..."
        ),
        array(
            "title"     =>  "End",
            "content"   =>  "Champagne, always :P"
        ),
    ),
    "Project 2" => array(
        array(
            "title"     =>  "Start",
            "content"   =>  "Once upon a time"
        ),
        array(
            "title"     =>  "Middle",
            "content"   =>  "And then..."
        ),
        array(
            "title"     =>  "Happily ever after",
            "content"   =>  "Champagne, once again :P"
        ),
    ),

    // ABOUT
    "about" => array(
        array(
            "title"     =>  "About",
            "content"   =>  "I am..."
        ),
        array(
            "title"     =>  "Clients tell stories",
            "content"   =>  "Content"
        ),
    ),

    // CONTACT
    "contact" => array(
        array(
            "title"     =>  "Contact",
            "content"   =>  "Get in touch"
        ),
    ),
);

// GENERATE HTML
// over simplified
foreach($floors as $floor){
    <floor>content</floor>
}

// GENERATE MAP
$y = 0;
$x = 0;
$map = array();
foreach ( $website as $floor){
    $x=0;
    foreach ( $floor as $room ){
        $map[] = "$y,$x";
        $x++;
    }
    $y++;
}
$map = [ [" . implode("],[",$map)."] ];

# print_r($map);
$map =  [
        [0,0],              (home)
        [1,0],[1,1],[1,2],  (work)
        [2,0],[2,1],        (work-2)
        [3,0],[3,1],        (about)
        [4,0]               (contact)
    ];

Javascript

<script>
$('#ascensor').ascensor({
    direction: <? echo $map; ?>
});
</script>

Nope. I tried many times to apply data-, but it's the jquery which needs a new direction / increment / loop-function. I think, its the easiest way, is to make use of the direction-map..

up (y-1):   [3,2] => [3-1,2] => [2,0]
down (y+1): [3,2] => [3+1,2] => [4,0]

[y,x] so: on up or down, x == 0.

left: same as prev()
right: same as next()

Greetings, Koen

PS: ReverseBureau had the v1.0 script (but that didn't support swipe). PS: Somewhere, some time back, someone posted a "Chocolate variant"–script. I'll try to find it. One moment ;) Found it: https://github.com/kirkas/Ascensor.js/issues/17#issuecomment-29934434 *This works/did work the right way, way back in time :P

Regards,

Koen

[koenpopma]

Maybe, thinking out loud: By adding an extra data to the floor

<floor data-map="2,1" />
ascensorInstance.scrollToMap(2,1);
ascensorInstance.scrollToMapY(2);
ascensorInstance.scrollToMapX(1);