src/options.html
<!DOCTYPE html>
<!--suppress HtmlRequiredLangAttribute, HtmlUnknownTarget -->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles/css/options.css"/>
<link rel="stylesheet" type="text/css" href="styles/css/style.css"/>
</head>
<body id="options-page">
<div id="container">
<div id="header">
</div>
<form id="options">
<div class="options-section">
<h3 data-locale-value="General"></h3>
<label for="updateInterval" class="label" data-locale-value="IntervalPeriod"></label>
<input id="updateInterval" type="number" min="10" max="120" data-option-name="updateInterval" /><br>
<label for="markReadOnClick" class="label" data-locale-value="AutoMarkRead"></label>
<input id="markReadOnClick" type="checkbox" data-option-name="markReadOnClick" /><br>
<label for="showCounter" class="label" data-locale-value="ShowCounter"></label>
<input id="showCounter" type="checkbox" data-option-name="showCounter" /><br>
<label for="grayIconColorIfNoUnread" class="label" data-locale-value="GrayIconColorIfNoUnread"></label>
<input id="grayIconColorIfNoUnread" type="checkbox" data-option-name="grayIconColorIfNoUnread" /><br>
<label for="resetCounterOnClick" class="label" data-locale-value="ResetCounterOnClick"></label>
<input id="resetCounterOnClick" type="checkbox" data-enable-parent="showCounter" data-option-name="resetCounterOnClick" /><br>
<!-- @if BROWSER='chrome' -->
<label for="enable-background-mode" class="label" data-locale-value="EnableBackgroundMode"></label>
<input type="checkbox" id="enable-background-mode" /><br>
<!-- @endif -->
<label for="disableOptionsSync" class="label" data-locale-value="DisableOptionsSync"></label>
<input id="disableOptionsSync" type="checkbox" data-option-name="disableOptionsSync" /><br>
<h3 data-locale-value="Popup"></h3>
<label for="openSiteOnIconClick" class="label" data-locale-value="OpenSiteOnIconClick"></label>
<input id="openSiteOnIconClick" type="checkbox" data-option-name="openSiteOnIconClick" /><br>
<label for="openFeedsInBackground" class="label" data-locale-value="OpenFeedsInBackground"></label>
<input id="openFeedsInBackground" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="openFeedsInBackground" /><br>
<label for="abilitySaveFeeds" class="label" data-locale-value="AbilitySaveFeeds"></label>
<input id="abilitySaveFeeds" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="abilitySaveFeeds" /><br>
<label for="maxNumberOfFeeds" class="label" data-locale-value="MaxNumberOfFeeds"></label>
<input id="maxNumberOfFeeds" type="number" data-disable-parent="openSiteOnIconClick" min="1" max="500" data-option-name="maxNumberOfFeeds" /><br>
<label for="sortBy" class="label" data-locale-value="Sorting"></label>
<select id="sortBy" data-disable-parent="openSiteOnIconClick" data-option-name="sortBy">
<option value="newest" data-locale-value="NewestFirst"></option>
<option value="oldest" data-locale-value="OldestFirst"></option>
<option value="engagement" data-locale-value="EngagementRate"></option>
</select><br>
<label for="theme" class="label" data-locale-value="Theme"></label>
<select id="theme" data-disable-parent="openSiteOnIconClick" data-option-name="theme">
<option value="light" data-locale-value="Light"></option>
<option value="dark" data-locale-value="Dark"></option>
<option value="nord" data-locale-value="Nord"></option>
</select><br>
<label for="popupFontSize" class="label" data-locale-value="PopupFontSize"></label>
<input id="popupFontSize" type="number" data-disable-parent="openSiteOnIconClick" min="70" max="150" data-option-name="popupFontSize" /><br>
<label for="popupWidth" class="label" data-locale-value="PopupWidth"></label>
<input id="popupWidth" type="number" data-disable-parent="openSiteOnIconClick" min="380" max="750" data-option-name="popupWidth" /><br>
<label for="expandedPopupWidth" class="label" data-locale-value="ExpandedPopupWidth"></label>
<input id="expandedPopupWidth" type="number" data-disable-parent="openSiteOnIconClick" min="380" max="750" data-option-name="expandedPopupWidth" /><br>
<label for="showFullFeedContent" class="label" data-locale-value="ShowFullFeedContent"></label>
<input id="showFullFeedContent" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="showFullFeedContent" /><br>
<label for="showCategories" class="label" data-locale-value="ShowCategories"></label>
<input id="showCategories" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="showCategories" /><br>
<label for="forceUpdateFeeds" class="label" data-locale-value="ForceUpdateFeeds"></label>
<input id="forceUpdateFeeds" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="forceUpdateFeeds" /><br>
<label for="openFeedsInSameTab" class="label" data-locale-value="OpenFeedsInSameTab"></label>
<input id="openFeedsInSameTab" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="openFeedsInSameTab" /><br>
<label for="expandFeeds" class="label" data-locale-value="ExpandFeeds"></label>
<input id="expandFeeds" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="expandFeeds" /><br>
<label for="closePopupWhenLastFeedIsRead" class="label" data-locale-value="ClosePopupWhenLastFeedIsRead"></label>
<input id="closePopupWhenLastFeedIsRead" type="checkbox" data-disable-parent="openSiteOnIconClick" data-option-name="closePopupWhenLastFeedIsRead" /><br>
<h3 data-locale-value="Notifications"></h3>
<label for="showDesktopNotifications" class="label" data-locale-value="ShowDesktopNotifications"></label>
<input id="showDesktopNotifications" type="checkbox" data-option-name="showDesktopNotifications" /><br>
<label for="showBlogIconInNotifications" class="label" data-locale-value="ShowBlogIconInNotifications"></label>
<input id="showBlogIconInNotifications" type="checkbox" data-enable-parent="showDesktopNotifications" data-option-name="showBlogIconInNotifications" /><br>
<!-- @if BROWSER='chrome' -->
<label for="showThumbnailInNotifications" class="label" data-locale-value="ShowThumbnailInNotifications"></label>
<input id="showThumbnailInNotifications" type="checkbox" data-enable-parent="showDesktopNotifications" data-option-name="showThumbnailInNotifications" /><br>
<!-- @endif -->
<!-- @if BROWSER!='firefox' -->
<label for="maxNotificationsCount" class="label" data-locale-value="MaxNotificationsCount"></label>
<input id="maxNotificationsCount" type="number" data-enable-parent="showDesktopNotifications" min="1" max="100" data-option-name="maxNotificationsCount" /><br>
<!-- @endif -->
<!-- @if BROWSER!='opera' -->
<!--Opera doesn't support silent notifications at the moment and uses system notification sound-->
<label for="playSound" class="label" data-locale-value="PlaySound"></label>
<input id="playSound" type="checkbox" data-option-name="playSound" /><br/>
<label for="soundVolume" class="label" data-locale-value="SoundVolume"></label>
<input id="soundVolume" type="range" data-enable-parent="playSound" min="0.01" max="1" step="0.01" data-option-name="soundVolume" /><br>
<label for="sound" class="label" data-locale-value="Sound"></label>
<select id="sound" data-enable-parent="playSound" data-option-name="sound">
<option value="sound/alert.mp3">Alert</option>
<option value="sound/no-problem.mp3">No problem</option>
<option value="sound/whistling.mp3">Whistling</option>
<option value="sound/quite-impressed.mp3">Quite impressed</option>
<option value="sound/light-hearted.mp3">Light hearted</option>
</select><br>
<!-- @endif -->
<div id="filters-settings">
<h3 data-locale-value="Filters"></h3>
<label for="isFiltersEnabled" class="label" data-locale-value="UpdateFollowingCategories"></label>
<input id="isFiltersEnabled" type="checkbox" data-option-name="isFiltersEnabled" /><br>
<fieldset data-enable-parent="isFiltersEnabled" id="categories">
<legend data-locale-value="Categories"></legend>
</fieldset>
<label for="showEngagementFilter" class="label" data-locale-value="ShowEngagementFilter"></label>
<input id="showEngagementFilter" type="checkbox" data-option-name="showEngagementFilter" /><br>
<label for="engagementFilterLimit" class="label" data-locale-value="EngagementFilterLimit"></label>
<input id="engagementFilterLimit" type="number" data-enable-parent="showEngagementFilter" min="1" max="10000" data-option-name="engagementFilterLimit" /><br>
</div>
</div>
<button type="submit" id="save" data-locale-value="Save" class="button">Save</button>
</form>
<div id="userInfo">
<div class="options-section">
<span class="label" data-locale-value="CurrentUser"></span>
<span data-value-name="givenName"></span>
<span data-value-name="familyName"></span><br>
<span class="label" data-locale-value="Email">Email</span>
<span data-value-name="email"></span>
</div>
<button type="submit" id="logout" class="button" data-locale-value="Logout"></button>
</div>
</div>
</body>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/browser-polyfill.min.js"></script>
<script src="scripts/feedly.api.js"></script>
<script src="scripts/options.js"></script>
</html>