Permalink
Browse files

gallery-2011.06.01-20-18 amasad gallery-carousel-rtl

  • Loading branch information...
1 parent adc5a89 commit fd179dbcf33db0b6fe8a44a93ee644dc9c04c3af YUI Builder committed Jun 1, 2011
@@ -0,0 +1,122 @@
+.yui3-js-enabled .yui3-carousel-loading {
+ right: -1000em;
+ position: absolute;
+ top: -1000em;
+}
+.yui3-js-enabled .yui3-carousel-hidden {
+ right: -10000em;
+ position: absolute;
+ top: -10000em;
+}
+.yui3-js-enabled .yui3-carousel-content {
+ margin: 0 auto;
+ overflow: hidden;
+ padding: 0;
+ position: relative;
+ text-align: right;
+ *margin: 0;
+}
+.yui3-js-enabled .yui3-carousel-content li {
+ list-style: none;
+ margin: 1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ text-align: center;
+}
+.yui3-js-enabled .yui3-carousel-vertical .yui3-carousel-content li { display: block }
+.yui3-js-enabled .yui3-carousel-horizontal .yui3-carousel-content { width: 100000px }
+.yui3-js-enabled .yui3-carousel-vertical .yui3-carousel-content { height: 100000px }
+.yui3-js-enabled .yui3-carousel-vertical { min-width: 114px }
+.yui3-js-enabled .yui3-carousel-nav {
+ position: relative;
+ z-index: 1;
+}
+.yui3-skin-sam .yui3-carousel {
+ border: 1px solid #808080;
+ overflow: hidden;
+ position: relative;
+ text-align: right;
+}
+.yui3-skin-sam .yui3-carousel-content li { border: 1px solid #ccc }
+.yui3-skin-sam .yui3-carousel-content li.yui3-carousel-selected { border: 1px dotted #000 }
+.yui3-skin-sam .yui3-carousel-nav {
+ background: url("sprite.png") repeat-x scroll 0 0 transparent;
+ margin: 0;
+ padding: 3px;
+ text-align: left;
+}
+.yui3-skin-sam .yui3-carousel-nav:after {
+ clear: both;
+ content: ".";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+.yui3-skin-sam .yui3-carousel-button {
+ background: url("sprite.png") repeat-x scroll 0 -600px transparent;
+ float: left;
+ height: 19px;
+ margin: 5px;
+ overflow: hidden;
+ width: 40px;
+}
+.yui3-skin-sam .yui3-carousel-vertical .yui3-carousel-button { background-position: 0 -800px }
+.yui3-skin-sam .yui3-carousel-button-disabled { background-position: 0 -2000px }
+.yui3-skin-sam .yui3-carousel-vertical .yui3-carousel-button-disabled { background-position: 0 -2100px }
+.yui3-skin-sam .yui3-carousel-button button {
+ background-color: transparent;
+ border: 0 none;
+ cursor: pointer;
+ display: block;
+ height: 44px;
+ margin: -2px -2px 0 0;
+ padding: 0 50px 0 0;
+}
+.yui3-skin-sam .yui3-carousel-first-button {
+ margin-right: -100px;
+ margin-left: 50px;
+}
+.yui3-skin-sam .yui3-carousel-next-button {
+ background-position: 0 -550px;
+}
+.yui3-skin-sam .yui3-carousel-vertical .yui3-carousel-first-button { background-position: 0 -750px }
+/*.yui3-skin-sam .yui3-carousel-first-button-disabled { background-position: 0 -1950px }
+ * .yui3-skin-sam .yui3-carousel-vertical .yui3-carousel-first-button-disabled { background-position: 0 -2050px }*/
+ .yui3-skin-sam .yui3-carousel-nav ul {
+ float: left;
+ height: 19px;
+ margin: 0 -220px 0 100px;
+ padding: 0;
+}
+.yui3-skin-sam .yui3-carousel-vertical .yui3-carousel-nav ul {
+ float: none;
+ margin: 0;
+}
+.yui3-skin-sam .yui3-carousel-nav ul li {
+ background: url("sprite.png") no-repeat scroll 0 -650px transparent;
+ cursor: pointer;
+ float: right;
+ height: 9px;
+ list-style: none outside none;
+ margin: 10px 5px 0 0;
+ overflow: hidden;
+ padding: 0;
+ width: 9px;
+}
+.yui3-skin-sam .yui3-carousel-nav ul:after {
+ clear: both;
+ content: ".";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+.yui3-skin-sam .yui3-carousel-nav ul li a {
+ display: block;
+ height: 100%;
+ overflow: hidden;
+ text-align: right;
+ text-indent: -10000px;
+ width: 100%;
+}
+.yui3-skin-sam .yui3-carousel-nav ul li.yui3-carousel-nav-item-selected { background-position: 0 -700px }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,29 @@
+# CarouselRTLPlugin Build Properties
+
+# As long as the 'builder' project is cloned to the default folder
+# next to the 'yui3-gallery' project folder, the 'builddir' property does not
+# need to be changed
+#
+# If the 'builder' project is checked out to an alternate location, this
+# property should be updated to point to the checkout location.
+builddir=../../../builder/componentbuild
+
+# The name of the component. E.g. event, attribute, widget
+component=gallery-carousel-rtl
+
+# The list of files which should be concatenated to create the component
+# NOTE: For a css component. (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead.
+# component.jsfiles=carousel-rtl.js, carousel-rtlHelperClass.js, carousel-rtlSubComponentClass.js
+component.jsfiles=carousel-rtl.js
+
+# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3.
+component.requires=substitute,gallery-carousel,anim,plugin,pluginhost
+
+# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3.
+component.supersedes=
+
+# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3.
+component.optional=
+# If your module has a skin file, set this flag to "true"
+component.skinnable=true
+#component.skinnable=true
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="CarouselRTLPlugin" default="local">
+ <description>CarouselRTLPlugin Build File</description>
+ <property file="build.properties" />
+ <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
@@ -0,0 +1,115 @@
+//constructor
+function CarouselRTLPlugin () {
+ CarouselRTLPlugin.superclass.constructor.apply(this, arguments);
+}
+var JS = Y.Lang;
+
+
+//Module stuff
+CarouselRTLPlugin.NAME = "carouselRTLPlugin";
+CarouselRTLPlugin.NS = "rtl";
+
+CarouselRTLPlugin.ATTRS = {
+ animation: {
+ validator: "_validateAnimation",
+ value: { speed: 0, effect: Y.Easing.easeOut }
+ }
+};
+
+
+//helper functions
+function fixDir (elem) {
+ var left = elem.getStyle("left");
+ elem
+ .setStyle("left", null)
+ .setStyle("right", left);
+}
+//Class
+Y.CarouselRTLPlugin = Y.extend(CarouselRTLPlugin, Y.Plugin.Base, {
+ initializer: function (config) {
+ //After the plugin is fully loaded and rendered fix its direction
+ this.afterHostMethod("render", this.renderFix);
+ this.beforeHostMethod("scrollTo", this.storePos);
+ this.afterHostMethod("scrollTo", this.fixScroll);
+ },
+
+ renderFix: function () {
+ var carousel = this.get("host"),
+ boundingBox = carousel.get("boundingBox"),
+ items = carousel.get("contentBox").get("children");
+
+ //Change the css direction of the container
+ boundingBox.setStyle("direction", "rtl");
+
+ //Replace list items css left property with "right"
+ items.each(fixDir);
+
+ },
+
+ fixScroll: function (index) {
+ var animation = this.get("animation");
+ if (animation.speed){
+ this.animateAndScrollTo(index);
+ } else {
+ fixDir(this.get("host").get("contentBox"));
+ }
+ },
+
+ storePos: function () {
+ var right = parseInt(this.get("host").get("contentBox").getStyle("right"), 10);
+ right = JS.isValue(right) ? right : 0;
+ this.set("right", right);
+ },
+
+ animateAndScrollTo: function (index) {
+ var self = this, carousel = self.get("host"),
+ anim, animation, cb, first, from, isVertical, to;
+
+ if (carousel.get("rendered")) {
+ animation = self.get("animation");
+ index = carousel._getCorrectedIndex(index);
+ cb = carousel.get("contentBox");
+ isVertical = carousel.get("isVertical");
+ if (isVertical) {
+ from = { top: carousel.get("top") };
+ to = { top: carousel._getOffsetForIndex(index) };
+ } else {
+ cb.setStyle("right", this.get("right"));
+ cb.setStyle("left", null);
+ from = { right: carousel.get("right") };
+ to = { right: carousel._getOffsetForIndex(index) };
+ }
+ first = carousel.getFirstVisible();
+ anim = new Y.Anim({
+ node: cb,
+ from: from,
+ to: to,
+ duration: animation.speed,
+ easing: animation.effect
+ });
+ anim.on("end", Y.bind(self._afterAnimEnd, self, index));
+ anim.run();
+ return new Y.Do.Prevent();
+ }
+ return false;
+ },
+
+ _afterAnimEnd: function (pos) {
+ var self = this, carousel = self.get("host");
+ carousel.set("selectedItem", pos);
+ },
+
+ _validateAnimation: function (config) {
+ var rv = false;
+ if (JS.isObject(config)) {
+ if (JS.isNumber(config.speed)) {
+ rv = true;
+ }
+ if (!JS.isUndefined(config.effect) &&
+ !JS.isFunction(config.effect)) {
+ rv = false;
+ }
+ }
+ return rv;
+ }
+});

0 comments on commit fd179db

Please sign in to comment.