Implement Adding Social Handle Commands on Save in Info Panel
Overview
You have to implement functionality of adding commands in commands table under Info panel which displays the commands of links entered whenever user clicks Save button in Edit panel.
Requirements
After adding some links in Edit panel, whenever user clicks Save button, it should add commands of those social handles in commands table under Info panel.
It should only add commands of those social handles of those links which are completed.
A link is completed, when there's no bottom line present below the link in Edit panel.
2nd link shown in first image is completed link, others are invalid/incompleted links.
You can use isValidURL() function from index.js to check whether a link is valid or not.
Or you can check for CSS styling too, both should work.
It should create the command row save as provided in 2nd image.
The command row must have two columns, 1st is command name, which is same as the Social media name with a \ prefix and 2nd is Social media name.
It should have same design and layout as shown in 2nd image.
For creating the command row, you can use createSocialLink(key, value) function from index.js, where key can be retrieve from socialLinks object, which is the name of Social media and value should be same as the provided link in input element of link-box in Edit panel.
To test the code, setup the extension by following these steps.
All the functionality should be implemented in index.js only.
Structure
Structure of a command row is provided below and you have to create the layout as it is but in JavaScript, don't use this a template, rather use Javascript document.createElement() function to create elements.
Implement Adding Social Handle Commands on Save in Info Panel
Overview
You have to implement functionality of adding commands in
commands
table under Info panel which displays the commands of links entered whenever user clicks Save button in Edit panel.Requirements
isValidURL()
function fromindex.js
to check whether a link is valid or not.\
prefix and 2nd is Social media name.createSocialLink(key, value)
function fromindex.js
, wherekey
can be retrieve fromsocialLinks
object, which is the name of Social media andvalue
should be same as the provided link in input element oflink-box
in Edit panel.index.js
only.Structure
document.createElement()
function to create elements.If you have any suggestion or idea, you're welcome to share.
Let's implement SocialRepo's save button functionality! 🙌