tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

UI: GraphQL active pages

Browse Source
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 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": { "modules": {
"byIdentifier": { "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, "./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", "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.", "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>", "author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause", "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'; import SpinnerUI from './_main.loading-spinner';
const MainUILinks = ((W) => { const MainUILinks = ((W) => {
const NAME = '_main.links'; const NAME = '_main.links';
const D = document; const D = document;
const BODY = D.body; const BODY = D.body;
class MainUILinks { class MainUILinks {
static init() { static init() {
const ui = this; const ui = this;
ui.GraphPage = null; ui.GraphPage = null;
console.log(`${NAME}: init`); console.log(`${NAME}: init`);
ui.loaded(); ui.loaded();
// history state switch // history state switch
W.addEventListener('popstate', (e) => { W.addEventListener('popstate', (e) => {
ui.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() { ui.GraphPage.setState(state);
const ui = this; SpinnerUI.hide();
D.querySelectorAll('.graphql-page').forEach((el, i) => { window.dispatchEvent(new Event(Events.AJAX));
const el_id = el.getAttribute('href'); } else if (e.state && e.state.landing) {
el.setAttribute(`data-${ui.name}-id`, el_id); 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 = MainUILinks;
const ui = this; const el = e.currentTarget;
D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach(
(el) => {
el.classList.add('active');
},
);
}
static reset() { SpinnerUI.show();
// reset focus
D.activeElement.blur();
// remove active and loading classes ui.reset();
D.querySelectorAll('.graphql-page,.nav-item').forEach((el2) => { el.classList.add('loading');
el2.classList.remove('active', 'loading'); el.classList.remove('response-404', 'response-500', 'response-523');
}); BODY.classList.add('ajax-loading');
}
static popState(e) { // hide parent mobile nav
const ui = this; const navs = getParents(el, '.collapse');
if (navs.length) {
navs.forEach((nav) => {
const collapseInst = Collapse.getInstance(nav);
if (collapseInst) {
collapseInst.hide();
}
});
}
SpinnerUI.show(); // hide parent dropdown
/*const dropdowns = getParents(el, '.dropdown-menu');
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');
if (dropdowns.length) { if (dropdowns.length) {
const DropdownInst = Dropdown.getInstance(dropdowns[0]); const DropdownInst = Dropdown.getInstance(dropdowns[0]);
DropdownInst.hide(); DropdownInst.hide();
}*/ }*/
if (!ui.GraphPage) { if (!ui.GraphPage) {
ui.GraphPage = ReactDOM.render( ui.GraphPage = ReactDOM.render(
<Page />, <Page />,
document.getElementById('MainContent'), 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) ui.GraphPage.load(link)
.then((response) => { .then((response) => {
BODY.classList.remove('ajax-loading'); BODY.classList.remove('ajax-loading');
el.classList.remove('loading'); el.classList.remove('loading');
el.classList.add('active'); el.classList.add('active');
if (ui.GraphPage.state.Link) { if (ui.GraphPage.state.Link) {
window.history.pushState({ window.history.pushState({
page: JSON.stringify(ui.GraphPage.state), page: JSON.stringify(ui.GraphPage.state),
link: el.getAttribute(`data-${ui.name}-id`), link: el.getAttribute(`data-${ui.name}-id`),
}, },
ui.GraphPage.state.Title, ui.GraphPage.state.Title,
ui.GraphPage.state.Link, 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)); window.dispatchEvent(new Event(Events.AJAX));
console.groupEnd(`${NAME}: load on click`); console.groupEnd(`${NAME}: load on click`);
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
BODY.classList.remove('ajax-loading'); BODY.classList.remove('ajax-loading');
el.classList.remove('loading'); el.classList.remove('loading');
el.classList.add('error', `response-${e.status}`); el.classList.add('error', `response-${e.status}`);
/*switch (e.status) { /*switch (e.status) {
case 404: case 404:
el.classList.add('not-found'); el.classList.add('not-found');
break; break;
@ -180,21 +180,21 @@ const MainUILinks = ((W) => {
break; break;
}*/ }*/
SpinnerUI.hide(); SpinnerUI.hide();
window.dispatchEvent(new Event(Events.AJAX)); window.dispatchEvent(new Event(Events.AJAX));
console.groupEnd(`${NAME}: load on click`); console.groupEnd(`${NAME}: load on click`);
}); });
}
} }
}
W.addEventListener(`${Events.LOADED}`, () => { W.addEventListener(`${Events.LOADED}`, () => {
MainUILinks.init(); MainUILinks.init();
}); });
W.addEventListener(`${Events.AJAX}`, () => { W.addEventListener(`${Events.AJAX}`, () => {
MainUILinks.loaded(); MainUILinks.loaded();
}); });
})(window); })(window);
export default MainUILinks; 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'; import InstagramFeed from '@jsanahuja/instagramfeed/src/InstagramFeed';
export default ((W) => { export default ((W) => {
const NAME = '_ui.instagram.feed'; const NAME = '_ui.instagram.feed';
const D = document; const D = document;
const BODY = D.body; const BODY = D.body;
const loadFeed = () => { const loadFeed = () => {
console.log(`${NAME}: loading`); console.log(`${NAME}: loading`);
D.querySelectorAll(`.jsInstagramFeed`).forEach((el) => { D.querySelectorAll(`.jsInstagramFeed`).forEach((el) => {
const dataset = el.dataset; const dataset = el.dataset;
el.classList.add(`${NAME}-loading`); el.classList.add(`${NAME}-loading`);
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`); el.classList.remove(`${NAME}-loaded`, `${NAME}-error`);
new InstagramFeed({ new InstagramFeed({
username: dataset['username'], username: dataset['username'],
tag: dataset['tag'] || null, tag: dataset['tag'] || null,
display_profile: dataset['display-profile'], display_profile: dataset['display-profile'],
display_biography: dataset['display-biography'], display_biography: dataset['display-biography'],
display_gallery: dataset['display-gallery'], display_gallery: dataset['display-gallery'],
display_captions: dataset['display-captions'], display_captions: dataset['display-captions'],
cache_time: dataset['cache_time'] || 360, cache_time: dataset['cache_time'] || 360,
items: dataset['items'] || 12, items: dataset['items'] || 12,
styling: false, styling: false,
lazy_load: true, lazy_load: true,
callback: (data) => { callback: (data) => {
console.log(`${NAME}: data response received`); console.log(`${NAME}: data response received`);
const list = D.createElement('div'); const list = D.createElement('div');
list.classList.add(`${NAME}-list`, 'row'); list.classList.add(`${NAME}-list`, 'row');
el.appendChild(list); el.appendChild(list);
data['edge_owner_to_timeline_media']['edges'].forEach( data['edge_owner_to_timeline_media']['edges'].forEach(
(el, i) => { (el, i) => {
const item = el['node']; const item = el['node'];
const preview = ui.ig_media_preview( const preview = ui.ig_media_preview(
item['media_preview'], item['media_preview'],
); );
list.innerHTML += list.innerHTML +=
`<div class="a col ${NAME}-item"` + `<div class="a col ${NAME}-item"` +
` data-lightbox-gallery="${NAME}-${ID}" data-href="${item['display_url']}" data-force="image">` + ` 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']}"` + `<img id="${NAME}-${ID}-${item['id']}" src="${item['display_url']}" alt="${item['accessibility_caption']}"` +
`style="background:url(${preview})" />` + `style="background:url(${preview})" />` +
'</div>'; '</div>';
}, },
); );
el.classList.remove(`${NAME}-loading`); el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-loaded`); el.classList.add(`${NAME}-loaded`);
W.dispatchEvent(new Event('MetaWindow.initLinks')); W.dispatchEvent(new Event('MetaWindow.initLinks'));
W.dispatchEvent(new Event(`${NAME}.loaded`)); W.dispatchEvent(new Event(`${NAME}.loaded`));
}, },
on_error: (e) => { on_error: (e) => {
console.error(`${NAME}: ${e}`); console.error(`${NAME}: ${e}`);
el.classList.remove(`${NAME}-loading`); el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-error`); 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.LODEDANDREADY}`, loadFeed);
W.addEventListener(`${Events.AJAX}`, loadFeed); W.addEventListener(`${Events.AJAX}`, loadFeed);
})(window); })(window);