diff --git a/js/custom.js b/js/custom.js
new file mode 100644
index 000000000..613fdd0f1
--- /dev/null
+++ b/js/custom.js
@@ -0,0 +1,107 @@
+'use strict';
+(function () {
+ var selectedModules = {};
+ var showSubmit = true;
+ var showDownload = false;
+ var showReset = false;
+ var buildUrl;
+
+ var toggleClass = function (el, class_) {
+ if(el.hasClass(class_)){
+ el.removeClass(class_)
+ }
+ else {
+ el.addClass(class_)
+ }
+ }
+
+ var pkgClickHandler = function (evt) {
+ evt.preventDefault();
+ var el = $(evt.target)
+ var name = el.attr('data-package')
+ if(selectedModules[name]) {
+ selectedModules[name] = undefined
+ if(_.pairs(selectedModules).length === 0) {
+ showReset = false
+ }
+ } else {
+ var css = el.attr('data-css')
+ selectedModules[name] = css
+ showReset = true
+ }
+ updateView()
+ }
+
+ var submitClickHandler = function (evt) {
+ var file = _.reduce(selectedModules, function (file, module) {
+ file += module
+ return file
+ }, '')
+
+ buildUrl = URL.createObjectURL(new Blob([file], {type: 'text/css'}))
+ showDownload = true;
+ showSubmit = false;
+ updateView()
+ }
+
+ var resetClickHandler = function (evt) {
+ selectedModules = {}
+ showSubmit = true
+ showDownload = false
+ showReset = false
+ updateView()
+ }
+
+ var applyConditionalClass = function (el, condition, class_) {
+ if((condition && !el.hasClass(class_)) ||
+ (!condition && el.hasClass(class_))) {
+ toggleClass(el, class_)
+ }
+ }
+
+ var updateView = function() {
+ var pkgs = $('.pkg')
+ var download = $('.download')
+ var submit = $('.submit')
+ var reset = $('.reset')
+
+ var numModules = _.pairs(selectedModules).length
+ if(numModules === 0) {
+ pkgs.each(function(p) {
+ var pkg = $(p)
+ pkg.removeClass('blue')
+ })
+ submit.text('Select Modules')
+ submit.attr('disabled', true)
+ } else {
+ pkgs.each(function(p) {
+ var pkg = $(p)
+ applyConditionalClass(pkg, selectedModules[pkg.attr('data-package')], 'blue');
+ })
+ submit.text('Compile Selected Modules')
+ submit.removeAttr('disabled')
+ }
+
+ applyConditionalClass(submit, showSubmit, 'db')
+ applyConditionalClass(submit, !showSubmit, 'dn')
+
+ applyConditionalClass(download, showDownload, 'dib')
+ applyConditionalClass(download, !showDownload, 'dn')
+
+ applyConditionalClass(reset, showReset, 'db')
+ applyConditionalClass(reset, !showReset, 'dn')
+
+ if(showDownload) {
+ download.attr('href', buildUrl)
+ }
+ }
+
+ $('.reset').on('click', resetClickHandler)
+
+ $('.pkg').each(function(v) {
+ $(v).on('click', pkgClickHandler)
+ })
+
+ $('.submit').on('click', submitClickHandler)
+
+})()
diff --git a/package.json b/package.json
index e28b399c4..d012877e8 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,10 @@
"name": "lachlan campbell",
"url": "http://lachlanjc.me",
"email": "lachlan.campbell@icloud.com"
+ },
+ {
+ "name": "anthony bullard",
+ "email": "anthony.bullard@gmail.com"
}
]
}
diff --git a/src/home-build.js b/src/home-and-custom-build.js
similarity index 65%
rename from src/home-build.js
rename to src/home-and-custom-build.js
index 0c314a81d..cfcb9dec9 100644
--- a/src/home-build.js
+++ b/src/home-and-custom-build.js
@@ -5,36 +5,43 @@ var camelize = require('camelize')
var cssstats = require('cssstats')
var tachyonsModules = require('tachyons-modules')
-var pkgs = []
-var modulesCount = 0
module.exports = function () {
+ var homePagePkgs = []
+ var customBuildPkgs = []
+ var modulesCount = 0
tachyonsModules().then(function (moduleList) {
// TODO: Missing tachyons-skins
moduleList = moduleList
- moduleCount = moduleList.length
moduleList.forEach(function (module) {
var pkg = require(module.name + '/package.json')
var css = fs.readFileSync('node_modules/' + module.name + '/css/' + module.name + '.min.css', 'utf8')
var stats = cssstats(css)
var size = filesize(stats.gzipSize)
- pkgs.push({
+ homePagePkgs.push({
pkg: pkg,
stats: stats,
size: size
})
+
+ customBuildPkgs.push({
+ name: pkg.name,
+ version: pkg.version,
+ size: size,
+ css: css
+ })
})
- return renderHomePage(pkgs)
+ return render(homePagePkgs, customBuildPkgs, moduleList.length)
}).catch(function (e) {
- console.log('Home Page Build Failed:')
+ console.log('Rendering Failed:')
console.log(e)
throw e
})
}
-function renderHomePage (modules) {
+function render (indexModules, customModules, modulesCount) {
var tachyons = require('../package.json')
var css = fs.readFileSync('./css/tachyons.css', 'utf8')
@@ -47,18 +54,29 @@ function renderHomePage (modules) {
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
+ var custom = fs.readFileSync('./src/templates/custom.html', 'utf8')
var tpl = _.template(template)
- var html = tpl({
+ var index = tpl({
size: size,
version: tachyons.version,
modulesCount: modulesCount,
siteFooter: siteFooter,
siteHeader: siteHeader,
head: head,
- modules: modules
+ modules: indexModules
+ })
+
+ var custom_tpl = _.template(custom)
+ var custom_build = custom_tpl({
+ siteFooter: siteFooter,
+ siteHeader: siteHeader,
+ head: head,
+ modules: customModules
})
- fs.writeFileSync('./index.html', html)
+
+ fs.writeFileSync('./index.html', index)
+ fs.writeFileSync('./custom/index.html', custom_build)
console.log(size)
}
diff --git a/src/templates/custom.html b/src/templates/custom.html
new file mode 100644
index 000000000..17b4e8e34
--- /dev/null
+++ b/src/templates/custom.html
@@ -0,0 +1,69 @@
+
+
+
+
+ TACHYONS - Customizer
+
+
+ <%= head %>
+
+
+
+ <%= siteHeader %>
+
+
+
+
+
Tachyons Customizer
+
+ Select what you need. Leave the rest.
+
+
+
+
+
+
+ <%= siteFooter %>
+
+
+
+
+
+
+
diff --git a/src/templates/header.html b/src/templates/header.html
index a0673c22a..3ce33cb06 100644
--- a/src/templates/header.html
+++ b/src/templates/header.html
@@ -16,6 +16,10 @@
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
Components
+
+ Customizer
+
GitHub
diff --git a/src/templates/index.html b/src/templates/index.html
index f90ac8877..89b0410e4 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -165,6 +165,8 @@
needs of your product. It's just css. It isn't precious.
Don't be afraid to change: class names, media queries,
breakpoints, or values.
+ Start with a custom build.