From f215cbb9571091da84ed0cc78430ac09e594df8e Mon Sep 17 00:00:00 2001 From: Clemens Wolff Date: Wed, 26 Feb 2020 19:53:42 -0500 Subject: [PATCH] Make styles overridable (#36) * Make styles overridable * Move styles to CSS file * Add CSS linter * Update chromedriver to version used in CI --- .release-it.json | 2 ++ .stylelintrc.js | 5 +++++ README.md | 2 +- index.html | 1 + mathquill4quill.css | 30 ++++++++++++++++++++++++++++++ mathquill4quill.js | 23 ++++------------------- package.json | 13 ++++++++++--- 7 files changed, 53 insertions(+), 23 deletions(-) create mode 100644 .stylelintrc.js create mode 100644 mathquill4quill.css diff --git a/.release-it.json b/.release-it.json index 9f22a8d..d82a42a 100644 --- a/.release-it.json +++ b/.release-it.json @@ -6,6 +6,8 @@ "github": { "release": true, "assets": [ + "mathquill4quill.css", + "build/mathquill4quill.min.css", "build/mathquill4quill.js", "build/mathquill4quill.min.js" ], diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000..50eae2a --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,5 @@ +/* eslint-env node */ + +module.exports = { + extends: "stylelint-config-standard" +}; diff --git a/README.md b/README.md index 943e510..6705fe8 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ This module adds support for rich math authoring to the [Quill](http://quilljs.c ### Plain Javascript -This module depends on [MathQuill](http://docs.mathquill.com/en/latest/Getting_Started/), [Quill](https://quilljs.com/docs/quickstart/) and [KaTeX](https://github.com/Khan/KaTeX#usage), so you'll need to add references to their JS and CSS files in addition to adding a reference to `mathquill4quill.js`. Official builds as well as minified assets can be found on the [releases page](https://github.com/c-w/mathquill4quill/releases). +This module depends on [MathQuill](http://docs.mathquill.com/en/latest/Getting_Started/), [Quill](https://quilljs.com/docs/quickstart/) and [KaTeX](https://github.com/Khan/KaTeX#usage), so you'll need to add references to their JS and CSS files in addition to adding a reference to `mathquill4quill.js` and `mathquill4quill.css`. Official builds as well as minified assets can be found on the [releases page](https://github.com/c-w/mathquill4quill/releases). Next, initialize your Quill object and load the formula module: diff --git a/index.html b/index.html index a7d05a8..65f14d9 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ + diff --git a/mathquill4quill.css b/mathquill4quill.css new file mode 100644 index 0000000..4ac7372 --- /dev/null +++ b/mathquill4quill.css @@ -0,0 +1,30 @@ +.mathquill4quill-mathquill-input { + border: 1px solid #ccc; + font-size: 13px; + min-height: 26px; + margin: 0; + padding: 3px 5px; + width: 170px; +} + +.mathquill4quill-operator-button { + margin: 5px; + width: 50px; + height: 50px; + background-color: #fff; + border-color: #000; + border-radius: 7px; + border-width: 2px; +} + +.mathquill4quill-operator-container { + display: flex; + align-items: center; +} + +.mathquill4quill-latex-input { + visibility: hidden !important; + padding: 0 !important; + border: 0 !important; + width: 0 !important; +} diff --git a/mathquill4quill.js b/mathquill4quill.js index b9352c8..8e0ea92 100644 --- a/mathquill4quill.js +++ b/mathquill4quill.js @@ -90,19 +90,11 @@ window.mathquill4quill = function(dependencies) { let latexInputStyle = null; function applyMathquillInputStyles(mqInput) { - mqInput.style.border = "1px solid #ccc"; - mqInput.style.fontSize = "13px"; - mqInput.style.minHeight = "26px"; - mqInput.style.margin = "0px"; - mqInput.style.padding = "3px 5px"; - mqInput.style.width = "170px"; + mqInput.setAttribute("class", "mathquill4quill-mathquill-input"); } function applyLatexInputStyles(latexInput) { - latexInput.setAttribute( - "style", - "visibility:hidden;padding:0px;border:0px;width:0px;" - ); + latexInput.setAttribute("class", "mathquill4quill-latex-input"); } function syncMathquillToQuill(latexInput, saveButton) { @@ -178,18 +170,11 @@ window.mathquill4quill = function(dependencies) { let container = null; function applyOperatorButtonStyles(button) { - button.style.margin = "5px"; - button.style.width = "50px"; - button.style.height = "50px"; - button.style.backgroundColor = "#ffffff"; - button.style.borderColor = "#000000"; - button.style.borderRadius = "7px"; - button.style.borderWidth = "2px"; + button.setAttribute("class", "mathquill4quill-operator-button"); } function applyOperatorContainerStyles(container) { - container.style.display = "flex"; - container.style.alignItems = "center"; + container.setAttribute("class", "mathquill4quill-operator-container"); } function createOperatorButton(element, mqField) { diff --git a/package.json b/package.json index 733c156..9a425b0 100644 --- a/package.json +++ b/package.json @@ -5,20 +5,23 @@ "release": "release-it", "start": "reload --port 8080 --browser --dir .", "lint.js": "eslint --ext js .", + "lint.css": "stylelint \"*.css\"", "lint.prettier": "prettier --check \"**/*.js\"", - "lint": "run-s lint.js lint.prettier", + "lint": "run-s lint.js lint.css lint.prettier", "prebuild": "mkdirp build", "build.babel": "babel mathquill4quill.js > build/mathquill4quill.js", "build.uglify": "uglifyjs --compress --mangle -- build/mathquill4quill.js > build/mathquill4quill.min.js", - "build": "run-s build.babel build.uglify", + "build.csso": "csso --input mathquill4quill.css --output build/mathquill4quill.min.css", + "build": "run-s build.babel build.uglify build.csso", "test": "concurrently --kill-others --success first \"serve -n -l 8000\" \"nightwatch -e chrome tests\"" }, "devDependencies": { "@babel/cli": "^7.5.5", "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", - "chromedriver": "^78.0.0", + "chromedriver": "^80.0.0", "concurrently": "^4.1.1", + "csso-cli": "^3.0.0", "eslint": "^5.16.0", "mkdirp": "^0.5.1", "nightwatch": "^1.1.12", @@ -27,6 +30,8 @@ "release-it": "^12.4.3", "reload": "^3.0.1", "serve": "^11.0.2", + "stylelint": "^13.2.0", + "stylelint-config-standard": "^20.0.0", "uglify-js": "^3.6.0" }, "repository": { @@ -35,7 +40,9 @@ }, "version": "1.0.2", "files": [ + "build/mathquill4quill.min.css", "build/mathquill4quill.min.js", + "mathquill4quill.css", "mathquill4quill.js" ], "publishConfig": {