dropdowning 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.prettierignore +3 -0
- package/.prettierrc +1 -0
- package/eslint.config.mjs +9 -0
- package/package.json +37 -0
- package/src/dropdownLogic.js +10 -0
- package/src/index.js +4 -0
- package/src/styles.css +9 -0
- package/src/template.html +37 -0
- package/webpack.config.js +29 -0
package/.prettierignore
ADDED
package/.prettierrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import js from "@eslint/js";
|
|
2
|
+
import globals from "globals";
|
|
3
|
+
import { defineConfig } from "eslint/config";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
export default defineConfig([
|
|
7
|
+
{ files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"] },
|
|
8
|
+
{ files: ["**/*.{js,mjs,cjs}"], languageOptions: { globals: globals.browser } },
|
|
9
|
+
]);
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dropdowning",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"main": "dropdownLogic.js",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
7
|
+
"build": "webpack",
|
|
8
|
+
"dev": "webpack serve",
|
|
9
|
+
"deploy": "git subtree push --prefix dist origin gh-pages",
|
|
10
|
+
"lint": "npx eslint .",
|
|
11
|
+
"format": "npx prettier --write ."
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/oBanton26/dropdown-menu"
|
|
16
|
+
},
|
|
17
|
+
"keywords": [],
|
|
18
|
+
"author": "oBanton26",
|
|
19
|
+
"license": "ISC",
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/oBanton26/dropdown-menu/issues"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://github.com/oBanton26/dropdown-menu#readme",
|
|
24
|
+
"description": "Module that add dropdowning() function to your project. Making drop-down menus from divs with the dropdown-button class (given you have a .hidden style)",
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"@eslint/js": "^9.30.1",
|
|
27
|
+
"css-loader": "^7.1.2",
|
|
28
|
+
"eslint": "^9.30.1",
|
|
29
|
+
"globals": "^16.3.0",
|
|
30
|
+
"html-webpack-plugin": "^5.6.3",
|
|
31
|
+
"prettier": "3.6.2",
|
|
32
|
+
"style-loader": "^4.0.0",
|
|
33
|
+
"webpack": "^5.99.9",
|
|
34
|
+
"webpack-cli": "^6.0.1",
|
|
35
|
+
"webpack-dev-server": "^5.2.2"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
function toggleHidden(e) {
|
|
2
|
+
e.target.nextElementSibling.classList.toggle("hidden");
|
|
3
|
+
};
|
|
4
|
+
|
|
5
|
+
export function dropdowning () {
|
|
6
|
+
const dropdownBtnList = document.querySelectorAll(".dropdown-button");
|
|
7
|
+
for (let dropdownBtn of dropdownBtnList){
|
|
8
|
+
dropdownBtn.addEventListener("click", toggleHidden);
|
|
9
|
+
};
|
|
10
|
+
};
|
package/src/index.js
ADDED
package/src/styles.css
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Drop-down menu project</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<button class="dropdown-button">Hamburger</button>
|
|
10
|
+
<div class="hidden">
|
|
11
|
+
<div>Bun</div>
|
|
12
|
+
<div>Onions</div>
|
|
13
|
+
<div>Steak</div>
|
|
14
|
+
<div>Tomato</div>
|
|
15
|
+
<div>Salad</div>
|
|
16
|
+
<div>Bun</div>
|
|
17
|
+
</div>
|
|
18
|
+
<button class="dropdown-button">Hamburger</button>
|
|
19
|
+
<div class="hidden">
|
|
20
|
+
<div>Bun</div>
|
|
21
|
+
<div>Onions</div>
|
|
22
|
+
<div>Steak</div>
|
|
23
|
+
<div>Tomato</div>
|
|
24
|
+
<div>Salad</div>
|
|
25
|
+
<div>Bun</div>
|
|
26
|
+
</div>
|
|
27
|
+
<button class="dropdown-button">Hamburger</button>
|
|
28
|
+
<div class="hidden">
|
|
29
|
+
<div>Bun</div>
|
|
30
|
+
<div>Onions</div>
|
|
31
|
+
<div>Steak</div>
|
|
32
|
+
<div>Tomato</div>
|
|
33
|
+
<div>Salad</div>
|
|
34
|
+
<div>Bun</div>
|
|
35
|
+
</div>
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
const path = require("path");
|
|
2
|
+
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
mode: "development",
|
|
6
|
+
entry: "./src/index.js",
|
|
7
|
+
output: {
|
|
8
|
+
filename: "main.js",
|
|
9
|
+
path: path.resolve(__dirname, "dist"),
|
|
10
|
+
clean: true,
|
|
11
|
+
},
|
|
12
|
+
devtool: "eval-source-map",
|
|
13
|
+
devServer: {
|
|
14
|
+
watchFiles: ["./src/template.html"],
|
|
15
|
+
},
|
|
16
|
+
plugins: [
|
|
17
|
+
new HtmlWebpackPlugin({
|
|
18
|
+
template: "./src/template.html",
|
|
19
|
+
}),
|
|
20
|
+
],
|
|
21
|
+
module: {
|
|
22
|
+
rules: [
|
|
23
|
+
{
|
|
24
|
+
test: /\.css$/i,
|
|
25
|
+
use: ["style-loader", "css-loader"],
|
|
26
|
+
},
|
|
27
|
+
],
|
|
28
|
+
},
|
|
29
|
+
};
|