Skip to content

Commit 4a198f2

Browse files
eddiewentweddiewentw
committed
Merge branch 'moduler'
2 parents 878d0e0 + ffd4559 commit 4a198f2

File tree

4 files changed

+136
-96
lines changed

4 files changed

+136
-96
lines changed

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ npm install --save fallwall
2424
<script type='text/javascript' src='path/to/fallwall.js'></script>
2525
~~~
2626

27+
or
28+
29+
~~~javascript
30+
// import in your .js file
31+
import 'fallwall';
32+
~~~
33+
2734
----
2835

2936
### How to

‎build/fallwall.min.js

Lines changed: 7 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"name": "fallwall",
3-
"version": "1.1.4",
3+
"version": "1.2.0",
44
"description": "Fallwall.js is a jQuery plugin to make Fall Styles like Pinterest.",
55
"repository": {
66
"type": "git",
77
"url": "git+https://github.com/EddieWen-Taiwan/Fallwall.js.git"
88
},
9+
"main": "build/fallwall.min.js",
910
"keywords": [
1011
"fall",
1112
"fallwall",

‎src/fallwall.js

Lines changed: 120 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,120 @@
1-
(function($){
1+
/*!
2+
* Fallwall.js
3+
*
4+
* Copyright © 2015 Eddie Wen | MIT license
5+
* https://github.com/EddieWen-Taiwan/Fallwall.js
6+
*/
7+
8+
(function(root, factory) {
9+
'use strict';
10+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
11+
typeof define === 'function' && define.amd ? define(['jquery'], factory) :
12+
root.Fallwall = factory(jQuery)
13+
}(this, function($) {
14+
'use strict';
15+
16+
var defaults = {},
17+
18+
/**
19+
* call after initializing Fallwall
20+
* append grids in the zfirst round
21+
*/
22+
_setFirstRoundContent = function( dataArray, callback_func ) {
23+
24+
for( var i = 0; i < defaults.gridNumber; i++ ) {
25+
if( typeof dataArray[i] != "undefined" ) {
26+
_appendGrids( dataArray[i], 'down' );
27+
defaults.currentGrid = i;
28+
}
29+
else {
30+
break;
31+
}
32+
}
33+
34+
if( callback_func ) {
35+
if( typeof callback_func == 'function' )
36+
callback_func();
37+
else
38+
console.error(callback_func+' is not a function');
39+
}
40+
41+
},
42+
43+
/**
44+
* Add new grid
45+
* direction: up/down => grid is added at the top/bottom
46+
*/
47+
_appendGrids = function( obj, direction ) {
48+
49+
var thisCode = defaults.html_template;
50+
51+
for( var j = 0; j < Object.keys(obj).length; j++ ) {
52+
thisCode = thisCode.replace( 'fallwall_#'+(j+1), obj[j] );
53+
}
54+
55+
var targetColumn = $('.fw_column').eq( _getShortestColumn() );
56+
var creatingElement;
57+
if( direction == 'up' ) {
58+
targetColumn.prepend( thisCode );
59+
creatingElement = targetColumn.find('.fw_grid').first();
60+
}
61+
else {
62+
targetColumn.append( thisCode );
63+
creatingElement = targetColumn.find('.fw_grid').last();
64+
}
65+
66+
/**
67+
* Add extra class
68+
* like animation class
69+
*/
70+
if( defaults.defaultClass != '' ) {
71+
creatingElement.addClass( defaults.defaultClass );
72+
}
73+
74+
},
275

3-
/* ---------------------------- *\
4-
Fall Style
5-
\* ---------------------------- */
76+
/**
77+
* Return the shortest fw_column to append a new grid
78+
*/
79+
_getShortestColumn = function() {
680

7-
var settings;
81+
var heightArray = [];
82+
83+
$.each( $('.fw_column'), function(index, element) {
84+
heightArray.push( element.offsetHeight );
85+
});
886

87+
var minColumn = Math.min.apply( null, heightArray );
88+
return $.inArray( minColumn, heightArray );
89+
90+
};
91+
92+
/**
93+
* Fallwall construtcor
94+
* Setup template and data source
95+
*/
996
$.fn.fallwall_init = function( template, dataArray, options, callback_func ) {
1097

11-
// Required parameters
98+
/**
99+
* check required parameters
100+
*/
12101
if( template == null || dataArray == null ) {
13-
throw new Error('You missed some parameters while initializing')
102+
throw new Error('You missed some parameters while initializing');
14103
}
15104

16105
// Store data from user
17-
settings = $.extend({
106+
defaults = $.extend({
18107
gridNumber: 20,
19108
columnNumber: 1,
20109
defaultClass: '',
21-
html_template: `<div class='fw_grid'>${template}</div>`,
110+
html_template: '<div class=\'fw_grid\'>'+template+'</div>',
22111
dataArray: dataArray,
23112
currentGrid: 0
24113
}, options);
25114

26115
// Add columns
27116
var colElements = '';
28-
for( var i = 0; i < settings.columnNumber; i++ ) {
117+
for( var i = 0; i < defaults.columnNumber; i++ ) {
29118
colElements += '<div class=\'fw_column\'></div>';
30119
}
31120
this.append( colElements );
@@ -34,26 +123,29 @@
34123
this.find('.fw_column').css({
35124
'display': 'inline-block',
36125
'vertical-align': 'top',
37-
'width': `${100/settings.columnNumber}%`
126+
'width': (100/defaults.columnNumber)+'%'
38127
});
39128

40129
// Add grids at first
41-
_setContentAtFirst( dataArray, callback_func );
130+
_setFirstRoundContent( dataArray, callback_func );
42131

43132
};
44133

134+
/**
135+
* load more data and append them
136+
*/
45137
$.fn.loadMoreFw = function( callback_func ) {
46138

47-
if( settings.currentGrid +1 < settings.dataArray.length ) {
139+
if( defaults.currentGrid +1 < defaults.dataArray.length ) {
48140

49-
settings.currentGrid++;
50-
const limitNum = settings.currentGrid + settings.gridNumber;
51-
for( var i = settings.currentGrid; i < limitNum; i++ ) {
141+
defaults.currentGrid++;
142+
var limitNum = defaults.currentGrid + defaults.gridNumber;
143+
for( var i = defaults.currentGrid; i < limitNum; i++ ) {
52144

53-
if( typeof settings.dataArray[i] != "undefined" ) {
145+
if( typeof defaults.dataArray[i] != "undefined" ) {
54146

55-
_createGrid( settings.dataArray[i], 'down' );
56-
settings.currentGrid = i;
147+
_appendGrids( defaults.dataArray[i], 'down' );
148+
defaults.currentGrid = i;
57149

58150
}
59151
else {
@@ -62,7 +154,7 @@
62154
if( typeof callback_func == 'function' )
63155
callback_func();
64156
else
65-
console.error(`${callback_func} is not a function`);
157+
console.error(callback_func+' is not a function');
66158
}
67159
return "NO_MORE_DATA";
68160
}
@@ -73,7 +165,7 @@
73165
if( typeof callback_func == 'function' )
74166
callback_func();
75167
else
76-
console.error(`${callback_func} is not a function`);
168+
console.error(callback_func+' is not a function');
77169
}
78170
return "FINISHED";
79171
}
@@ -90,92 +182,26 @@
90182

91183
};
92184

93-
// Directly add a new grid at the top of any column
185+
/**
186+
* directly append a new grid at the top of one column
187+
*/
94188
$.fn.addFwGrid = function( data, callback_func ) {
95189

96190
if( typeof data == 'object' ) {
97191
// Add a new grid
98-
_createGrid( data, 'up' );
192+
_appendGrids( data, 'up' );
99193

100194
if( callback_func ) {
101195
if( typeof callback_func == 'function' )
102196
callback_func();
103197
else
104-
console.error(`${callback_func} is not a function`);
198+
console.error(callback_func+' is not a function');
105199
}
106200
}
107201
else {
108-
throw new Error(`First parameter of addFwGrid(): ${data} must be Object`);
202+
throw new Error('First parameter of addFwGrid(): '+data+' must be Object');
109203
}
110204

111205
};
112206

113-
function _setContentAtFirst( dataArray, callback_func ) {
114-
115-
for( var i = 0; i < settings.gridNumber; i++ ) {
116-
if( typeof dataArray[i] != "undefined" ) {
117-
_createGrid( dataArray[i], 'down' );
118-
settings.currentGrid = i;
119-
}
120-
else {
121-
break;
122-
}
123-
}
124-
125-
if( callback_func ) {
126-
if( typeof callback_func == 'function' )
127-
callback_func();
128-
else
129-
console.error(`${callback_func} is not a function`);
130-
}
131-
132-
}
133-
134-
/***
135-
*
136-
* Add new grid
137-
* direction: up/down => grid is added at the top/bottom
138-
* But keep second parameter - data because of 'addFwGrid()'
139-
*
140-
***/
141-
function _createGrid( obj, direction ) {
142-
143-
var thisCode = settings.html_template;
144-
145-
for( var j = 0; j < Object.keys(obj).length; j++ ) {
146-
thisCode = thisCode.replace( `fallwall_#${j+1}`, obj[j] );
147-
}
148-
149-
const targetColumn = $('.fw_column').eq( _getShortestCol() );
150-
var creatingElement;
151-
if( direction == 'up' ) {
152-
targetColumn.prepend( thisCode );
153-
creatingElement = targetColumn.find('.fw_grid').first();
154-
}
155-
else {
156-
targetColumn.append( thisCode );
157-
creatingElement = targetColumn.find('.fw_grid').last();
158-
}
159-
160-
// Add animation class
161-
if( settings.defaultClass != '' ) {
162-
creatingElement.addClass( settings.defaultClass );
163-
}
164-
165-
}
166-
167-
// Return the shortest '.fw_column' to append a new grid
168-
function _getShortestCol() {
169-
170-
var heightArray = [];
171-
172-
$.each( $('.fw_column'), function(index, element) {
173-
heightArray.push( element.offsetHeight );
174-
});
175-
176-
const minColumn = Math.min.apply( null, heightArray );
177-
return $.inArray( minColumn, heightArray );
178-
179-
}
180-
181-
}(jQuery));
207+
}));

0 commit comments

Comments
 (0)