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

Jump back to first? #17

Closed
koenpopma opened this issue Nov 28, 2013 · 13 comments
Closed

Jump back to first? #17

koenpopma opened this issue Nov 28, 2013 · 13 comments
Assignees

Comments

@koenpopma
Copy link

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

trinione commented Dec 3, 2013

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

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

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

trinione commented Dec 5, 2013

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

trinione commented Dec 6, 2013

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

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

kirkas commented Dec 7, 2013

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

kirkas commented Dec 7, 2013

Jump option: #20
Data attribute: #21

@trinione
Copy link

trinione commented Dec 7, 2013

@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
Copy link
Owner

kirkas commented Dec 7, 2013

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

trinione commented Dec 8, 2013

Got yuh!

@koenpopma
Copy link
Author

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

kirkas commented Dec 9, 2013

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

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

No branches or pull requests

3 participants