Skip to content

Commit 72cc182

Browse files
pmeisenpmeisen
committed
added first framework for the dev-studio
1 parent 939be8a commit 72cc182

File tree

3 files changed

+86
-82
lines changed

3 files changed

+86
-82
lines changed

‎dist/breinify-dev-studio.js

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@
33
(function () {
44

55
class BreinifyDevConsole extends HTMLElement {
6+
$shadowRoot = null;
7+
$toggleButton = null;
8+
$panel = null;
9+
$closeBtn = null;
10+
$tabs = null;
11+
12+
$logContainer = null;
13+
$infoContainer = null;
14+
615
constructor() {
716
super();
817

@@ -13,6 +22,7 @@
1322

1423
this.render();
1524
this.hookConsole();
25+
this.toggleDevStudio();
1626
}
1727

1828
render() {
@@ -28,7 +38,8 @@
2838
header button.tab { background: transparent; border: none; color: #ccc; cursor: pointer; padding: 4px 8px; font-size: 12px; border-bottom: 2px solid transparent; transition: border-color 0.15s ease; }
2939
header button.tab.active { border-bottom-color: #fff; color: white; }
3040
header button.tab:hover:not(.active) { color: #fff; }
31-
#log-container { flex-grow: 1; background: #1e1e1e; padding: 10px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; color: white; }
41+
div.container { display: none; flex-grow: 1; background: #1e1e1e; padding: 10px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; color: white; }
42+
div.container.active { display: block; }
3243
#toggle-button { position: fixed; bottom: 10px; right: 10px; width: 32px; height: 32px; background: #333; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; z-index: 1000000; box-shadow: 0 0 5px rgba(0,0,0,0.3); transition: opacity 0.2s ease-out; display: none; }
3344
#toggle-button:hover svg path { fill: #ccc; }
3445
::-webkit-scrollbar { width: 6px; }
@@ -46,61 +57,53 @@
4657
<button class="tab" data-tab="info">Info</button>
4758
</div>
4859
</header>
49-
<div id="log-container"></div>
60+
<div id="log-container" class="container active"></div>
61+
<div id="info-container" class="container"></div>
5062
</div>
5163
<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>`;
5264

53-
this.logContainer = this.shadowRoot.querySelector('#log-container');
54-
this.toggleButton = this.shadowRoot.querySelector('#toggle-button');
55-
this.panel = this.shadowRoot.querySelector('#panel');
56-
this.closeBtn = this.shadowRoot.querySelector('button.close-btn');
57-
this.tabs = this.shadowRoot.querySelectorAll('button.tab');
65+
this.$shadowRoot = $(this.shadowRoot);
66+
this.$toggleButton = this.$shadowRoot.find('#toggle-button');
67+
this.$panel = this.$shadowRoot.find('#panel');
68+
this.$closeBtn = this.$shadowRoot.find('button.close-btn');
69+
this.$tabs = this.$shadowRoot.find('button.tab');
5870

59-
this.closeBtn.addEventListener('click', () => this.toggleConsole());
60-
this.toggleButton.addEventListener('click', () => this.toggleConsole());
71+
this.$logContainer = this.$shadowRoot.find('#log-container');
72+
this.$infoContainer = this.$shadowRoot.find('#info-container');
6173

62-
this.tabs.forEach(tab => tab.addEventListener('click', e => this.switchTab(e)));
74+
this.$closeBtn.click(() => this.toggleDevStudio());
75+
this.$toggleButton.click(() => this.toggleDevStudio());
76+
77+
this.$tabs.click(e => this.switchTab(e));
6378
}
6479

65-
toggleConsole() {
80+
toggleDevStudio() {
6681
this.isVisible = !this.isVisible;
6782

6883
if (this.isVisible) {
69-
this.panel.style.transform = 'translateY(0)';
70-
this.panel.style.opacity = '1';
71-
this.toggleButton.style.display = 'none';
84+
this.$panel.css('transform', 'translateY(0)');
85+
this.$panel.css('opacity', '1');
86+
this.$toggleButton.css('display', 'none');
7287
} else {
73-
this.panel.style.transform = 'translateY(100%)';
74-
this.panel.style.opacity = '0';
75-
this.toggleButton.style.display = 'flex';
88+
this.$panel.css('transform', 'translateY(100%)');
89+
this.$panel.css('opacity', '0');
90+
this.$toggleButton.css('display', 'flex');
7691
}
7792
}
7893

7994
switchTab(event) {
8095
const selectedTab = event.target.dataset.tab;
81-
this.tabs.forEach(tab => {
82-
tab.classList.toggle('active', tab.dataset.tab === selectedTab);
96+
this.$tabs.each(function () {
97+
this.classList.toggle('active', this.dataset.tab === selectedTab);
8398
});
8499

85100
// For now, just clear or keep logs on console tab, and show placeholder on info tab
86101
if (selectedTab === 'console') {
87-
this.logContainer.style.display = 'block';
88-
if (this.infoDiv) this.infoDiv.style.display = 'none';
102+
this.$logContainer.addClass('active');
103+
this.$infoContainer.removeClass('active');
89104
} else if (selectedTab === 'info') {
90-
91-
// Lazy create info div
92-
if (!this.infoDiv) {
93-
this.infoDiv = document.createElement('div');
94-
this.infoDiv.textContent = 'Information tab content goes here.';
95-
this.infoDiv.style.padding = '10px';
96-
this.infoDiv.style.color = '#ddd';
97-
this.infoDiv.style.height = '100%';
98-
this.infoDiv.style.overflowY = 'auto';
99-
this.logContainer.after(this.infoDiv);
100-
}
101-
102-
this.logContainer.style.display = 'none';
103-
this.infoDiv.style.display = 'block';
105+
this.$logContainer.removeClass('active');
106+
this.$infoContainer.addClass('active');
104107
}
105108
}
106109

@@ -128,10 +131,8 @@
128131
info: 'lightblue'
129132
}[method];
130133

131-
if (this.logContainer) {
132-
this.logContainer.appendChild(entry);
133-
this.logContainer.scrollTop = this.logContainer.scrollHeight;
134-
}
134+
this.$logContainer.append(entry);
135+
this.$logContainer.get(0).scrollTop = this.$logContainer.get(0).scrollHeight;
135136

136137
original.apply(console, args);
137138
};

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

Lines changed: 6 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)