From 2b7c49336d4604109ef4f93c43723415be458a2b Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Thu, 22 Jul 2021 12:03:42 +0200 Subject: [PATCH] Add build tools --- .editorconfig | 24 +++ .gitignore | 7 +- .jshintrc | 24 +++ .stylelintrc | 9 + Gruntfile.js | 303 ++++++++++++++++++++++++++++ package.json | 64 ++++++ src/js/customizer.js | 19 ++ src/js/frontend.js | 20 ++ {assets/css => src/scss}/style.scss | 0 storefront-hamburger-menu.php | 4 +- 10 files changed, 469 insertions(+), 5 deletions(-) create mode 100644 .editorconfig create mode 100644 .jshintrc create mode 100644 .stylelintrc create mode 100644 Gruntfile.js create mode 100644 package.json create mode 100644 src/js/customizer.js create mode 100644 src/js/frontend.js rename {assets/css => src/scss}/style.scss (100%) diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c961598 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,24 @@ +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org + +# WordPress Coding Standards +# https://make.wordpress.org/core/handbook/coding-standards/ + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +indent_style = tab + +[*.yml] +indent_style = space +indent_size = 2 + +[*.md] +trim_trailing_whitespace = false + +[*.txt] +end_of_line = crlf diff --git a/.gitignore b/.gitignore index fea397d..1ee0f44 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .sass-cache -.codekit-cache -config.codekit -.DS_Store \ No newline at end of file +.DS_Store +node_modules/ +/storefront-hamburger-menu +storefront-hamburger-menu.zip diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..60d5582 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,24 @@ +{ + "boss": true, + "curly": true, + "eqeqeq": true, + "eqnull": true, + "esversion": 7, + "expr": true, + "immed": true, + "noarg": true, + "quotmark": "single", + "trailingcomma": false, + "undef": true, + "unused": true, + + "browser": true, + + "globals": { + "_": false, + "Backbone": false, + "carousel_parameters": true, + "jQuery": true, + "wp": true + } +} diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..2bfd039 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,9 @@ +{ + "extends": [ + "stylelint-config-wordpress" + ], + "plugins": ["stylelint-a11y"], + "rules": { + "selector-class-pattern": null + } +} diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..95a492a --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,303 @@ +/* jshint node:true */ +const glob = require('glob'); +const sass = require('node-sass'); + +// variables +const sourceFolderRelPath = 'src'; +const destFolderRelPath = 'assets'; + +// add js files here if necessary +const sourceJsFiles = [ + `${sourceFolderRelPath}/**/*.js`, +]; + +// methods +const getFilePaths = (pathArr) => { + let filePaths = []; + for (let path of pathArr) { + const files = glob.sync(path); + filePaths = filePaths.concat(files); + } + return filePaths; +}; + +const getFilesPathObjects = (pathArr) => { + const filesPathsObjs = []; + for (let path of pathArr) { + const src = path; + const dest = path.replace(sourceFolderRelPath, destFolderRelPath); + filesPathsObjs.push({src, dest}); + } + return filesPathsObjs; +}; + +const jsFilesPaths = getFilePaths(sourceJsFiles); +const jsFilesPathsObjs = getFilesPathObjects(jsFilesPaths); + +/** + * Returns an object with destinations as key and sources as value + * @param filesPathsObjs + * @returns {} + */ +const buildFileConfiguration = (filesPathsObjs) => { + let fileConfig = {}; + for (let pathObj of filesPathsObjs) { + fileConfig[pathObj.dest] = pathObj.src; + } + return fileConfig; +}; + +module.exports = function( grunt ) { + 'use strict'; + + grunt.initConfig({ + + // JavaScript linting with JSHint. + jshint: { + options: { + jshintrc: '.jshintrc' + }, + all: jsFilesPaths.concat('Gruntfile.js') + }, + + browserify: { + dist: { + files: buildFileConfiguration(jsFilesPathsObjs) + }, + options: { + transform: [['babelify', { + presets: [ + '@wordpress/babel-preset-default', + ] + }]], + browserifyOptions: { + debug: true + } + } + }, + + // Minify .js files. + uglify: { + options: { + preserveComments: 'some', + sourceMap: true + }, + main: { + files: [{ + expand: true, + src: jsFilesPathsObjs.map(file => file.dest), + dest: './', + ext: '.min.js', + extDot: 'last', + }] + } + }, + + // Compile all .scss files. + sass: { + + dist: { + options: { + require: 'susy', + implementation: sass, + sourceMap: true, + includePaths: ['node_modules/susy/sass'].concat( require( 'node-bourbon' ).includePaths ) + }, + files: [ + { + expand: true, + cwd: `${sourceFolderRelPath}/scss`, + src: ['**/*.scss'], + dest: `${destFolderRelPath}/css`, + ext: '.css', + extDot: 'last', + }, + ], + }, + + }, + + postcss: { + options: { + map: true, + processors: [ + require('autoprefixer') + ] + }, + dist: { + files: [ + { + expand: true, + cwd: `${destFolderRelPath}/css`, + src: ['**/*.css'], + dest: `${destFolderRelPath}/css`, + ext: '.css', + extDot: 'last', + }, + ] + } + }, + + cssmin: { + target: { + files: [{ + expand: true, + cwd: `${destFolderRelPath}/css`, + src: ['**/*.css', '!**/*.min.css'], + dest: `${destFolderRelPath}/css`, + ext: '.min.css', + extDot: 'last', + }] + } + }, + + // Watch changes for assets. + watch: { + css: { + files: [ + `${sourceFolderRelPath}/scss/**/*.scss` + ], + tasks: [ + 'css' + ] + }, + js: { + files: jsFilesPaths, + tasks: ['js'] + } + }, + + // Generate POT files. + makepot: { + options: { + type: 'wp-plugin', + domainPath: 'languages', + potHeaders: { + 'report-msgid-bugs-to': 'https://wordpress.org/support/plugin/storefront-hamburger-menu/', + 'language-team': 'LANGUAGE ' + } + }, + frontend: { + options: { + potFilename: 'storefront-hamburger-menu.pot', + exclude: [ + 'node_modules/.*' + ] + } + } + }, + + // Check textdomain errors. + checktextdomain: { + options:{ + text_domain: 'storefront-hamburger-menu', + keywords: [ + '__:1,2d', + '_e:1,2d', + '_x:1,2c,3d', + 'esc_html__:1,2d', + 'esc_html_e:1,2d', + 'esc_html_x:1,2c,3d', + 'esc_attr__:1,2d', + 'esc_attr_e:1,2d', + 'esc_attr_x:1,2c,3d', + '_ex:1,2c,3d', + '_n:1,2,4d', + '_nx:1,2,4c,5d', + '_n_noop:1,2,3d', + '_nx_noop:1,2,3c,4d' + ] + }, + files: { + src: [ + '**/*.php', // Include all files + '!node_modules/**' // Exclude node_modules/ + ], + expand: true + } + }, + + // Sass linting with Stylelint. + stylelint: { + options: { + configFile: '.stylelintrc' + }, + all: [ + 'src/**/*.scss' + ] + }, + + compress: { + zip: { + options: { + archive: './storefront-hamburger-menu.zip', + mode: 'zip' + }, + files: [{ + src: [ + '**', + '.htaccess', + '!.*/**', + '!*.md', + '!.DS_Store', + '!composer.json', + '!composer.lock', + '!Gruntfile.js', + '!node_modules/**', + '!npm-debug.log', + '!package.json', + '!package-lock.json', + '!phpcs.xml', + '!storefront-hamburger-menu.zip', + '!storefront-hamburger-menu/**', + '!vendor/**', + '!src/**' + ] + }] + } + }, + + }); + + // Load NPM tasks to be used here + grunt.loadNpmTasks( 'grunt-browserify' ); + grunt.loadNpmTasks( 'grunt-checktextdomain' ); + grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); + grunt.loadNpmTasks( 'grunt-contrib-compress' ); + grunt.loadNpmTasks( 'grunt-contrib-jshint' ); + grunt.loadNpmTasks( 'grunt-contrib-uglify' ); + grunt.loadNpmTasks( 'grunt-contrib-watch' ); + grunt.loadNpmTasks( 'grunt-postcss' ); + grunt.loadNpmTasks( 'grunt-sass' ); + grunt.loadNpmTasks( 'grunt-stylelint' ); + grunt.loadNpmTasks( 'grunt-wp-i18n' ); + + // Register tasks + grunt.registerTask( 'js', [ + 'jshint', + 'browserify:dist', + 'uglify', + ]); + + grunt.registerTask( 'css', [ + 'sass', + 'postcss', + 'cssmin', + ]); + + grunt.registerTask( 'i18n', [ + 'checktextdomain', + 'makepot', + ]); + + grunt.registerTask( 'build', [ + 'js', + 'css', + ]); + + // Compress task is part of default to work with woorelease + grunt.registerTask( 'default', [ + 'build', + 'compress', + ]); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..a074984 --- /dev/null +++ b/package.json @@ -0,0 +1,64 @@ +{ + "name": "storefront-hamburger-menu", + "title": "Storefront Hamburger Menu", + "version": "1.2.2", + "author": "WooCommerce", + "license": "GPL-2.0-or-later", + "description": "Storefront Hamburger Menu turns the default handheld navigation into an off-screen sidebar menu with a hamburger toggle.", + "keywords": [ + "WordPress", + "Plugin", + "Storefront" + ], + "homepage": "https://github.com/woocommerce/storefront-hamburger-menu#readme", + "repository": { + "type": "git", + "url": "git+https://github.com/woocommerce/storefront-hamburger-menu.git" + }, + "bugs": { + "url": "https://github.com/woocommerce/storefront-hamburger-menu/issues" + }, + "main": "Gruntfile.js", + "devDependencies": { + "@babel/core": "^7.14.8", + "@wordpress/babel-preset-default": "^6.3.0", + "@wordpress/browserslist-config": "^4.1.0", + "autoprefixer": "^9.8.6", + "babel-cli": "^6.26.0", + "babelify": "^10.0.0", + "glob": "^7.1.6", + "grunt": "^1.4.1", + "grunt-browserify": "^6.0.0", + "grunt-checktextdomain": "^1.0.1", + "grunt-contrib-compress": "^2.0.0", + "grunt-contrib-cssmin": "^4.0.0", + "grunt-contrib-jshint": "^3.0.0", + "grunt-contrib-uglify": "^5.0.1", + "grunt-contrib-watch": "^1.1.0", + "grunt-postcss": "^0.9.0", + "grunt-sass": "^3.1.0", + "grunt-stylelint": "^0.16.0", + "grunt-wp-i18n": "^1.0.3", + "node-bourbon": "^4.2.8", + "node-sass": "^6.0.1", + "stylelint": "^13.13.1", + "stylelint-a11y": "^1.2.3", + "stylelint-config-wordpress": "^17.0.0", + "susy": "^3.0.7" + }, + "peerDependencies": { + "postcss": "^8.3.6" + }, + "browserslist": [ + "extends @wordpress/browserslist-config" + ], + "scripts": { + "build": "grunt", + "build:dev": "grunt build", + "start": "grunt watch", + "watch": "grunt watch", + "js": "grunt js", + "css": "grunt css", + "makepot": "grunt i18n" + } +} diff --git a/src/js/customizer.js b/src/js/customizer.js new file mode 100644 index 0000000..e565a92 --- /dev/null +++ b/src/js/customizer.js @@ -0,0 +1,19 @@ +/** + * Theme Customizer enhancements for a better user experience. + * + * Contains handlers to make Theme Customizer preview reload changes asynchronously. + */ + + ( function( $ ) { + wp.customize( 'storefront_header_link_color', function( value ) { + value.bind( function( to ) { + $( '.menu-toggle' ).css( 'color', to ); + } ); + } ); + + wp.customize( 'storefront_header_background_color', function( value ) { + value.bind( function( to ) { + $( '.main-navigation div.menu, .main-navigation .handheld-navigation' ).css( 'background-color', to ); + } ); + } ); +} )( jQuery ); diff --git a/src/js/frontend.js b/src/js/frontend.js new file mode 100644 index 0000000..6af2803 --- /dev/null +++ b/src/js/frontend.js @@ -0,0 +1,20 @@ +( function( $ ) { + $( function() { + $( '.main-navigation .handheld-navigation, .main-navigation div.menu' ).prepend( '' + shm_i18n.close + '' ); /* jshint ignore:line */ + $( '.shm-close' ).on( 'click', function() { + $( '.menu-toggle' ).trigger( 'click' ); + } ); + + $( document ).click( function( event ) { + var menuContainer = $( '.main-navigation' ); + + if ( $( '.main-navigation' ).hasClass( 'toggled' ) ) { + if ( ! menuContainer.is( event.target ) && 0 === menuContainer.has( event.target ).length ) { + event.preventDefault(); + event.stopPropagation(); + $( '.menu-toggle' ).trigger( 'click' ); + } + } + } ); + } ); +} )( jQuery ); diff --git a/assets/css/style.scss b/src/scss/style.scss similarity index 100% rename from assets/css/style.scss rename to src/scss/style.scss diff --git a/storefront-hamburger-menu.php b/storefront-hamburger-menu.php index ae14a38..7c71355 100644 --- a/storefront-hamburger-menu.php +++ b/storefront-hamburger-menu.php @@ -117,7 +117,7 @@ public function shm_load_plugin_textdomain() { * @since 1.0.0 */ public function __clone() { - _doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?' ), '1.0.0' ); + _doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?', 'storefront-hamburger-menu' ), '1.0.0' ); } /** @@ -126,7 +126,7 @@ public function __clone() { * @since 1.0.0 */ public function __wakeup() { - _doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?' ), '1.0.0' ); + _doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?', 'storefront-hamburger-menu' ), '1.0.0' ); } /**