Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is this possible? #60

Open
koenpopma opened this issue Dec 3, 2014 · 3 comments
Open

Is this possible? #60

koenpopma opened this issue Dec 3, 2014 · 3 comments

Comments

@koenpopma
Copy link

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:

mymap

@kirkas
Copy link
Owner

kirkas commented Mar 29, 2015

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
Copy link
Author

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: #17 (comment) *This works/did work the right way, way back in time :P

Regards,

Koen

@koenpopma
Copy link
Author

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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants