tonyair
/
webpack-bootstrap-ui-kit
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: GraphQL active pages

This commit is contained in:
Tony Air 2021-02-24 18:50:25 +07:00
parent 61bb002544
commit ac8093de07
6 changed files with 202 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

50
dist/records.json vendored
View File

@ -70,56 +70,6 @@
898
]
},
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.2_webpack@5.23.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.23.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.4/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": [
{
"chunks": {
"byName": {
"child": 396
},
"bySource": {
"0 child": 396
},
"usedIds": [
396
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_2c88fa80e813acf2bb735191f3f77062/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.2_webpack@5.23.0/node_modules/css-loader/dist/runtime/api.js": 588,
"./node_modules/.pnpm/css-loader@5.0.2_webpack@5.23.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.23.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.4/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": 330
},
"usedIds": [
330,
588
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.2_webpack@5.23.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.23.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": [
{
"chunks": {
"byName": {
"child": 396
},
"bySource": {
"0 child": 396
},
"usedIds": [
396
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_2c88fa80e813acf2bb735191f3f77062/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.2_webpack@5.23.0/node_modules/css-loader/dist/runtime/api.js": 588,
"./node_modules/.pnpm/css-loader@5.0.2_webpack@5.23.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.23.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": 714
},
"usedIds": [
588,
714
]
}
}
],
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_2c88fa80e813acf2bb735191f3f77062/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/@apollo/client@3.3.11_graphql@15.5.0+react@17.0.1/node_modules/@apollo/client/cache/index.js|98663193128bdee4f4bd78c722201262": 5864,

4
dist/report.html vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
"version": "3.0.6",
"version": "3.0.7",
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
"author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause",

296
src/js/_components/_main.links.js
View File

@ -9,169 +9,169 @@ import { Collapse } from 'bootstrap';
import SpinnerUI from './_main.loading-spinner';
const MainUILinks = ((W) => {
const NAME = '_main.links';
const D = document;
const BODY = D.body;
const NAME = '_main.links';
const D = document;
const BODY = D.body;
class MainUILinks {
static init() {
const ui = this;
ui.GraphPage = null;
class MainUILinks {
static init() {
const ui = this;
ui.GraphPage = null;
console.log(`${NAME}: init`);
console.log(`${NAME}: init`);
ui.loaded();
ui.loaded();
// history state switch
W.addEventListener('popstate', (e) => {
ui.popState(e);
});
// history state switch
W.addEventListener('popstate', (e) => {
ui.popState(e);
});
}
static loaded() {
const ui = this;
D.querySelectorAll('.graphql-page').forEach((el, i) => {
const el_id = el.getAttribute('href');
el.setAttribute(`data-${ui.name}-id`, el_id);
el.addEventListener('click', ui.loadClick);
});
}
static setActiveLinks(link) {
const ui = this;
D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach(
(el) => {
el.classList.add('active');
},
);
}
static reset() {
// reset focus
D.activeElement.blur();
// remove active and loading classes
D.querySelectorAll('.graphql-page,.nav-item').forEach((el2) => {
el2.classList.remove('active', 'loading');
});
}
static popState(e) {
const ui = this;
SpinnerUI.show();
if (e.state && e.state.page) {
console.log(`${NAME}: [popstate] load`);
const state = JSON.parse(e.state.page);
state.current = null;
state.popstate = true;
ui.reset();
ui.setActiveLinks(e.state.link);
if (!ui.GraphPage) {
console.log(
`${NAME}: [popstate] GraphPage is missing. Have to render it first`,
);
ui.GraphPage = ReactDOM.render(
<Page />,
document.getElementById('MainContent'),
);
}
static loaded() {
const ui = this;
ui.GraphPage.setState(state);
SpinnerUI.hide();
D.querySelectorAll('.graphql-page').forEach((el, i) => {
const el_id = el.getAttribute('href');
el.setAttribute(`data-${ui.name}-id`, el_id);
window.dispatchEvent(new Event(Events.AJAX));
} else if (e.state && e.state.landing) {
console.log(`${NAME}: [popstate] go to landing`);
W.location.href = e.state.landing;
} else {
console.warn(`${NAME}: [popstate] state is missing`);
console.log(e);
SpinnerUI.hide();
}
}
el.addEventListener('click', ui.loadClick);
});
}
// link specific event {this} = current event, not MainUILinks
static loadClick(e) {
console.groupCollapsed(`${NAME}: load on click`);
e.preventDefault();
static setActiveLinks(link) {
const ui = this;
D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach(
(el) => {
el.classList.add('active');
},
);
}
const ui = MainUILinks;
const el = e.currentTarget;
static reset() {
// reset focus
D.activeElement.blur();
SpinnerUI.show();
// remove active and loading classes
D.querySelectorAll('.graphql-page,.nav-item').forEach((el2) => {
el2.classList.remove('active', 'loading');
});
}
ui.reset();
el.classList.add('loading');
el.classList.remove('response-404', 'response-500', 'response-523');
BODY.classList.add('ajax-loading');
static popState(e) {
const ui = this;
// hide parent mobile nav
const navs = getParents(el, '.collapse');
if (navs.length) {
navs.forEach((nav) => {
const collapseInst = Collapse.getInstance(nav);
if (collapseInst) {
collapseInst.hide();
}
});
}
SpinnerUI.show();
if (e.state && e.state.page) {
console.log(`${NAME}: [popstate] load`);
const state = JSON.parse(e.state.page);
state.current = null;
state.popstate = true;
ui.reset();
ui.setActiveLinks(e.state.link);
if (!ui.GraphPage) {
console.log(
`${NAME}: [popstate] GraphPage is missing. Have to render it first`,
);
ui.GraphPage = ReactDOM.render(
<Page />,
document.getElementById('MainContent'),
);
}
ui.GraphPage.setState(state);
SpinnerUI.hide();
window.dispatchEvent(new Event(Events.AJAX));
} else if (e.state && e.state.landing) {
console.log(`${NAME}: [popstate] go to landing`);
W.location.href = e.state.landing;
} else {
console.warn(`${NAME}: [popstate] state is missing`);
console.log(e);
SpinnerUI.hide();
}
}
// link specific event {this} = current event, not MainUILinks
static loadClick(e) {
console.groupCollapsed(`${NAME}: load on click`);
e.preventDefault();
const ui = MainUILinks;
const el = e.currentTarget;
SpinnerUI.show();
ui.reset();
el.classList.add('loading');
el.classList.remove('response-404', 'response-500', 'response-523');
BODY.classList.add('ajax-loading');
// hide parent mobile nav
const navs = getParents(el, '.collapse');
if (navs.length) {
navs.forEach((nav) => {
const collapseInst = Collapse.getInstance(nav);
if (collapseInst) {
collapseInst.hide();
}
});
}
// hide parent dropdown
/*const dropdowns = getParents(el, '.dropdown-menu');
// hide parent dropdown
/*const dropdowns = getParents(el, '.dropdown-menu');
if (dropdowns.length) {
const DropdownInst = Dropdown.getInstance(dropdowns[0]);
DropdownInst.hide();
}*/
if (!ui.GraphPage) {
ui.GraphPage = ReactDOM.render(
<Page />,
document.getElementById('MainContent'),
);
}
if (!ui.GraphPage) {
ui.GraphPage = ReactDOM.render(
<Page />,
document.getElementById('MainContent'),
);
}
const link = el.getAttribute('href') || el.getAttribute('data-href');
const link = el.getAttribute('href') || el.getAttribute('data-href');
ui.GraphPage.state.current = el;
ui.GraphPage.state.current = el;
ui.GraphPage.load(link)
.then((response) => {
BODY.classList.remove('ajax-loading');
el.classList.remove('loading');
el.classList.add('active');
ui.GraphPage.load(link)
.then((response) => {
BODY.classList.remove('ajax-loading');
el.classList.remove('loading');
el.classList.add('active');
if (ui.GraphPage.state.Link) {
window.history.pushState({
page: JSON.stringify(ui.GraphPage.state),
link: el.getAttribute(`data-${ui.name}-id`),
},
ui.GraphPage.state.Title,
ui.GraphPage.state.Link,
);
if (ui.GraphPage.state.Link) {
window.history.pushState({
page: JSON.stringify(ui.GraphPage.state),
link: el.getAttribute(`data-${ui.name}-id`),
},
ui.GraphPage.state.Title,
ui.GraphPage.state.Link,
);
ui.setActiveLinks(ui.GraphPage.state.Link)
}
ui.setActiveLinks(ui.GraphPage.state.Link)
}
SpinnerUI.hide();
SpinnerUI.hide();
window.dispatchEvent(new Event(Events.AJAX));
console.groupEnd(`${NAME}: load on click`);
})
.catch((e) => {
console.log(e);
window.dispatchEvent(new Event(Events.AJAX));
console.groupEnd(`${NAME}: load on click`);
})
.catch((e) => {
console.log(e);
BODY.classList.remove('ajax-loading');
el.classList.remove('loading');
el.classList.add('error', `response-${e.status}`);
/*switch (e.status) {
BODY.classList.remove('ajax-loading');
el.classList.remove('loading');
el.classList.add('error', `response-${e.status}`);
/*switch (e.status) {
case 404:
el.classList.add('not-found');
break;
@ -180,21 +180,21 @@ const MainUILinks = ((W) => {
break;
}*/
SpinnerUI.hide();
SpinnerUI.hide();
window.dispatchEvent(new Event(Events.AJAX));
console.groupEnd(`${NAME}: load on click`);
});
}
window.dispatchEvent(new Event(Events.AJAX));
console.groupEnd(`${NAME}: load on click`);
});
}
}
W.addEventListener(`${Events.LOADED}`, () => {
MainUILinks.init();
});
W.addEventListener(`${Events.LOADED}`, () => {
MainUILinks.init();
});
W.addEventListener(`${Events.AJAX}`, () => {
MainUILinks.loaded();
});
W.addEventListener(`${Events.AJAX}`, () => {
MainUILinks.loaded();
});
})(window);
export default MainUILinks;

100
src/js/_ui/_ui.instagram.feed.js
View File

@ -8,71 +8,71 @@ import Consts from '../_consts';
import InstagramFeed from '@jsanahuja/instagramfeed/src/InstagramFeed';
export default ((W) => {
const NAME = '_ui.instagram.feed';
const D = document;
const BODY = D.body;
const NAME = '_ui.instagram.feed';
const D = document;
const BODY = D.body;
const loadFeed = () => {
console.log(`${NAME}: loading`);
const loadFeed = () => {
console.log(`${NAME}: loading`);
D.querySelectorAll(`.jsInstagramFeed`).forEach((el) => {
const dataset = el.dataset;
D.querySelectorAll(`.jsInstagramFeed`).forEach((el) => {
const dataset = el.dataset;
el.classList.add(`${NAME}-loading`);
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`);
el.classList.add(`${NAME}-loading`);
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`);
new InstagramFeed({
username: dataset['username'],
tag: dataset['tag'] || null,
display_profile: dataset['display-profile'],
display_biography: dataset['display-biography'],
display_gallery: dataset['display-gallery'],
display_captions: dataset['display-captions'],
cache_time: dataset['cache_time'] || 360,
items: dataset['items'] || 12,
styling: false,
lazy_load: true,
callback: (data) => {
console.log(`${NAME}: data response received`);
new InstagramFeed({
username: dataset['username'],
tag: dataset['tag'] || null,
display_profile: dataset['display-profile'],
display_biography: dataset['display-biography'],
display_gallery: dataset['display-gallery'],
display_captions: dataset['display-captions'],
cache_time: dataset['cache_time'] || 360,
items: dataset['items'] || 12,
styling: false,
lazy_load: true,
callback: (data) => {
console.log(`${NAME}: data response received`);
const list = D.createElement('div');
list.classList.add(`${NAME}-list`, 'row');
el.appendChild(list);
const list = D.createElement('div');
list.classList.add(`${NAME}-list`, 'row');
el.appendChild(list);
data['edge_owner_to_timeline_media']['edges'].forEach(
(el, i) => {
const item = el['node'];
const preview = ui.ig_media_preview(
item['media_preview'],
);
data['edge_owner_to_timeline_media']['edges'].forEach(
(el, i) => {
const item = el['node'];
const preview = ui.ig_media_preview(
item['media_preview'],
);
list.innerHTML +=
list.innerHTML +=
`<div class="a col ${NAME}-item"` +
` data-lightbox-gallery="${NAME}-${ID}" data-href="${item['display_url']}" data-force="image">` +
`<img id="${NAME}-${ID}-${item['id']}" src="${item['display_url']}" alt="${item['accessibility_caption']}"` +
`style="background:url(${preview})" />` +
'</div>';
},
);
},
);
el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-loaded`);
el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-loaded`);
W.dispatchEvent(new Event('MetaWindow.initLinks'));
W.dispatchEvent(new Event(`${NAME}.loaded`));
},
on_error: (e) => {
console.error(`${NAME}: ${e}`);
W.dispatchEvent(new Event('MetaWindow.initLinks'));
W.dispatchEvent(new Event(`${NAME}.loaded`));
},
on_error: (e) => {
console.error(`${NAME}: ${e}`);
el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-error`);
el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-error`);
W.dispatchEvent(new Event(`${NAME}.error`));
},
});
});
};
W.dispatchEvent(new Event(`${NAME}.error`));
},
});
});
};
W.addEventListener(`${Events.LODEDANDREADY}`, loadFeed);
W.addEventListener(`${Events.AJAX}`, loadFeed);
W.addEventListener(`${Events.LODEDANDREADY}`, loadFeed);
W.addEventListener(`${Events.AJAX}`, loadFeed);
})(window);