bricklayer - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

bower.json

@@ -17,2 +17,3 @@ {
     "**/.*",
+    "src",
     "node_modules",
@@ -22,5 +23,6 @@ "bower_components",
     "tests",
-    "examples"
+    "examples",
+    "screenshot.gif"
   ],
-  "version": "0.1.2",
+  "version": "0.1.3",
   "dependencies": {
@@ -27,0 +29,0 @@ "jquery": "^2.2.3"

dist/bricklayer.js

@@ -41,2 +41,3 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
             this.ruler = new Ruler(options.rulerClassName);
+            this.element.data('bricklayer', this);
             this.build();
@@ -43,0 +44,0 @@ this.buildResponsive();

examples/demo.js

 function newBox() {
-  var randomColor = '#' + '0123456789abcdef'.split('').map(function(v, i, a) {
-    return i > 5 ? null : a[Math.floor(Math.random() * 16)]
-  }).join('');
+  var randomColor = '#' + '0123456789abcdef'.split('').map(function (v, i, a) {
+      return i > 5 ? null : a[Math.floor(Math.random() * 16)]
+    }).join('');
 
-  var heights = [30, 50, 80, 100, 130, 180];
+  var heights = [50, 90, 150, 190, 230];
   var randomHeight = heights[Math.floor(Math.random() * heights.length)];
@@ -19,4 +19,4 @@
 //for (i = 0; i < 0; i++) {
-  //var $Box = newBox();
-  //$(".bricklayer").append($Box.text(i));
+//var $Box = newBox();
+//$(".bricklayer").append($Box.text(i));
 //}
@@ -27,15 +27,21 @@
 var bricklayer = $('.bricklayer').bricklayer()
-                  .onBreakpoint(function(e, size) {
-                    $(e).find(".box").removeClass("is-prepend").addClass("is-append");
-                  })
-                  .onAfterPrepend(function(e, el) {
-                    $(el).addClass("is-prepend");
-                  })
-                  .onAfterAppend(function(e, el) {
-                    $(el).addClass("is-append");
-                  });
+  .onBreakpoint(function (e, size) {
+    console.log(size);
+  })
+  .onAfterPrepend(function (e, el) {
+    $(el).addClass("is-prepend");
+    setTimeout(function () {
+      $(el).removeClass("is-prepend");
+    }, 500);
+  })
+  .onAfterAppend(function (e, el) {
+    $(el).addClass("is-append");
+    setTimeout(function () {
+      $(el).removeClass("is-append");
+    }, 500);
+  });
 
 ////////////////////////////////////////////////////////////
 
-$("button").click(function() {
+$("button").click(function () {
 
@@ -42,0 +48,0 @@ var $Box = newBox();

gulpfile.js

 var gulp = require('gulp'),
-    browserSync = require('browser-sync').create(),
-    sass = require('gulp-sass'),
-    prefix = require('gulp-autoprefixer'),
-    csslint = require('gulp-csslint'),
-    source = require('vinyl-source-stream'),
-    browserify = require('browserify'),
-    tsify = require('tsify'),
-    uglify = require('gulp-uglify'),
-    rename = require('gulp-rename')
+  browserSync = require('browser-sync').create(),
+  sass = require('gulp-sass'),
+  prefix = require('gulp-autoprefixer'),
+  csslint = require('gulp-csslint'),
+  source = require('vinyl-source-stream'),
+  browserify = require('browserify'),
+  tsify = require('tsify'),
+  uglify = require('gulp-uglify'),
+  rename = require('gulp-rename')
 
@@ -15,9 +15,9 @@ var browserReload = browserSync.reload;
 gulp.task("css", function () {
-    gulp.src("./src/bricklayer.scss")
-        .pipe(sass({
-            outputStyle: 'expanded'
-        }))
-        .pipe(prefix())
-        .pipe(gulp.dest("./dist/"))
-        .pipe(browserSync.stream());
+  gulp.src("./src/bricklayer.scss")
+    .pipe(sass({
+      outputStyle: 'expanded'
+    }))
+    .pipe(prefix())
+    .pipe(gulp.dest("./dist/"))
+    .pipe(browserSync.stream());
 });
@@ -27,25 +27,27 @@
 gulp.task("js", function () {
-    browserify()
-        .add('./src/bricklayer.ts')
-        .plugin(tsify, {
-            module: "commonjs"
-        })
-        .bundle()
-        .on('error', function (error) { console.error(error.toString()); })
-        .pipe(source('./dist/bricklayer.js'))
-        .pipe(gulp.dest("./"));
+  browserify()
+    .add('./src/bricklayer.ts')
+    .plugin(tsify, {
+      module: "commonjs"
+    })
+    .bundle()
+    .on('error', function (error) {
+      console.error(error.toString());
+    })
+    .pipe(source('./dist/bricklayer.js'))
+    .pipe(gulp.dest("./"));
 
-    gulp.src("./dist/bricklayer.js")
-        .pipe(uglify())
-        .pipe(rename({suffix: ".min"}))
-        .pipe(gulp.dest("./dist"))
+  gulp.src("./dist/bricklayer.js")
+    .pipe(uglify())
+    .pipe(rename({suffix: ".min"}))
+    .pipe(gulp.dest("./dist"))
 });
 
 gulp.task("watch", ["css", "js"], function () {
-    browserSync.init({
-        notify: false,
-        // proxy: "localhost/bricklayer"
-    });
-    gulp.watch('./src/*.scss', ["css"]);
-    gulp.watch('./src/*.ts', ["js"]);
+  browserSync.init({
+    notify: false,
+    // proxy: "localhost/bricklayer"
+  });
+  gulp.watch('./src/*.scss', ["css"]);
+  gulp.watch('./src/*.ts', ["js"]);
 });
@@ -55,2 +57,2 @@
 gulp.task("default", ["watch"]);
-gulp.task("export", ["css"]);
+gulp.task("export", ["css", "js"]);

package.json

 {
   "name": "bricklayer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Lightweight and strong Masonry alternative",
@@ -5,0 +5,0 @@ "main": "dist/bricklayer.js",

README.md

@@ -5,15 +5,23 @@ # Bricklayer
 
+[Play with example](http://ademilter.github.io/bricklayer)
+
+![Image](https://rawgit.com/ademilter/bricklayer/master/screenshot.gif)
+
 ## Why Bricklayer?
 
  - **Simpler** than any other cascading grid layout tools.
- - **Lightweight**, no fat. **(1.1KB gzipped)
+ - **Lightweight**, no fat. **(1.1KB gzipped)**
  - Integrates with **jQuery** seamlessly.
  - **Responsive** support with no glitch.
+ - Easy configuration.
+ - Static positioning, no inline styles.
 
 ## Installation
 
+```html
+<link rel="stylesheet" href="//rawgit.com/ademilter/bricklayer/master/dist/bricklayer.css">
+
+<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
+<script src="//rawgit.com/ademilter/bricklayer/master/dist/bricklayer.min.js"></script>
 ```
-<link rel="stylesheet" href="bricklayer.css">
-<script src="bricklayer.js"></script>
-```
 
@@ -65,2 +73,3 @@ If you are using modular JavaScript, you can use **NPM** or **Bower**
 
+## Methods
 - Add bricks dynamically
@@ -77,3 +86,3 @@
 ```js
-bricklayer.append([
+bricklayer.prepend([
   $("<div>My awesome content</div>"),
@@ -84,9 +93,32 @@ $("<div>My another awesome but very long content</div>")
 
-## Callbacks
+### Accessing Bricklayer Instance via `data` Attribute
 
-You can add listeners.
+```js
+$(".bricklayer").bricklayer().data('bricklayer').append([
+  // items
+])
+```
 
+## Events
+
+You can add listeners to Bricklayer to have full control. They allows you to
+create more extensible layouts. You can use these events especially for
+animations. Please see examples.
+
 ```js
-bricklayer.on("bricklayer.afterAppend", function () {})
-bricklayer.on("bricklayer.beforeAppend", function () {})
+bricklayer.onBeforeAppend(function (e, itemElement, columnElement) {
+  // `itemElement` will be appended to the end of `columnElement`
+})
+
+bricklayer.onBeforePrepend(function (e, itemElement, columnElement) {
+  // `itemElement` will be prepended to the top of `columnElement`
+})
+
+bricklayer.onAfterAppend(function (e, itemElement, columnElement) {
+  // `itemElement` is appended to the end of `columnElement`
+})
+
+bricklayer.onAfterPrepend(function (e, itemElement, columnElement) {
+  // `itemElement` is prepended to the top of `columnElement`
+})
 ```
@@ -96,2 +128,23 @@
 
-MIT
+Bricklayer - Cascading Grid Layouts
+
+Copyright © 2016 Adem İlter
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the "Software"),
+to deal in the Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

src/bricklayer.ts

@@ -37,2 +37,4 @@ /// <reference path="typings/jquery.d.ts" />
 
+      this.element.data('bricklayer', this)
+
       this.build()
@@ -39,0 +41,0 @@ this.buildResponsive()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2347254

increased by1221.83%

Number of package files

16

increased by14.29%

Lines of code

3557

increased by0.97%

Number of lines in readme file

146

increased by56.99%

No dependency changes