Skip to content

Commit d591e46

Browse files
pmeisenpmeisen
committed
added liquorbarn
1 parent 6689928 commit d591e46

File tree

3 files changed

+205
-16
lines changed

3 files changed

+205
-16
lines changed

‎dist/breinify-dev-studio.js

Lines changed: 85 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
resizable: function ($shadowRoot) {
88
const $body = $('body');
99

10-
const $resizeHandle = $shadowRoot.find('#resize-handle')
11-
.data('isResizing', false);
10+
const $resizeHandle = $shadowRoot.find('#resize-handle').data('isResizing', false);
1211
$resizeHandle.mousedown(e => {
1312
$resizeHandle.data({
1413
isResizing: true,
@@ -19,7 +18,7 @@
1918
$body.css('user-select', 'none');
2019
e.preventDefault();
2120
});
22-
$(document).on('mouseup blur', e => {
21+
$(document).on('mouseup blur', () => {
2322
if ($resizeHandle.data('isResizing') === true) {
2423
$resizeHandle.data('isResizing', false);
2524
$body.css('user-select', '');
@@ -113,7 +112,7 @@
113112
this.$closeBtn.click(() => this.toggleDevStudio());
114113
this.$toggleButton.click(() => this.toggleDevStudio());
115114

116-
this.$tabs.click(e => this.switchTab(e));
115+
this.$tabs.click(e => this._switchTab(e));
117116

118117
_private.resizable(this.$shadowRoot);
119118
}
@@ -132,7 +131,86 @@
132131
}
133132
}
134133

135-
switchTab(event) {
134+
showPluginInfo(pluginName, config) {
135+
const bubble = document.createElement('div');
136+
bubble.style.cssText = `
137+
background: linear-gradient(to bottom, #2a2a2a, #1f1f1f);
138+
border: 1px solid #333;
139+
border-left: 4px solid #4fc3f7;
140+
border-radius: 6px;
141+
margin-bottom: 12px;
142+
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
143+
overflow: hidden;
144+
transition: max-height 0.3s ease, padding 0.3s ease;
145+
`;
146+
147+
const header = document.createElement('div');
148+
header.style.cssText = `
149+
font-size: 14px;
150+
font-weight: bold;
151+
color: #4fc3f7;
152+
padding: 10px 12px;
153+
cursor: pointer;
154+
user-select: none;
155+
position: relative;
156+
`;
157+
header.textContent = `🔌 ${pluginName}`;
158+
159+
const indicator = document.createElement('span');
160+
indicator.textContent = '▶';
161+
indicator.style.cssText = `
162+
position: absolute;
163+
right: 12px;
164+
top: 10px;
165+
font-size: 12px;
166+
transform-origin: center;
167+
transition: transform 0.3s ease;
168+
`;
169+
header.appendChild(indicator);
170+
171+
const content = document.createElement('div');
172+
content.style.cssText = `
173+
max-height: 0;
174+
overflow: hidden;
175+
transition: max-height 0.3s ease, padding 0.3s ease;
176+
padding: 0 12px;
177+
`;
178+
179+
const list = document.createElement('ul');
180+
list.style.cssText = `
181+
list-style-type: none;
182+
padding-left: 0;
183+
margin: 0;
184+
`;
185+
186+
Object.entries(config).forEach(([key, value]) => {
187+
const item = document.createElement('li');
188+
item.innerHTML = `<span style="color:#bbb;">${key}:</span> <span style="color:#fff;">${value}</span>`;
189+
item.style.marginBottom = '4px';
190+
list.appendChild(item);
191+
});
192+
193+
content.appendChild(list);
194+
bubble.appendChild(header);
195+
bubble.appendChild(content);
196+
this.$infoContainer.prepend(bubble);
197+
198+
let expanded = false;
199+
header.addEventListener('click', () => {
200+
expanded = !expanded;
201+
if (expanded) {
202+
content.style.maxHeight = `${content.scrollHeight}px`;
203+
content.style.padding = '10px 12px';
204+
indicator.textContent = '▼';
205+
} else {
206+
content.style.maxHeight = '0';
207+
content.style.padding = '0 12px';
208+
indicator.textContent = '▶';
209+
}
210+
});
211+
}
212+
213+
_switchTab(event) {
136214
const selectedTab = event.target.dataset.tab;
137215
this.$tabs.each(function () {
138216
this.classList.toggle('active', this.dataset.tab === selectedTab);
@@ -149,6 +227,7 @@
149227
}
150228
}
151229

230+
// this is just a wrapper around the custom-element, adding it to the DOM tree if not there yet
152231
const DevStudio = {
153232
devStudio: null,
154233

@@ -167,9 +246,8 @@
167246
}
168247
}
169248

170-
// bind the module
249+
// initialize the module once Breinify is ready
171250
const BoundDevStudio = Breinify.plugins._add('devStudio', DevStudio);
172-
173251
Breinify.onReady(function () {
174252
BoundDevStudio.init();
175253
});

‎dist/breinify-dev-studio.min.js

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(()=>{let o=Breinify.UTL._jquery(),t={resizable:function(t){let e=o("body"),i=t.find("#resize-handle").data("isResizing",!1);i.mousedown(t=>{i.data({isResizing:!0,startX:t.clientX,startWidth:i.parent()[0].getBoundingClientRect().width}),e.css("user-select","none"),t.preventDefault()}),o(document).on("mouseup blur",t=>{!0===i.data("isResizing")&&(i.data("isResizing",!1),e.css("user-select",""))}),o(document).mousemove(t=>{var e;!0!=!i.data("isResizing")&&(e=i.data("startWidth"),t=i.data("startX")-t.clientX,e=Math.min(Math.max(e+t,200),1e3),i.parent().css("width",e+"px"))})}};class e extends HTMLElement{$shadowRoot=null;$toggleButton=null;$panel=null;$closeBtn=null;$tabs=null;$logContainer=null;$infoContainer=null;constructor(){super(),this.attachShadow({mode:"open"}),this.isVisible=!0,this.render(),this.toggleDevStudio()}render(){this.shadowRoot.innerHTML=`
1+
(()=>{let o=Breinify.UTL._jquery(),t={resizable:function(t){let e=o("body"),i=t.find("#resize-handle").data("isResizing",!1);i.mousedown(t=>{i.data({isResizing:!0,startX:t.clientX,startWidth:i.parent()[0].getBoundingClientRect().width}),e.css("user-select","none"),t.preventDefault()}),o(document).on("mouseup blur",()=>{!0===i.data("isResizing")&&(i.data("isResizing",!1),e.css("user-select",""))}),o(document).mousemove(t=>{var e;!0!=!i.data("isResizing")&&(e=i.data("startWidth"),t=i.data("startX")-t.clientX,e=Math.min(Math.max(e+t,200),1e3),i.parent().css("width",e+"px"))})}};class e extends HTMLElement{$shadowRoot=null;$toggleButton=null;$panel=null;$closeBtn=null;$tabs=null;$logContainer=null;$infoContainer=null;constructor(){super(),this.attachShadow({mode:"open"}),this.isVisible=!0,this.render(),this.toggleDevStudio()}render(){this.shadowRoot.innerHTML=`
22
<style>
33
:host { all: initial; }
44
div.title { display: flex; flex-flow: row; font-weight: bold; font-size: 14px; line-height: 14px; padding: 6px 10px; }
@@ -35,4 +35,37 @@
3535
<div id="log-container" class="container active"></div>
3636
<div id="info-container" class="container"></div>
3737
</div>
38-
<div id="toggle-button" title="Show Breinify DevStudio" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24"><path d="M12 2C8.1 2 6 4.4 6 7v5c0 .5-.2.9-.5 1.3-.3.4-.5.9-.5 1.4v.3c.1.6.5 1.1 1 1.5.5.4.8 1 .8 1.6 0 .6.2 1.1.5 1.5s.7.7 1.2.9V21c0 .6.4 1 1 1s1-.4 1-1v-1h2v1c0 .6.4 1 1 1s1-.4 1-1v-1.5c.5-.2.9-.5 1.2-.9s.5-.9.5-1.5c0-.6.3-1.2.8-1.6.5-.4.9-.9 1-1.5v-.3c0-.5-.2-1-.5-1.4-.3-.4-.5-.9-.5-1.3V7c0-2.6-2.1-5-6-5z"/></svg></div>`,this.$shadowRoot=o(this.shadowRoot),this.$toggleButton=this.$shadowRoot.find("#toggle-button"),this.$panel=this.$shadowRoot.find("#panel"),this.$closeBtn=this.$shadowRoot.find("button.close-btn"),this.$tabs=this.$shadowRoot.find("button.tab"),this.$logContainer=this.$shadowRoot.find("#log-container"),this.$infoContainer=this.$shadowRoot.find("#info-container"),this.$closeBtn.click(()=>this.toggleDevStudio()),this.$toggleButton.click(()=>this.toggleDevStudio()),this.$tabs.click(t=>this.switchTab(t)),t.resizable(this.$shadowRoot)}toggleDevStudio(){this.isVisible=!this.isVisible,this.isVisible?(this.$panel.css("transform","translateY(0)"),this.$panel.css("opacity","1"),this.$toggleButton.css("display","none")):(this.$panel.css("transform","translateY(100%)"),this.$panel.css("opacity","0"),this.$toggleButton.css("display","flex"))}switchTab(t){let e=t.target.dataset.tab;this.$tabs.each(function(){this.classList.toggle("active",this.dataset.tab===e)}),"console"===e?(this.$logContainer.addClass("active"),this.$infoContainer.removeClass("active")):"info"===e&&(this.$logContainer.removeClass("active"),this.$infoContainer.addClass("active"))}}let i=Breinify.plugins._add("devStudio",{devStudio:null,init:function(){var t;!0===Breinify.UTL.internal.isDevMode()&&null===this.devStudio&&(t="breinify-dev-console",customElements.define(t,e),this.devStudio=document.createElement(t),document.body.appendChild(this.devStudio))}});Breinify.onReady(function(){i.init()})})();
38+
<div id="toggle-button" title="Show Breinify DevStudio" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24"><path d="M12 2C8.1 2 6 4.4 6 7v5c0 .5-.2.9-.5 1.3-.3.4-.5.9-.5 1.4v.3c.1.6.5 1.1 1 1.5.5.4.8 1 .8 1.6 0 .6.2 1.1.5 1.5s.7.7 1.2.9V21c0 .6.4 1 1 1s1-.4 1-1v-1h2v1c0 .6.4 1 1 1s1-.4 1-1v-1.5c.5-.2.9-.5 1.2-.9s.5-.9.5-1.5c0-.6.3-1.2.8-1.6.5-.4.9-.9 1-1.5v-.3c0-.5-.2-1-.5-1.4-.3-.4-.5-.9-.5-1.3V7c0-2.6-2.1-5-6-5z"/></svg></div>`,this.$shadowRoot=o(this.shadowRoot),this.$toggleButton=this.$shadowRoot.find("#toggle-button"),this.$panel=this.$shadowRoot.find("#panel"),this.$closeBtn=this.$shadowRoot.find("button.close-btn"),this.$tabs=this.$shadowRoot.find("button.tab"),this.$logContainer=this.$shadowRoot.find("#log-container"),this.$infoContainer=this.$shadowRoot.find("#info-container"),this.$closeBtn.click(()=>this.toggleDevStudio()),this.$toggleButton.click(()=>this.toggleDevStudio()),this.$tabs.click(t=>this._switchTab(t)),t.resizable(this.$shadowRoot)}toggleDevStudio(){this.isVisible=!this.isVisible,this.isVisible?(this.$panel.css("transform","translateY(0)"),this.$panel.css("opacity","1"),this.$toggleButton.css("display","none")):(this.$panel.css("transform","translateY(100%)"),this.$panel.css("opacity","0"),this.$toggleButton.css("display","flex"))}showPluginInfo(t,e){var i=document.createElement("div"),o=(i.style.cssText=`
39+
background: linear-gradient(to bottom, #2a2a2a, #1f1f1f);
40+
border: 1px solid #333;
41+
border-left: 4px solid #4fc3f7;
42+
border-radius: 6px;
43+
margin-bottom: 12px;
44+
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
45+
overflow: hidden;
46+
transition: max-height 0.3s ease, padding 0.3s ease;
47+
`,document.createElement("div"));o.style.cssText=`
48+
font-size: 14px;
49+
font-weight: bold;
50+
color: #4fc3f7;
51+
padding: 10px 12px;
52+
cursor: pointer;
53+
user-select: none;
54+
position: relative;
55+
`,o.textContent="🔌 "+t;let n=document.createElement("span"),s=(n.textContent="▶",n.style.cssText=`
56+
position: absolute;
57+
right: 12px;
58+
top: 10px;
59+
font-size: 12px;
60+
transform-origin: center;
61+
transition: transform 0.3s ease;
62+
`,o.appendChild(n),document.createElement("div")),a=(s.style.cssText=`
63+
max-height: 0;
64+
overflow: hidden;
65+
transition: max-height 0.3s ease, padding 0.3s ease;
66+
padding: 0 12px;
67+
`,document.createElement("ul")),d=(a.style.cssText=`
68+
list-style-type: none;
69+
padding-left: 0;
70+
margin: 0;
71+
`,Object.entries(e).forEach(([t,e])=>{var i=document.createElement("li");i.innerHTML=`<span style="color:#bbb;">${t}:</span> <span style="color:#fff;">${e}</span>`,i.style.marginBottom="4px",a.appendChild(i)}),s.appendChild(a),i.appendChild(o),i.appendChild(s),this.$infoContainer.prepend(i),!1);o.addEventListener("click",()=>{(d=!d)?(s.style.maxHeight=s.scrollHeight+"px",s.style.padding="10px 12px",n.textContent="▼"):(s.style.maxHeight="0",s.style.padding="0 12px",n.textContent="▶")})}_switchTab(t){let e=t.target.dataset.tab;this.$tabs.each(function(){this.classList.toggle("active",this.dataset.tab===e)}),"console"===e?(this.$logContainer.addClass("active"),this.$infoContainer.removeClass("active")):"info"===e&&(this.$logContainer.removeClass("active"),this.$infoContainer.addClass("active"))}}let i=Breinify.plugins._add("devStudio",{devStudio:null,init:function(){var t;!0===Breinify.UTL.internal.isDevMode()&&null===this.devStudio&&(t="breinify-dev-console",customElements.define(t,e),this.devStudio=document.createElement(t),document.body.appendChild(this.devStudio))}});Breinify.onReady(function(){i.init()})})();

‎src/plugins/DevStudio.js

Lines changed: 85 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
resizable: function ($shadowRoot) {
88
const $body = $('body');
99

10-
const $resizeHandle = $shadowRoot.find('#resize-handle')
11-
.data('isResizing', false);
10+
const $resizeHandle = $shadowRoot.find('#resize-handle').data('isResizing', false);
1211
$resizeHandle.mousedown(e => {
1312
$resizeHandle.data({
1413
isResizing: true,
@@ -19,7 +18,7 @@
1918
$body.css('user-select', 'none');
2019
e.preventDefault();
2120
});
22-
$(document).on('mouseup blur', e => {
21+
$(document).on('mouseup blur', () => {
2322
if ($resizeHandle.data('isResizing') === true) {
2423
$resizeHandle.data('isResizing', false);
2524
$body.css('user-select', '');
@@ -113,7 +112,7 @@
113112
this.$closeBtn.click(() => this.toggleDevStudio());
114113
this.$toggleButton.click(() => this.toggleDevStudio());
115114

116-
this.$tabs.click(e => this.switchTab(e));
115+
this.$tabs.click(e => this._switchTab(e));
117116

118117
_private.resizable(this.$shadowRoot);
119118
}
@@ -132,7 +131,86 @@
132131
}
133132
}
134133

135-
switchTab(event) {
134+
showPluginInfo(pluginName, config) {
135+
const bubble = document.createElement('div');
136+
bubble.style.cssText = `
137+
background: linear-gradient(to bottom, #2a2a2a, #1f1f1f);
138+
border: 1px solid #333;
139+
border-left: 4px solid #4fc3f7;
140+
border-radius: 6px;
141+
margin-bottom: 12px;
142+
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
143+
overflow: hidden;
144+
transition: max-height 0.3s ease, padding 0.3s ease;
145+
`;
146+
147+
const header = document.createElement('div');
148+
header.style.cssText = `
149+
font-size: 14px;
150+
font-weight: bold;
151+
color: #4fc3f7;
152+
padding: 10px 12px;
153+
cursor: pointer;
154+
user-select: none;
155+
position: relative;
156+
`;
157+
header.textContent = `🔌 ${pluginName}`;
158+
159+
const indicator = document.createElement('span');
160+
indicator.textContent = '▶';
161+
indicator.style.cssText = `
162+
position: absolute;
163+
right: 12px;
164+
top: 10px;
165+
font-size: 12px;
166+
transform-origin: center;
167+
transition: transform 0.3s ease;
168+
`;
169+
header.appendChild(indicator);
170+
171+
const content = document.createElement('div');
172+
content.style.cssText = `
173+
max-height: 0;
174+
overflow: hidden;
175+
transition: max-height 0.3s ease, padding 0.3s ease;
176+
padding: 0 12px;
177+
`;
178+
179+
const list = document.createElement('ul');
180+
list.style.cssText = `
181+
list-style-type: none;
182+
padding-left: 0;
183+
margin: 0;
184+
`;
185+
186+
Object.entries(config).forEach(([key, value]) => {
187+
const item = document.createElement('li');
188+
item.innerHTML = `<span style="color:#bbb;">${key}:</span> <span style="color:#fff;">${value}</span>`;
189+
item.style.marginBottom = '4px';
190+
list.appendChild(item);
191+
});
192+
193+
content.appendChild(list);
194+
bubble.appendChild(header);
195+
bubble.appendChild(content);
196+
this.$infoContainer.prepend(bubble);
197+
198+
let expanded = false;
199+
header.addEventListener('click', () => {
200+
expanded = !expanded;
201+
if (expanded) {
202+
content.style.maxHeight = `${content.scrollHeight}px`;
203+
content.style.padding = '10px 12px';
204+
indicator.textContent = '▼';
205+
} else {
206+
content.style.maxHeight = '0';
207+
content.style.padding = '0 12px';
208+
indicator.textContent = '▶';
209+
}
210+
});
211+
}
212+
213+
_switchTab(event) {
136214
const selectedTab = event.target.dataset.tab;
137215
this.$tabs.each(function () {
138216
this.classList.toggle('active', this.dataset.tab === selectedTab);
@@ -149,6 +227,7 @@
149227
}
150228
}
151229

230+
// this is just a wrapper around the custom-element, adding it to the DOM tree if not there yet
152231
const DevStudio = {
153232
devStudio: null,
154233

@@ -167,9 +246,8 @@
167246
}
168247
}
169248

170-
// bind the module
249+
// initialize the module once Breinify is ready
171250
const BoundDevStudio = Breinify.plugins._add('devStudio', DevStudio);
172-
173251
Breinify.onReady(function () {
174252
BoundDevStudio.init();
175253
});

0 commit comments

Comments
 (0)