Metro JS Change Log

0.9.75 -> 0.9.77

• Improvements to touch support on Chrome/Safari for desktop
• Pointer Events standard implementation added
• Bower and Node JS packages now available e.g. bower install metrojs or npm install metrojs

0.9.75 -> 0.9.75a

• Corrected issue with swapBack introduced 0.9.75

0.9.74 -> 0.9.75

• Added onHoverOutDelay (aka data-hoverout-delay) for controlling the amount of time that playOnHover and pauseOnHover wait before doing their out animation. This value is calculated by adding it to the speed value (speed + onHoverOutDelay). You an use a negative value to reduce the time.
• Corrected an issue with rebind not properly passing the data object parameter when it was called.
• Added better error handling for cases when a tile is removed from the DOM or used in an AJAX postback panel but was not destroyed or stopped.
• The Theme Generator now has Media Query support for making responsive layouts!

0.9.73 -> 0.9.74

• Corrected an issue where .appBar was not properly getting theme options on some html structures.
• I have not previously listed applicationBar menu icon sprite options, I'm adding them to the documentation for applicationBar, but here is a list: "search", "home", "twitter", "calendar", "storm", "down", "camera", "camcorder", "qmark", "about", "share", "rain", "cancel", "close", "delete", "trash", "tag", "addcontact", "save", "snow", "msg", "email", "clock", "edit", "circle", "moon", "calc", "gear", "plus", "dot", "restart", "return", "add", "phone", "film", "back", "car", "forward", "selectmany", "stop", "contacts", "select", "sun", "dpad", "play"

0.9.72 -> 0.9.73

• Corrected issue where data-ani-direction would be ignored unless it was set on the tile face
• The bounce classes have had their additional qualifiers removed, which should make it easy to reuse bounce functionality
  To use, add the "bounce" class to an element. You can then add or toggle one of the following classes to get the desired effect. "bounce-c" (center), "bounce-t" (top), "bounce-r" (right), "bounce-b" (bottom), "bounce-l" (left), "bounce-tl"(top left), "bounce-tr" (top right), "bounce-bl" (bottom left), or "bounce-br" (bottom right). Have fun!

0.9.71 -> 0.9.72

• Improved content module performance and tweaked to avoid prototype issues
• preloadImages now works properly with image objects and not just string arrays
• applicationBar calculates its collapsed height automatically by default for improved support for swapping to 'small' appbar mode
• accentBgHover class added

0.9.7 -> 0.9.71

• Set default value for playOnHoverEvent back to 'both'

0.9.6 -> 0.9.7

• translate() is now used for carousel and slide mode when available.
• useTranslate (aka data-use-translate) added to disable translate() and transition on top/left
• pauseOnHoverEvent and playOnHoverEvent added. These are defaulted to 'both' which is the normal behavior for playOnHover and pauseOnHover, but can be changed to 'mouseover' etc.
• .theme default selectors will now allow nesting the ul. (eg 'ul.theme-options,.theme-options>ul' and 'ul.base-theme-options,.base-theme-options>ul'). You can change this to whatever suits your needs at jQuery.fn.metrojs.theme.defaults

0.9.5 -> 0.9.6

• 'fade' mode added. This mode fades the front tile face in and out.
• bounce now updates to different directions as the mouse/finger moves. This can be disabled by setting bounceFollowsMove aka 'data-bounce-follows' to false
• bounceDirections correctly cleans up the perspective origin it sets on it's parent
• carousel mode now uses percentages for tile movement to enable responsive scenarios.
• All tile modes now pause their timer until the animation has finished (flip was the only mode that did not before)

0.9e -> 0.9.5

• No code changes. Swapping to semantic versioning for compatibility with the new jQuery plugins site.

0.9d1 -> 0.9e

• bounceDirections aka data-bounce-dir added to allow tilt bouncing of tiles in addition to the default scale. You can limit the directions explicitly or use phrases like 'edges' or 'corners'.
• animationComplete now correctly passes the current tile as the 'this'context
• Resolved an issue with the swap modules not always triggering in slide mode
• Added fadeSwap to the image swap module to force a fade when the image is changed
• Added alwaysSwapFront and alwaysSwapBack to the image module. This can be useful in slide mode if you want to make the front and back face swap simultaneously

0.9d -> 0.9d1

• Fixed typo causing global scope on a carousel property
• haTransFunc and noHaTransFunc added to expose easing properties of animations
• Support for jQuery 1.3.2 added

0.9c -> 0.9d

• You can now declare data-direction and data-ani-direction on each tile face in carousel mode
• Calling 'goto' with no options is now the same as calling .liveTile('goto', 'next')
• autoAniDirection option added to 'goto' to override the index based direction swapping
• Issue with carousel mode getting index from all siblings resolved (fixes issues with a global tile-title in a carousel)
• newWindow support added to data-link for flip-list
• flipListOnHoverEvent option added to allow flipping based on events other than mouseout
• flipListOnHover now works when startNow is set to false
• issue with .themeLoaded resolved
• accentBorderTop, accentBorderRight, accentBorderBottom and accentBorderLeft classes added for theming
• .applicationBar now exposes its methods through the "ApplicationBar" data object
• slideOpen and slideClosed methods added to .applicationBar, you can call them via .data("ApplicationBar")
• handleSelector added to .applicationBar so you can use something other than 'a.etc'

0.9b -> 0.9c

• Corrected issue with destroy unbinding bounce twice
• Added onHoverDelay aka data-hover-delay to allow a delay before a tile play or pause is triggered when a user hovers the tile
• Resolved issue with .applicationBar in jQuery 1.9
• .fourTiles and .nineTiles tile sizes are now relative to their container. The mosaic background-positions are still defined for one-tile size. I'm planning to create a mosaic generator to create custom CSS for tile mosaics.

0.9a -> 0.9b

• The fadeout effect used in flip animations on non hardware accelerated browsers has been disabled by default. To turn it back on you can set noHAflipOpacity: '0'.
• Fixed a flicker that occurs when playOnHover is set and a user hovers in and out of a flip tile faster than the css reset can be applied.

0.9 -> 0.9a

• Added direction support to the 'goto' carousel method in addition to animationDirection.
  see JS Fiddle example here
• Finished updating calls to appendStyleProperties. (Thanks Devline)
• Style change to help IE8 and below
• Updated destroy method
• padding-box style does not have consistent enough support and has been removed.
• Padding removed from .face class. You can get padding on content by using a 'p' tag

0.8.9.3l -> 0.9

Note: 0.9 is a full rewrite. I made every effort to keep 100% backward compatibility with 0.8, but please test your code before going live. More often than not, if a change in your code is required, it will be a reduction in the amount of code.

• Full rewrite! Improved performance, touch support, new features.
• Improved compatibility with IE10
• 150px X 150px with a 5px margin is the new default tile size. I have added a theme generator here to let you generate your own tile sizes (Previous versions used 180px X 180px with a 15px margin).
• New css classes to help size and layout tiles have been added.
  • .tile-group is intended to be a wrapper for tiles
  • .tile-strip is intended to wrap a group of tiles within a tile-group
  • .copy-tile is intended for use with plain text styles (you can add an accent class as needed)
  • .live-tile, .list-tile, .copy-tile, .tile-group and .tile-strip all support the #-wide #tall syntax
  • the #-wide/#-tall classes range from half, one, two, three, four, five, six, seven, eight, nine and ten
    
    Example:

    
    <div class="tile-group two-tall three-wide"><!--some tiles--></div>
    

    'half-tile' is also supported as shorthand for half-wide half-tall
• Flip animations are now much smoother
• startNow aka data-start-now added to eliminate the lazy load requirements
• playOnHover aka data-play-onhover added
• 'carousel' mode added. Slide any number of tile faces in any direction.
• 'goto' method added for use with carousel mode
• animationDirection aka data-ani-direction added
• 'none' mode added to make it easy to use bounce / link with no timer overhead
• link aka data-link option added
• newWindow aka data-new-window option added to be used in conjunction with link
• bounce aka data-bounce added to make a tile shrink when tapped/clicked
• 'image' Swap module now supports passing attr and css options directly.

  
              // be sure to undo any changes you make!
              var images = [{ attr:{ title:'my title',src:'img1.gif' alt:'1'}, css:{ borderColor:'' } }, 
                            { attr:{ title:'', src:'img2.gif', alt:'2' }, css:{ borderColor:'red' } }];
               

• 'html' swap module added. (supports an array of html content)
• Important: swap aka data-swap has been added. a swap property is now required to activate any content modules
  swap properties include 'swap', 'swapFront' and 'swapBack'. swaps support a value of 'image', 'html' or 'image,html'
  Example:

  
  $(".live-tile").liveTile({ 
      frontContent:['some content','<p>some more</p>'],
      swapFront:'html', // aka data-swap-front
      backImages:[{src:'img1.gif' alt:'1'}, { src:'img2.gif', alt:'2' }]
      swapBack: 'images' // aka data-swap-back
  ] })
  

• CSS Selector options are now named tileSelector and tileFaceSelector

0.8.9.3k -> 0.8.9.3l

• Bug fix for destroy method
• rebind method available for tiles removed and readded to the DOM
  Example:

  
      // set up a tile
      $("#tile1").liveTile();
      // this could be in document ready or called right before the postback
      var tile1Data = $("#tile1").data("LiveTile");
      //..
      // this should run after a postback
      $("#tile1").liveTile('rebind', tile1Data);
      	

0.8.9.3j -> 0.8.9.3k

• 10 New accent colors added! ( amber, cobalt, crimson, cyan, emerald, indigo, mauve, olive, orange, violet a.k.a. purple, sienna, steel, yellow )
• Returning -1 on the triggerDelay option will prevent a flip-list tile from flipping.

0.8.9.3i -> 0.8.9.3j

• isReversed has been added to the LiveTile data object This is used on the Animate On Hover example in the Fiddle Around section

0.8.9.3h -> 0.8.9.3i

• Swapped to jQuery rather than $ for library to avoid issues with jQuery.noConflict
• All code is encapsulated now instead of just the liveTile library

0.8.9.3g -> 0.8.9.3h

• $front and $back option added to liveTile to give you more control over what the front/back tile faces should be. These should be passed as jQuery objects. Note: These override the tileCssSelector option

  
      $("#tile1").liveTile({ $back:$("#myback"), $front:$("#myfront") });
      

• Array slicing is done manually now to avoid issues with IE
• backface-visibility:hidden added to prevent elements being clicked while they are on the backface
• Other IE adjustments

0.8.9.3f -> 0.8.9.3g

• Bug fix for data methods

0.8.9.3e -> 0.8.9.3f

• Metro JS is now modular. You can download only the bits of functionality that you require
• Fixed issue that could cause flip list to become out of sync making them repeat animations

0.8.9.3d -> 0.8.9.3e

• Instances of Array.prototype removed for SharePoint compatibility
• Added different behaviors for negative delay values
  --Setting the delay value to -1 will use a random delay value between 3500 and 8000 milliseconds (3.5 - 8 seconds).
  --Setting the delay value to anything lower than -1 (e.g. -2) will call the triggerDelay method one time to get the delay value.

0.8.9.3c -> 0.8.9.3d

• 'animate' method added to liveTile to allow you to trigger animations manually JS Fiddle Example

  
  		var $tile = $(".live-tile").liveTile();
  		$tile.click(function(){
  			$tile.liveTile("animate");
  		});
  	

• Fixed issue that caused animationComplete to not fire when hardware acceleration is disabled
• Fixed issue with applicationBar in older versions of Internet explorer and Device Central

0.8.9.3a -> 0.8.9.3c

• An api for loading and applying themes has been added. If you're using the applicationBar, you're already getting the benefits of the api. More Info
• I've added a good chunk of documentation for the theming features of Metro JS More Info
• changed image paths for applicationBar icons to be relative instead of absolute.

0.8.9.3 -> 0.8.9.3a

• Rewrote all random functions to guarantee no duplicate images... finally
• changed preloadImages to use metrojs namespace i.e. $(['img1.jpg','img2.jpg']).metrojs.preloadImages()
• Corrected flicker when using hardware accelerated flips in Firefox 11+
• 'destroy' method has been implemented
  Example:

  
  			var tile = $(".live-tile").liveTile();
  			//...
  			tile.liveTile("destroy");
  		

0.8.9.2 -> 0.8.9.3

• Added repeatCount aka data-repeat.
• Added animationComplete event
  Example:

  
  			var tile = $(".live-tile").liveTile({
  				mode:'flip', // or slide
  				animationComplete:function(tileData, $front, $back){
  					$back.text("Updated content");
  				}
  			});
  		

• Added better duplicate prevention code to improve random image swaps. This will all be refactored out into something a bit better in the next release, but it's doing well now.
• Bug fixes and performance updates

0.8.9.1 -> 0.8.9.2

• Corrected issue with slide tile not being activated

0.8.9 -> 0.8.9.1

• Improved randomness of image selection (I'll optimize this more in the next releases)
• Mapped initDelay to delay unless initDelay has been set to something other than -1
• Performance improvements(more coming)

0.8.8 -> 0.8.9

• Added methods to control animiation state 'play', 'pause', 'stop' (destroy will be in the next release)
  Example:

  
  			var tile = $(".live-tile").liveTile();
  			//...
  			// 'play', 'pause', 'stop' (stop causes initDelay to trigger again)
  			tile.liveTile("stop");
  		

• Added access to .liveTile api/data properties
  Example:

  
  			$(".live-tile").each(function(){
  				var tileData = $(this).data("LiveTile");
  				tileData.direction = "horizontal"; // console.dir(tileData);
  				$(this).data("LiveTile", tileData);
  			});