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

Row (and frame) lock options for multi-rows #191

Closed
pisi opened this Issue May 10, 2013 · 5 comments

Comments

Projects
None yet
2 participants
@pisi
Owner

pisi commented May 10, 2013

Split from #190 by @gnatok:

Can I move only horizontally in multi-row sprite and programmatically change number of row?

Thanks

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 10, 2013

Owner

You can bind to rowChange event and check if the row didn't deviate from the desired row number. If it does, set it back with .reel('row', _row_number_here_). It won't be pretty though.

  $('#my_image').reel({
    // business as usual
  });
  var desiredRow = 2;
  $('#my_image').bind('rowChange', function(e, nothing, row){
    if (row != desiredRow){
      $('#my_image').reel('row', desiredRow);
    }
  });

However, a useful option it would be, row lock and similarly frame lock too. This is however an API change, so first chance is the next minor release 1.3.

Owner

pisi commented May 10, 2013

You can bind to rowChange event and check if the row didn't deviate from the desired row number. If it does, set it back with .reel('row', _row_number_here_). It won't be pretty though.

  $('#my_image').reel({
    // business as usual
  });
  var desiredRow = 2;
  $('#my_image').bind('rowChange', function(e, nothing, row){
    if (row != desiredRow){
      $('#my_image').reel('row', desiredRow);
    }
  });

However, a useful option it would be, row lock and similarly frame lock too. This is however an API change, so first chance is the next minor release 1.3.

pisi added a commit that referenced this issue May 17, 2013

pisi added a commit that referenced this issue May 17, 2013

pisi added a commit that referenced this issue May 17, 2013

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 17, 2013

Owner

Two new options to help you (and others of course!) achieve a lock of frame or row in multirow movies (not limited to multirow at all) - framelock and rowlock. Both are Boolean and default to false, which means no lock. When either of them is set to true the direct mouse interaction is disabled and only programmatic frame or row change is available to be triggered by your custom UI elements using .reel( key, value ) like so:

$('#my_image').reel('row', 2);
// or
$('#my_image').reel('frame', 5);

Please note, that even despite framelock: true animated setups will still animate. Only the mouse interaction is affected.

This involved an API change so this will land in 1.3. In the meantime please use code from the gh-191-locks branch.

Owner

pisi commented May 17, 2013

Two new options to help you (and others of course!) achieve a lock of frame or row in multirow movies (not limited to multirow at all) - framelock and rowlock. Both are Boolean and default to false, which means no lock. When either of them is set to true the direct mouse interaction is disabled and only programmatic frame or row change is available to be triggered by your custom UI elements using .reel( key, value ) like so:

$('#my_image').reel('row', 2);
// or
$('#my_image').reel('frame', 5);

Please note, that even despite framelock: true animated setups will still animate. Only the mouse interaction is affected.

This involved an API change so this will land in 1.3. In the meantime please use code from the gh-191-locks branch.

@gnatok

This comment has been minimized.

Show comment
Hide comment
@gnatok

gnatok Jun 7, 2013

@pisi Very nice. But imagine situation when on your page you have 2 instances of reel that use one source, but for the first inst. you need to show only first row, for second one you need to show all rows but starts from 2 row(only restrict to show 1 row).
For first:
rows: [1]
.
For second
rows: [2,3,4,5]

Like before/after simulation with one source

P.S
This is ONLY PROPOSAL. For me enough what Reel has now :).

gnatok commented Jun 7, 2013

@pisi Very nice. But imagine situation when on your page you have 2 instances of reel that use one source, but for the first inst. you need to show only first row, for second one you need to show all rows but starts from 2 row(only restrict to show 1 row).
For first:
rows: [1]
.
For second
rows: [2,3,4,5]

Like before/after simulation with one source

P.S
This is ONLY PROPOSAL. For me enough what Reel has now :).

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Jun 7, 2013

Owner

In such an edge case, lock like this won't help any you will have resort to one of the following:

  1. Have one single-row (before) and one multi-row setups (after) and re-initiate Reel when switching from one to the other
  2. Keep the one multi-row setup you have now (before+after) and keep the row in check manually using the rowChange handler as described earlier above.
Owner

pisi commented Jun 7, 2013

In such an edge case, lock like this won't help any you will have resort to one of the following:

  1. Have one single-row (before) and one multi-row setups (after) and re-initiate Reel when switching from one to the other
  2. Keep the one multi-row setup you have now (before+after) and keep the row in check manually using the rowChange handler as described earlier above.
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Nov 5, 2013

Owner

Released today as part of v1.3.0

Owner

pisi commented Nov 5, 2013

Released today as part of v1.3.0

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