From e7fb40fee02d601d35130728d56cf7757e5e6fa2 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 25 Aug 2013 23:02:35 -0400 Subject: [PATCH] add fitColumns and horizontal layout modes --- examples/horizontal-layout-modes.html | 215 ++++++++++++++++++++++++++ layout-modes/fit-columns.js | 60 +++++++ layout-modes/horizontal.js | 50 ++++++ notes.md | 3 +- 4 files changed, 327 insertions(+), 1 deletion(-) create mode 100644 examples/horizontal-layout-modes.html create mode 100644 layout-modes/fit-columns.js create mode 100644 layout-modes/horizontal.js diff --git a/examples/horizontal-layout-modes.html b/examples/horizontal-layout-modes.html new file mode 100644 index 0000000..e26644e --- /dev/null +++ b/examples/horizontal-layout-modes.html @@ -0,0 +1,215 @@ + + + + + + filter sort + + + + + + +

filter sort

+ +
+

Filter

+
+ + + +
+

Sort

+
+ + + + + + +
+
+ +
+ +
+

80

+

Hg

+

Mercury

+

200.59

+
+ +
+

52

+

Te

+

Tellurium

+

127.6

+
+ +
+

83

+

Bi

+

Bismuth

+

208.9804

+
+ +
+

48

+

Cd

+

Cadmium

+

112.411

+
+ +
+

20

+

Ca

+

Calcium

+

40.078

+
+ +
+

75

+

Re

+

Rhenium

+

186.207

+
+ +
+

81

+

Tl

+

Thallium

+

204.3833

+
+ +
+

51

+

Sb

+

Antimony

+

121.76

+
+ +
+

27

+

Co

+

Cobalt

+

58.933195

+
+ +
+

71

+

Lu

+

Lutetium

+

174.9668

+
+ +
+

18

+

Ar

+

Argon

+

39.948

+
+ +
+

37

+

Rb

+

Rubidium

+

85.4678

+
+ +
+

7

+

N

+

Nitrogen

+

14.0067

+
+ +
+

93

+

Np

+

Neptunium

+

(237)

+
+ +
+

89

+

Ac

+

Actinium

+

(227)

+
+
+ + + + + + + + + + + + + + + + + + + + + diff --git a/layout-modes/fit-columns.js b/layout-modes/fit-columns.js new file mode 100644 index 0000000..a7d3c74 --- /dev/null +++ b/layout-modes/fit-columns.js @@ -0,0 +1,60 @@ +( function( window ) { + +'use strict'; + +function fitColumnsDefinition( layoutMode ) { + + var FitColumns = layoutMode.create('fitColumns'); + + FitColumns.prototype._resetLayout = function() { + this.x = 0; + this.y = 0; + this.maxX = 0; + }; + + FitColumns.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + + // if this element cannot fit in the current row + if ( this.y !== 0 && item.size.outerHeight + this.y > this.isotope.size.innerHeight ) { + this.y = 0; + this.x = this.maxX; + } + + var position = { + x: this.x, + y: this.y + }; + + this.maxX = Math.max( this.maxX, this.x + item.size.outerWidth ); + this.y += item.size.outerHeight; + + return position; + }; + + FitColumns.prototype._getContainerSize = function() { + return { width: this.maxX }; + }; + + FitColumns.prototype.resize = function() { + this.isotope.resizeVertical(); + }; + + return FitColumns; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../layout-mode' + ], + fitColumnsDefinition ); +} else { + // browser global + fitColumnsDefinition( + window.Isotope.layoutMode + ); +} + +})( window ); diff --git a/layout-modes/horizontal.js b/layout-modes/horizontal.js new file mode 100644 index 0000000..21aefb0 --- /dev/null +++ b/layout-modes/horizontal.js @@ -0,0 +1,50 @@ +( function( window ) { + +'use strict'; + +function horizontalDefinition( layoutMode ) { + + var Horizontal = layoutMode.create( 'horizontal', { + verticalAlignment: 0 + }); + + Horizontal.prototype._resetLayout = function() { + this.x = 0; + }; + + Horizontal.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + var y = ( this.isotope.size.innerHeight - item.size.outerHeight ) * + this.options.verticalAlignment; + var x = this.x; + this.x += item.size.outerWidth; + console.log( x, y ); + return { x: x, y: y }; + }; + + Horizontal.prototype._getContainerSize = function() { + return { width: this.x }; + }; + + Horizontal.prototype.resize = function() { + this.isotope.resizeVertical(); + }; + + return Horizontal; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../layout-mode' + ], + horizontalDefinition ); +} else { + // browser global + horizontalDefinition( + window.Isotope.layoutMode + ); +} + +})( window ); diff --git a/notes.md b/notes.md index ce9361f..e94fa7d 100644 --- a/notes.md +++ b/notes.md @@ -1,5 +1,7 @@ ## to do +add horizontal layout modes + isOriginTop / isOriginLeft integration manageStamp @@ -23,4 +25,3 @@ sortAscending for object ## bugs -click _filter: some_, then while transitioning _filter: all_. The some will be hidden when transition ends \ No newline at end of file