diff --git a/LICENSE b/LICENSE index e70ae39..54b30bb 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License -Copyright (c) 2014 Karan Batra-Daitch http://bardo.io +Copyright (c) 2015 Devmark https://github.com/devmark/angular-slick-carousel Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index ccaf874..2c7995b 100644 --- a/README.md +++ b/README.md @@ -37,8 +37,7 @@ as either a `
` attribute or a `` element. + settings="slickConfig" ng-if="numberLoaded"> ``` @@ -61,14 +60,13 @@ $scope.slickConfig = { } }; ``` -`data`: object for ng-repeat data, discussed [below](#data) in detail ### Method ### 1. All the functions in the plugin are exposed through a control attribute. 2. To utilize this architecture, and have two-way data-binding, define an empty control handle on scope: - ```js +```js $scope.slickConfig = { method: {} } @@ -87,18 +85,18 @@ as shown in the example. ``` ### Slide data ### -For change slide content, you have to set `data` attribute AND `ng-if` +For change slide content, you have to set `ng-if` to destroy and init it - controller: ```js $scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}]; $scope.numberLoaded = true; $scope.numberUpdate = function(){ - $scope.numberLoaded = false; //disable slick + $scope.numberLoaded = false; // disable slick //number update - $scope.numberLoaded = true; //enable slick + $scope.numberLoaded = true; // enable slick }; ``` - html: @@ -107,7 +105,7 @@ For change slide content, you have to set `data` attribute AND `ng-if`

{{ i.label }}

- +
diff --git a/bower.json b/bower.json index 3145863..f7e0bf0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-slick-carousel", - "version": "3.0.11", + "version": "3.1.0", "homepage": "https://github.com/devmark/angular-slick-carousel", "authors": [ "DevMark " diff --git a/karma.conf.js b/karma.conf.js index 2e5ef16..7746515 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,74 +1,48 @@ -'use strict'; +module.exports = function (config) { + config.set({ -var path = require('path'); -var conf = require('./gulp/conf'); + // Base path, that will be used to resolve files and exclude + basePath: '', -var _ = require('lodash'); -var wiredep = require('wiredep'); + // Frameworks to use + frameworks: ['jasmine'], -function listFiles() { - var wiredepOptions = _.extend({}, conf.wiredep, { - dependencies: true, - devDependencies: true - }); - - return wiredep(wiredepOptions).js - .concat([ - path.join(conf.paths.src, '/app/**/*.module.js'), - path.join(conf.paths.src, '/app/**/*.js'), - path.join(conf.paths.src, '/**/*.spec.js'), - path.join(conf.paths.src, '/**/*.mock.js'), - path.join(conf.paths.src, '/**/*.html') - ]); -} - -module.exports = function(config) { - - var configuration = { - files: listFiles(), - - singleRun: true, + // List of files / patterns to load in the browser + files: [ + 'bower_components/jquery/dist/jquery.js', + 'bower_components/angular/angular.js', + 'bower_components/angular-mocks/angular-mocks.js', - autoWatch: false, - - frameworks: ['jasmine', 'angular-filesort'], + 'bower_components/slick-carousel/slick/slick.js', + 'dist/angular-slick.js', + 'test/**/*.spec.js' + ], - angularFilesort: { - whitelist: [path.join(conf.paths.src, '/**/!(*.html|*.spec|*.mock).js')] - }, + // List of files to exclude + exclude: [], - ngHtml2JsPreprocessor: { - stripPrefix: 'src/', - moduleName: 'angularSlickCarousel' - }, + // Web server port + port: 9876, - browsers : ['PhantomJS'], + // Level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, - plugins : [ - 'karma-phantomjs-launcher', - 'karma-angular-filesort', - 'karma-jasmine', - 'karma-ng-html2js-preprocessor' - ], + // Enable / disable watching file and executing tests whenever any file changes + autoWatch: true, - preprocessors: { - 'src/**/*.html': ['ng-html2js'] - } - }; + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'], - // This block is needed to execute Chrome on Travis - // If you ever plan to use Chrome and Travis, you can keep it - // If not, you can safely remove it - // https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076 - if(configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) { - configuration.customLaunchers = { - 'chrome-travis-ci': { - base: 'Chrome', - flags: ['--no-sandbox'] - } - }; - configuration.browsers = ['chrome-travis-ci']; - } - - config.set(configuration); + // Continuous Integration mode + // if true, it capture browsers, run tests and exit + singleRun: false + }); }; diff --git a/package.json b/package.json index 6ac4d98..964f150 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-slick-carousel", - "version": "3.0.11", + "version": "3.1.0", "main": "dist/angular-slick.js", "repository": { "type": "git", @@ -15,7 +15,7 @@ "gulp-autoprefixer": "~2.3.1", "gulp-angular-templatecache": "~1.6.0", "del": "~1.2.0", - "lodash": "~3.9.3", + "lodash": "~3.10.1", "gulp-csso": "~1.0.0", "gulp-filter": "~2.0.2", "gulp-flatten": "~0.0.4", @@ -36,14 +36,14 @@ "gulp-sourcemaps": "~1.5.2", "gulp-less": "~3.0.3", "gulp-angular-filesort": "~1.1.1", - "main-bower-files": "~2.8.0", + "main-bower-files": "~2.9.0", "merge-stream": "~0.1.7", "jshint-stylish": "~2.0.0", "wiredep": "~2.2.2", - "karma": "~0.12.36", + "karma": "~0.13.10", "karma-jasmine": "~0.3.5", + "karma-chrome-launcher": "^0.2.0", "karma-phantomjs-launcher": "~0.2.0", - "karma-angular-filesort": "~0.1.0", "karma-ng-html2js-preprocessor": "~0.1.2", "concat-stream": "~1.5.0", "require-dir": "~0.3.0", diff --git a/test/main.spec.js b/test/main.spec.js index 53bb96b..6d4b2a6 100644 --- a/test/main.spec.js +++ b/test/main.spec.js @@ -1,5 +1,88 @@ 'use strict'; describe('angular slick testing', function () { + var scope, $rootScope, $compile, $timeout, $injector; + + beforeEach(module('slickCarousel')); + + beforeEach(inject(function (_$rootScope_, _$compile_, _$timeout_, _$injector_) { + $rootScope = _$rootScope_; + scope = $rootScope.$new(); + $compile = _$compile_; + $timeout = _$timeout_; + $injector = _$injector_; + + scope.date = [ + {id: 1, name: 'Mark', email: 'adam@email.com'}, + {id: 2, name: 'Ken', email: 'adam@email.com'}, + {id: 3, name: 'Oren', email: 'adam@email.com'}, + {id: 4, name: 'Kenny', email: 'adam@email.com'} + ]; + })); + + // DSL (domain-specific language) + function compileTemplate(template) { + var el = $compile(angular.element(template))(scope); + scope.$digest(); + return el; + } + + it('should init', function () { + var element = compileTemplate('\ + \ +
1
\ +
2
\ + '); + scope.$digest(); + expect(element.hasClass('slick-initialized')).toBe(true); + }); + + it('should init if ng-if is true', function () { + scope.slickConfigLoaded = true; + var element = compileTemplate('\ + \ +
1
\ +
2
\ + '); + scope.$digest(); + expect(element.next().hasClass('slick-initialized')).toBe(true); + }); + + it('should re-init if change ng-if', function () { + scope.slickConfigLoaded = true; + var element = compileTemplate('\ + \ +
\ +
i
\ + '); + scope.$digest(); + expect(element.next().hasClass('slick-initialized')).toBe(true); + }); + + it('should re-init if config change', function () { + scope.isDestroy = false; + scope.slickConfig = { + autoplay: true, + event: { + destroy: function (event, slick) { + scope.isDestroy = true; + } + } + }; + var element = compileTemplate('\ + \ +
\ +
i
\ + '); + scope.$digest(); + + expect(element.hasClass('slick-initialized')).toBe(true); + + scope.slickConfig.autoplay = false; + scope.$digest(); + expect(scope.isDestroy).toBe(true); + expect(element.hasClass('slick-initialized')).toBe(true); + + }); });