pinstripe 0.32.0 → 0.34.0

package/lib/components/pinstripe_frame.js

@@ -1,7 +1,8 @@
 
+import { Component } from "../component.js";
 import { loadCache, normalizeUrl } from "./helpers.js";
 
-export default {
+Component.register('pinstripe-frame', {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
@@ -34,35 +35,45 @@ export default {
         );
     },
 
-    loading: false,
-
-    loadWasBlocked: false,
+    status: 'complete',
 
     async load(url = this.url, options = {}){
-        if(this.loading) {
-            this.loadWasBlocked = true;
-            return;
-        };
+        this._pendingResponse?.destroy();
+        const { progressBar } = this.document;
+        progressBar.start();
+        await clearEventLoop();
+        this.status = 'loading';
         this.url = url;
-        this.loading = true;
-        this.abort();
         const { method = 'GET', placeholderUrl } = options;
         const cachedHtml = method == 'GET' ? loadCache.get(`${this.document.loadCacheNamespace}:${url}`) : undefined;
-        if(cachedHtml) this.patch(cachedHtml);
+        if(cachedHtml) {
+            this.status = 'using-cached-html';
+            this.patch(cachedHtml);
+        }
         let minimumDelay = 0;
         if(!cachedHtml && placeholderUrl){
             const placeholderHtml = loadCache.get(`${this.document.loadCacheNamespace}:${placeholderUrl}`);
             if(placeholderHtml) {
+                this.status = 'using-placeholder-html';
                 this.patch(placeholderHtml);
                 minimumDelay = 300;
             }
         }
-        const response = await this.fetch(this.url, { minimumDelay, ...options });
-        const html = await response.text();
-        this.loading = false;
-        if(html == cachedHtml && !this.loadWasBlocked) return;
-        this.loadWasBlocked = false;
-        this.patch(html);
-        if(method == 'GET') loadCache.put(`${this.document.loadCacheNamespace}:${this.url}`, html);
+        try {
+            this._pendingResponse = this.fetch(this.url, { minimumDelay, ...options });
+
+            const response = await this._pendingResponse;
+            
+            const html = await response.text();
+            this.status = 'complete';
+            this.patch(html);
+            if(html != cachedHtml && method == 'GET') loadCache.put(`${this.document.loadCacheNamespace}:${this.url}`, html);
+        } catch(e) {
+            if(e != 'Request aborted') console.log(e);
+        }
+        await clearEventLoop();
+        progressBar.stop();
     }
-};
+});
+
+const clearEventLoop = () => new Promise(resolve => setTimeout(resolve, 0));

package/lib/components/pinstripe_menu.js

@@ -0,0 +1,33 @@
+
+import { Component } from "../component.js";
+
+Component.register('pinstripe-menu', {
+    initialize(...args){
+        this.constructor.parent.prototype.initialize.call(this, ...args);
+        
+        this.shadow.patch(`
+            <style>
+                .root {
+                    background: #fff;
+                    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
+                    border-radius: 6px;
+                    width: 100vw;
+                    max-width: 250px;
+                    padding: 6px 0;
+                }
+                
+                ::slotted(a) {
+                    display: block;
+                    padding: 6px 12px;
+                    text-decoration: none;
+                    color: #000;
+                }
+                
+                ::slotted(a:hover) {
+                    background: #f7f7f7;
+                }
+            </style>
+            <div class="root"><slot></div>
+        `);
+    }
+});

package/lib/components/pinstripe_modal.js

@@ -1,31 +1,53 @@
 
-export default {
+
+import { Component } from "../component.js";
+
+const MOBILE_HEIGHT_MAP = {
+    full: 'calc(100vh - 8.2rem)',
+}
+
+const DESKTOP_WIDTH_MAP = {
+    small: '600px',
+    medium: '800px',
+    large: '1000px',
+    auto: '0',
+    full: '0'
+};
+
+const DESKTOP_HEIGHT_MAP = {
+    full: 'calc(100vh - 4rem)',
+};
+
+Component.register('pinstripe-modal', {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
+        if(!this.overlay) return;
+
+        this.document.body.clip();
+
         const { width = 'medium', height = 'auto' } = this.params;
 
+        const mobileHeight = MOBILE_HEIGHT_MAP[height] || height;
+        const desktopWidth = DESKTOP_WIDTH_MAP[width] || width;
+        const desktopHeight = DESKTOP_HEIGHT_MAP[height] || height;
+
         this.shadow.patch(`
             <style>
                 .root {
-                    display: flex;
-                    align-items: center;
-                    flex-direction: column;
-                    justify-content: center;
                     overflow: auto;
                     z-index: 40;
                     position: absolute;
-                    bottom: 0;
                     left: 0;
-                    right: 0;
                     top: 0;
+                    width: 100vw;
+                    height: 100vh;
                     background-color: rgba(10, 10, 10, 0.86);
                 }
+
                 .close-button {
                     background: none;
-                    position: fixed;
-                    right: 2.0rem;
-                    top: 2.0rem;
+                    display: inline-block;
                     height: 3.2rem;
                     width: 3.2rem;
                     user-select: none;
@@ -60,29 +82,55 @@ export default {
                     height: 50%;
                     width: 0.2rem;
                 }
-                .container {
-                    min-height: calc(100vh - 4.0rem);
-                    width: calc(100vw - 16.0rem);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-                .body {
-                    max-width: 100%;
-                }
-                .root.is-medium-width .body {
-                    width: 800px;
-                }
-                .root.is-full-width .body {
-                    width: 100%;
+
+                @media (max-width: 766px) {
+                    .container {
+                        width: 100vw;
+                        min-height: 100vh;
+                        display: grid;
+                        grid-template-columns: [grid-start] 1rem [full-start] auto [full-end] 1rem [grid-end];
+                        grid-template-rows: [grid-start] 0 [top-start] 7.2rem [top-end] 0 [full-start] ${mobileHeight} [full-end] 1rem [grid-end];
+                    }
+
+                    .close-button {
+                        grid-area: top / full;
+                        position: absolute;
+                        right: 2rem;
+                        top: 2rem;
+                    }
+
+                    .body {
+                        grid-area: full;
+                    }
                 }
-                .root.is-full-height .body {
-                    height: 100%;
+
+                @media (min-width: 767px) {
+                    .container {
+                        width: 100vw;
+                        min-height: 100vh;
+                        display: grid;
+                        grid-template-columns: [grid-start] 7.2rem [full-start] auto [fixed-start] minmax(0, ${desktopWidth}) [fixed-end] auto [full-end] 7.2rem [grid-end];
+                        grid-template-rows: [grid-start] 2rem [full-start] ${desktopHeight} [full-end] 2rem [grid-end];
+                    }
+
+                    .close-button {
+                        position: fixed;
+                        right: 2.0rem;
+                        top: 2.0rem;
+                    }
+
+                    .body {
+                        grid-area: full / ${['auto', 'full'].includes(desktopWidth) ? 'full' : 'fixed'};
+                        display: flex;
+                        flex-direction: column;
+                        align-items: stretch;
+                        justify-content: center;
+                    }
                 }
             </style>
-            <div class="root is-${width}-width is-${height}-height">
-                <button class="close-button"></button>
+            <div class="root">
                 <div class="container">
+                    <button class="close-button"></button>
                     <div class="body">
                         <slot>
                     </div>
@@ -91,8 +139,24 @@ export default {
         `);
 
         this.shadow.on('click', '.root, .container, .body, .close-button', () => this.trigger('close'));
+
+        this.on('clean', () => this.document.body.unclip());
+
+        const popoverOverlays = [];
+        let currentAnchor = this.overlay.parent;
+        while(currentAnchor.is('pinstripe-popover *')){
+            popoverOverlays.push(currentAnchor.overlay);
+            currentAnchor = currentAnchor.overlay.parent;
+        }
+        delete this.overlay.parent._overlayChild;
+        this.overlay._parent = currentAnchor;
+        currentAnchor._overlayChild = this.overlay;
+        while(popoverOverlays.length){
+            popoverOverlays.shift().remove();
+        }
+        
     },
 
     isModal: true
-}
+});
 

package/lib/components/pinstripe_overlay.js

@@ -1,5 +1,7 @@
 
-export default {
+import { Component } from "../component.js";
+
+Component.register('pinstripe-overlay', {
     meta(){
         this.include('pinstripe-frame');
     },
@@ -13,8 +15,8 @@ export default {
                     position: fixed;
                     top: 0;
                     left: 0;
-                    height: 100%;
                     width: 100%;
+                    height: 0;
                     z-index: 1000000;
                 }
             </style>
@@ -45,9 +47,5 @@ export default {
         this.constructor.parent.prototype.remove.call(this, ...args);
 
         delete this.parent._overlayChild;
-        
-        if(!this.document.find('pinstripe-overlay')){
-            this.document.body.unclip();
-        }
     }
-};
+});

package/lib/components/pinstripe_popover.js

@@ -0,0 +1,86 @@
+
+import { Component } from "../component.js";
+
+Component.register('pinstripe-popover', {
+    initialize(...args){
+        this.constructor.parent.prototype.initialize.call(this, ...args);
+
+        if(!this.overlay) return;
+
+        this.position = this.overlay.parent.params.dropdownPosition || 'bottom-center';
+
+        this.shadow.patch(`
+            <style>
+                :host {
+                    position: absolute;
+                }
+            </style>
+            <slot>
+        `);
+
+        this.repositionHandler = this.reposition.bind(this);
+        this.resizeOberver = new ResizeObserver(this.repositionHandler);
+        this.resizeOberver.observe(this.node);
+        window.addEventListener('resize', this.repositionHandler);
+        window.addEventListener('scroll', this.repositionHandler);
+        this.reposition();
+        
+        this.on('click', (event) => {
+            event.stopPropagation();
+        });
+
+        const anchor = this.overlay.parent;
+        const { attributes: anchorAttributes } = anchor;
+
+        anchor.patch({ ...anchorAttributes, 'data-active': 'true' });
+
+        this.closeHandler = () => this.overlay.remove();
+        window.addEventListener('click', this.closeHandler);
+
+        this.on('clean', () => {
+            this.resizeOberver.disconnect();
+            window.removeEventListener('resize', this.repositionHandler);
+            window.removeEventListener('scroll', this.repositionHandler);
+            window.removeEventListener('click', this.closeHandler);
+            anchor.patch(anchorAttributes);
+        });
+    },
+
+    isPopover: true,
+
+    reposition(){
+        if(!this.overlay.parent) return;
+
+        const gap = 4;
+
+        const [ side = 'bottom', align = 'center' ] = this.position.split('-');
+        const anchorRect = this.overlay.parent.node.getBoundingClientRect();
+        const rect = this.node.getBoundingClientRect();
+
+        let left = 0;
+        let top = 0;
+        
+        if(side == 'top' || side == 'bottom'){
+            left = anchorRect.left;
+            if(align == 'center') left += anchorRect.width / 2 - rect.width / 2;
+            if(align == 'right') left += anchorRect.width - rect.width;
+
+            if(side == 'top') top = anchorRect.top - rect.height - gap;
+            if(side == 'bottom') top = anchorRect.top + anchorRect.height + gap;
+        }
+        
+        if(side == 'left' || side == 'right'){
+            left = anchorRect.left;
+            if(side == 'left') left -= (rect.width + gap);
+            if(side == 'right') left += (anchorRect.width + gap);
+
+            top = anchorRect.top;
+            if(align == 'top') top += anchorRect.height;
+            if(align == 'center') top += anchorRect.height / 2 - rect.height / 2;
+            if(align == 'bottom') top += anchorRect.height - rect.height;
+        }
+
+        this.node.style.left = `${left}px`;
+        this.node.style.top = `${top}px`;
+    }
+});

package/lib/components/pinstripe_progress_bar.js

@@ -1,5 +1,7 @@
 
-export default {
+import { Component } from "../component.js";
+
+Component.register('pinstripe-progress-bar', {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
@@ -63,8 +65,8 @@ export default {
 
         this.startCount--;
         if(this.startCount == 0){
-            clearTimeout(this._delayTimeout);
-            clearInterval(this._animationInterval);
+            if(this._delayTimeout) this._delayTimeout.destroy();
+            if(this._animationInterval) this._animationInterval.destroy();
             this.width = 0;
             const child = progressBar.children.pop();
             if(child){
@@ -73,4 +75,4 @@ export default {
             }
         }
     }
-};
+});

package/lib/components/pinstripe_script.js

@@ -1,9 +1,12 @@
 
+import { Component } from "../component.js";
 
-export default {
+Component.register('pinstripe-script', {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
-        this.setTimeout(() => (new Function(this.text)).call(this));
+        if(this.isFromCachedHtml) return;
+
+        (new Function(this.text)).call(this);
     }
-};
+});

package/lib/components/pinstripe_skeleton.js

@@ -1,5 +1,7 @@
 
-export default {
+import { Component } from "../component.js";
+
+Component.register('pinstripe-skeleton', {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
@@ -52,4 +54,4 @@ export default {
             <div class="root"><slot></div>
         `);
     }
-};
+});

package/lib/constants.js

@@ -1,27 +1,2 @@
 
-export const SELF_CLOSING_TAGS = [
-    'area',
-    'base',
-    'br',
-    'embed',
-    'hr',
-    'iframe',
-    'img',
-    'input',
-    'link',
-    'meta',
-    'param',
-    'slot',
-    'source',
-    'track',
-    'wbr'
-];
-
-export const TEXT_ONLY_TAGS = [
-    'script',
-    'style'
-];
-
-export const IS_SERVER = typeof window == 'undefined';
-
-export const IS_CLIENT = !IS_SERVER;
+export { SELF_CLOSING_TAGS, TEXT_ONLY_TAGS, IS_SERVER, IS_CLIENT  } from '@sintra/utils';

package/lib/index.js

@@ -1,16 +1,4 @@
 
 import './initialize.js';
 
-export * from './app.js'; // pinstripe-if-client: export const App = undefined;
-export * from './background_job.js'; // pinstripe-if-client: export const BackgroundJob = undefined;
-export * from './command.js'; // pinstripe-if-client: export const Command = undefined;
-export * from './context.js'; // pinstripe-if-client: export const Context = undefined;
 export * from './component.js';
-export * from './database.js'; // pinstripe-if-client: export const Database = undefined;
-export * from './html.js'; // pinstripe-if-client: export const Html = undefined;
-export * from './import_all.js'; // pinstripe-if-client: export const importAll = undefined;
-export * from './markdown.js';
-export * from './project.js'; // pinstripe-if-client: export const project = undefined;
-export * from './service_factory.js';  // pinstripe-if-client: export const ServiceFactory = undefined;
-export * from './view.js';
-export * from './workspace.js'; // pinstripe-if-client: export const Workspace = undefined;