diff --git a/demo/bundle.js b/demo/bundle.js index 213e427..7d0c56a 100644 --- a/demo/bundle.js +++ b/demo/bundle.js @@ -16,7 +16,7 @@ \***********************/ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _lib_csset_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../lib/csset.js */ \"./lib/csset.js\");\n/* harmony import */ var _playground_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./playground.js */ \"./demo/playground.js\");\n/* harmony import */ var _steps_index_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./steps/index.js */ \"./demo/steps/index.js\");\n/* eslint-disable no-undef */\n\n\n\n\n\nwindow.Csset = _lib_csset_js__WEBPACK_IMPORTED_MODULE_0__.Csset;\n\n// Where to put step info\nconst styleArea = document.querySelector('#style');\nconst codeArea = document.querySelector('#code');\n// Control\nconst nextButton = document.querySelector('#next');\n\n// Prepare the playground\n// Size MUST be odd number\nconst playgroundSize = 51;\nconst playground = document.querySelector('#playground');\n(0,_playground_js__WEBPACK_IMPORTED_MODULE_1__.setPlayground)(playground, playgroundSize);\n\nlet index = 0;\n\nnextButton.addEventListener('click', () => {\n if (nextButton.innerText === 'Restart') {\n window.location.reload();\n return;\n }\n\n const step = _steps_index_js__WEBPACK_IMPORTED_MODULE_2__.STEPS[index++];\n\n // Put comment and display snippet\n (0,_steps_index_js__WEBPACK_IMPORTED_MODULE_2__.runStep)(step, codeArea, styleArea);\n Prism.highlightElement(codeArea);\n // Prism.highlightAll();\n\n if (index >= _steps_index_js__WEBPACK_IMPORTED_MODULE_2__.STEPS.length) {\n nextButton.innerText = 'Restart';\n }\n});\n\n\n//# sourceURL=webpack://csset/./demo/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _lib_csset_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../lib/csset.js */ \"./lib/csset.js\");\n/* harmony import */ var _playground_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./playground.js */ \"./demo/playground.js\");\n/* harmony import */ var _steps_index_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./steps/index.js */ \"./demo/steps/index.js\");\n/* eslint-disable no-undef */\n\n\n\n\n\nwindow.Csset = _lib_csset_js__WEBPACK_IMPORTED_MODULE_0__.Csset;\n\n// Where to put step info\nconst styleArea = document.querySelector('#style');\nconst codeArea = document.querySelector('#code');\n// Control\nconst nextButton = document.querySelector('#next');\n\n// Prepare the playground\n// Size MUST be odd number\nconst playgroundSize = 51;\nconst playground = document.querySelector('#playground');\n(0,_playground_js__WEBPACK_IMPORTED_MODULE_1__.setPlayground)(playground, playgroundSize);\n\nlet index = 0;\n\nnextButton.addEventListener('click', () => {\n if (nextButton.innerText === 'Restart') {\n index = 0;\n nextButton.innerText = 'Next';\n }\n\n // Put comment and display snippet\n (0,_steps_index_js__WEBPACK_IMPORTED_MODULE_2__.runStep)(_steps_index_js__WEBPACK_IMPORTED_MODULE_2__.STEPS[index++], codeArea, styleArea);\n\n if (index >= _steps_index_js__WEBPACK_IMPORTED_MODULE_2__.STEPS.length) {\n nextButton.innerText = 'Restart';\n }\n});\n\n// Run for the 1st time\n(0,_steps_index_js__WEBPACK_IMPORTED_MODULE_2__.runStep)(_steps_index_js__WEBPACK_IMPORTED_MODULE_2__.STEPS[index++], codeArea, styleArea);\n\n\n//# sourceURL=webpack://csset/./demo/index.js?"); /***/ }), @@ -46,7 +46,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \******************************/ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ runStep: () => (/* binding */ runStep)\n/* harmony export */ });\n/**\n * @typedef {Object} Step\n * @property {string} comment\n * @property {() => unknown} code\n */\n\n/**\n * @returns {string}\n */\nfunction getRandomColor() {\n const letters = '0123456789ABCDEF';\n let color = '#';\n for (let i = 0; i < 6; i++) {\n color += letters[Math.floor(Math.random() * 16)];\n }\n return color;\n}\n\n/**\n * @param {any} source\n * @returns {boolean}\n */\nfunction isCsset(source) {\n return source?.__proto__?.constructor?.name === 'Csset';\n}\n\n/**\n * @param {Step} step\n * @param {HTMLElement} commentElem\n * @param {HTMLElement} codeElem\n * @param {HTMLElement} styeElem\n */\n// eslint-disable-next-line prettier/prettier\nfunction runStep(step, codeElem, styeElem) {\n // Show code\n const source = step.code.toString();\n const linesOfCode = source.split('\\n').map((line, idx) => {\n return idx > 0 ? line.replace(' ', '') : line;\n });\n // Put comment in code\n linesOfCode.unshift(`// ${step.comment}`);\n codeElem.innerHTML = linesOfCode.join('\\n');\n\n // Change color if returned expression is a Csset\n const evalResult = eval(`(${source})()`);\n const styleText = `${evalResult}{ background-color: ${getRandomColor()}; }`;\n\n if (isCsset(evalResult)) {\n styeElem.innerText = styleText;\n } else {\n styeElem.innerText = '';\n }\n}\n\n\n//# sourceURL=webpack://csset/./demo/steps/runner.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ runStep: () => (/* binding */ runStep)\n/* harmony export */ });\n/**\n * @typedef {Object} Step\n * @property {string[]} comments\n * @property {() => unknown} code\n */\n\n/**\n * @returns {string}\n */\nfunction getRandomColor() {\n const letters = '0123456789ABCDEF';\n let color = '#';\n for (let i = 0; i < 6; i++) {\n color += letters[Math.floor(Math.random() * 16)];\n }\n return color;\n}\n\n/**\n * @param {any} source\n * @returns {boolean}\n */\nfunction isCsset(source) {\n return source?.__proto__?.constructor?.name === 'Csset';\n}\n\n/**\n * @param {Step} step\n * @param {HTMLElement} commentElem\n * @param {HTMLElement} codeElem\n * @param {HTMLElement} styeElem\n */\n// eslint-disable-next-line prettier/prettier\nfunction runStep(step, codeElem, styeElem) {\n // Reset the style element\n styeElem.innerText = '';\n\n // Get comments\n const snippet = step.comments.map((c) => `// ${c}`);\n\n // Add code & execute\n const source = step.code?.toString();\n if (source) {\n const src = source.split('\\n').map((line, idx) => {\n return idx > 0 ? line.replace(' ', '') : line;\n });\n snippet.push(...src);\n\n // Change color if returned expression is a Csset\n const evalResult = eval(`(${source})()`);\n const styleText = `${evalResult}{ background-color: ${getRandomColor()}; }`;\n\n if (isCsset(evalResult)) {\n styeElem.innerText = styleText;\n snippet.push(`\\n// selector: ${evalResult}`);\n }\n // else {\n // styeElem.innerText = '';\n // }\n }\n // Add snipped into code window & highlight\n codeElem.innerHTML = snippet.join('\\n');\n // eslint-disable-next-line no-undef\n Prism.highlightElement(codeElem);\n}\n\n\n//# sourceURL=webpack://csset/./demo/steps/runner.js?"); /***/ }), @@ -56,7 +56,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \**************************************/ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_ADVANCED: () => (/* binding */ STEPS_ADVANCED)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_ADVANCED = [\n {\n comment: 'You can combine union and instersections',\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const quadrantFour = new Csset('.quadrant-four');\n const circle = new Csset('.circle');\n\n return quadrantOne.union(quadrantFour).intersection(circle);\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-advanced.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_ADVANCED: () => (/* binding */ STEPS_ADVANCED)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_ADVANCED = [\n {\n // eslint-disable-next-line prettier/prettier\n comments: [\n 'Now that we saw the basics we can go for more advanced',\n 'examples.',\n ],\n },\n {\n comments: ['You can combine union and instersections'],\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const quadrantFour = new Csset('.quadrant-four');\n const circle = new Csset('.circle');\n\n return quadrantOne.union(quadrantFour).intersection(circle);\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-advanced.js?"); /***/ }), @@ -66,7 +66,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \***********************************/ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_BEGIN: () => (/* binding */ STEPS_BEGIN)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_BEGIN = [\n {\n comment: 'These are the cells with class quadrant-one',\n code: () => {\n return new Csset('.quadrant-one');\n },\n },\n {\n comment: 'These are the cells with class quadrant-two',\n code: () => {\n return new Csset('.quadrant-two');\n },\n },\n {\n comment: 'These are the cells with class quadrant-three',\n code: () => {\n return new Csset('.quadrant-three');\n },\n },\n {\n comment: 'These are the cells with class quadrant-four',\n code: () => {\n return new Csset('.quadrant-four');\n },\n },\n {\n comment: 'These are the cells with class circle',\n code: () => {\n return new Csset('.circle');\n },\n },\n {\n comment: 'These are the cells with class diamond',\n code: () => {\n return new Csset('.diamond');\n },\n },\n {\n comment: 'Cells also contain a d-row attribute with the row number they have',\n code: () => {\n return new Csset('[d-row=5]');\n },\n },\n {\n comment: 'And contain a d-col attribute with the column number they have',\n code: () => {\n return new Csset('[d-col=50]');\n },\n },\n {\n comment: 'Each cell of the grid has its number in a d-sum attribute',\n code: () => {\n return new Csset('[d-sum=50]');\n },\n },\n {\n comment: 'Add the cell has marked if its odd number',\n code: () => {\n return new Csset('[d-odd=true]');\n },\n },\n {\n comment: 'Or even number',\n code: () => {\n return new Csset('[d-even=true]');\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-begin.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_BEGIN: () => (/* binding */ STEPS_BEGIN)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_BEGIN = [\n {\n comments: [\n 'Welcome to Csset demo page!',\n '',\n 'The following snippets will show you how to use the',\n 'library and the table on the left will display a visual',\n 'representation of the results of the different set',\n 'operations.',\n ],\n },\n {\n comments: ['These are the cells with class quadrant-one'],\n code: () => {\n return new Csset('.quadrant-one');\n },\n },\n {\n comments: ['These are the cells with class quadrant-two'],\n code: () => {\n return new Csset('.quadrant-two');\n },\n },\n {\n comments: ['These are the cells with class quadrant-three'],\n code: () => {\n return new Csset('.quadrant-three');\n },\n },\n {\n comments: ['These are the cells with class quadrant-four'],\n code: () => {\n return new Csset('.quadrant-four');\n },\n },\n {\n comments: ['These are the cells with class circle'],\n code: () => {\n return new Csset('.circle');\n },\n },\n {\n comments: ['These are the cells with class diamond'],\n code: () => {\n return new Csset('.diamond');\n },\n },\n {\n comments: ['Cells also contain a d-row attribute with the', 'row number they have'],\n code: () => {\n return new Csset('[d-row=5]');\n },\n },\n {\n comments: ['And contain a d-col attribute with the', 'column number they have'],\n code: () => {\n return new Csset('[d-col=50]');\n },\n },\n {\n comments: ['Each cell of the grid has its number in a d-sum attribute'],\n code: () => {\n return new Csset('[d-sum=50]');\n },\n },\n {\n comments: ['Add the cell has marked if its odd number'],\n code: () => {\n return new Csset('[d-odd=true]');\n },\n },\n {\n comments: ['Or even number'],\n code: () => {\n return new Csset('[d-even=true]');\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-begin.js?"); /***/ }), @@ -76,7 +76,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \******************************************/ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_INTERSECTION: () => (/* binding */ STEPS_INTERSECTION)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_INTERSECTION = [\n {\n comment: 'Intersection returns a set which all elements are from both sets',\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const diamond = new Csset('.diamond');\n\n return quadrantOne.intersection(diamond);\n },\n },\n {\n comment: 'This is another example of intersection',\n code: () => {\n const quadrantOne = new Csset('.quadrant-four');\n const diamond = new Csset('.circle');\n\n return quadrantOne.intersection(diamond);\n },\n },\n {\n comment: 'Like unions you can calculate intersection for more than two sets',\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const even = new Csset('[d-even=true]');\n const diamond = new Csset('.diamond');\n\n return quadrantOne.intersection(even).intersection(diamond);\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-intersection.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_INTERSECTION: () => (/* binding */ STEPS_INTERSECTION)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_INTERSECTION = [\n {\n // eslint-disable-next-line prettier/prettier\n comments: [\n 'Time to move to another common operation in sets which is',\n 'the intersection operation.',\n ],\n },\n {\n comments: ['Intersection returns a set which all elements are', 'from both sets'],\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const diamond = new Csset('.diamond');\n\n return quadrantOne.intersection(diamond);\n },\n },\n {\n comments: ['This is another example of intersection'],\n code: () => {\n const quadrantOne = new Csset('.quadrant-four');\n const diamond = new Csset('.circle');\n\n return quadrantOne.intersection(diamond);\n },\n },\n {\n comments: ['Like unions you can calculate intersection for', 'more than two sets'],\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const even = new Csset('[d-even=true]');\n const diamond = new Csset('.diamond');\n\n return quadrantOne.intersection(even).intersection(diamond);\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-intersection.js?"); /***/ }), @@ -86,7 +86,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \***********************************/ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_UNION: () => (/* binding */ STEPS_UNION)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_UNION = [\n {\n comment: 'Union is a straight forward method used to join sets',\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const quadrantTwo = new Csset('.quadrant-two');\n\n return quadrantOne.union(quadrantTwo);\n },\n },\n {\n comment: 'You can do an union of many sets',\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const quadrantTwo = new Csset('.quadrant-two');\n const circle = new Csset('.circle');\n\n return quadrantOne.union(quadrantTwo).union(circle);\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-union.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ STEPS_UNION: () => (/* binding */ STEPS_UNION)\n/* harmony export */ });\n/* eslint-disable no-undef */\n\n/** @type {import('./runner').Step[]} */\nconst STEPS_UNION = [\n {\n // eslint-disable-next-line prettier/prettier\n comments: [\n 'Now that we are familiar with the playground let\\'s see',\n 'the union operation.',\n ],\n },\n {\n comments: ['Union is a straight forward method used to join sets'],\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const quadrantTwo = new Csset('.quadrant-two');\n\n return quadrantOne.union(quadrantTwo);\n },\n },\n {\n comments: ['You can do an union of many sets'],\n code: () => {\n const quadrantOne = new Csset('.quadrant-one');\n const quadrantTwo = new Csset('.quadrant-two');\n const circle = new Csset('.circle');\n\n return quadrantOne.union(quadrantTwo).union(circle);\n },\n },\n];\n\n\n//# sourceURL=webpack://csset/./demo/steps/steps-union.js?"); /***/ }), diff --git a/demo/index.html b/demo/index.html index 2d0885e..da4da18 100644 --- a/demo/index.html +++ b/demo/index.html @@ -66,14 +66,9 @@

Perform set algebra with CSS selectors

-
-
+
@@ -88,6 +83,10 @@

Perform set algebra with CSS selectors

+
+
+
+