Removed extra <progress> for populating lower fill on range inputs

This commit is contained in:
Sam Potts
2017-10-18 12:43:10 +11:00
parent 4392abfc49
commit 36a84c5c2d
8 changed files with 342 additions and 382 deletions

View File

@ -1,110 +1,88 @@
// ==========================================================================
// Gulp build script
// ==========================================================================
/* global require, __dirname,Buffer */
/* jshint -W079 */
/* beautify ignore:start */
var fs = require("fs"),
path = require("path"),
gulp = require("gulp"),
gutil = require("gulp-util"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
less = require("gulp-less"),
sass = require("gulp-sass"),
cleanCSS = require("gulp-clean-css"),
run = require("run-sequence"),
prefix = require("gulp-autoprefixer"),
svgstore = require("gulp-svgstore"),
svgmin = require("gulp-svgmin"),
rename = require("gulp-rename"),
s3 = require("gulp-s3"),
replace = require("gulp-replace"),
open = require("gulp-open"),
size = require("gulp-size"),
through = require("through2");
/* global require, __dirname */
/* eslint no-console: "off" */
var root = __dirname,
paths = {
var fs = require('fs');
var path = require('path');
var gulp = require('gulp');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var run = require('run-sequence');
var prefix = require('gulp-autoprefixer');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var rename = require('gulp-rename');
var s3 = require('gulp-s3');
var replace = require('gulp-replace');
var open = require('gulp-open');
var size = require('gulp-size');
var root = __dirname;
var paths = {
plyr: {
// Source paths
src: {
less: path.join(root, "src/less/**/*"),
scss: path.join(root, "src/scss/**/*"),
js: path.join(root, "src/js/**/*"),
sprite: path.join(root, "src/sprite/*.svg")
less: path.join(root, 'src/less/**/*'),
scss: path.join(root, 'src/scss/**/*'),
js: path.join(root, 'src/js/**/*'),
sprite: path.join(root, 'src/sprite/*.svg'),
},
// Output paths
output: path.join(root, "dist/")
output: path.join(root, 'dist/'),
},
demo: {
// Source paths
src: {
less: path.join(root, "demo/src/less/**/*"),
js: path.join(root, "demo/src/js/**/*"),
sprite: path.join(root, "demo/src/sprite/**/*")
less: path.join(root, 'demo/src/less/**/*'),
js: path.join(root, 'demo/src/js/**/*'),
sprite: path.join(root, 'demo/src/sprite/**/*'),
},
// Output paths
output: path.join(root, "demo/dist/"),
output: path.join(root, 'demo/dist/'),
// Demo
root: path.join(root, "demo/")
root: path.join(root, 'demo/'),
},
upload: [path.join(root, "dist/**"), path.join(root, "demo/dist/**")]
},
upload: [path.join(root, 'dist/**'), path.join(root, 'demo/dist/**')],
};
// Task arrays
tasks = {
less: [],
scss: [],
js: [],
sprite: []
},
var tasks = {
less: [],
scss: [],
js: [],
sprite: [],
};
// Fetch bundles from JSON
bundles = loadJSON(path.join(root, "bundles.json")),
package = loadJSON(path.join(root, "package.json"));
var bundles = loadJSON(path.join(root, 'bundles.json'));
var package = loadJSON(path.join(root, 'package.json'));
// Load json
function loadJSON(path) {
try {
return JSON.parse(fs.readFileSync(path));
}
catch(err) {
} catch (err) {
return {};
}
}
// Create a file from a string
// http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp
function createFile(filename, string) {
var src = require('stream').Readable({
objectMode: true
});
src._read = function () {
this.push(new gutil.File({
cwd: "",
base: "",
path: filename,
contents: new Buffer(string),
// stats also required for some functions
// https://nodejs.org/api/fs.html#fs_class_fs_stats
stat: {
size: string.length
}
}));
this.push(null);
}
return src
}
var build = {
js: function (files, bundle) {
js: function(files, bundle) {
for (var key in files) {
(function(key) {
var name = "js-" + key;
var name = 'js-' + key;
tasks.js.push(name);
gulp.task(name, function () {
gulp.task(name, function() {
return gulp
.src(bundles[bundle].js[key])
.pipe(concat(key))
@ -116,17 +94,17 @@ var build = {
},
less: function(files, bundle) {
for (var key in files) {
(function (key) {
var name = "less-" + key;
(function(key) {
var name = 'less-' + key;
tasks.less.push(name);
gulp.task(name, function () {
gulp.task(name, function() {
return gulp
.src(bundles[bundle].less[key])
.pipe(less())
.on("error", gutil.log)
.on('error', gutil.log)
.pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: false }))
.pipe(prefix(['last 2 versions'], { cascade: false }))
.pipe(cleanCSS())
.pipe(gulp.dest(paths[bundle].output));
});
@ -135,17 +113,17 @@ var build = {
},
scss: function(files, bundle) {
for (var key in files) {
(function (key) {
var name = "scss-" + key;
(function(key) {
var name = 'scss-' + key;
tasks.scss.push(name);
gulp.task(name, function () {
gulp.task(name, function() {
return gulp
.src(bundles[bundle].scss[key])
.pipe(sass())
.on("error", gutil.log)
.on('error', gutil.log)
.pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: false }))
.pipe(prefix(['last 2 versions'], { cascade: false }))
.pipe(cleanCSS())
.pipe(gulp.dest(paths[bundle].output));
});
@ -153,48 +131,52 @@ var build = {
}
},
sprite: function(bundle) {
var name = "sprite-" + bundle;
var name = 'sprite-' + bundle;
tasks.sprite.push(name);
// Process Icons
gulp.task(name, function () {
gulp.task(name, function() {
return gulp
.src(paths[bundle].src.sprite)
.pipe(svgmin({
plugins: [{
removeDesc: true
}]
}))
.pipe(
svgmin({
plugins: [
{
removeDesc: true,
},
],
})
)
.pipe(svgstore())
.pipe(rename({ basename: bundle }))
.pipe(gulp.dest(paths[bundle].output));
});
}
},
};
// Plyr core files
build.js(bundles.plyr.js, "plyr");
build.less(bundles.plyr.less, "plyr");
build.scss(bundles.plyr.scss, "plyr");
build.sprite("plyr");
build.js(bundles.plyr.js, 'plyr');
build.less(bundles.plyr.less, 'plyr');
build.scss(bundles.plyr.scss, 'plyr');
build.sprite('plyr');
// Demo files
build.less(bundles.demo.less, "demo");
build.js(bundles.demo.js, "demo");
build.sprite("demo");
build.less(bundles.demo.less, 'demo');
build.js(bundles.demo.js, 'demo');
build.sprite('demo');
// Build all JS
gulp.task("js", function(){
gulp.task('js', function() {
run(tasks.js);
});
// Build SCSS (for testing, default is LESS)
gulp.task("scss", function(){
gulp.task('scss', function() {
run(tasks.scss);
});
// Watch for file changes
gulp.task("watch", function () {
gulp.task('watch', function() {
// Plyr core
gulp.watch(paths.plyr.src.js, tasks.js);
gulp.watch(paths.plyr.src.less, tasks.less);
@ -207,90 +189,100 @@ gulp.task("watch", function () {
});
// Default gulp task
gulp.task("default", function(){
run(tasks.js, tasks.less, tasks.sprite, "watch");
gulp.task('default', function() {
run(tasks.js, tasks.less, tasks.sprite, 'watch');
});
// Publish a version to CDN and demo
// --------------------------------------------
// Some options
var aws = loadJSON(path.join(root, "aws.json")),
version = package.version,
maxAge = 31536000, // seconds 1 year
options = {
var aws = loadJSON(path.join(root, 'aws.json'));
var version = package.version;
var maxAge = 31536000; // 1 year
var options = {
cdn: {
headers: {
"Cache-Control": "max-age=" + maxAge,
"Vary": "Accept-Encoding"
}
'Cache-Control': 'max-age=' + maxAge,
Vary: 'Accept-Encoding',
},
},
demo: {
headers: {
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
"Vary": "Accept-Encoding"
}
'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
Vary: 'Accept-Encoding',
},
},
symlinks: function(version, filename) {
return {
headers: {
// http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
"x-amz-website-redirect-location": "/" + version + "/" + filename,
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
}
}
}
'x-amz-website-redirect-location': '/' + version + '/' + filename,
'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
},
};
},
};
// If aws is setup
if("cdn" in aws) {
var regex = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
cdnpath = new RegExp(aws.cdn.domain + "\/" + regex, "gi"),
semver = new RegExp("v" + regex, "gi"),
localPath = new RegExp("(\.\.\/)?dist", "gi"),
versionPath = "https://" + aws.cdn.domain + "/" + version;
if ('cdn' in aws) {
var regex =
'(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*).(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?';
var cdnpath = new RegExp(aws.cdn.domain + '/' + regex, 'gi');
var semver = new RegExp('v' + regex, 'gi');
var localPath = new RegExp('(../)?dist', 'gi');
var versionPath = 'https://' + aws.cdn.domain + '/' + version;
}
// Publish version to CDN bucket
gulp.task("cdn", function () {
console.log("Uploading " + version + " to " + aws.cdn.domain + "...");
gulp.task('cdn', function() {
console.log('Uploading ' + version + ' to ' + aws.cdn.domain + '...');
// Upload to CDN
return gulp.src(paths.upload)
.pipe(size({
showFiles: true,
gzip: true
}))
.pipe(rename(function (path) {
path.dirname = path.dirname.replace(".", version);
}))
return gulp
.src(paths.upload)
.pipe(
size({
showFiles: true,
gzip: true,
})
)
.pipe(
rename(function(path) {
path.dirname = path.dirname.replace('.', version);
})
)
.pipe(replace(localPath, versionPath))
.pipe(s3(aws.cdn, options.cdn));
});
// Publish to demo bucket
gulp.task("demo", function () {
console.log("Uploading " + version + " demo to " + aws.demo.domain + "...");
gulp.task('demo', function() {
console.log('Uploading ' + version + ' demo to ' + aws.demo.domain + '...');
// Replace versioned files in readme.md
gulp.src([root + "/readme.md"])
.pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
gulp
.src([root + '/readme.md'])
.pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
.pipe(gulp.dest(root));
// Replace versioned files in plyr.js
gulp.src(path.join(root, "src/js/plyr.js"))
.pipe(replace(semver, "v" + version))
.pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
.pipe(gulp.dest(path.join(root, "src/js/")));
gulp
.src(path.join(root, 'src/js/plyr.js'))
.pipe(replace(semver, 'v' + version))
.pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
.pipe(gulp.dest(path.join(root, 'src/js/')));
// Replace local file paths with remote paths in demo HTML
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
gulp.src([paths.demo.root + "*.html"])
gulp
.src([paths.demo.root + '*.html'])
.pipe(replace(localPath, versionPath))
.pipe(s3(aws.demo, options.demo));
// Upload error.html to cdn (as well as demo site)
return gulp.src([paths.demo.root + "error.html"])
return gulp
.src([paths.demo.root + 'error.html'])
.pipe(replace(localPath, versionPath))
.pipe(s3(aws.cdn, options.demo));
});
@ -319,21 +311,20 @@ gulp.task("demo", function () {
});*/
// Open the demo site to check it's sweet
gulp.task("open", function () {
console.log("Opening " + aws.demo.domain + "...");
gulp.task('open', function() {
console.log('Opening ' + aws.demo.domain + '...');
// A file must be specified or gulp will skip the task
// Doesn't matter which file since we set the URL above
// Weird, I know...
return gulp.src([paths.demo.root + "index.html"])
.pipe(open("", {
url: "http://" + aws.demo.domain
}));
return gulp.src([paths.demo.root + 'index.html']).pipe(
open('', {
url: 'http://' + aws.demo.domain,
})
);
});
// Do everything
gulp.task("publish", function () {
run(tasks.js, tasks.less, tasks.sprite, "cdn", "demo");
gulp.task('publish', function() {
run(tasks.js, tasks.less, tasks.sprite, 'cdn', 'demo');
});
/* beautify ignore:end */