Ogoun
4 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 => {
|
export const stopPropagation = (event) => {
|
||||||
event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
event.stopPropagation();
|
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