diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..30bc162 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/node_modules \ No newline at end of file diff --git a/README.md b/README.md index 0537638..cb801d0 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,26 @@ # jquery-center-inline-block A jquery plugin for center inline block element, and last row align left. + +### [Demo](http://filenwind.github.io/jquery-center-inline-block) + +## Usage +``` +
+
1
+
2
+
3
+ ... +
+ +``` + +## Options +* **wrapper** - template for wrap container's contents + +## Installation + +``` +npm install jquery-center-inline-block +``` \ No newline at end of file diff --git a/dist/jquery-center-inline-block.js b/dist/jquery-center-inline-block.js new file mode 100644 index 0000000..86109e2 --- /dev/null +++ b/dist/jquery-center-inline-block.js @@ -0,0 +1,103 @@ +(function(factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + return define(['jquery'], function($) { + return factory($, window); + }); + } else if (typeof exports !== 'undefined') { + return module.exports = factory(require('jquery'), window); + } else { + return factory(jQuery, window); + } +})(function($, window) { + 'use strict'; + var CenterInlineBlock, Plugin, pluginName; + pluginName = 'jquery-center-inline-block'; + CenterInlineBlock = function(element, options) { + this.init(element, options); + this.resize(); + }; + CenterInlineBlock.prototype.init = function(element, options) { + this.options = $.extend({}, { + wrapper: "
" + }, options); + this.container = $(element); + this.window = $(window); + this.window_width = 0; + this.child_width = null; + this.appendWrapper(); + return this.initWindowResizeEvent(); + }; + CenterInlineBlock.prototype.appendWrapper = function() { + this.wrapper = $(this.options.wrapper); + this.container.contents().appendTo(this.wrapper); + return this.container.append(this.wrapper); + }; + CenterInlineBlock.prototype.initWindowResizeEvent = function() { + this.resizeID = this.window.data(pluginName + "-resize-id"); + if (!this.resizeID) { + this.resizeID = 0; + } + this.resizeID++; + this.window.data(pluginName + "-resize-id", this.resizeID); + return this.window.on("resize." + pluginName + "-" + this.resizeID, this.onWindowResize.bind(this)); + }; + CenterInlineBlock.prototype.onWindowResize = function() { + if (this.window_width !== this.window.width()) { + this.window_width = this.window.width(); + clearTimeout(this.resizeTimeout); + return this.resizeTimeout = setTimeout(this.resize.bind(this)); + } + }; + CenterInlineBlock.prototype.resize = function() { + var _this, capacity, new_width; + if (this.container.is(':visible')) { + this.wrapper.contents().each(function() { + if (this.nodeType === 3 && !$.trim(this.nodeValue)) { + return $(this).remove(); + } + }); + if (this.child_width === null) { + this.child_width = 0; + _this = this; + this.wrapper.children().each(function(i) { + _this.child_width = $(this).outerWidth(true); + return false; + }); + } + if (this.child_width > 0) { + capacity = Math.floor(this.container.width() / this.child_width); + if (capacity < 1) { + capacity = 1; + } + new_width = capacity * this.child_width; + if (this.wrapper.width() !== new_width) { + return this.wrapper.width(new_width); + } + } + } + }; + CenterInlineBlock.prototype.destroy = function() { + this.unbindWindowResize(); + return this.container.data(pluginName, null); + }; + CenterInlineBlock.prototype.unbindWindowResize = function() { + return this.window.unbind("resize." + pluginName + "-" + this.resizeID); + }; + Plugin = function(option) { + return this.each(function() { + var $this, data, options; + $this = $(this); + data = $this.data(pluginName); + if (data) { + if (typeof option === 'string') { + return data[option](); + } + } else if (!/destroy/.test(option)) { + options = typeof option === 'object' ? option : {}; + return $this.data(pluginName, new CenterInlineBlock(this, options)); + } + }); + }; + return $.fn.centerInlineBlock = Plugin; +}); diff --git a/dist/jquery-center-inline-block.min.js b/dist/jquery-center-inline-block.min.js new file mode 100644 index 0000000..87c8d1b --- /dev/null +++ b/dist/jquery-center-inline-block.min.js @@ -0,0 +1 @@ +!function(i){"use strict";return"function"==typeof define&&define.amd?define(["jquery"],function(t){return i(t,window)}):"undefined"!=typeof exports?module.exports=i(require("jquery"),window):i(jQuery,window)}(function(i,t){"use strict";var e,n,r;return r="jquery-center-inline-block",e=function(i,t){this.init(i,t),this.resize()},e.prototype.init=function(e,n){return this.options=i.extend({},{wrapper:"
"},n),this.container=i(e),this.window=i(t),this.window_width=0,this.child_width=null,this.appendWrapper(),this.initWindowResizeEvent()},e.prototype.appendWrapper=function(){return this.wrapper=i(this.options.wrapper),this.container.contents().appendTo(this.wrapper),this.container.append(this.wrapper)},e.prototype.initWindowResizeEvent=function(){return this.resizeID=this.window.data(r+"-resize-id"),this.resizeID||(this.resizeID=0),this.resizeID++,this.window.data(r+"-resize-id",this.resizeID),this.window.on("resize."+r+"-"+this.resizeID,this.onWindowResize.bind(this))},e.prototype.onWindowResize=function(){return this.window_width!==this.window.width()?(this.window_width=this.window.width(),clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(this.resize.bind(this))):void 0},e.prototype.resize=function(){var t,e,n;return this.container.is(":visible")&&(this.wrapper.contents().each(function(){return 3!==this.nodeType||i.trim(this.nodeValue)?void 0:i(this).remove()}),null===this.child_width&&(this.child_width=0,t=this,this.wrapper.children().each(function(e){return t.child_width=i(this).outerWidth(!0),!1})),this.child_width>0&&(e=Math.floor(this.container.width()/this.child_width),1>e&&(e=1),n=e*this.child_width,this.wrapper.width()!==n))?this.wrapper.width(n):void 0},e.prototype.destroy=function(){return this.unbindWindowResize(),this.container.data(r,null)},e.prototype.unbindWindowResize=function(){return this.window.unbind("resize."+r+"-"+this.resizeID)},n=function(t){return this.each(function(){var n,s,o;if(n=i(this),s=n.data(r)){if("string"==typeof t)return s[t]()}else if(!/destroy/.test(t))return o="object"==typeof t?t:{},n.data(r,new e(this,o))})},i.fn.centerInlineBlock=n}); \ No newline at end of file diff --git a/gulpfile.coffee b/gulpfile.coffee new file mode 100644 index 0000000..ebf711f --- /dev/null +++ b/gulpfile.coffee @@ -0,0 +1,334 @@ +gulp = require('gulp') +sass = require('gulp-sass') +coffee = require('gulp-coffee') +uglify = require('gulp-uglify') +rename = require('gulp-rename') +plumber = require('gulp-plumber') + + +gulp.task 'scripts', -> + + gulp.src([ + 'src/*.coffee' + ]) + .pipe(plumber()) + .pipe(coffee({bare:true})) + .pipe(gulp.dest('./dist/')) + .pipe(uglify()) + .pipe(rename({suffix:'.min'})) + .pipe(gulp.dest('./dist/')) + +gulp.task('watcher', ()-> + gulp.watch([ + 'src/*.coffee' + ], ['scripts']) +) + +gulp.task('default', ['scripts']) + +gulp.task('watch', ['default', 'watcher']) + + +# elixir = require 'laravel-elixir' +# require 'laravel-elixir-clean' + +# # gulp tool +# gulp = require 'gulp' +# util = require 'gulp-util' +# addsrc = require 'gulp-add-src' +# uglify = require 'gulp-uglify' +# concat = require 'gulp-concat' +# livereload = require 'gulp-livereload' +# autoprefixer = require 'gulp-autoprefixer' +# rename = require 'gulp-rename' +# fs = require 'fs' +# minifyCss = require 'gulp-minify-css' + + +# # compiler +# browserify = require 'gulp-browserify' +# sass = require 'gulp-sass' + + +# # browserify transform lib +# coffee_reactify = require 'coffee-reactify' + + + +# # transform require 'react' to windwo.React +# literalify = require 'literalify' + + + + + +# # /* +# # |-------------------------------------------------------------------------- +# # | Elixir Asset Management +# # |-------------------------------------------------------------------------- +# # | +# # | Elixir provides a clean, fluent API for defining some basic Gulp tasks +# # | for your Laravel application. By default, we are compiling the Less +# # | file for our application, as well as publishing vendor resources. +# # | +# # */ + + +# # is in production +# inProduction = util.env.production + +# process.env.NODE_ENV = if inProduction then 'production' else 'development' + +# # is running watch task +# inWatch = 'watch' in util.env._ + + + + + +# # scripts +# elixir.extend 'myScripts', -> + +# gulp.task 'myScripts', -> + +# gulp.src([ +# 'resources/assets/desktop/cjsx/pages/*.cjsx' +# ], {read:false}) +# .pipe(browserify({ +# transform: [ +# coffee_reactify, +# literalify.configure({ +# 'jquery': 'window.$' +# 'react': 'window.React' +# 'react/addons': 'window.React' +# 'react-router': 'window.ReactRouter' +# 'fluxxor': 'window.Fluxxor' +# 'underscore': 'window._' +# 'classnames': 'window.classNames' +# 'screenfull': 'window.screenfull' +# }) +# ] +# })) +# .on('error', util.log) +# .pipe( +# if inProduction then uglify() else util.noop() +# ) +# .pipe(rename({extname:'.js'})) +# .pipe(gulp.dest('./public/desktop/js/pages')) + + + + +# # when changed, trigger this task +# @registerWatcher 'myScripts', 'resources/assets/desktop/cjsx/**/*.cjsx' + +# @queueTask 'myScripts' + + + + +# vendor_script_list = [ +# name: 'jquery' +# dev: './bower_components/jquery/dist/jquery.js' +# min: './bower_components/jquery/dist/jquery.min.js' +# , +# name: 'jquery-ui-mouse' +# dev: './bower_components/jquery-ui/jquery-ui.js' +# min: './bower_components/jquery-ui/jquery-ui.min.js' +# , +# name: 'jQuery-ajaxTransport-XDomainRequest' +# dev: './bower_components/jQuery-ajaxTransport-XDomainRequest/jQuery.XDomainRequest.js' +# min: './bower_components/jQuery-ajaxTransport-XDomainRequest/jquery.xdomainrequest.min.js' +# , +# name: 'jquery-ui-slider' +# dev: './bower_components/jquery-ui/ui/slider.js' +# min: './bower_components/jquery-ui/ui/minified/slider.min.js' +# , +# name: 'react' +# dev: './node_modules/react/dist/react-with-addons.js' +# min: './node_modules/react/dist/react-with-addons.min.js' +# , +# name: 'react-router' +# dev: './node_modules/react-router/umd/ReactRouter.js' +# min: './node_modules/react-router/umd/ReactRouter.min.js' +# , +# name: 'fluxxor' +# dev: './bower_components/fluxxor/build/fluxxor.js' +# min: './bower_components/fluxxor/build/fluxxor.min.js' +# , +# name: 'modernizr' +# dev: './bower_components/modernizr/modernizr.js' +# min: './bower_components/modernizr/modernizr.js' +# , +# name: 'jquery-vide' +# dev: './bower_components/vide/dist/jquery.vide.js' +# min: './bower_components/vide/dist/jquery.vide.min.js' +# , +# name: 'ScrollMagic' +# dev: './bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js' +# min: './bower_components/scrollmagic/scrollmagic/minified/ScrollMagic.min.js' +# , +# name: 'gsap-tween' +# dev: './bower_components/gsap/src/uncompressed/TweenMax.js' +# min: './bower_components/gsap/src/minified/TweenMax.min.js' +# , +# name: 'gsap-timeline' +# dev: './bower_components/gsap/src/uncompressed/TimelineMax.js' +# min: './bower_components/gsap/src/minified/TimelineMax.min.js' +# , +# name: 'slick' +# dev: './bower_components/slick.js/slick/slick.js' +# min: './bower_components/slick.js/slick/slick.min.js' +# , +# name: 'jquery-imagefill' +# dev: './bower_components/imagefill/js/jquery-imagefill.js' +# min: './bower_components/imagefill/js/jquery-imagefill.js' +# , +# name: 'imagesloaded' +# dev: './bower_components/imagesloaded/imagesloaded.pkgd.js' +# min: './bower_components/imagesloaded/imagesloaded.pkgd.min.js' +# , +# name: 'underscore' +# dev: './bower_components/underscore/underscore.js' +# min: './bower_components/underscore/underscore-min.js' +# , +# name: 'jquery-rest' +# dev: './bower_components/jquery.rest/dist/1/jquery.rest.js' +# min: './bower_components/jquery.rest/dist/1/jquery.rest.min.js' +# , +# name: 'react-classnames' +# dev: './bower_components/classnames/index.js' +# min: './bower_components/classnames/index.js' +# , +# name: 'screenfull' +# dev: './bower_components/screenfull/dist/screenfull.js' +# min: './bower_components/screenfull/dist/screenfull.js' +# , +# name: 'overthrow' +# dev: './bower_components/nanoscroller/bin/javascripts/overthrow.min.js' +# min: './bower_components/nanoscroller/bin/javascripts/overthrow.min.js' +# , +# name: 'nanoscroller' +# dev: './bower_components/nanoscroller/bin/javascripts/jquery.nanoscroller.js' +# min: './bower_components/nanoscroller/bin/javascripts/jquery.nanoscroller.min.js' +# , +# name: 'dotdotdot' +# dev: './bower_components/dotdotdot/src/js/jquery.dotdotdot.js' +# min: './bower_components/dotdotdot/src/js/jquery.dotdotdot.min.js' +# ] + + +# _ = require 'underscore' + +# # vendor scripts +# elixir.extend 'vendorScripts', -> + +# gulp.task 'vendorScripts', -> + +# pluck_column = if inProduction then 'min' else 'dev' +# vendor_scripts = _.pluck vendor_script_list, pluck_column + + +# gulp.src(vendor_scripts) +# .pipe(concat('vendors.js')) +# .pipe( +# if inProduction then uglify() else util.noop() +# ).pipe(gulp.dest('./public/desktop/js')) + +# @registerWatcher 'vendorScripts' +# @queueTask 'vendorScripts' + + + + +# # sass +# elixir.extend 'mySass', -> + +# gulp.task 'mySass', -> + + +# gulp.src('resources/assets/desktop/sass/bundle.scss') +# .pipe(sass({ +# errLogToConsole: true +# })) +# .pipe( +# if inProduction then minifyCss() else util.noop() +# ) +# .pipe(autoprefixer('last 2 version')) +# .pipe(concat('all.css')) +# .pipe(gulp.dest('./public/desktop/css')) + + + +# @registerWatcher 'mySass', 'resources/assets/desktop/sass/**/*.scss' + +# @queueTask 'mySass' + + + + + +# # livereload +# elixir.extend 'livereload', -> + +# gulp.task 'livereload', -> + +# if fs.existsSync 'public/build/rev-manifest.json' + +# livereload.reload('something') + + +# @registerWatcher 'livereload', [ +# 'public/build/rev-manifest.json', +# 'resources/views/**/*.*' +# ] + +# @queueTask 'livereload' + + + +# elixir.extend 'myCopy', -> + +# gulp.task 'myCopy', -> + +# if fs.existsSync 'public/build/rev-manifest.json' +# gulp.src([ +# 'bower_components/bootstrap-sass/assets/fonts/**/*', +# 'bower_components/font-awesome/fonts/**/*', +# # 'bower_components/slick.js/slick/fonts/**/*', +# ]) +# .pipe(gulp.dest('public/build/desktop/fonts')) + +# gulp.src([ +# 'resources/assets/desktop/icons/**/*', +# ]) +# .pipe(gulp.dest('public/build/desktop/icons')) + +# gulp.src([ +# 'resources/assets/desktop/images/**/*', +# ]) +# .pipe(gulp.dest('public/build/desktop/images')) + + +# @registerWatcher 'myCopy', [ +# 'public/build/rev-manifest.json' +# ] + +# this.queueTask('myCopy'); + + +# elixir (mix)-> + +# mix.vendorScripts() +# .myScripts() +# .mySass() +# .version(['desktop/js/**/*.js', 'desktop/css/all.css']) +# .myCopy() + + +# # start livereload when running watch task +# if inWatch +# mix.livereload() +# livereload.listen() + + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..d8343ac --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,4 @@ +// Note the new way of requesting CoffeeScript since 1.7.x +require('coffee-script/register'); +// This bootstraps your Gulp's main file +require('./gulpfile.coffee'); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4c0718f --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + Demo jquery center block + + + + + + +
+
1
+
+ + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..e46f1cd --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "jquery-center-inline-block", + "version": "0.0.1", + "description": "A jquery plugin for center inline block element, and last row align left.", + "main": "dist/jquery-center-inline-block.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/filenwind/jquery-center-inline-block.git" + }, + "keywords": [ + "jquery", + "center", + "inline-block" + ], + "author": "filenwind", + "license": "ISC", + "devDependencies": { + "coffee-script": "^1.9.3", + "gulp": "^3.9.0", + "gulp-coffee": "^2.3.1", + "gulp-plumber": "^1.0.1", + "gulp-rename": "^1.2.2", + "gulp-uglify": "^1.2.0" + }, + "dependencies": { + "jquery": "^1.11.3" + } +} diff --git a/src/jquery-center-inline-block.coffee b/src/jquery-center-inline-block.coffee new file mode 100644 index 0000000..02b919d --- /dev/null +++ b/src/jquery-center-inline-block.coffee @@ -0,0 +1,115 @@ +((factory)-> + 'use strict' + + if (typeof define is 'function' and define.amd) + define(['jquery'], ($) -> + factory($, window) + ) + else if (typeof exports isnt 'undefined') + module.exports = factory(require('jquery'), window) + else + factory(jQuery, window) + + +)(($, window)-> + 'use strict' + + pluginName = 'jquery-center-inline-block' + + CenterInlineBlock = (element, options)-> + @init(element, options) + @resize() + return + CenterInlineBlock.prototype.init = (element, options)-> + + @options = $.extend({}, { + wrapper:"
" + }, options) + + @container = $(element) + @window = $(window) + + + @window_width = 0 + @child_width = null + + @appendWrapper() + @initWindowResizeEvent() + + CenterInlineBlock.prototype.appendWrapper = ()-> + @wrapper = $(@options.wrapper) + @container.contents().appendTo(@wrapper) + @container.append(@wrapper) + + + CenterInlineBlock.prototype.initWindowResizeEvent = ()-> + + @resizeID = @window.data("#{pluginName}-resize-id") + if(!@resizeID) + @resizeID = 0 + @resizeID++ + + @window.data("#{pluginName}-resize-id", @resizeID) + + @window.on("resize.#{pluginName}-#{@resizeID}", @onWindowResize.bind(@)) + + CenterInlineBlock.prototype.onWindowResize = ()-> + if(@window_width isnt @window.width()) + @window_width = @window.width() + + clearTimeout(@resizeTimeout) + @resizeTimeout = setTimeout(@resize.bind(@)) + CenterInlineBlock.prototype.resize = ()-> + + if(@container.is(':visible')) + @wrapper.contents().each(()-> + if(@nodeType is 3 and !$.trim(@nodeValue)) + $(@).remove() + ) + + if(@child_width is null) + @child_width = 0 + _this = @ + @wrapper.children().each((i)-> + _this.child_width = $(@).outerWidth(true) + return false + ) + + + if(@child_width > 0) + capacity = Math.floor(@container.width() / @child_width) + if(capacity < 1) + capacity = 1 + + new_width = capacity*@child_width + if(@wrapper.width() isnt new_width) + @wrapper.width(new_width) + + + + CenterInlineBlock.prototype.destroy = ()-> + @unbindWindowResize() + @container.data(pluginName, null) + + CenterInlineBlock.prototype.unbindWindowResize = ()-> + @window.unbind("resize.#{pluginName}-#{@resizeID}") + + Plugin = (option)-> + + @each(()-> + + $this = $(this) + data = $this.data(pluginName) + + if(data) + if(typeof option == 'string') + data[option]() + else if(!/destroy/.test(option)) + options = if typeof option is 'object' then option else {} + $this.data(pluginName, new CenterInlineBlock(this, options)) + + ) + + $.fn.centerInlineBlock = Plugin + +) \ No newline at end of file