Changeset 56099 in spip-zone for _plugins_/jquery_masonry


Ignore:
Timestamp:
Dec 29, 2011, 2:26:32 PM (9 years ago)
Author:
yffic@…
Message:
  • On vire la configuration via CFG
  • Upgrade de la lib jQuery Masonry
Location:
_plugins_/jquery_masonry
Files:
5 added
4 deleted
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/jquery_masonry/javascript/jquery.masonry.js

    r50417 r56099  
    11/**
    2 * jQuery Masonry v2.0.110721
    3 * A dynamic layout plugin for jQuery
    4 * The flip-side of CSS Floats
    5 * http://masonry.desandro.com
    6 *
    7 * Licensed under the MIT license.
    8 * Copyright 2011 David DeSandro
    9 */
     2 * jQuery Masonry v2.1.0
     3 * A dynamic layout plugin for jQuery
     4 * The flip-side of CSS Floats
     5 * http://masonry.desandro.com
     6 *
     7 * Licensed under the MIT license.
     8 * Copyright 2011 David DeSandro
     9 */
    1010 
    1111(function( window, $, undefined ){
    1212
    1313  /*
    14 * smartresize: debounced resize event for jQuery
    15 *
    16 * latest version and complete README available on Github:
    17 * https://github.com/louisremi/jquery.smartresize.js
    18 *
    19 * Copyright 2011 @louis_remi
    20 * Licensed under the MIT license.
    21 */
     14   * smartresize: debounced resize event for jQuery
     15   *
     16   * latest version and complete README available on Github:
     17   * https://github.com/louisremi/jquery.smartresize.js
     18   *
     19   * Copyright 2011 @louis_remi
     20   * Licensed under the MIT license.
     21   */
    2222
    2323  var $event = $.event,
     
    109109      for ( var i=0, len = masonryContainerStyles.length; i < len; i++ ) {
    110110        var prop = masonryContainerStyles[i];
    111         this.originalStyle[ prop ] = elemStyle[ prop ] || null;
     111        this.originalStyle[ prop ] = elemStyle[ prop ] || '';
    112112      }
    113113
     
    117117     
    118118      this.horizontalDirection = this.options.isRTL ? 'right' : 'left';
    119       this.offset = {};
    120      
    121       // get top left position of where the bricks should be
    122       var $cursor = $( document.createElement('div') );
    123       this.element.prepend( $cursor );
    124       this.offset.y = Math.round( $cursor.position().top );
    125       // get horizontal offset
    126       if ( !this.options.isRTL ) {
    127         this.offset.x = Math.round( $cursor.position().left );
    128       } else {
    129         $cursor.css({ 'float': 'right', display: 'inline-block'});
    130         this.offset.x = Math.round( this.element.outerWidth() - $cursor.position().left );
    131       }
    132       $cursor.remove();
     119
     120      this.offset = {
     121        x: parseInt( this.element.css( 'padding-' + this.horizontalDirection ), 10 ),
     122        y: parseInt( this.element.css( 'padding-top' ), 10 )
     123      };
     124     
     125      this.isFluid = this.options.columnWidth && typeof this.options.columnWidth === 'function';
    133126
    134127      // add masonry class first time around
     
    140133      // bind resize method
    141134      if ( this.options.isResizable ) {
    142         $(window).bind( 'smartresize.masonry', function() {
     135        $(window).bind( 'smartresize.masonry', function() { 
    143136          instance.resize();
    144137        });
     
    150143    // and when instance is triggered again -> $el.masonry();
    151144    _init : function( callback ) {
    152       this._getColumns('masonry');
     145      this._getColumns();
    153146      this._reLayout( callback );
    154147    },
     
    159152      if ( $.isPlainObject( key ) ){
    160153        this.options = $.extend(true, this.options, key);
    161       }
     154      } 
    162155    },
    163156   
     
    168161    layout : function( $bricks, callback ) {
    169162
    170       // layout logic
    171       var $brick, colSpan, groupCount, groupY, groupColY, j;
    172      
     163      // place each brick
    173164      for (var i=0, len = $bricks.length; i < len; i++) {
    174         $brick = $( $bricks[i] );
    175         //how many columns does this brick span
    176         colSpan = Math.ceil( $brick.outerWidth(true) / this.columnWidth );
    177         colSpan = Math.min( colSpan, this.cols );
    178 
    179         if ( colSpan === 1 ) {
    180           // if brick spans only one column, just like singleMode
    181           this._placeBrick( $brick, this.colYs );
    182         } else {
    183           // brick spans more than one column
    184           // how many different places could this brick fit horizontally
    185           groupCount = this.cols + 1 - colSpan;
    186           groupY = [];
    187 
    188           // for each group potential horizontal position
    189           for ( j=0; j < groupCount; j++ ) {
    190             // make an array of colY values for that one group
    191             groupColY = this.colYs.slice( j, j+colSpan );
    192             // and get the max value of the array
    193             groupY[j] = Math.max.apply( Math, groupColY );
    194           }
    195        
    196           this._placeBrick( $brick, groupY );
    197         }
     165        this._placeBrick( $bricks[i] );
    198166      }
    199167     
    200168      // set the size of the container
    201169      var containerSize = {};
    202       containerSize.height = Math.max.apply( Math, this.colYs ) - this.offset.y;
     170      containerSize.height = Math.max.apply( Math, this.colYs );
    203171      if ( this.options.isFitWidth ) {
    204         containerSize.width = this.cols * this.columnWidth - this.options.gutterWidth;
     172        var unusedCols = 0,
     173            i = this.cols;
     174        // count unused columns
     175        while ( --i ) {
     176          if ( this.colYs[i] !== 0 ) {
     177            break;
     178          }
     179          unusedCols++;
     180        }
     181        // fit container to columns that have been used;
     182        containerSize.width = (this.cols - unusedCols) * this.columnWidth - this.options.gutterWidth;
    205183      }
    206184      this.styleQueue.push({ $el: this.element, style: containerSize });
     
    236214      var container = this.options.isFitWidth ? this.element.parent() : this.element,
    237215          containerWidth = container.width();
    238      
    239       this.columnWidth = this.options.columnWidth ||
     216
     217                         // use fluid columnWidth function if there
     218      this.columnWidth = this.isFluid ? this.options.columnWidth( containerWidth ) :
     219                    // if not, how about the explicitly set option?
     220                    this.options.columnWidth ||
    240221                    // or use the size of the first item
    241222                    this.$bricks.outerWidth(true) ||
     
    250231    },
    251232
    252     _placeBrick : function( $brick, setY ) {
     233    // layout logic
     234    _placeBrick: function( brick ) {
     235      var $brick = $(brick),
     236          colSpan, groupCount, groupY, groupColY, j;
     237
     238      //how many columns does this brick span
     239      colSpan = Math.ceil( $brick.outerWidth(true) /
     240        ( this.columnWidth + this.options.gutterWidth ) );
     241      colSpan = Math.min( colSpan, this.cols );
     242
     243      if ( colSpan === 1 ) {
     244        // if brick spans only one column, just like singleMode
     245        groupY = this.colYs
     246      } else {
     247        // brick spans more than one column
     248        // how many different places could this brick fit horizontally
     249        groupCount = this.cols + 1 - colSpan;
     250        groupY = [];
     251
     252        // for each group potential horizontal position
     253        for ( j=0; j < groupCount; j++ ) {
     254          // make an array of colY values for that one group
     255          groupColY = this.colYs.slice( j, j+colSpan );
     256          // and get the max value of the array
     257          groupY[j] = Math.max.apply( Math, groupColY );
     258        }
     259
     260      }
     261
    253262      // get the minimum Y value from the columns
    254       var minimumY = Math.min.apply( Math, setY ),
     263      var minimumY = Math.min.apply( Math, groupY ),
    255264          shortCol = 0;
    256265     
    257266      // Find index of short column, the first from the left
    258       for (var i=0, len = setY.length; i < len; i++) {
    259         if ( setY[i] === minimumY ) {
     267      for (var i=0, len = groupY.length; i < len; i++) {
     268        if ( groupY[i] === minimumY ) {
    260269          shortCol = i;
    261270          break;
     
    265274      // position the brick
    266275      var position = {
    267         top : minimumY
     276        top: minimumY + this.offset.y
    268277      };
    269278      // position.left or position.right
     
    281290   
    282291   
    283     resize : function() {
     292    resize: function() {
    284293      var prevColCount = this.cols;
    285294      // get updated colCount
    286       this._getColumns('masonry');
    287       if ( this.cols !== prevColCount ) {
     295      this._getColumns();
     296      if ( this.isFluid || this.cols !== prevColCount ) {
    288297        // if column count has changed, trigger new layout
    289298        this._reLayout();
     
    297306      this.colYs = [];
    298307      while (i--) {
    299         this.colYs.push( this.offset.y );
     308        this.colYs.push( 0 );
    300309      }
    301310      // apply layout logic to all bricks
     
    350359        .removeClass('masonry-brick')
    351360        .each(function(){
    352           this.style.position = null;
    353           this.style.top = null;
    354           this.style.left = null;
     361          this.style.position = '';
     362          this.style.top = '';
     363          this.style.left = '';
    355364        });
    356365     
     
    375384 
    376385  // ======================= imagesLoaded Plugin ===============================
    377   // https://gist.github.com/964345
    378 
    379   // $('img.photo',this).imagesLoaded(myFunction)
     386  /*!
     387   * jQuery imagesLoaded plugin v1.0.3
     388   * http://github.com/desandro/imagesloaded
     389   *
     390   * MIT License. by Paul Irish et al.
     391   */
     392
     393
     394  // $('#my-container').imagesLoaded(myFunction)
     395  // or
     396  // $('img').imagesLoaded(myFunction)
     397
    380398  // execute a callback when all images have loaded.
    381399  // needed because .load() doesn't work on cached images
    382400
    383   // modified by yiannis chatzikonstantinou.
    384 
    385   // original:
    386   // mit license. paul irish. 2010.
    387   // webkit fix from Oren Solomianik. thx!
    388 
    389   // callback function is passed the last image to load
    390   // as an argument, and the collection as `this`
    391 
    392   $.fn.imagesLoaded = function( callback ){
    393     var elems = this.find( 'img' ),
    394         elems_src = [],
    395         self = this,
    396         len = elems.length;
    397 
    398     if ( !elems.length ) {
    399       callback.call( this );
    400       return this;
    401     }
    402 
    403     elems.one('load error', function() {
    404       if ( --len === 0 ) {
    405         // Rinse and repeat.
    406         len = elems.length;
    407         elems.one( 'load error', function() {
    408           if ( --len === 0 ) {
    409             callback.call( self );
    410           }
    411         }).each(function() {
    412           this.src = elems_src.shift();
    413         });
    414       }
    415     }).each(function() {
    416       elems_src.push( this.src );
    417       // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    418       // data uri bypasses webkit log warning (thx doug jones)
    419       this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
     401  // callback function gets image collection as argument
     402  //  `this` is the container
     403
     404  $.fn.imagesLoaded = function( callback ) {
     405    var $this = this,
     406        $images = $this.find('img').add( $this.filter('img') ),
     407        len = $images.length,
     408        blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
     409
     410    function triggerCallback() {
     411      callback.call( $this, $images );
     412    }
     413
     414    function imgLoaded() {
     415      if ( --len <= 0 && this.src !== blank ){
     416        setTimeout( triggerCallback );
     417        $images.unbind( 'load error', imgLoaded );
     418      }
     419    }
     420
     421    if ( !len ) {
     422      triggerCallback();
     423    }
     424
     425    $images.bind( 'load error',  imgLoaded ).each( function() {
     426      // cached images don't fire load sometimes, so we reset src.
     427      if (this.complete || this.complete === undefined){
     428        var src = this.src;
     429        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
     430        // data uri bypasses webkit log warning (thx doug jones)
     431        this.src = blank;
     432        this.src = src;
     433      }
    420434    });
    421435
    422     return this;
     436    return $this;
    423437  };
    424438
     
    432446  };
    433447 
    434   // ======================= Plugin bridge ===============================
     448  // =======================  Plugin bridge ===============================
    435449  // leverages data method to either create or return $.Mason constructor
    436450  // A bit from jQuery UI
    437   // https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js
    438   // A bit from jcarousel
    439   // https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js
     451  //   https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js
     452  // A bit from jcarousel 
     453  //   https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js
    440454
    441455  $.fn.masonry = function( options ) {
  • _plugins_/jquery_masonry/lang/jquerymasonry_fr.php

    r50417 r56099  
    55$GLOBALS[$GLOBALS['idx_lang']] = array(
    66        // C
    7         'cfg_boite_jquerymasonry' => 'Configuration du plugin jQuery Masonry.<br /><br />Consultez le <a href="http://masonry.desandro.com/" target="_blank">site du plugin jQuery Masonry</a> pour une démonstration de ses possibilités.',
    8         'cfg_titre_jquerymasonry' => 'jQuery Masonry',
    9        
     7        'configurer_explication' => 'Consultez le <a href="http://masonry.desandro.com/" target="_blank">site du plugin jQuery Masonry</a> pour une démonstration de ses possibilités.',
     8        'configurer_titre' => 'Configurer jQuery Masonry',
     9
    1010        // E
    1111        'explication_animation' => 'Animer le repositionnement des blocs lors d\'un redimensionnement du container ?',
     
    2323        'label_marge' => 'Marge',
    2424        'label_multicolonne' => 'Multi-colonne',
     25        'label_nombre' => 'Nombre d\'éléments',
    2526        'legend_jquerymasonry_nombre' => 'Nombre d\'éléments à traiter',
    2627        'legend_jquerymasonry' => 'Paramètrage @numero@',
    2728
    28         // N
    29         'nombre_elements' => 'Nombre d\'éléments'
     29        // T
     30        'titre_menu' => 'jQuery Masonry',
     31
    3032);
    3133?>
  • _plugins_/jquery_masonry/plugin.xml

    r51873 r56099  
    44        <auteur>Yffic</auteur>
    55        <licence>GPL v3</licence>
    6         <version>0.1.0</version>
     6        <version>0.2.0</version>
    77        <version_base>0.1</version_base>
    88        <etat>test</etat>
     
    1919                <inclure>jquerymasonry_pipelines.php</inclure>
    2020        </pipeline>
    21         <necessite id="cfg" version="[1.10;]" />
     21        <bouton id='jquerymasonry' parent='configuration'>
     22                <icone>images/jquerymasonry-24.png</icone>
     23                <titre>jquerymasonry:titre_menu</titre>
     24                <url>configurer_jquerymasonry</url>
     25        </bouton>
     26        <bouton id='jquerymasonry2' parent='bando_squelette'>
     27                <icone>images/jquerymasonry-16.png</icone>
     28                <titre>jquerymasonry:titre_menu</titre>
     29                <url>configurer_jquerymasonry</url>
     30        </bouton>
    2231        <necessite id="SPIP" version="[2.1.0;2.1.99]" />
    23         <necessite id="saisies" version="[1.1;]" />
     32        <necessite id="saisies" version="[1.9.0;]" />
    2433        <necessite id="Iterateurs" version="[0.3.0;]" />
    2534        <necessite id="spip_bonux" version="[1.8;]" />
Note: See TracChangeset for help on using the changeset viewer.