mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-10-22 11:05:45 +02:00
UI: Instagram Feed
This commit is contained in:
Tony Air
parent
a4fc1fbd78
commit
4b79371f82
2
dist/css/app.css
vendored
2
dist/css/app.css
vendored
File diff suppressed because one or more lines are too long
2
dist/icons/manifest.webapp
vendored
2
dist/icons/manifest.webapp
vendored
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"version": "3.0.4",
|
"version": "3.0.5",
|
||||||
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
||||||
"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.",
|
||||||
"icons": {
|
"icons": {
|
||||||
|
|||||||
2
dist/icons/yandex-browser-manifest.json
vendored
2
dist/icons/yandex-browser-manifest.json
vendored
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"version": "3.0.4",
|
"version": "3.0.5",
|
||||||
"api_version": 1,
|
"api_version": 1,
|
||||||
"layout": {
|
"layout": {
|
||||||
"logo": "yandex-browser-50x50.png",
|
"logo": "yandex-browser-50x50.png",
|
||||||
|
|||||||
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -1,4 +1,4 @@
|
|||||||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1613930610619"/><base href="http://127.0.0.1:3001"/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><link href="css/app.css" rel="stylesheet"></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(19px,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:64px;height:64px;color:#fff}.lds-ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:6px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:6px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:26px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:45px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../fonts/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1614088295878"/><base href="http://127.0.0.1:3001"/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><link href="css/app.css" rel="stylesheet"></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../fonts/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
||||||
]><div class="main-bn alert alert-danger" role="alert">
|
]><div class="main-bn alert alert-danger" role="alert">
|
||||||
<a
|
<a
|
||||||
href="https://www.google.com/chrome/browser/desktop/"
|
href="https://www.google.com/chrome/browser/desktop/"
|
||||||
|
|||||||
2
dist/js/app.js
vendored
2
dist/js/app.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/app_sw.js
vendored
2
dist/js/app_sw.js
vendored
@ -1 +1 @@
|
|||||||
!function(){var e={4904:function(e){e.exports=function log(e){false}},4546:function(e){Cache.prototype.add||(Cache.prototype.add=function add(e){return this.addAll([e])}),Cache.prototype.addAll||(Cache.prototype.addAll=function addAll(e){var t=this;function NetworkError(e){this.name="NetworkError",this.code=19,this.message=e}return NetworkError.prototype=Object.create(Error.prototype),Promise.resolve().then((function(){if(arguments.length<1)throw new TypeError;return e=e.map((function(e){return e instanceof Request?e:String(e)})),Promise.all(e.map((function(e){"string"===typeof e&&(e=new Request(e));var t=new URL(e.url).protocol;if("http:"!==t&&"https:"!==t)throw new NetworkError("Invalid scheme");return fetch(e.clone())})))})).then((function(n){return Promise.all(n.map((function(n,r){return t.put(e[r],n)})))})).then((function(){}))}),CacheStorage.prototype.match||(CacheStorage.prototype.match=function match(e,t){var n=this;return this.keys().then((function(r){var o;return r.reduce((function(r,a){return r.then((function(){return o||n.open(a).then((function(n){return n.match(e,t)})).then((function(e){return o=e}))}))}),Promise.resolve())}))}),e.exports=self.caches}},t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={exports:{}};return e[n](r,r.exports,__webpack_require__),r.exports}!function(){var e="".concat("@a2nt/ss-bootstrap-ui-webpack-boilerplate-react","-sw"),t="".concat("3.0.4","-sw"),n=__webpack_require__(4904),r=__webpack_require__(4546);if("string"!==typeof e)throw new Error("Cache Name cannot be empty");self.addEventListener("fetch",(function(t){if("GET"===t.request.method){var o=new URL(t.request.url);if(o.pathname.indexOf("admin")>=0||o.pathname.indexOf("Security")>=0||o.pathname.indexOf("/dev")>=0)n("SW: skip admin ".concat(t.request.url));else{var a=t.request.clone(),c=t.request.clone();t.respondWith(fetch(a).then((function(n){var o=n.clone();return r.open(e).then((function(e){var n=t.request.clone();e.put(n,o)})),n})).catch((function(e){return n("SW: fetch failed"),r.match(c)})))}}})),self.addEventListener("activate",(function(o){n("SW: activated: ".concat(t)),o.waitUntil(r.delete(e))})),self.addEventListener("install",(function(e){n("SW: installing version: ".concat(t))}))}()}();
|
!function(){var e={4904:function(e){e.exports=function log(e){false}},4546:function(e){Cache.prototype.add||(Cache.prototype.add=function add(e){return this.addAll([e])}),Cache.prototype.addAll||(Cache.prototype.addAll=function addAll(e){var t=this;function NetworkError(e){this.name="NetworkError",this.code=19,this.message=e}return NetworkError.prototype=Object.create(Error.prototype),Promise.resolve().then((function(){if(arguments.length<1)throw new TypeError;return e=e.map((function(e){return e instanceof Request?e:String(e)})),Promise.all(e.map((function(e){"string"===typeof e&&(e=new Request(e));var t=new URL(e.url).protocol;if("http:"!==t&&"https:"!==t)throw new NetworkError("Invalid scheme");return fetch(e.clone())})))})).then((function(n){return Promise.all(n.map((function(n,r){return t.put(e[r],n)})))})).then((function(){}))}),CacheStorage.prototype.match||(CacheStorage.prototype.match=function match(e,t){var n=this;return this.keys().then((function(r){var o;return r.reduce((function(r,a){return r.then((function(){return o||n.open(a).then((function(n){return n.match(e,t)})).then((function(e){return o=e}))}))}),Promise.resolve())}))}),e.exports=self.caches}},t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={exports:{}};return e[n](r,r.exports,__webpack_require__),r.exports}!function(){var e="".concat("@a2nt/ss-bootstrap-ui-webpack-boilerplate-react","-sw"),t="".concat("3.0.5","-sw"),n=__webpack_require__(4904),r=__webpack_require__(4546);if("string"!==typeof e)throw new Error("Cache Name cannot be empty");self.addEventListener("fetch",(function(t){if("GET"===t.request.method){var o=new URL(t.request.url);if(o.pathname.indexOf("admin")>=0||o.pathname.indexOf("Security")>=0||o.pathname.indexOf("/dev")>=0)n("SW: skip admin ".concat(t.request.url));else{var a=t.request.clone(),c=t.request.clone();t.respondWith(fetch(a).then((function(n){var o=n.clone();return r.open(e).then((function(e){var n=t.request.clone();e.put(n,o)})),n})).catch((function(e){return n("SW: fetch failed"),r.match(c)})))}}})),self.addEventListener("activate",(function(o){n("SW: activated: ".concat(t)),o.waitUntil(r.delete(e))})),self.addEventListener("install",(function(e){n("SW: installing version: ".concat(t))}))}()}();
|
||||||
4
dist/report.html
vendored
4
dist/report.html
vendored
File diff suppressed because one or more lines are too long
@ -53,6 +53,7 @@
|
|||||||
"@angular/common": "^11.2.1",
|
"@angular/common": "^11.2.1",
|
||||||
"@angular/core": "^11.2.1",
|
"@angular/core": "^11.2.1",
|
||||||
"@apollo/client": "^3.3.11",
|
"@apollo/client": "^3.3.11",
|
||||||
|
"@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed",
|
||||||
"@popperjs/core": "^2.8.2",
|
"@popperjs/core": "^2.8.2",
|
||||||
"aos": "^2.3.4",
|
"aos": "^2.3.4",
|
||||||
"apollo3-cache-persist": "^0.9.1",
|
"apollo3-cache-persist": "^0.9.1",
|
||||||
|
|||||||
@ -63,6 +63,12 @@
|
|||||||
width: 100px;
|
width: 100px;
|
||||||
width: 12.5vw;
|
width: 12.5vw;
|
||||||
}
|
}
|
||||||
|
#PageLoading .tagline {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-size: 4vh;
|
||||||
|
letter-spacing: 0.25em;
|
||||||
|
}
|
||||||
.main-bn {
|
.main-bn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -169,6 +175,9 @@
|
|||||||
#PageLoading .logo {
|
#PageLoading .logo {
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
}
|
}
|
||||||
|
#PageLoading .tagline {
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
78
src/js/_ui/_ui.instagram.feed.js
Normal file
78
src/js/_ui/_ui.instagram.feed.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
// api-less instagram feed
|
||||||
|
|
||||||
|
// Visitor network maybe temporary banned by Instagram because of too many requests from external websites
|
||||||
|
// so it isn't very stable implementation. You should have something for the fall-back.
|
||||||
|
|
||||||
|
import Events from '../_events';
|
||||||
|
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 loadFeed = () => {
|
||||||
|
console.log(`${NAME}: loading`);
|
||||||
|
|
||||||
|
D.querySelectorAll(`.jsInstagramFeed`).forEach((el) => {
|
||||||
|
const dataset = el.dataset;
|
||||||
|
|
||||||
|
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`);
|
||||||
|
|
||||||
|
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'],
|
||||||
|
);
|
||||||
|
|
||||||
|
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`);
|
||||||
|
|
||||||
|
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`);
|
||||||
|
|
||||||
|
W.dispatchEvent(new Event(`${NAME}.error`));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
W.addEventListener(`${Events.LODEDANDREADY}`, loadFeed);
|
||||||
|
W.addEventListener(`${Events.AJAX}`, loadFeed);
|
||||||
|
})(window);
|
||||||
@ -84,7 +84,7 @@ const InstagramFeed = (($) => {
|
|||||||
c[162] = String.fromCharCode(o[1]);
|
c[162] = String.fromCharCode(o[1]);
|
||||||
c[160] = String.fromCharCode(o[2]);
|
c[160] = String.fromCharCode(o[2]);
|
||||||
return base64data
|
return base64data
|
||||||
? `data:image/jpeg;base64,${ btoa(c.concat(p).join(''))}`
|
? `data:image/jpeg;base64,${btoa(c.concat(p).join(''))}`
|
||||||
: null;
|
: null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user