Ogoun
5 months ago
parent
708729b3f0
commit
62dd21a4b7
@ -1 +1 @@
|
||||
9dd3a16a8dacdbe5f2cc466ad40a08504afd3b209bf5aa3244617367acdb74bb
|
||||
5d627d5604365b2a4254a699545c17a9cb8aa8618ee125b742c4fb1f29d8de02
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,12 @@
|
||||
# Vanilla JS Project
|
||||
Vesion 1.0
|
||||
|
||||
## To run chrome for localhost:
|
||||
`
|
||||
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=C:\Users\User\chromeTemp
|
||||
`
|
||||
|
||||
## To run project for [localhost](http://localhost:3001/login.html):
|
||||
`
|
||||
npm start
|
||||
`
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
@ -0,0 +1,112 @@
|
||||
import { waitForElement } from "../../requests/index.js";
|
||||
import { getMenu } from "../../constants/index.js";
|
||||
export default class MenuComponent {
|
||||
element;
|
||||
constructor({
|
||||
isBlocked = false,
|
||||
hasReadLater = false,
|
||||
authors = [],
|
||||
bookid = null,
|
||||
article,
|
||||
}) {
|
||||
this.isBlocked = isBlocked;
|
||||
this.hasReadLater = hasReadLater;
|
||||
this.authors = authors;
|
||||
this.bookid = bookid;
|
||||
this.article = article;
|
||||
this.isOpened = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
get template() {
|
||||
return `
|
||||
<nav class="main-book__menu main-book__menu_closed" data-menu></nav>`;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.initEventListeners();
|
||||
}
|
||||
|
||||
initEventListeners() {
|
||||
const menuListener = this.article.querySelector(".main-book__menu");
|
||||
|
||||
menuListener.addEventListener("click", (event) => {
|
||||
const isAction = event.target.closest("[data-action]");
|
||||
if (!!isAction) {
|
||||
const id = isAction.dataset.action;
|
||||
this.makeAction({ id });
|
||||
} else {
|
||||
this.openMenu();
|
||||
}
|
||||
});
|
||||
document.addEventListener("menu-outside-click", () => this.closeMenu());
|
||||
}
|
||||
|
||||
get actions() {
|
||||
return getMenu({
|
||||
isBlocked: this.isBlocked,
|
||||
hasReadLater: this.hasReadLater,
|
||||
});
|
||||
}
|
||||
|
||||
getMenuBody() {
|
||||
return this.actions
|
||||
.map(({ label, id }) => {
|
||||
return `
|
||||
<li class="main-book__action second-text" id="main-book__action" data-action=${id}>
|
||||
${label}
|
||||
</li>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
this.element.classList.remove("main-book__menu_closed");
|
||||
|
||||
const ulElement = document.createElement("ul");
|
||||
ulElement.innerHTML = this.getMenuBody();
|
||||
|
||||
this.element.append(ulElement);
|
||||
this.element.classList.add("main-book__menu_opened");
|
||||
this.isOpened = true;
|
||||
}
|
||||
|
||||
closeMenu() {
|
||||
if (this.isOpened) {
|
||||
this.element.classList.remove("main-book__menu_opened");
|
||||
this.element.firstElementChild.remove();
|
||||
this.element.classList.add("main-book__menu_closed");
|
||||
this.isOpened = false;
|
||||
}
|
||||
}
|
||||
|
||||
async makeAction({ id }) {
|
||||
this.article.classList.add("blur", "spinner");
|
||||
|
||||
const { action, value } =
|
||||
this.actions.find((act) => act.id === Number(id)) || {};
|
||||
|
||||
await action({ id, bookid: this.bookid });
|
||||
|
||||
if (value) {
|
||||
const { id, label } = value;
|
||||
this[`${id}`] = label;
|
||||
}
|
||||
|
||||
this.article.classList.remove("spinner");
|
||||
this.closeMenu();
|
||||
}
|
||||
|
||||
async waitRendered() {
|
||||
await waitForElement(".main-book__menu");
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
async render() {
|
||||
const divElement = document.createElement("div");
|
||||
divElement.innerHTML = this.template;
|
||||
|
||||
this.element = divElement.firstElementChild;
|
||||
this.waitRendered();
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
export const stopPropagation = event => {
|
||||
event.stopImmediatePropagation();
|
||||
event.stopPropagation();
|
||||
}
|
||||
export const stopPropagation = (event) => {
|
||||
event.stopImmediatePropagation();
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
const path = require('path');
|
||||
const { createProxyMiddleware } = require('http-proxy-middleware');
|
||||
const cors = require('cors');
|
||||
|
||||
const express = require('express');
|
||||
const app = express();
|
||||
|
||||
const server = require('http').Server(app);
|
||||
const router = require('express').Router()
|
||||
|
||||
const options = {
|
||||
target: 'https://book.ogoun.name/', // target host
|
||||
changeOrigin: true, // needed for virtual hosted sites
|
||||
ws: true, // proxy websockets
|
||||
logLevel: 'debug',
|
||||
secure: false,
|
||||
cookieDomainRewrite: {
|
||||
'*': 'localhost',
|
||||
},
|
||||
onProxyRes(proxyRes, req, _res) {
|
||||
if (proxyRes.headers['set-cookie'] !== undefined) {
|
||||
req.cookie = proxyRes.headers['set-cookie'];
|
||||
}
|
||||
},
|
||||
onProxyReq(proxyReq, req, _res) {
|
||||
if (req && req.cookie !== undefined) {
|
||||
proxyReq.setHeader('Cookie', req.cookie[0]);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const myLogger = function (req, res, next) {
|
||||
next()
|
||||
}
|
||||
|
||||
app.use(myLogger)
|
||||
|
||||
app.use(express.static(__dirname));
|
||||
app.use(express.static(__dirname + '/js'));
|
||||
app.use(express.static(__dirname + '/css'));
|
||||
app.use(express.static(__dirname + '/constants'));
|
||||
|
||||
// app.get('/login', function (req, res) {
|
||||
// res.sendFile(path.join(__dirname, '/login.html'));
|
||||
// });
|
||||
|
||||
app.use('/', cors({
|
||||
credentials: true,
|
||||
origin: 'http://localhost:3000',
|
||||
}), createProxyMiddleware(options));
|
||||
|
||||
server.listen(3001);
|
||||
Binary file not shown.
@ -1 +1 @@
|
||||
43fea615f27b115ca71adae9d28aa42c583a4dce3ecf8ac2e68c45249fa1eb8e
|
||||
47f2ecfa029d676b8f2f23a9542e5f91afdb2a5aba3b39b9691101443bb7f9e8
|
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue