#### Repository https://github.com/MWFIAE/Steemit-Sidebar #### Pull-Request (Aug. 7. 2018) https://github.com/MWFIAE/Steemit-Sidebar/pull/31 ## New Features ### Short version: [+] Change side of the sidebar [+] reload settings from other tabs [+] multiple language support [+] more information about Steempower [+] preset user name from logged in user [*] better code commenting ### Long version #### 1. Sidebar-Side _{[Github Commit](https://github.com/MWFIAE/Steemit-Sidebar/commit/f02076bea69f18202daf792dd6dfdef4c7cbb352)} Users can now change the side of the sidebar to their liking: | Left-Side | Right-Side| | :-: | :-: | | [![](https://cdn.steemitimages.com/DQmY427Q8ng85Q3J3ATTc3dGXHg5w3CM7CVfMHTABZEYvGd/image.png)](https://cdn.steemitimages.com/DQmY427Q8ng85Q3J3ATTc3dGXHg5w3CM7CVfMHTABZEYvGd/image.png) | [![](https://cdn.steemitimages.com/DQmetLGi81mL278Ymb2vpkCkLZZY6aQ6ooFoC9LMNbG2TVD/image.png)](https://cdn.steemitimages.com/DQmetLGi81mL278Ymb2vpkCkLZZY6aQ6ooFoC9LMNbG2TVD/image.png) | This is done via the settings menu: [![](https://cdn.steemitimages.com/DQmQkLopTt9NSEyMoZQ7eHCkRKvhYqPJHrtyqwEX9c93SAZ/image.png)](https://cdn.steemitimages.com/DQmQkLopTt9NSEyMoZQ7eHCkRKvhYqPJHrtyqwEX9c93SAZ/image.png) As you can see this setting requires a site-refresh to take effect, so keep that in mind. #### How was that implemented? | | | | :-: | :-: | | [![](https://cdn.steemitimages.com/DQmZQPRbe3gfu3hBcyj3TaV1hgBpmnxCy9yy5S1Q4ijnBeX/image.png)](https://cdn.steemitimages.com/DQmZQPRbe3gfu3hBcyj3TaV1hgBpmnxCy9yy5S1Q4ijnBeX/image.png) | First a little CSS to move the sidebar to the right side if the class ``mw-right`` is set. | | Of course we have to set the class, this is done via a variable in my template. This would also allow a class ``mw-left`` to be set, but this class isn't used as of now. | [![](https://cdn.steemitimages.com/DQmZUu2x7ydxaLsK9KNnpewmZj5LRrHKBJgrUbkoBZgRcmG/image.png)](https://cdn.steemitimages.com/DQmZUu2x7ydxaLsK9KNnpewmZj5LRrHKBJgrUbkoBZgRcmG/image.png) | | [![](https://cdn.steemitimages.com/DQmS6kagEqaCtFNpkaSdyHL6s9TDadZbsaNfMvHKvBmVLQ9/image.png)](https://cdn.steemitimages.com/DQmS6kagEqaCtFNpkaSdyHL6s9TDadZbsaNfMvHKvBmVLQ9/image.png) | Now we need a way to set the change the side we want to use, so I made an extra row in the settings menu. Also the table in the settings menu got messy a bit so I spaced out the code a little more, to make it more readable. | | I added the default value for the side to the ``MWSidebar`` object, nothing fancy | [![](https://cdn.steemitimages.com/DQmaqmJe9tNRUmea39pkrCVqCzgY68ReqaVEUNrpg3BuyQJ/image.png)](https://cdn.steemitimages.com/DQmaqmJe9tNRUmea39pkrCVqCzgY68ReqaVEUNrpg3BuyQJ/image.png) | | [![](https://cdn.steemitimages.com/DQmbeAD6rHDg1k332eka9dY7vf2bzjAgpdW7Ynp6FbghZko/image.png)](https://cdn.steemitimages.com/DQmbeAD6rHDg1k332eka9dY7vf2bzjAgpdW7Ynp6FbghZko/image.png) | I made a little function to update the settings if another option is selected. This will also be useful latter once I remove the need for the refresh | | Instead of always using the right arrow "⟩" if the sidebar is collapsed. We now use "⟩" or "⟨" depending on the setting |[![](https://cdn.steemitimages.com/DQmScQ271ndg2RZkF4JW5BkEskawZrCtiDpm4zA1WNQwNoU/image.png)](https://cdn.steemitimages.com/DQmScQ271ndg2RZkF4JW5BkEskawZrCtiDpm4zA1WNQwNoU/image.png)| | [![](https://cdn.steemitimages.com/DQmWp1by1YRQDjqpfQpVuNDk9yfFht7deTYQEm6YLyx4fhN/image.png)](https://cdn.steemitimages.com/DQmWp1by1YRQDjqpfQpVuNDk9yfFht7deTYQEm6YLyx4fhN/image.png) | The same in reverse if the sidebar is not collapsed | | Finally the saving and loading for this setting was implemented | [![](https://cdn.steemitimages.com/DQmbUQ8heF795R8MHo4BSo8BavPWwKYK5UBrPqcBn4S9RbE/image.png)](https://cdn.steemitimages.com/DQmbUQ8heF795R8MHo4BSo8BavPWwKYK5UBrPqcBn4S9RbE/image.png) | ## Additional Screenshots | The Sidebar on the left side. | And if it is collapsed | | :-: | :-: | |[![](https://cdn.steemitimages.com/DQmfPSgtqfKiJQZgBWcZEKAoJVDKVXNHVNwRitujXq12VxN/image.png)](https://cdn.steemitimages.com/DQmfPSgtqfKiJQZgBWcZEKAoJVDKVXNHVNwRitujXq12VxN/image.png) | [![](https://cdn.steemitimages.com/DQmP8svqkzW3eVwzF5tioBQMnjLFhp52kTUqKkS9MgTzTeB/image.png)](https://cdn.steemitimages.com/DQmP8svqkzW3eVwzF5tioBQMnjLFhp52kTUqKkS9MgTzTeB/image.png) | | The Sidebar on the right side | And if it is collapsed | | [![](https://cdn.steemitimages.com/DQmNX8aRHD99udtMwNJRzn2zn47gum76TF4WGbmokZS8zcW/image.png)](https://cdn.steemitimages.com/DQmNX8aRHD99udtMwNJRzn2zn47gum76TF4WGbmokZS8zcW/image.png) | [![](https://cdn.steemitimages.com/DQmXG3ageX1vs4ySMnWqMkuojPHe9bRomu5v4goHLT2e6ZD/image.png)](https://cdn.steemitimages.com/DQmXG3ageX1vs4ySMnWqMkuojPHe9bRomu5v4goHLT2e6ZD/image.png) | |Click on the little cog to open the settings menu | [![](https://cdn.steemitimages.com/DQmVh5ZASZRKVCYdvNNZDMRKa2swQBrRpWzEpAwTzR3gjAh/image.png)](https://cdn.steemitimages.com/DQmVh5ZASZRKVCYdvNNZDMRKa2swQBrRpWzEpAwTzR3gjAh/image.png) | ||| | :-: | :-: | |[![](https://cdn.steemitimages.com/DQmPEFNYKr7JT2sF2h6NC3ntzNPnSuJV4Zf5y5X8kAkeXSw/image.png)](https://cdn.steemitimages.com/DQmPEFNYKr7JT2sF2h6NC3ntzNPnSuJV4Zf5y5X8kAkeXSw/image.png) | There you will find the option for the Sidebar-Side | *** #### 2. Reload Settings from another tab _{[Github Commit](https://github.com/MWFIAE/Steemit-Sidebar/commit/fe3d6f01c5fdcfb396804237f442ea9cb5627d72)} Often times users will have more than 1 tab open with Steemit. This causes a problem with the settings made in the Steemit-Sidebar. To solve that and improve user experience I implemented automatic reloading of the settings in other tabs. #### How was that implemented? | | | | :-: | :-: | | [![](https://cdn.steemitimages.com/DQmbgoFGxPkMjCePqnh63X6af7KeEQPCoexvZs5brk8yCMX/image.png)](https://cdn.steemitimages.com/DQmbgoFGxPkMjCePqnh63X6af7KeEQPCoexvZs5brk8yCMX/image.png) | Added a new variable to the settings. This will hold the last time the settings were saved. We need this information to detect if new settings were saved in another tab. | | Naturally this variable needs to be filled while loading the settings | [![](https://cdn.steemitimages.com/DQmeUEkbLShtPHgW7nZboG4YUpz4nr87UYehEbL8mxmzWjW/image.png)](https://cdn.steemitimages.com/DQmeUEkbLShtPHgW7nZboG4YUpz4nr87UYehEbL8mxmzWjW/image.png) | | [![](https://cdn.steemitimages.com/DQmRXGZPxsHx2xy5AMcWoGSGeffG1G9vZhpdChA8jmGKwmT/image.png)](https://cdn.steemitimages.com/DQmRXGZPxsHx2xy5AMcWoGSGeffG1G9vZhpdChA8jmGKwmT/image.png) | While saving the settings we first set the value to the current UTC timestamp. Then it will be saved with the other setting | | Now the interesting stuff. We check every second what the currently saved last timestamp is. If it's above the timestamp of the current tab then this is a clear evidence that the settings were saved in another tab. If this happens we just reload the settings. | [![](https://cdn.steemitimages.com/DQmWGpZqJMSW2VMRwz5JRuNwHR4tgU9A1LUPRt2Fy3ATdNX/image.png)](https://cdn.steemitimages.com/DQmWGpZqJMSW2VMRwz5JRuNwHR4tgU9A1LUPRt2Fy3ATdNX/image.png) | | [![](https://cdn.steemitimages.com/DQmRXiTv3rFrWZDHUECBBbx3kVQWSPPCxvUuaRmqTsUUCSG/image.png)](https://cdn.steemitimages.com/DQmRXiTv3rFrWZDHUECBBbx3kVQWSPPCxvUuaRmqTsUUCSG/image.png) | Finally just call the function once so that it can reschedule itself. | *** #### 3. Multiple language support _{[Github Commit - Language Setting](https://github.com/MWFIAE/Steemit-Sidebar/commit/434dbb1bc239f356ecfce4bbdf0a37fe50773b63)}_{[Github Commit - Text replace](https://github.com/MWFIAE/Steemit-Sidebar/commit/ab70049bb574d1270fcbe2d477f481af90bb85b5)} I implemented support for multiple languages besides English. The language can then be selected inside the settings menu. [![](https://cdn.steemitimages.com/DQmPPamrKx7N8E1Vagu5uWBQ2nrekk5GDhQ6PB8RBkefwC4/image.png)](https://cdn.steemitimages.com/DQmPPamrKx7N8E1Vagu5uWBQ2nrekk5GDhQ6PB8RBkefwC4/image.png) #### How was that implemented? | | | | :-: | :-: | | [![](https://cdn.steemitimages.com/DQmdh36hy79oGcQHR7vzydSvHgfPXqCw3WyuhhQYHHrMb1V/image.png)](https://cdn.steemitimages.com/DQmdh36hy79oGcQHR7vzydSvHgfPXqCw3WyuhhQYHHrMb1V/image.png) | Added option to settings menu. Also minor rearrangement. | | Setting the initial value and bind the event listener for the change event. | [![](https://cdn.steemitimages.com/DQmWB5dQcLrG6Kzz8GGkWiAmzTk8LPKxsdV4Ck3abbvxddt/image.png)](https://cdn.steemitimages.com/DQmWB5dQcLrG6Kzz8GGkWiAmzTk8LPKxsdV4Ck3abbvxddt/image.png) | | [![](https://cdn.steemitimages.com/DQmTKQYt86QKBmEXvByxntE7sJk2452LABXcE9hpqPeEVpf/image.png)](https://cdn.steemitimages.com/DQmTKQYt86QKBmEXvByxntE7sJk2452LABXcE9hpqPeEVpf/image.png) | The function that is called if the language is changed. It updates the settings and then re renders parts of the sidebar. | | Of course the language needs to be saved and loaded. | [![](https://cdn.steemitimages.com/DQmVQwyX5pArb1VjfB1MamNcDrrrMd1kHjeNpCtoDuECf8p/image.png)](https://cdn.steemitimages.com/DQmVQwyX5pArb1VjfB1MamNcDrrrMd1kHjeNpCtoDuECf8p/image.png) | | [![](https://cdn.steemitimages.com/DQmcLkDibE9kvUfpjsJ6sb8HFjerwxdgUvHvzd9bkRaSdTH/image.png)](https://cdn.steemitimages.com/DQmcLkDibE9kvUfpjsJ6sb8HFjerwxdgUvHvzd9bkRaSdTH/image.png) | The texts are now not hard coded in the view templates, but instead saved in an language map. | |Just a little example how these are then used in the template. | [![](https://cdn.steemitimages.com/DQmbzimnygDqnJPKxf4apQ7bswhtJDXXqdX4hmCWoSNm9DV/image.png)](https://cdn.steemitimages.com/DQmbzimnygDqnJPKxf4apQ7bswhtJDXXqdX4hmCWoSNm9DV/image.png)| | [![](https://cdn.steemitimages.com/DQmQdddVhckUonkKHdnNxxrnVnDdpSRPU2Gr17YBHMcp4SC/image.png)](https://cdn.steemitimages.com/DQmQdddVhckUonkKHdnNxxrnVnDdpSRPU2Gr17YBHMcp4SC/image.png) | Finally we need to pass the I18N constant into my template processing function. | ## Additional Screenshots As there aren't any other languages beside English right now, there isn't much to show... Feel free to leave a pull-request to add your own language! :) *** #### 4. More information about the Steempower _{[Github Commit](https://github.com/MWFIAE/Steemit-Sidebar/commit/034d18475440fe009415f01388f7a64a304ff5f2)} It was requested by several users that they see more information about the Steempower a user possesses. How much was received from another user? How much does the user itself own? And how much did he delegate to other user? It can now be seen in the sidebar if you hover over the Steempower of an user. [![](https://cdn.steemitimages.com/DQmaw3q1d1Nz3gN2ZCENmJ4Q1iUFJiMKtKtF1DC141DkLJD/image.png)](https://cdn.steemitimages.com/DQmaw3q1d1Nz3gN2ZCENmJ4Q1iUFJiMKtKtF1DC141DkLJD/image.png) #### How was that implemented? | | | | :-: | :-: | | [![](https://cdn.steemitimages.com/DQmRVEETsQ9HZq6AaULdf4VeXU1UKDJ7F6cpzh7S27mwtLk/image.png)](https://cdn.steemitimages.com/DQmRVEETsQ9HZq6AaULdf4VeXU1UKDJ7F6cpzh7S27mwtLk/image.png) | Extended the user template with an additional tooltip. The CSS classes etc. already exists because of the tooltip for the voting power. | | Now we just need to calculate the values to be displayed. | [![](https://cdn.steemitimages.com/DQmTbDfi5eNNGJBgKLUXq6qsYQDqQR3T2A9RVKS3ZA2To7y/image.png)](https://cdn.steemitimages.com/DQmTbDfi5eNNGJBgKLUXq6qsYQDqQR3T2A9RVKS3ZA2To7y/image.png) | The values are calculated using these formulas: > ownSP=totalVestingFund * ( vesting_shares / totalVestingShares) > receivedSP= totalVestingFund * (received_vesting_shares / totalVestingShares) > delegatedSP= totalVestingFund * (delegated_vesting_shares / totalVestingShares) *** #### 5. Preset user name for new users _{[Github Commit](https://github.com/MWFIAE/Steemit-Sidebar/commit/74d05e46e89a73eaafb5b21e95b7a608c6e192ba)} It is often difficult for new users to get started with the sidebar. Therefore to make it easier I implemented some logic to get the logged in user. This user is then automatically entered into the search box to make it more obvious for new users. #### How was that implemented? | | | | :-: | :-: | | [![](https://cdn.steemitimages.com/DQmf6Kfd8p9cPRSspBwcWFVZC2qY8RTNeGSeWPgfVQkQCW4/image.png)](https://cdn.steemitimages.com/DQmf6Kfd8p9cPRSspBwcWFVZC2qY8RTNeGSeWPgfVQkQCW4/image.png) | We can just use the user name that is saved by Steemit in the local storage. | | To read the saved value we need to convert it from hex to ASCII. | [![](https://cdn.steemitimages.com/DQmbVbsssBr31PQQbQrBjSaobHdeQabPzqFn35zpHJ2Mi7h/image.png)](https://cdn.steemitimages.com/DQmbVbsssBr31PQQbQrBjSaobHdeQabPzqFn35zpHJ2Mi7h/image.png) | | [![](https://cdn.steemitimages.com/DQmPB9Zhyzf825Q6MnZd8nEW8ZDZj5Zq8XhdmUoynVbwU6C/image.png)](https://cdn.steemitimages.com/DQmPB9Zhyzf825Q6MnZd8nEW8ZDZj5Zq8XhdmUoynVbwU6C/image.png) | As you may have noticed we also read the private posting key for this user. Don't worry though! The sidebar will never upvote or post in your name without your consent. To be honest the key isn't even used yet. But I plan to implement a feature to upvote posts from the sidebar. | *** #### 6. Better comments! _{[Github Commit](https://github.com/MWFIAE/Steemit-Sidebar/commit/eb58c2fc011952fab6eac4db03b81c02edeb77ce)} It is time for a little code cleanup! Most likely a lack of comments made it difficult to understand the code for the sidebar. Therefore I took the time to comment every function, parameter and "global" variable! #### How was that implemented? Lets take the "LerpColor" function for example: [![](https://cdn.steemitimages.com/DQmd3wZihtmGxHH3j88nTggRkbqc5WBw2YxagW8brWH26Sk/image.png)](https://cdn.steemitimages.com/DQmd3wZihtmGxHH3j88nTggRkbqc5WBw2YxagW8brWH26Sk/image.png) While the method name was already very descriptive, it's a lot better with the added comment and descriptive parameter names! Let's look at a few more functions: [![](https://cdn.steemitimages.com/DQmXEaEYAorZkAbDXMNuZJNBU3rmqJkESiMsbRGyS5RYQuK/image.png)](https://cdn.steemitimages.com/DQmXEaEYAorZkAbDXMNuZJNBU3rmqJkESiMsbRGyS5RYQuK/image.png) That's how it should look ;) Btw. this commenting style was chosen so that I can use the ``jsdoc`` npm package to generate some online documentation. Haven't found the time to do so, though. #### GitHub Account https://github.com/MWFIAE I hope you enjoyed the long read! Greetings, Martin