Skip to content

Commit

Permalink
Fixing several issues in fdc3 explained: bad handling of channel meta…
Browse files Browse the repository at this point in the history 
…data, issues with join and leave channel buttons, formatting of contexts, separating get context action onto a button for clarity/consistency, adjusting styles
  • Loading branch information
@kriswest
kriswest committed Feb 23, 2022
1 parent 78560ea commit 2ee038d
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 37 deletions.
3 changes: 2 additions & 1 deletion toolbox/fdc3-explained/1.1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,12 @@
</tr>

<tr>
<td class="header" rowspan="3">Get Context:</td>
<td class="header" rowspan="3">Context received:</td>
</tr>

<tr>
<td>Context Type: <input type="text" id="context-type"></td>
<td><Button type="button" id="get_context__btn" disabled>Get context</Button></td>
</tr>

<tr>
Expand Down
28 changes: 11 additions & 17 deletions toolbox/fdc3-explained/1.1/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@ async function populateHTML() {
//populate available channels list with system channels
const channelList = document.getElementById('system-channel-list');

const populateChannelsList = name => {
const populateChannelsList = id => {
let node = document.createElement('li');
let textNode = document.createTextNode(name);
let textNode = document.createTextNode(id);
node.appendChild(textNode);
channelList.appendChild(node);
};
Expand All @@ -79,9 +79,8 @@ async function populateHTML() {

// for all of the system channels populate dropdowns & lists
systemChannels.forEach(({ displayMetadata, id, type }) => {
let { name } = displayMetadata;
populateChannelsList(name);
populateChannelsDropDown(name);
populateChannelsList(id);
populateChannelsDropDown(id);
});

// as FDC3 is supported we can enable the buttons again except those that are not yet supported features
Expand All @@ -100,20 +99,15 @@ function setUpEventListeners() {

document.getElementById('join-channel__btn').addEventListener('click', joinChannel);

document.getElementById('leave-channel__btn').addEventListener('click', fdc3.leaveCurrentChannel);
document.getElementById('leave-channel__btn').addEventListener('click', () => { fdc3.leaveCurrentChannel(); });

document.getElementById('broadcast__btn').addEventListener('click', broadcastFDC3Context);

document.getElementById('raise-intent__btn').addEventListener('click', raiseIntent);

document.getElementById('context-type').addEventListener('keyup', event => {
// we only want to get the context wen the user hits enter
if (event.key === 'Enter') {
event.preventDefault();

let contextType = event.target.value;
getContext(contextType);
}
document.getElementById('get_context__btn').addEventListener('click', event => {
let contextType = document.getElementById('context-type').value;
getContext(contextType);
});
}

Expand All @@ -137,7 +131,7 @@ function populateChannelsDropDown(newOptionText) {
function joinChannel() {
try {
let dropdownElement = document.getElementById('join-channel');
let channelName = dropdownElement.options[dropdownElement.selectedIndex].text.toLowerCase();
let channelName = dropdownElement.options[dropdownElement.selectedIndex].text;
fdc3.joinChannel(channelName);
} catch (error) {
console.error("Can't join channel", error);
Expand All @@ -162,10 +156,10 @@ async function getContext(contextType) {
if (contextType) {
contextListener = fdc3.addContextListener(
contextType,
context => (contextResultBox.value = JSON.stringify(context))
context => (contextResultBox.value = JSON.stringify(context, null, 2))
);
} else {
contextListener = fdc3.addContextListener(context => (contextResultBox.value = JSON.stringify(context)));
contextListener = fdc3.addContextListener(context => (contextResultBox.value = JSON.stringify(context, null, 2)));
}
} catch (error) {
console.error('Unable to add a context listener', error);
Expand Down
3 changes: 2 additions & 1 deletion toolbox/fdc3-explained/1.2/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,12 @@
</tr>

<tr>
<td class="header" rowspan="3">Get Context:</td>
<td class="header" rowspan="3">Context received:</td>
</tr>

<tr>
<td>Context Type: <input type="text" id="context-type"></td>
<td><Button type="button" id="get_context__btn" disabled>Get context</Button></td>
</tr>

<tr>
Expand Down
27 changes: 11 additions & 16 deletions toolbox/fdc3-explained/1.2/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ async function populateHTML() {
//populate available channels list with system channels
let channelList = document.getElementById('system-channel-list');

const populateChannelsList = name => {
const populateChannelsList = id => {
let node = document.createElement('li');
let textNode = document.createTextNode(name);
let textNode = document.createTextNode(id);
node.appendChild(textNode);
channelList.appendChild(node);
};
Expand All @@ -76,9 +76,9 @@ async function populateHTML() {

// for all of the system channels populate dropdowns & lists
systemChannels.forEach(({ displayMetadata, id, type }) => {
let { name } = displayMetadata;
populateChannelsList(name);
populateChannelsDropDown(name);
//use the id field as this is what is needed to join the channel
populateChannelsList(id);
populateChannelsDropDown(id);
});

// as FDC3 is supported we can enable the buttons again except those that are not yet supported features
Expand All @@ -97,20 +97,15 @@ function setUpEventListeners() {

document.getElementById('join-channel__btn').addEventListener('click', joinChannel);

document.getElementById('leave-channel__btn').addEventListener('click', fdc3.leaveCurrentChannel);
document.getElementById('leave-channel__btn').addEventListener('click', () => { fdc3.leaveCurrentChannel(); });

document.getElementById('broadcast__btn').addEventListener('click', broadcastFDC3Context);

document.getElementById('raise-intent__btn').addEventListener('click', raiseIntent);

document.getElementById('context-type').addEventListener('keyup', event => {
// we only want to get the context wen the user hits enter
if (event.key === 'Enter') {
event.preventDefault();

let contextType = event.target.value;
document.getElementById('get_context__btn').addEventListener('click', event => {
let contextType = document.getElementById('context-type').value;
getContext(contextType);
}
});
}

Expand All @@ -134,7 +129,7 @@ function populateChannelsDropDown(newOptionText) {
function joinChannel() {
try {
let dropdownElement = document.getElementById('join-channel');
let channelName = dropdownElement.options[dropdownElement.selectedIndex].text.toLowerCase();
let channelName = dropdownElement.options[dropdownElement.selectedIndex].text;
fdc3.joinChannel(channelName);
} catch (error) {
console.error("Can't join channel", error);
Expand All @@ -159,11 +154,11 @@ async function getContext(contextType) {
if (contextType) {
contextListener = fdc3.addContextListener(
contextType,
context => (contextResultBox.innerText = JSON.stringify(context, null, 2))
context => (contextResultBox.innerHTML = "<pre>" + JSON.stringify(context, null, 2)) + "</pre>"
);
} else {
contextListener = fdc3.addContextListener(
context => (contextResultBox.innerText = JSON.stringify(context, null, 2))
context => (contextResultBox.innerHTML= "<pre>" + JSON.stringify(context, null, 2)) + "</pre>"
);
}
} catch (error) {
Expand Down
4 changes: 2 additions & 2 deletions toolbox/fdc3-explained/1.2/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ button:focus {
outline: transparent;
}
input {
background: #55778e;
background: #e8f7ff;
box-shadow: inset -2px -2px 2px 0px rgb(255 255 255 / 12%),
inset 2px 3px 6px 2px rgb(0 0 0 / 19%);
border-radius: 6px;
Expand All @@ -52,7 +52,7 @@ input:focus {
outline: 0;
}
textarea {
background: #55778e;
background: #e8f7ff;
box-shadow: inset -3px -5px 5px 1px rgb(255 255 255 / 12%),
inset 2px 3px 6px 2px rgb(0 0 0 / 19%);
border-radius: 6px;
Expand Down

0 comments on commit 2ee038d

Please sign in to comment.