diff --git a/scripts/build-js.js b/scripts/build-js.js index b5c9b0bf4..f4570523f 100644 --- a/scripts/build-js.js +++ b/scripts/build-js.js @@ -17,15 +17,17 @@ const rename = require('gulp-rename'); const config = require('./config.js'); const banner = require('./banner.js'); -function es(cb) { +function es(components, cb) { const env = process.env.NODE_ENV || 'development'; - const target = process.env.TARGET || 'universal'; + const target = process.env.TARGET || config.target; rollup({ entry: './src/swiper.js', plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify(env), // or 'production' 'process.env.TARGET': JSON.stringify(target), // or 'production' + '//IMPORT_COMPONENTS': components.map(component => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'), + '//INSTALL_COMPONENTS': components.map(component => `.use(${component.capitalized})`).join('\n '), }), buble(), ], @@ -48,15 +50,17 @@ function es(cb) { if (cb) cb(); }); } -function umd(cb) { +function umd(components, cb) { const env = process.env.NODE_ENV || 'development'; - const target = process.env.TARGET || 'universal'; + const target = process.env.TARGET || config.target; rollup({ entry: './src/swiper.js', plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify(env), // or 'production' 'process.env.TARGET': JSON.stringify(target), // or 'production' + '//IMPORT_COMPONENTS': components.map(component => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'), + '//INSTALL_COMPONENTS': components.map(component => `.use(${component.capitalized})`).join('\n '), }), resolve({ jsnext: true }), buble(), @@ -98,16 +102,30 @@ function umd(cb) { function build(cb) { const env = process.env.NODE_ENV || 'development'; + const components = []; + config.components.forEach((name) => { + const capitalized = name.split('-').map((word) => { + return word.split('').map((char, index) => { + if (index === 0) return char.toUpperCase(); + return char; + }).join(''); + }).join(''); + const jsFilePath = `./src/components/${name}/${name}.js`; + if (fs.existsSync(jsFilePath)) { + components.push({ name, capitalized }); + } + }); + const expectCbs = env === 'development' ? 1 : 2; let cbs = 0; - umd(() => { + umd(components, () => { cbs += 1; if (cbs === expectCbs) cb(); }); if (env === 'production') { - es(() => { + es(components, () => { cbs += 1; if (cbs === expectCbs) cb(); }); diff --git a/scripts/build-less.js b/scripts/build-less.js index ac056a8c0..6d9a203d4 100644 --- a/scripts/build-less.js +++ b/scripts/build-less.js @@ -16,7 +16,28 @@ const banner = require('./banner.js'); function build(cb) { const env = process.env.NODE_ENV || 'development'; + const components = []; + config.components.forEach((name) => { + const lessFilePath = `./src/components/${name}/${name}.less`; + if (fs.existsSync(lessFilePath)) { + components.push(name); + } + }); + + const colors = []; + + Object.keys(config.colors).forEach((key) => { + colors.push(`${key} ${config.colors[key]}`); + }); + gulp.src('./src/swiper.less') + .pipe(modifyFile((content) => { + const newContent = content + .replace('//IMPORT_COMPONENTS', components.map(component => `@import url('./components/${component}/${component}.less');`).join('\n')) + .replace('$themeColor', config.themeColor) + .replace('$colors', colors.join(', ')); + return newContent; + })) .pipe(less()) .on('error', (err) => { if (cb) cb(); diff --git a/scripts/config.js b/scripts/config.js index f053ebf79..26367ed7c 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -1 +1,28 @@ -module.exports = {}; +module.exports = { + components: [ + 'observer', + 'keyboard', + 'mousewheel', + 'navigation', + 'pagination', + 'scrollbar', + 'parallax', + 'zoom', + 'lazy', + 'controller', + 'a11y', + 'history', + 'hash-navigation', + 'autoplay', + 'effect-fade', + 'effect-cube', + 'effect-flip', + 'effect-coverflow', + ], + target: 'universal', + themeColor: '#007aff', + colors: { + white: '#ffffff', + black: '#000000', + }, +}; diff --git a/src/components/navigation/navigation.less b/src/components/navigation/navigation.less index 9408edd34..075b85319 100644 --- a/src/components/navigation/navigation.less +++ b/src/components/navigation/navigation.less @@ -1,4 +1,3 @@ -/* Arrows */ .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; @@ -17,24 +16,24 @@ } } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { - .svg-background(""); + .svg-background(""); left: 10px; right: auto; - &.swiper-button-black { - .svg-background(""); - } - &.swiper-button-white { - .svg-background(""); - } } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { - .svg-background(""); + .svg-background(""); right: 10px; left: auto; - &.swiper-button-black { - .svg-background(""); +} +.navigation-color-loop({ + .swiper-button-prev, .swiper-container-rtl .swiper-button-next { + &.swiper-button-@{navColorName} { + .svg-background(""); + } } - &.swiper-button-white { - .svg-background(""); + .swiper-button-next, .swiper-container-rtl .swiper-button-prev { + &.swiper-button-@{navColorName} { + .svg-background(""); + } } -} +}); diff --git a/src/components/pagination/pagination.less b/src/components/pagination/pagination.less index 03fb2ad2a..ca49b58a4 100644 --- a/src/components/pagination/pagination.less +++ b/src/components/pagination/pagination.less @@ -1,4 +1,3 @@ -/* Pagination Styles */ .swiper-pagination { position: absolute; text-align: center; @@ -56,20 +55,12 @@ .swiper-pagination-clickable & { cursor: pointer; } - .swiper-pagination-white & { - background: #fff; - } } .swiper-pagination-bullet-active { opacity: 1; - background: #007aff; - .swiper-pagination-white & { - background: #fff; - } - .swiper-pagination-black & { - background: #000; - } + background: @themeColor; } + .swiper-container-vertical { > .swiper-pagination-bullets { right: 10px; @@ -110,7 +101,7 @@ background: rgba(0,0,0,0.25); position: absolute; .swiper-pagination-progressbar-fill { - background: #007aff; + background: @themeColor; position: absolute; left: 0; top: 0; @@ -134,15 +125,15 @@ left: 0; top: 0; } - &.swiper-pagination-white { - background: rgba(255,255,255,0.5); - .swiper-pagination-progressbar-fill { - background: #fff; - } +} +.pagination-color-loop({ + .swiper-pagination-@{paginationColorName} .swiper-pagination-bullet-active { + background: @paginationColorValue; } - &.swiper-pagination-black { + .swiper-pagination-progressbar.swiper-pagination-@{paginationColorName} { + background: rgba(red(@paginationColorValue), green(@paginationColorValue), blue(@paginationColorValue), 0.25); .swiper-pagination-progressbar-fill { - background: #000; + background: @paginationColorValue; } } -} +}); diff --git a/src/less/mixins.less b/src/less/mixins.less index 5f7676694..38bcaf21d 100644 --- a/src/less/mixins.less +++ b/src/less/mixins.less @@ -2,3 +2,26 @@ @url: `encodeURIComponent(@{svg})`; background-image: url("data:image/svg+xml;charset=utf-8,@{url}"); } +.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) { + @length: length( @colors ) ; + .looper( 1 ) ; + .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) { + @navPair: extract( @colors, @index ); + @navColorName: extract( @navPair, 1 ) ; + @navColorValue: extract( @navPair, 2 ) ; + @ruleset(); + .looper( @index + 1 ) ; + } +} + +.pagination-color-loop(@ruleset) when (length( @colors ) >= 1) { + @length: length( @colors ) ; + .looper( 1 ) ; + .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) { + @paginationPair: extract( @colors, @index ); + @paginationColorName: extract( @paginationPair, 1 ) ; + @paginationColorValue: extract( @paginationPair, 2 ) ; + @ruleset(); + .looper( @index + 1 ) ; + } +} diff --git a/src/swiper.js b/src/swiper.js index 1ba0a75c7..47a768174 100644 --- a/src/swiper.js +++ b/src/swiper.js @@ -1,57 +1,21 @@ // F7 Class import Swiper from './components/core/core-class'; -// Import Modules +// Core Modules import Device from './modules/device/device'; import Support from './modules/support/support'; import Browser from './modules/browser/browser'; import Resize from './modules/resize/resize'; -import Observer from './components/observer/observer'; -import Keyboard from './components/keyboard/keyboard'; -import Mousewheel from './components/mousewheel/mousewheel'; -import Navigation from './components/navigation/navigation'; -import Pagination from './components/pagination/pagination'; -import Scrollbar from './components/scrollbar/scrollbar'; -import Parallax from './components/parallax/parallax'; -import Zoom from './components/zoom/zoom'; -import Lazy from './components/lazy/lazy'; -import Controller from './components/controller/controller'; -import A11y from './components/a11y/a11y'; -import History from './components/history/history'; -import HashNavigation from './components/hash-navigation/hash-navigation'; -import Autoplay from './components/autoplay/autoplay'; +//IMPORT_COMPONENTS -// Effects -import EffectFade from './components/effect-fade/effect-fade'; -import EffectCube from './components/effect-cube/effect-cube'; -import EffectFlip from './components/effect-flip/effect-flip'; -import EffectCoverflow from './components/effect-coverflow/effect-coverflow'; - -// Install Modules +// Install Modules & Components Swiper + // Core Modules .use(Device) .use(Support) .use(Browser) .use(Resize) - // Install Components - .use(Keyboard) - .use(Mousewheel) - .use(Navigation) - .use(Pagination) - .use(Observer) - .use(Scrollbar) - .use(Parallax) - .use(Zoom) - .use(Lazy) - .use(Controller) - .use(A11y) - .use(History) - .use(HashNavigation) - .use(Autoplay) - .use(EffectFade) - .use(EffectFlip) - .use(EffectCube) - .use(EffectCoverflow); + //INSTALL_COMPONENTS export default Swiper; diff --git a/src/swiper.less b/src/swiper.less index d4c20e628..ba300fc59 100644 --- a/src/swiper.less +++ b/src/swiper.less @@ -1,11 +1,8 @@ @import url('./less/mixins.less'); +@themeColor: $themeColor; +@colors: $colors; + @import url('./components/core/core.less'); -@import url('./components/navigation/navigation.less'); -@import url('./components/pagination/pagination.less'); -@import url('./components/zoom/zoom.less'); -@import url('./components/scrollbar/scrollbar.less'); -@import url('./components/effect-fade/effect-fade.less'); -@import url('./components/effect-coverflow/effect-coverflow.less'); -@import url('./components/effect-flip/effect-flip.less'); -@import url('./components/effect-cube/effect-cube.less'); + +//IMPORT_COMPONENTS