Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing several issues in fdc3 explained #18

Merged
merged 1 commit into from
Mar 16, 2022
Merged

Fixing several issues in fdc3 explained #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion toolbox/fdc3-explained/1.1/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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