gigerbytes / angular-sly Goto Github PK

Any plans to finish this Angular directive for Sly? NgRepeat requires some work, so that sly's "reload" is called after an item is added (and the repeat is executed).

For some reason my .slidee element is always initialized to 'width: 0px'.

Here is my view code somewhat simplified (in jade):

#sliderbox-container
  .scrollbar#slyscrollbar
      .handle
        .mousearea
  .frame(sly-horizontal)
    ul.slidee
      li.daywithtimeslots(ng-repeat="day in dayswithappts()" sly-horizontal-repeat sly-options="{itemNav: 'centered', startAt: 1}")
        .dateheader
          h2.date {{ day.format('M') }}/{{ day.format('D') }}
          span.weekday {{ day.format('dddd') }}
        .timeslot-box
          ul.timeslots
            li timeslot

here is my style code (less):

#sliderbox-container {
        .frame {
          height: 500px;
          margin: 0px 0px;
          padding: 10px 0px; //(ver,hor)
          overflow: hidden;
          width: 100%;
        }
        .slidee {
          list-style: none;
          margin: 0;
          padding: 0;
          height: 100%;
        }
        .slidee li {
          float: left;
          height: 100%;
          margin: 0 5px 0 0;
          width: 175px;
          text-align: center;
          cursor: pointer;
        }
        .scrollbar {
          margin: 0 0 1em 0;
          height: 2px;
          background: #ccc;
          line-height: 0;
        }
        .scrollbar .handle {
          width: 100px;
          height: 100%;
          background: #292a33;
          cursor: pointer;
        }
        .scrollbar .handle .mousearea {
          position: absolute;
          top: -9px;
          left: 0;
          width: 100%;
          height: 20px;
        }

      }

when it loads, I can see that the 'dragged' class gets added when I do a drag action, and the translateX amount gets changed, but the ul.slidee is always width:0px and therefore when I drag it doesnt allow the move to 'stick'.. i.e. it gets dragged as long as I am doing the action but it just 'bounces' back to the start position, also only the first li element shows up since there is no width.

What is incorrect that is making it not calculate the slidee width initially?

** NOTE: this is in a directive with isolate scope, if that effects anything.

In order to get a horizontal sly to readjust and show the correct active item when you resize your browser you need to reload the sly object with the keyword reload. Sly will then perform new calculations on the list items appropriately.

Add this to your horizontal and horizontal repeat, saved me on a project.

$(window).on("resize", function() { frame.sly("reload"); });

the erro info is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module ncApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-sly due to:
Error: [$injector:nomod] Module 'angular-sly' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I use the yeoman generator-angular grunt

Update release archives please. So latest changes be available.
Thank you.