Skip to content

Commit

Permalink
Merge pull request #18 from kriswest/fdc3-explained
Browse files Browse the repository at this point in the history 
Fixing several issues in fdc3 explained
  • Loading branch information
@rikoe
rikoe authored Mar 16, 2022
2 parents 78560ea + 2ee038d commit fd7fefe
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 fd7fefe

Please sign in to comment.