Skip to content

Commit

Permalink
settings.template and _ifPopup
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sphinxxxx
Sphinxxxx committed Feb 27, 2018
1 parent c69629f commit 467fc9e
Show file tree
Hide file tree
Showing 8 changed files with 637 additions and 365 deletions.
16 changes: 16 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,22 @@
font-size: 7px;
}
}


/* //DEBUG
.picker_hue {
background: none;
}
.picker_hue::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
outline: 1px solid silver;
}
*/

</style>
</head>

Expand Down
71 changes: 41 additions & 30 deletions dist/vanilla-picker.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* vanilla-picker v2.0.0-alpha.7
* vanilla-picker v2.0.0-alpha.8
* https://github.com/Sphinxxxx/vanilla-picker
*
* Copyright 2017-2018 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
Expand Down Expand Up @@ -548,6 +548,8 @@ var Picker = function () {
createClass(Picker, [{
key: 'setOptions',
value: function setOptions(options) {
var _this = this;

if (!options) {
return;
}
Expand All @@ -566,14 +568,8 @@ var Picker = function () {
if (options instanceof HTMLElement) {
settings.parent = options;
} else {
var skipKeys = [];

if (options.popup instanceof Object) {
transfer(options.popup, settings.popup);
skipKeys.push('popup');
}

transfer(options, settings, skipKeys);
transfer(options, settings );
}

if (options.onChange) {
Expand All @@ -588,9 +584,9 @@ var Picker = function () {
this.setColor(col);
}

if (!settings.popup) {
this.show();
}
this._ifPopup(null, function () {
return _this.show();
});
}


Expand Down Expand Up @@ -619,7 +615,9 @@ var Picker = function () {
value: function show() {
var parent = this.settings.parent;

parent.style.pointerEvents = 'none';
this._ifPopup(function () {
return parent.style.pointerEvents = 'none';
});

if (this.domElement) {
this.domElement.style.display = '';
Expand All @@ -629,8 +627,7 @@ var Picker = function () {
return;
}

var html = '<div class="picker_wrapper">\n <div class="picker_arrow"></div>\n <div class="picker_hue picker_slider">\n <div class="picker_selector"></div>\n </div>\n <div class="picker_sl">\n <div class="picker_selector"></div>\n </div>\n <div class="picker_alpha picker_slider">\n <div class="picker_selector"></div>\n </div>\n <div class="picker_sample"></div>\n <button class="picker_done">Ok</div>\n</div>';

var html = this.settings.template || '<div class="picker_wrapper"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_sample"></div><button class="picker_done"></button></div>';
var wrapper = parseHTML(html);

this.domElement = wrapper;
Expand All @@ -640,12 +637,12 @@ var Picker = function () {
this._domSample = wrapper.querySelector('.picker_sample');
this._domOkay = wrapper.querySelector('.picker_done');

if (this.settings.popup) {
wrapper.classList.add('popup');
}
if (!this.settings.alpha) {
wrapper.classList.add('no_alpha');
}
this._ifPopup(function () {
return wrapper.classList.add('popup');
});

this._setPosition();

Expand All @@ -661,17 +658,21 @@ var Picker = function () {
}, {
key: 'hide',
value: function hide() {
var _this2 = this;

if (this.domElement) {
this.domElement.style.display = 'none';
}
this.settings.parent.style.pointerEvents = '';
this._ifPopup(function () {
return _this2.settings.parent.style.pointerEvents = '';
});
}


}, {
key: '_bindEvents',
value: function _bindEvents() {
var _this = this;
var _this3 = this;

var that = this;

Expand Down Expand Up @@ -707,27 +708,27 @@ var Picker = function () {
}));


if (this.settings.popup) {
this.domElement.addEventListener('mousedown', function (e) {
this._ifPopup(function () {
_this3.domElement.addEventListener('mousedown', function (e) {
e.stopPropagation();
e.preventDefault();
});

window.addEventListener('mousedown', function (e) {
that.hide();
});
}
});

this._domOkay.onclick = function (e) {
if (_this.settings.popup) {
_this3._ifPopup(function () {
e.preventDefault();
e.stopPropagation();

_this.hide();
}
_this3.hide();
});

if (_this.onDone) {
_this.onDone(_this.colour);
if (_this3.onDone) {
_this3.onDone(_this3.colour);
}
};
}
Expand All @@ -744,8 +745,7 @@ var Picker = function () {
parent.appendChild(elm);
}

var popup = this.settings.popup;
if (popup) {
this._ifPopup(function (popup) {
if (getComputedStyle(parent).position === 'static') {
parent.style.position = 'relative';
}
Expand All @@ -760,7 +760,7 @@ var Picker = function () {
}
});
elm.classList.add(cssClass);
}
});
}


Expand Down Expand Up @@ -834,6 +834,17 @@ var Picker = function () {

this._domSample.style.color = cssHSLA;
}
}, {
key: '_ifPopup',
value: function _ifPopup(actionIf, actionElse) {
if (this.settings.popup) {
actionIf && actionIf(this.settings.popup);
} else {
actionElse && actionElse();
}
}


}]);
return Picker;
}();
Expand Down
4 changes: 2 additions & 2 deletions dist/vanilla-picker.min.js
View file

Large diffs are not rendered by default.

77 changes: 46 additions & 31 deletions gulpfile.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,16 @@

import gulp from 'gulp';
import file from 'gulp-file';
import sass from 'gulp-sass';
import sass from 'node-sass';
import pug from 'pug';
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';
//If the code imports modules from /node_modules
import resolve from 'rollup-plugin-node-resolve';

//Cleanup & minification step:
import replace from 'gulp-replace';
import strip from 'gulp-strip-comments';
import strip from 'gulp-strip-comments';
import header from 'gulp-header';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
Expand Down Expand Up @@ -70,35 +71,47 @@ gulp.task('build', function() {
})
.then(gen => {

//Before we create the destination file, prepare the CSS which we'll paste into the JS code:
//https://github.com/dlmanning/gulp-sass#basic-usage
gulp.src(pkg.module.replace('.js', '.scss'))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))

//https://stackoverflow.com/questions/41523743/can-i-convert-a-gulp-stream-into-a-string
.on('data', function(cssStream) {
const css = cssStream.contents.toString();
//console.log(css);

//Insert the CSS
file(outFile + '.js', gen.code, { src: true })
.pipe(strip())
.pipe(replace('## PLACEHOLDER-CSS ##', css.replace(/'/g, "\\'").trim()))

//Write un-minified:
.pipe(header(myBanner, { pkg : pkg }))
.pipe(gulp.dest(outFolder))

//Minify:
//https://codehangar.io/concatenate-and-minify-javascript-with-gulp/
//https://stackoverflow.com/questions/32656647/gulp-bundle-then-minify
//(https://stackoverflow.com/questions/40609393/gulp-rename-illegal-operation)
.pipe(rename({ extname: '.min.js' }))
.pipe(uglify())
// //Before we create the destination file, prepare the CSS which we'll paste into the JS code:
// //https://github.com/dlmanning/gulp-sass#basic-usage
// gulp.src(pkg.module.replace('.js', '.scss'))
// .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
//
// //https://stackoverflow.com/questions/41523743/can-i-convert-a-gulp-stream-into-a-string
// .on('data', function(cssStream) {
// const css = cssStream.contents.toString();
// //console.log(css);

//Easier to use the normal node packages to read the HTML and CSS we'll inline into the JS:
const sassed = sass.renderSync({
file: pkg.module.replace('.js', '.scss'),
outputStyle: 'compressed',
});
const css = sassed.css.toString(); //(Buffer.toString())
//console.log('CSS:', css);

.pipe(header(myBanner, { pkg: pkg }))
.pipe(gulp.dest(outFolder));
});
const html = pug.renderFile(pkg.module.replace('.js', '.pug'));
//console.log('HTML:', html);

file(outFile + '.js', gen.code, { src: true })
.pipe(strip())
.pipe(replace( '## PLACEHOLDER-CSS ##', css.replace(/'/g, "\\'").trim() ))
.pipe(replace( '## PLACEHOLDER-HTML ##', html ))

//Write un-minified:
.pipe(header(myBanner, { pkg : pkg }))
.pipe(gulp.dest(outFolder))

//Minify:
//https://codehangar.io/concatenate-and-minify-javascript-with-gulp/
//https://stackoverflow.com/questions/32656647/gulp-bundle-then-minify
//(https://stackoverflow.com/questions/40609393/gulp-rename-illegal-operation)
.pipe(rename({ extname: '.min.js' }))
.pipe(uglify())

.pipe(header(myBanner, { pkg: pkg }))
.pipe(gulp.dest(outFolder));

// });
});
});

Expand All @@ -108,7 +121,9 @@ gulp.task('build', function() {
gulp.task('watch', function(){
console.log('** Listening for file changes...');

var watcher = gulp.watch('src/**/*.*', gulp.parallel('build'));
//Watch everything in src/, plus package.json and gulpfile.babel.js in the root folder:
//https://stackoverflow.com/questions/27645103/how-to-gulp-watch-multiple-files
const watcher = gulp.watch(['src/**/*.*', '*.js*'], gulp.parallel('build'));

watcher.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
Expand Down
Loading

0 comments on commit 467fc9e

Please sign in to comment.