bwin 0.1.9 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
1
  # Binary Window
2
2
 
3
3
  A tiling window manager for web browsers.
4
+
5
+ [Demo](https://bhjsdev.github.io/bwin/)
package/dist/bwin.css CHANGED
@@ -1 +1 @@
1
- :root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-clearance: 2px;--bw-glass-border-radius: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 97%);--bw-glass-header-height: 30px;--bw-glass-header-gap: 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%);--bw-sill-gap: 6px}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{position:absolute;display:block;box-sizing:border-box}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:transparent}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:transparent}bw-glass{position:absolute;inset:var(--bw-glass-clearance);display:flex;flex-direction:column;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);background-color:#fff;font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;display:flex;flex-basis:var(--bw-glass-header-height);align-items:center;gap:var(--bw-glass-header-gap);overflow:hidden;padding-inline:var(--bw-glass-header-gap);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color)}bw-glass-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}bw-glass-tab-container{align-self:flex-end;display:flex;gap:var(--bw-glass-header-gap)}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{margin-left:auto;display:flex;flex-shrink:0;gap:2px}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action:disabled:active{transform:scale(1)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--maximize:before{content:"☐"}bw-pane[maximized] .bw-glass-action--maximize:before{content:"□"}.bw-glass-action--minimize:before{content:"−"}bw-glass-content{display:block;box-sizing:border-box;overflow:auto;flex-grow:1}bw-sill{position:absolute;top:100%;margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));width:100%;display:flex;gap:var(--bw-sill-gap);box-sizing:border-box;padding-inline:var(--bw-glass-clearance)}.bw-minimized-glass{display:block;flex-basis:10%;height:10px;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer;background-color:var(--bw-glass-header-bg-color)}.bw-minimized-glass:hover{background-color:#fff}.bw-minimized-glass:active{transform:scale(.95)}
1
+ :root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-clearance: 2px;--bw-glass-border-radius: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 97%);--bw-glass-header-height: 30px;--bw-glass-header-gap: 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%);--bw-sill-gap: 6px}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{position:absolute;display:block;box-sizing:border-box}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:transparent}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:transparent}bw-glass{position:absolute;inset:var(--bw-glass-clearance);display:flex;flex-direction:column;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);background-color:#fff;font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;flex-basis:var(--bw-glass-header-height);flex-shrink:0;display:flex;align-items:center;gap:var(--bw-glass-header-gap);overflow:hidden;padding-inline:var(--bw-glass-header-gap);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color)}bw-glass-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}bw-glass-tab-container{align-self:flex-end;display:flex;gap:var(--bw-glass-header-gap)}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{margin-left:auto;display:flex;flex-shrink:0;gap:2px}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action:disabled:active{transform:scale(1)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--maximize:before{content:"☐"}bw-pane[maximized] .bw-glass-action--maximize:before{content:"□"}.bw-glass-action--minimize:before{content:"−"}bw-glass-content{display:block;box-sizing:border-box;overflow:auto;flex-grow:1}bw-sill{position:absolute;top:100%;margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));width:100%;display:flex;gap:var(--bw-sill-gap);box-sizing:border-box;padding-inline:var(--bw-glass-clearance)}.bw-minimized-glass{display:block;flex-basis:10%;height:10px;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer;background-color:var(--bw-glass-header-bg-color)}.bw-minimized-glass:hover{background-color:#fff}.bw-minimized-glass:active{transform:scale(.95)}
package/dist/bwin.js CHANGED
@@ -635,7 +635,7 @@ height: ${e.style.height}
635
635
  const st = {
636
636
  createWindow() {
637
637
  const e = document.createElement("bw-window");
638
- return e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id), e;
638
+ return e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("root-sash-id", this.rootSash.id), e;
639
639
  },
640
640
  glaze() {
641
641
  this.rootSash.walk((e) => {
@@ -992,32 +992,15 @@ class bt extends T {
992
992
  onPaneUpdate() {
993
993
  }
994
994
  /**
995
- * Add glass into the target pane.
995
+ * Add a pane with glass into the target pane.
996
996
  *
997
- * @param {string} paneSashId - The Sash ID of the pane that the glass moves into
998
- * @param {'top'|'right'|'bottom'|'left'} position - The position of the glass relative to the target pane
999
- * @param {Object} glassProps - The glass properties
1000
- *
1001
- */
1002
- addGlass(i, n, s) {
1003
- const o = this.addPane(i, { position: n }), h = new x({ ...s, sash: o, binaryWindow: this });
1004
- o.domNode.append(h.domNode);
1005
- }
1006
- /**
1007
- * Remove glass from or together with the pane
1008
- *
1009
- * @param {string} paneSashId - The Sash ID of the pane that contains the glass
1010
- * @param {boolean} removePane - Whether to remove the pane together
997
+ * @param {string} targetPaneId - The Sash ID of the target pane
998
+ * @param {Object} props - The pane and glass properties grouped together
999
+ * @returns {Sash} - The newly created Sash
1011
1000
  */
1012
- removeGlass(i, n) {
1013
- if (n)
1014
- this.removePane(i);
1015
- else {
1016
- const s = this.rootSash.getById(i);
1017
- if (!s) throw new Error("[bwin] Pane not found when removing glass");
1018
- const o = s.domNode.querySelector("bw-glass");
1019
- o && o.remove();
1020
- }
1001
+ addPane(i, n) {
1002
+ const { position: s, size: o, ...h } = n, l = super.addPane(i, { position: s, size: o }), a = new x({ ...h, sash: l, binaryWindow: this });
1003
+ return l.domNode.append(a.domNode), l;
1021
1004
  }
1022
1005
  }
1023
1006
  bt.assemble(wt, mt, pt);
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "bwin",
3
3
  "description": "A tiling window manager for web browsers",
4
4
  "type": "module",
5
- "version": "0.1.9",
5
+ "version": "0.2.0",
6
6
  "repository": {
7
7
  "type": "git",
8
8
  "url": "git+https://github.com/bhjsdev/bwin.git"