Skip to content

Commit

Permalink
new way to setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@ritwickdey
ritwickdey committed Jun 16, 2018
1 parent e92c255 commit f7436c4
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 24 deletions.
1 change: 1 addition & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"files.trimTrailingWhitespace": false,
"editor.minimap.enabled": false
},
"liveServer.settings.multiRootWorkspaceName": "live-server-web-extension",
// "liveServer.settings.proxy": {
// "enable": true,
// "baseUri": "/",
Expand Down
47 changes: 38 additions & 9 deletions popup/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
@import "button.css";


*,
*::after,
*,
*::after,
*::before {
box-sizing: border-box;
font-size: 15px;
Expand All @@ -26,7 +24,7 @@ body {
background-color: #d5d5d5;
}

.header > p {
.header>p {
font-size: 12px;
font-style: italic;
font-weight: 400;
Expand All @@ -40,10 +38,10 @@ body {
letter-spacing: 0.9px;
background-color: #d5d5d5;
display: block;
padding: 5px ;
padding: 5px;
}

.footer > p {
.footer>p {
font-size: 10px;
padding: 10px;
}
Expand Down Expand Up @@ -78,10 +76,14 @@ body {
.hide {
display: none;
}
input:focus, button:focus {

input:focus,
button:focus {
outline: none;
}
label[for="proxyCheckBox"], input[type="checkbox"] {

label[for="proxyCheckBox"],
input[type="checkbox"] {
cursor: pointer;
}

Expand All @@ -95,6 +97,11 @@ label[for="proxyCheckBox"], input[type="checkbox"] {
cursor: pointer;
user-select: none;
border: 0px;
transition: all 0.3s ease-in-out;
}

.btn:active {
transform: scale(0.8);
}

.btn-highlight {
Expand All @@ -111,4 +118,26 @@ label[for="proxyCheckBox"], input[type="checkbox"] {
font-size: 10px;
float: right;
margin-right: 6px;
}

#liveServerPort {
width: 65%;
}

#liveServerConnBtn {
display: inline-block;
width: 34%;
vertical-align: bottom;
font-size: 12px;
margin-right: -5px;
}

#liveServerConnBtn.connected {
background: green;
color: #fff
}

#liveServerConnBtn.not-connected {
background: red;
color: #fff
}
14 changes: 8 additions & 6 deletions popup/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,22 +31,23 @@
<div class="row">
<div>
<input type="checkbox" id="noProxyCheckBox">
<label for="noProxyCheckBox">I don't want proxy setup (recommended)</label>
<label for="noProxyCheckBox">No complicated Proxy Setup (recommended)</label>
</div>
</div>

<div id="serverSetup">
<div class="row">
<div>
<label class="form-label" for="actualServer">Actual Server Address</label>
<label class="form-label" for="actualServer">Original Server Address</label>

This comment has been minimized.

Sign in to view

Copy link
@Mikael-Sundstrom

Mikael-Sundstrom Jun 17, 2018

Collaborator

I have a thought regarding client-side and server-side addresses. The idea I have is that the extension will work for either server-side or client-side.
What do you think? Is it clearer to specify: client-side address and server-side address, instead of live server address and actual server address? Or can they become misleading?

I see that you switch to original here from actual, which I think is much clearer than using the word actual.

This comment has been minimized.

Sign in to view

Copy link
@ritwickdey

ritwickdey Jun 17, 2018

Author Owner

actually, I'm no more asking for live server address. I just asking port number of Live Server & by default it's value will be 5500.

"Live Server Port" & "Original Server". Is this good?

This comment has been minimized.

Sign in to view

Copy link
@ritwickdey

ritwickdey Jun 17, 2018

Author Owner

A preview

image

This comment has been minimized.

Sign in to view

Copy link
@ritwickdey

ritwickdey Jun 17, 2018

Author Owner

& if we've entered wrong port

image

This comment has been minimized.

Sign in to view

Copy link
@Mikael-Sundstrom

Mikael-Sundstrom Jun 17, 2018

Collaborator

Yes, that's a big improvement. I like it.
One thing I'm still thinking about, is what the "original" means for a newbie. I would change Original Server Address to Server-side host, because I think this will guide the user to start their own server like XAMPP.
<input class="form-control" type="text" id="actualServer" placeholder="http://Your Server Address">
</div>
</div>

<div class="row">
<div>
<label class="form-label" for="liveServer">Live Server Address</label>
<input class="form-control" type="text" id="liveServer" placeholder="Eg. http://127.0.0.1:5500/">
<label class="form-label" for="liveServerPort">Live Server Port</label>
<input class="form-control" type="number" id="liveServerPort" value="5500">
<button type="button" class="btn" id="liveServerConnBtn">Test Connection</button>
<a class="short-right-label" target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Install Live Server</a>
</div>
</div>
Expand All @@ -57,8 +58,9 @@
</div>
<div class="footer">
<a target="_blank" href="https://github.com/ritwickdey/live-server-web-extension">Need Help?</a>
<p>NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS
or Node.js)</p>
<p>NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS or
Node.js)
</p>
</div>
<script src="./popup.js"></script>
</body>
Expand Down
30 changes: 26 additions & 4 deletions popup/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
const liveReloadCheck = document.getElementById('liveReloadCheck');
const noProxyCheckBox = document.getElementById('noProxyCheckBox');
const actualServerAddress = document.getElementById('actualServer');
const liveServerAddress = document.getElementById('liveServer');
const liveServerPort = document.getElementById('liveServerPort');
const submitBtn = document.getElementById('submitBtn');
const liveServerConnBtn = document.getElementById('liveServerConnBtn');

const serverSetupDiv = document.getElementById('serverSetup');

Expand All @@ -15,7 +16,8 @@
isEnable: liveReloadCheck.checked,
proxySetup: !noProxyCheckBox.checked,
actualUrl: actualServerAddress.value || '',
liveServerUrl: liveServerAddress.value || ''
// liveServerUrl: `http://127.0.0.1:${liveServerPort.value}`,
liveServerPort: liveServerPort.value
}

chrome.runtime.sendMessage({
Expand Down Expand Up @@ -43,7 +45,7 @@
liveReloadCheck.checked = data.isEnable || false;
noProxyCheckBox.checked = !data.proxySetup;
actualServerAddress.value = data.actualUrl || '';
liveServerAddress.value = data.liveServerUrl || '';
liveServerPort.value = data.liveServerPort || 5500;
serverSetupDiv.className = noProxyCheckBox.checked ? 'show' : 'hide';
});
});
Expand All @@ -54,10 +56,30 @@
submitBtn.disabled = true;
}

liveServerAddress.onkeyup = actualServerAddress.onkeyup = () => {
liveServerPort.onkeyup = actualServerAddress.onkeyup = () => {
submitBtn.disabled = false;
submitBtn.classList.add('btn-highlight');
liveServerConnBtn.innerText = 'Test Connection';
liveServerConnBtn.classList.remove('connected');
liveServerConnBtn.classList.remove('not-connected');
}

liveServerConnBtn.onclick = () => {
const ws = new WebSocket(`ws://127.0.0.1:${liveServerPort.value}/ws`)
ws.onerror = () => {
liveServerConnBtn.classList.remove('connected');
liveServerConnBtn.classList.add('not-connected');
liveServerConnBtn.innerText = "Not Connected"
console.log('not connected');
}
ws.onmessage = () => {
liveServerConnBtn.classList.add('connected');
liveServerConnBtn.classList.remove('not-connected');
liveServerConnBtn.innerText = "Connected"
console.log('connected');
ws.close();
}
};


})();
10 changes: 5 additions & 5 deletions reload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@
function init(data) {
if (!data.proxySetup) {
//Correction
if (data.liveServerUrl.indexOf('http') !== 0)
data.liveServerUrl = 'http' + data.liveServerUrl;
// if (data.liveServerUrl.indexOf('http') !== 0)
// data.liveServerUrl = 'http' + data.liveServerUrl;
if (data.actualUrl.indexOf('http') !== 0)
data.actualUrl = 'http' + data.actualUrl;
data.actualUrl = 'http://' + data.actualUrl;
if (!data.actualUrl.endsWith('/'))
data.actualUrl = data.actualUrl + '/';

address = data.liveServerUrl.replace('http', 'ws') + '/ws';
// address = data.liveServerUrl.replace('http', 'ws') + '/ws';
}
socket = new WebSocket(address);
socket = new WebSocket(`ws://127.0.0.1:${data.liveServerPort}/ws`);
socket.onmessage = (msg) => {
reloadWindow(msg, data)
};
Expand Down

0 comments on commit f7436c4

Please sign in to comment.