gigerbytes / angular-sly

Angular directives for the sly javascript library

angular-sly

Angular directives for the Sly javascript library

I have only ported horizontal and vertical scrolling, so far.

Does Anybody want to adopt/maintain this project? Send me a mail.

Installlation:

bower install angular-sly

##Usage:

###Sly Frame For normal lists: Set sly-horizontal or sly-vertical as an attribute to the frame of your slidee. e.g.

	<div class="frame" sly-horizontal id="basicSly">

If you are using ng-repeat: Set sly-horizontal-repeat or sly-vertical-repeat as an attribute of the tag with ng-repeat e.g.

	<li ng-repeat="box in repeatData" sly-horizontal-repeat >{{box.num}}</li>

'sly-options' is an object that will allow you to set the custom options. The default options are:

{
  horizontal: 1 // or 0 depending on sly-horizontal or sly-vertical
	itemNav: 'basic',
	smart: 1,
	activateOn: 'click',
	mouseDragging: 1,
	touchDragging: 1,
	releaseSwing: 1,
	startAt: 0,
	scrollBy: 1,
	activatePageOn: 'click',
	speed: 300,
	elasticBounds: 1,
	easing: 'easeOutExpo',
	dragHandle: 1,
	dynamicHandle: 1,
	clickBar: 1,

};

An example from horizontal.html:

 <div class="frame" sly-horizontal id="basicSly">
 	...
 </div>

The directive will try to evaluate all default control classes or set the value to null. Note: if you have different class names for the default controls, specify them in sly-options. ###Methods

I have implemented the following methods:

• toCenter() : sly-to-center : moves to center
• toStart() : sly-to-begin : moves to first element
• toEnd() : sly-to-end : moves to last element

All methods can take arguments with sly-data-item="number", which will move that item to the center, first, or last element of the view.

Note that sly-data-item is optional and it defaults to either the middle, the first or the last element. See the following example from horiontal.html

<!-- will set slide 10 as the first element in the view frame -->
<button class="btn toStart" sly-to-begin sly-frame="basicSly" sly-data-item="10"><strong>10</strong> toStart</button>

License: MIT

angular-sly's Issues

use grunt build erro

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

'slidee' element always set to width: 0px

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.

Great start - but left unfinished

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

Update release archive please.

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

Reload scrollable on resize

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