Forums

Posting in these forums is disabled. These forums will be available for archive purposes. Please join the new forums at the links below:

  • yui-support - replaces the `YUI 3.x` and `YUI 3 Gallery` forums.
    We have created the following discussion categories within this group to aid discoverability for these most-used topics:
    • Charts for YUI Charts support.
    • DataTable for YUI DataTable support.
    • Gallery for YUI Gallery support, including support for published Gallery components as well as the Gallery process in general.
    • Tools for support of YUI’s suite of developer tools such as selleck, shifter, grover, yogi, etc.
    • Everything Else for questions that don’t fit one of the categories above, we’ve got you covered here.
  • yui-deprecated - replaces the `YUI 2.x` forum and the forums of other deprecated products (`YUI Doc`, `Builder`, `YUI PHP Loader`, etc.).
  [ 5 posts ]
New Topic | Post Reply | Print view
Previous topic | Next topic

Jeff Craig

YUI Contributor

  • Username: foxxtrot
  • Joined: Thu Dec 04, 2008 9:20 am
  • Posts: 135
  • Location: Pullman, WA
  • Twitter: foxxtrot
  • GitHub: foxxtrot
  • Gists: foxxtrot
  • IRC: foxxtrot
  • YUI Developer
  • Offline
  • Profile
Tags:
  • attribute
  • css
  • element
  • gist
  • github
  • slideshow
  • widget

Progressive Enchancement Update

Post Posted: Mon Mar 15, 2010 11:43 am
+0-
I've been working on a new update that will provide Progressive Enhancement Support. It's currently up on my Github, in my master branch, but I haven't requested a CDN pull while I continue to test things. If anyone is willing to at least test this, I'd appreciate the tests.

Syntax for the module follows standard Widget syntax:

Progressive Enhancement Syntax for SlideShow

Click here to see the revision history on this Gist.

A few changes from the initial release: the height and width parameters to the constructor are now 'image_height' and 'image_width', and will be applied to the contentBox child with the '.bd' class. This prevents bleeding of the image into the rest of the widget, but still allows header and footer content. The height and width of the widget should, if set, be bigger than the image_height and image_width. This is not, as yet, enforced.

And .yui-slideshow-image div's inside the .bd will be parsed and added to the images array during the renderUI phase. This behavior will likely be made configurable.

Added a 'title' attribute, which allows the optional setting of a title for the slideshow. Currently, I'm using a span for this since headers have default margins applied to them in most browsers, however, it's more semantically correct to use a header, and I'm likely to switch that span to an h2, and leave it to the user to set CSS for the element.

If anyone has any commentary on this functionality, and anything they'd like to see, I'd welcome the feedback. Once PE support is in, I've got two plugins that should follow shortly, one to apply image scaling to an image, and one to support images of different sizes through padding.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 516
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: Progressive Enchancement Update

Post Posted: Tue Mar 16, 2010 10:16 am
+0-
Is this markup what Slideshow will generate (noting the {placeholders}) or the markup it would expect to be present as a starting point for enhancement?

It seems to me that the appropriate markup for an image slideshow would be a list of some sort. Also, (this is just a nit) naming a div *-image when it contains an img seems redundant. Good for targeting in js, but really it's an item, not an image. There may be better ways to classify or structure that relationship.

Populating the images array from source should be in the HTML_PARSER object rather than the renderUI. Think of renderUI as primarily an additive process - generating missing pieces of the requisite DOM subtree. If the user provides an images array to the constructor, the HTML_PARSER's entry for images will be ignored. If this doesn't seem right, put the logic in the initializer method.

Have you looked at WidgetStdMod? It takes care of the sizing math for you and affords API methods for adding header and footer content. I would avoid setting the dims in inline style attribute markup.

There's no default value for the the images attribute, so unless one is specified, it will throw an error in renderUI, which assumes there is an array to unshift onto.

I would remove the hardcoded class names from the markup template strings and move the template strings to prototype properties or the generation of those nodes to overridable methods. Use this.getClassName(...) to generate the classes. Also, it's yui3- now :)

Finally, 3.1 has WidgetParent and WidgetChild extensions as well. I'm not sure they'd really apply to this case, but it may be worth looking at either this or potentially augmenting with Y.ArrayList (also 3.1).

Jeff Craig

YUI Contributor

  • Username: foxxtrot
  • Joined: Thu Dec 04, 2008 9:20 am
  • Posts: 135
  • Location: Pullman, WA
  • Twitter: foxxtrot
  • GitHub: foxxtrot
  • Gists: foxxtrot
  • IRC: foxxtrot
  • YUI Developer
  • Offline
  • Profile
Tags:
  • carousel
  • list
  • node
  • overlay
  • slideshow
  • widget

Re: Progressive Enchancement Update

Post Posted: Tue Mar 16, 2010 10:56 am
+0-
Thanks for all the suggestions. The Progressive Enhancement Syntax is pretty much the same as what is rendered off of no syntax. I was unclear if that was the best way to handle that, or if I should parse out the details and redo the contents of the content-box with my own content.

I agree with the *-image thing, since the more that I work on this, the more it feels like I'll be able to write plugins to make this sort of a carousel implementation instead of solely images slideshows, so I'll replace that with -item, or move to using an unordered list, at which point the <li> should be enough of a match under that syntax.

I didn't like the images from source being in renderUI, but you identify why I didn't put it into HTML_PARSER. That code block will be moved to the initializer. I need to move it out into a seperate method anyway, in order to allow plugins to parse their required information out of the node.

There wasn't any documentation for WidgetStdMod (though I've used it via Overlay before) on the Widget page, so while I was working, I overlooked it. It is a better fit that basic Widget at this point, so I'll move that direction, while I go through and remove a lot of the hardcoded stuff.

I was looking at WidgetParent and WidgetChild a bit, and trying to see if they fit. I think for now, I'm not going to go that route, but I think I'll probably build a carousel based on this code (that slideshow will then become an extension of), at which point I'll probably do the Parent/Child thing with Widget. I was not aware of Y.ArrayList yet, but it's absolutely something I'm likely to use.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 516
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: Progressive Enchancement Update

Post Posted: Tue Mar 16, 2010 11:22 am
+0-
Wait, why aren't you putting the images in HTML_PARSER?

Jeff Craig

YUI Contributor

  • Username: foxxtrot
  • Joined: Thu Dec 04, 2008 9:20 am
  • Posts: 135
  • Location: Pullman, WA
  • Twitter: foxxtrot
  • GitHub: foxxtrot
  • Gists: foxxtrot
  • IRC: foxxtrot
  • YUI Developer
  • Offline
  • Profile

Re: Progressive Enchancement Update

Post Posted: Tue Mar 16, 2010 11:52 am
+0-
It didn't seem to work when I was passing in a value for images in the config object when I did that. I may need to try it again, it might have been an error in my code.
  [ 5 posts ]
New Topic | Post Reply | Print view
Previous topic | Next topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum