API Reference 0.6.0bootjackCarousel

Carousel class

class Carousel extends Base {
 
 static const String _NAME = 'carousel';
 
 /// The time interval between sliding.
 final int interval;
 
 /** The condition to pause the sliding.
  */
 final String pauseCondition;
 
 Carousel(Element element, {int interval: 5000, String pause: 'hover'}) :
 this.interval = interval,
 this.pauseCondition = pause,
 super(element, _NAME) {
   _indicators = element.query('.carousel-indicators');
   if (pause == 'hover') {
     $element
     ..on('mouseenter', (DQueryEvent e) => _pause())
     ..on('mouseleave', (DQueryEvent e) => _cycle());
   }
 }
 
 Element _indicators;
 
 /** Return true if the Carousel is currently sliding.
  */
 bool get sliding => _sliding;
 bool _sliding = false;
 
 /** Return true if the Carousel sliding is currently paused.
  */
 bool get paused => _paused;
 bool _paused = false;
 
 Element get active => element.query('.item.active');
 ElementQuery _$items;
 
 int get activeIndex {
   Element a = active;
   _$items = $(a.parent).children();
   return _$items.indexOf(a);
 }
 
 void to(int pos) {
   int index = activeIndex;
   
   if (pos > (_$items.length - 1) || pos < 0)
     return;
   
   if (_sliding) {
     $element.one('slid', (DQueryEvent e) {
       to(pos);
     });
   }
   
   if (index == pos) {
     pause();
     cycle();
   }
   
   slide(pos > index ? 'next' : 'prev', _$items[pos]);
   
 }
 
 void cycle() {
   _paused = false;
   _cycle();
 }
 
 void _cycle() {
   /*
   if (this.interval) clearInterval(this.interval);
   this.options.interval
   && !this.paused
   && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
   */
 }
 
 void pause() {
   _paused = true;
   _pause();
 }
 
 void _pause() {
   if (!$element.find('.next, .prev').isEmpty && Transition.isUsed) {
     $element.trigger(Transition.end);
     _cycle();
   }
   /*
   clearInterval(this.interval)
   this.interval = null
   */
 }
 
 void next() {
   if (!sliding)
     slide('next');
 }
 
 void prev() {
   if (!sliding)
     slide('prev');
 }
 
 void slide(String type, [Element next]) {
   final Element activeItem = active;
   final List<Element> items = $element.find('.item');
   final Element nextItem = p.fallback(next, () => 
       type == 'next' ? p.fallback(activeItem.nextElementSibling, () => items.first) : 
       type == 'prev' ? p.fallback(activeItem.previousElementSibling, () => items.last) : 
       null);
   final String direction = type == 'next' ? 'left' : 'right';
   /*
       , isCycling = this.interval
   */
   _sliding = true;
   
   /*
   isCycling && this.pause()
   */
   
   DQueryEvent e = new DQueryEvent('slide', data: {
     'relatedTarget': nextItem,
     'direction': direction
   });
   
   if (nextItem.classes.contains('active'))
     return;
   
   if (_indicators != null) {
     $(_indicators).find('.active').removeClass('active');
     $element.one('slid', (DQueryEvent e) {
       final List<Element> elems = _indicators.children;
       final int index = activeIndex;
       if (index > -1 && index < elems.length)
         elems[index].classes.add('active');
     });
   }
   
   $element.triggerEvent(e);
   if (e.isDefaultPrevented)
     return;
   
   if (Transition.isUsed && element.classes.contains('slide')) {
     nextItem.classes.add(type);
     nextItem.offsetWidth; // force reflow
     activeItem.classes.add(direction);
     nextItem.classes.add(direction);
     
     $element.one(Transition.end, (DQueryEvent e) {
       nextItem.classes..remove('type')..remove(direction)..add('active');
       activeItem.classes..remove('type')..remove(direction);
       _sliding = false;
       new Future.delayed(const Duration(), () {
         $element.trigger('slid');
       });
     });
     
   } else {
     activeItem.classes.remove('active');
     nextItem.classes.add('active');
     _sliding = false;
     $element.trigger('slid');
     
   }
   /*
   isCycling && this.cycle()
   */
 }
 
 // Data API //
 static bool _registered = false;
 
 /** Register to use Carousel component.
  */
 static void use() {
   if (_registered) return;
   _registered = true;
   
   /*
   $document().on('click.carousel.data-api', '[data-slide], [data-slide-to]', (DQueryEvent e) {
     Element elem = e.target as Element;
     ElementQuery $target = $(p.getDataTarget(elem));
     
     if (!$target.isEmpty) {
       Element target = $target.first;
       
       // , options = $.extend({}, $target.data(), $this.data())
       Carousel c = Carousel.wire(target); // TODO options
       
       var slideIndex = elem.attributes['data-slide-to'];
       if (slideIndex != 0) {
         c.pause();
         c.to(slideIndex);
         c.cycle();
       }
     }
     
     e.preventDefault();
     
   });
   */
 }
 
}

Extends

Base > Carousel

Static Methods

void use() #

Register to use Carousel component.

static void use() {
 if (_registered) return;
 _registered = true;
 
 /*
 $document().on('click.carousel.data-api', '[data-slide], [data-slide-to]', (DQueryEvent e) {
   Element elem = e.target as Element;
   ElementQuery $target = $(p.getDataTarget(elem));
   
   if (!$target.isEmpty) {
     Element target = $target.first;
     
     // , options = $.extend({}, $target.data(), $this.data())
     Carousel c = Carousel.wire(target); // TODO options
     
     var slideIndex = elem.attributes['data-slide-to'];
     if (slideIndex != 0) {
       c.pause();
       c.to(slideIndex);
       c.cycle();
     }
   }
   
   e.preventDefault();
   
 });
 */
}

Constructors

new Carousel(Element element, {int interval: 5000, String pause: 'hover'}) #

Creates a new Object instance.

Object instances have no meaningful state, and are only useful through their identity. An Object instance is equal to itself only.

docs inherited from Object
Carousel(Element element, {int interval: 5000, String pause: 'hover'}) :
this.interval = interval,
this.pauseCondition = pause,
super(element, _NAME) {
 _indicators = element.query('.carousel-indicators');
 if (pause == 'hover') {
   $element
   ..on('mouseenter', (DQueryEvent e) => _pause())
   ..on('mouseleave', (DQueryEvent e) => _cycle());
 }
}

Properties

final ElementQuery $element #

inherited from Base

The dquery object of element. Equivalent to $(element).

final ElementQuery $element

final Element active #

Element get active => element.query('.item.active');

final int activeIndex #

int get activeIndex {
 Element a = active;
 _$items = $(a.parent).children();
 return _$items.indexOf(a);
}

final Element element #

inherited from Base

The element which component wires to.

final Element element

final int interval #

The time interval between sliding.

final int interval

final String pauseCondition #

The condition to pause the sliding.

final String pauseCondition

final bool paused #

Return true if the Carousel sliding is currently paused.

bool get paused => _paused;

final bool sliding #

Return true if the Carousel is currently sliding.

bool get sliding => _sliding;

Methods

void cycle() #

void cycle() {
 _paused = false;
 _cycle();
}

void next() #

void next() {
 if (!sliding)
   slide('next');
}

void pause() #

void pause() {
 _paused = true;
 _pause();
}

void prev() #

void prev() {
 if (!sliding)
   slide('prev');
}

void slide(String type, [Element next]) #

void slide(String type, [Element next]) {
 final Element activeItem = active;
 final List<Element> items = $element.find('.item');
 final Element nextItem = p.fallback(next, () => 
     type == 'next' ? p.fallback(activeItem.nextElementSibling, () => items.first) : 
     type == 'prev' ? p.fallback(activeItem.previousElementSibling, () => items.last) : 
     null);
 final String direction = type == 'next' ? 'left' : 'right';
 /*
     , isCycling = this.interval
 */
 _sliding = true;
 
 /*
 isCycling && this.pause()
 */
 
 DQueryEvent e = new DQueryEvent('slide', data: {
   'relatedTarget': nextItem,
   'direction': direction
 });
 
 if (nextItem.classes.contains('active'))
   return;
 
 if (_indicators != null) {
   $(_indicators).find('.active').removeClass('active');
   $element.one('slid', (DQueryEvent e) {
     final List<Element> elems = _indicators.children;
     final int index = activeIndex;
     if (index > -1 && index < elems.length)
       elems[index].classes.add('active');
   });
 }
 
 $element.triggerEvent(e);
 if (e.isDefaultPrevented)
   return;
 
 if (Transition.isUsed && element.classes.contains('slide')) {
   nextItem.classes.add(type);
   nextItem.offsetWidth; // force reflow
   activeItem.classes.add(direction);
   nextItem.classes.add(direction);
   
   $element.one(Transition.end, (DQueryEvent e) {
     nextItem.classes..remove('type')..remove(direction)..add('active');
     activeItem.classes..remove('type')..remove(direction);
     _sliding = false;
     new Future.delayed(const Duration(), () {
       $element.trigger('slid');
     });
   });
   
 } else {
   activeItem.classes.remove('active');
   nextItem.classes.add('active');
   _sliding = false;
   $element.trigger('slid');
   
 }
 /*
 isCycling && this.cycle()
 */
}

void to(int pos) #

void to(int pos) {
 int index = activeIndex;
 
 if (pos > (_$items.length - 1) || pos < 0)
   return;
 
 if (_sliding) {
   $element.one('slid', (DQueryEvent e) {
     to(pos);
   });
 }
 
 if (index == pos) {
   pause();
   cycle();
 }
 
 slide(pos > index ? 'next' : 'prev', _$items[pos]);
 
}