126 |
127 |
128 | ```
129 |
130 | 
131 |
132 | ## Installation
133 |
134 | First, make sure you have [Bower](https://bower.io/) and the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed.
135 |
136 | Then,
137 |
138 | ```
139 | bower install
140 | polymer serve -o
141 | ```
142 |
143 | ## Usage
144 |
145 | ### The grid's container
146 |
147 | Add a `` element to your page:
148 |
149 | ```html
150 |
151 | ```
152 |
153 | > This will show an empty static grid with the default disposition layout with no move or resize capabilities.
154 |
155 | You can add the `draggable` or `resizable` attribute (or both) to enable respectively tile's drag'n'drop or tile's resizing.
156 |
157 | ```html
158 |
159 | ```
160 |
161 | > This will show an empty grid with the default disposition layout and also the ability to move tiles by drag'n'drop.
162 |
163 | Layout can be modified using the following attributes:
164 |
165 | * **cell-height**: height of the vertical unit in pixels
166 | * **cell-width**: width of the horizontal unit in pixels
167 | * **cell-margin**: inner space between tiles, both horizontally and vertically.
168 | * **col-count**: grid width as an amount of columns.
169 | * **row-count**: grid height as an amount of columns.
170 |
171 | > The number of columns `col-count` and number of rows `row-count` are by default fixed, and represents the grid size. Nevertheless, you can allow the grid
172 | > to auto increase its size with respectively `col-autogrow` and `row-autogrow` boolean attributes. This behavior occurs when a tile is resized or moved
173 | > while being on the edge of the grid.
174 |
175 | Also, you can allow tiles to overlap each other using `overlappable` attribute:
176 |
177 | ```html
178 |
179 | ```
180 |
181 | ### The grid's children (akka tiles).
182 |
183 | Each direct child of `` will be considered as a grid tile that can be moved or resized depending on the grid properties.
184 |
185 | Grid's children can be of any types: `
`, `
`, ``, ``, ... or even your own custom element: ``.
186 |
187 | ```html
188 |
189 |
190 |
191 |
192 | ```
193 |
194 | Each child needs **4 attributes** which define its position and size within the grid:
195 |
196 | * **col**: the column index of the top-left corner of the tile (starts from 0).
197 | * **row**: the row index of the top-left corner of the tile (starts from 0).
198 | * **width**: the column spanning of the tile as an amount of columns (~colspan).
199 | * **height**: the row spanning of the tile as an amount of rows (~rowspan).
200 |
201 | ### The grid's placeholder
202 |
203 | If you need some placeholder while dragging or resizing a tile for preview purpose,
204 | simply add a child to `` with the placeholder attribute.
205 |
206 | ```html
207 |
208 |
209 |
210 | ```
211 |
212 | > This will enable a grey placeholder in the grid only visible while dragging and resizing tiles.
213 |
214 | ### The tile's grippers (akka resizers).
215 |
216 | If the grid has the `resizable` attribute, tiles can be resized by grabbing elements called **grippers** or **resizers**.
217 |
218 | Those elements can be of any types, they just need to have a `resize` attribute so the grid can find them.
219 |
220 | ```html
221 |
222 |
223 | │
224 |
225 |
226 | ```
227 |
228 | > Here, a tile is added to the grid. It has a nested **right** gripper so it can be used to resize the tile by the right edge.
229 |
230 | Resize grippers can take the following values:
231 |
232 | * **top**: resize the tile by the top edge.
233 | * **bottom**: resize the tile by the bottom edge.
234 | * **left**: resize the tile by the left edge.
235 | * **right**: resize the tile by the right edge.
236 | * **top-left**: resize the tile by the top and left edges at the same time.
237 | * **top-right**: resize the tile by the top and right edges at the same time.
238 | * **bottom-left**: resize the tile by the bottom and left edges at the same time.
239 | * **bottom-right**: resize the tile by the bottom and right edges at the same time.
240 |
241 | > Several grippers can be used for the same tile. They can be nested wherever in the tile element.
242 |
243 | ## Contributing
244 |
245 | 1. Fork it!
246 | 2. Create your feature branch: `git checkout -b my-new-feature`
247 | 3. Commit your changes: `git commit -am 'Add some feature'`
248 | 4. Push to the branch: `git push origin my-new-feature`
249 | 5. Submit a pull request :D
250 |
251 | ## History
252 |
253 | * **1.4.0:** Now handles children added on the fly + Serialization helper.
254 | * **1.3.0:** Ability to add constraints on tile size as min/max width and height.
255 | * **1.2.0:** Introduce autogrow feature and custom events.
256 | * **1.1.0:** Introduce overlappable feature.
257 | * **1.0.3:** Ability to generate grid's children with templates.
258 | * **1.0.2:** Fixes shadow dom wrapping.
259 | * **1.0.1:** Enhanced mobile support.
260 | * **1.0.0:** Initial release.
261 |
262 | ## License
263 |
264 | MIT license
265 |
--------------------------------------------------------------------------------
/debug-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
71 |
72 |