Commit 5fb201d3 authored by Manvel Saroyan's avatar Manvel Saroyan

Issue 1526 - Implement new options page design for Chrome/Opera/Safari (general implementation)

parent 013e59d1
{
"options_page_title": {
"description": "Options page title",
"message": "Adblock Plus Options"
},
"options_page_header_1": {
"description": "Page title in navigation sidebar",
"message": "Options"
},
"options_page_header_2": {
"description": "Name of extension in navigation sidebar",
"message": "Adblock <strong>Plus</strong>"
},
"options_tab_general": {
"description": "Name in sidebar for General tab",
"message": "General"
},
"options_tab_advanced": {
"description": "Name in sidebar for Advanced tab",
"message": "Advanced"
},
"options_tab_help": {
"description": "Name in sidebar for Help tab",
"message": "Help"
},
"options_version": {
"description": "Version label in navigation sidebar",
"message": "Version"
},
"options_tab_share": {
"description": "Share button in navigation sidebar",
"message": "Share"
},
"options_tab_donate": {
"description": "Donate button in navigation sidebar",
"message": "Donate"
},
"options_readMore": {
"description": "Read more element that shows tooltip with description",
"message": "read more"
},
"options_blocking_title": {
"description": "Blocking section name in General tab",
"message": "Blocking"
},
"options_language_title": {
"description": "Option name in General tab",
"message": "<strong>Adblocking</strong> for websites in..."
},
"options_language_add": {
"description": "Add other language button in General Tab",
"message": "add other website languages"
},
"options_furtherBlocking_title": {
"description": "Option name in General tab",
"message": "Further blocking options"
},
"options_popular": {
"description": "Popular label in further blocking options table",
"message": "popular"
},
"options_furtherBlocking_add": {
"description": "Button name for adding other blocking list in General tab",
"message": "add other blocking list"
},
"options_exceptions_title": {
"description": "Exceptions section name in General tab",
"message": "Exceptions"
},
"options_acceptableAds_title": {
"description": "Acceptable ads option name in General tab",
"message": "Acceptable ads"
},
"options_acceptableAds_description": {
"description": "Acceptable ads descriptive name in General tab",
"message": "Allow some non-intrusive advertising"
},
"options_whitelisted_title": {
"description": "Whitelisting option name in General tab",
"message": "Whitelisted websites"
},
"options_button_add": {
"description": "Add button label",
"message": "add"
},
"options_button_cancel": {
"description": "Cancel button label",
"message": "cancel"
},
"options_tweaks_title": {
"description": "Tweaks section name in Advanced tab",
"message": "Tweaks"
},
"options_tweaks_blockElement": {
"description": "Show block Element option in Advanced tab",
"message": "Show <a>Block Element</a> right-click menu item"
},
"options_blockingList_title": {
"description": "Blocking list section title in Advanced tab",
"message": "Blocking list"
},
"options_tab_overview": {
"description": "Tab name in Advanced tab",
"message": "Overview"
},
"options_tab_ownList": {
"description": "Tab name in Advanced tab",
"message": "Edit or create own blocking list"
},
"options_tableCol_name": {
"description": "Name of column of subscription list table in Advanced tab",
"message": "Name"
},
"options_tableCol_description": {
"description": "Name of column of subscription list table in Advanced tab",
"message": "Description"
},
"options_tableCol_date": {
"description": "Name of column of subscription list table in Advanced tab",
"message": "Date"
},
"options_blockingList_add": {
"description": "Import button in Advanced tab",
"message": "add/import other blocking list"
},
"options_blockingList_update": {
"description": "Update button in Advanced tab",
"message": "Update all blocking lists"
},
"options_blockingRules": {
"description": "Own blicking list header in Advanced tab",
"message": "Blocking rules"
},
"options_blockingRules_edit": {
"description": "Edit rules button in Advanced tab",
"message": "edit rules"
},
"options_faq_title": {
"description": "FAQ section name in Help tab and link label in same section",
"message": "Frequently asked questions"
},
"options_faq_description": {
"description": "FAQ section description in Help tab",
"message": "You only need to refresh your blocking list in \"Advanced\" very often, but there are also other known problems."
},
"options_forum_title": {
"description": "Forum section name in Help tab",
"message": "Forum"
},
"options_forum_description": {
"description": "Forum section description in Help tab",
"message": "If the frequently asked questions helped you can reach us in our forum."
},
"options_forum_link": {
"description": "Forum section link in Help tab",
"message": "Adblock Plus support forum"
},
"options_media_title": {
"description": "Social media Section name in Help tab",
"message": "Social media"
},
"options_media_description": {
"description": "Social media section description in Help tab",
"message": "If there are major problems with Adblock Plus which affects all of our users, we tell you in our social media channels."
},
"options_dialog_customlist_title": {
"description": "Title of custom list modal dialog",
"message": "Add other blocking list"
},
"options_close": {
"description": "Close modal button",
"message": "close"
},
"options_dialog_customlist_subscription_title": {
"description": "Add customlist modal import hint message",
"message": "Via URL/Link"
},
"options_dialog_customlist_import": {
"description": "Button in add custom subscription modal dialog",
"message": "import blocking list with this URL"
},
"options_dialog_edit_own_list": {
"description": "Edit own blocking list section name in custom subscription modal dialog",
"message": "edit own blocking list"
},
"options_dialog_create_own_list": {
"description": "Button in custom subscription modal dialog",
"message": "create own blocking rules"
},
"options_dialog_language_title": {
"description": "Button in gerenal tab",
"message": "Add other website language"
},
"options_dialog_language_find": {
"description": "Placeholder text in add language modal dialog",
"message": "Find language"
},
"options_dialog_language_added": {
"description": "Table headline in add language modal dialog",
"message": "Added languages"
},
"options_dialog_language_other": {
"description": "Table headline in add language modal dialog",
"message": "Other languages"
},
"options_language_en": {
"description": "Language name shown in add language modal dialog",
"message": "English"
},
"options_language_id": {
"description": "Language name shown in add language modal dialog",
"message": "Indonesian"
},
"options_language_bg": {
"description": "Language name shown in add language modal dialog",
"message": "Bulgarian"
},
"options_language_zh": {
"description": "Language name shown in add language modal dialog",
"message": "Chinese"
},
"options_language_cs_sk": {
"description": "Language name shown in add language modal dialog",
"message": "Czech and Slovak"
},
"options_language_nl": {
"description": "Language name shown in add language modal dialog",
"message": "Dutch"
},
"options_language_de": {
"description": "Language name shown in add language modal dialog",
"message": "German"
},
"options_language_he": {
"description": "Language name shown in add language modal dialog",
"message": "Hebrew"
},
"options_language_it": {
"description": "Language name shown in add language modal dialog",
"message": "Italian"
},
"options_language_lt": {
"description": "Language name shown in add language modal dialog",
"message": "Lithuanian"
},
"options_language_lv": {
"description": "Language name shown in add language modal dialog",
"message": "Latvian"
},
"options_language_ar": {
"description": "Language name shown in add language modal dialog",
"message": "Arabic"
},
"options_language_fr": {
"description": "Language name shown in add language modal dialog",
"message": "French"
},
"options_language_ro": {
"description": "Language name shown in add language modal dialog",
"message": "Romanian"
},
"options_language_ru_uk": {
"description": "Language name shown in add language modal dialog",
"message": "Russian and Ukrainian"
}
}
\ No newline at end of file
<!DOCTYPE html>
<!--
- This file is part of Adblock Plus <https://adblockplus.org/>,
- Copyright (C) 2006-2015 Eyeo GmbH
-
- Adblock Plus is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License version 3 as
- published by the Free Software Foundation.
-
- Adblock Plus is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
<meta charset="utf-8">
<title class="i18n_options_page_title"></title>
<link rel="stylesheet" href="skin/options.css">
<style id="search-style"></style>
<script src="ext/common.js"></script>
<script src="ext/content.js"></script>
<script src="i18n.js"></script>
<script src="options.js"></script>
</head>
<body data-tab="general">
<!-- Navigation sidebar -->
<div id="nav-sidebar">
<div id="fixed-sidebar" class="fixed">
<div id="page-title">
<p class="i18n_options_page_header_1"></p>
<h1 class="i18n_options_page_header_2"></h1>
</div>
<ul id="main-navigation-tabs" class="tabs vertical">
<li id="tab-general" data-show="general" class="active">
<span class="i18n_options_tab_general"></span>
<span class="icon"></span>
</li>
<li id="tab-advanced" data-show="advanced">
<span class="i18n_options_tab_advanced"></span>
<span class="icon"></span>
</li>
<li id="tab-help" data-show="help">
<span class="i18n_options_tab_help"></span>
<span class="icon"></span>
</li>
</ul>
<p class="nav-link">
<span class="i18n_options_version"></span> <span id="abp-version"></span>
</p>
<ul class="tabs vertical bottom">
<li id="tab-share">
<span class="i18n_options_tab_share"></span><span class="icon"></span>
</li>
<li id="tab-donate">
<span class="i18n_options_tab_donate"></span><span class="icon"></span>
</li>
</ul>
</div>
</div>
<div id="tab-content">
<div id="content-wrapper">
<div id="dialog-background"></div>
<!-- General tab content -->
<div id="content-general">
<div>
<h1 class="i18n_options_blocking_title"></h1>
<div class="flex-container">
<div id="blocking-languages">
<p class="option-name">
<span class="i18n_options_language_title"></span>
<a class="i18n_options_readMore tooltip" target="_blank"></a>
</p>
<ul id="blocking-languages-table" class="table list">
<template>
<input type="checkbox" class="control" />
<span class="display"></span>
</template>
</ul>
<div class="controls">
<button id="add-website-language">
<span class="icon icon-add"></span>
<span class="i18n_options_language_add"></span>
</button>
</div>
</div>
<div id="further-blocking">
<p class="option-name">
<strong class="i18n_options_furtherBlocking_title"></strong>
<a class="i18n_options_readMore tooltip" target="_blank"></a>
</p>
<div id="custom-wrapper">
<ul id="recommend-list-table" class="table list">
<template>
<input type="checkbox" class=control />
<span class="display"></span>
<span class="popular"></span>
</template>
</ul>
<ul id="custom-list-table" class="table list">
<template>
<input type="checkbox" class="control" />
<span class="display"></span>
</template>
</ul>
</div>
<div class="controls">
<button id="add-blocking-list">
<span class="icon icon-add"></span>
<span class="i18n_options_furtherBlocking_add"><span>
</button>
</div>
</div>
</div>
</div>
<div>
<h1 class="i18n_options_exceptions_title"></h1>
<div class="flex-container">
<div id="acceptable-ads">
<p class="option-name">
<strong class="i18n_options_acceptableAds_title"></strong>
<a class="i18n_options_readMore tooltip" target="_blank"></a>
</p>
<ul id="acceptableads-table" class="table list">
<template>
<input type="checkbox" class="control" />
<span class="display"></span>
</template>
</ul>
</div>
<div id="whitelisting">
<p class="option-name">
<strong class="i18n_options_whitelisted_title"></strong>
<a class="i18n_options_readMore tooltip" target="_blank"></a>
</p>
<ul id="whitelisting-table" class="table list">
<template>
<button class="delete control"></button>
<span class="display"></span>
</template>
</ul>
<div class="controls">
<div>
<span id="whitelisting-add-icon" class="icon icon-add"></span>
<input type="text" id="whitelisting-textbox" />
<span id="whitelisting-enter-icon" class="icon icon-enter"></span>
</div>
<div>
<button id="whitelisting-add-button" class="button-add">
+<span class="i18n_options_button_add"></span>
</button>
<span></span>
<button id="whitelisting-cancel-button" class="i18n_options_button_cancel cancel-button"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Advanced tab content -->
<div id="content-advanced">
<div>
<h1><span class="i18n_options_tweaks_title"></span><a class="i18n_options_readMore tooltip" href="#"></a></h1>
<ul class="table" style="width: auto;">
<li>
<input type="checkbox" id="easylist"/><span id="block-element-explanation" class="i18n_options_tweaks_blockElement"></span></li>
</ul>
</div>
<div>
<h1><span class="i18n_options_blockingList_title"></span><a class="i18n_options_readMore tooltip" href="#" target="_blank"></a></h1>
<ul id="blocking-list-tabs" class="tabs horizontal">
<li class="i18n_options_tab_overview active" data-show="blocking-list-overview"></li><li class="i18n_options_tab_ownList" data-show="blocking-list-own"></li>
</ul>
<div id="blocking-list">
<div id="blocking-list-overview">
<ul class="table cols" style="width: auto;">
<li class="col-name"><span class="i18n_options_tableCol_name"></span><span class="i18n_options_tableCol_description"></span><span class="i18n_options_tableCol_date"></span></li>
<li><input type="checkbox" id="easylist"/><span>Easylist</span><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li>
<li><input type="checkbox" id="easylist+de"/><span>Easylist Germany + Easylist</span><span>Adblocking english + german sites</span><span>15 March 14 - 10:31</span></li>
<li><input type="checkbox" id="annoyance-fb"/><span>Facebook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li>
<li><input type="checkbox" id="annoyance-youtube"/><span>Facebook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li>
<li><input type="checkbox" id="own-list"/><span>Own blocking list</span><span>Your own blocking list</span><span><a href="#">edit your blocking list</a></span></li>
</ul>
<div class="controls">
<button>
<span class="icon icon-add"></span><span class="i18n_options_blockingList_add"></span>
</button>
<button>
<span class="icon icon-update"></span><span class="i18n_options_blockingList_update"></span>
</button>
</div>
</div>
<div id="blocking-list-own">
<p class="i18n_options_blockingRules"></p>
<ul class="table list">
<li><span>zap2it.com##.zc-station-position</span></li>
<li><span>downturk.net##.zippo</span></li>
<li><span>yahoo.com##.y708-promo-middle</span></li>
<li><span>reflector.com##.yahooboss</span></li>
<li><span>yardbarker.com##.yard_leader</span></li>
<li><span>espn.co.uk##.will_hill</span></li>
<li><span>listverse.com##.wiki</span></li>
<li><span>planet5d.com##.wp-image-1573</span></li>
<li><span>buzzinn.net##.wpn_finner</span></li>
<li><span>talkers.com##.wpss_slideshow</span></li>
</ul>
<div class="controls" style="margin: 0px;">
<input type="text" placeholder="add your blocking rule here"/>
<div class="input-control">
<span class="input-separator"></span>
<span class="i18n_options_button_add input-button-text"></span>
<span class="icon icon-enter-blue"></span>
</div>
</div>
<div class="controls">
<button>
<span class="icon icon-edit"></span>
<span class="i18n_options_blockingRules_edit"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Help tab content -->
<div id="content-help">
<h1 class="i18n_options_faq_title"></h1>
<p class="i18n_options_faq_description"></p>
<p>
<a class="i18n_options_faq_title" href="#" target="_blank"></a>
</p>
<h1 class="i18n_options_forum_title"></h1>
<p class="i18n_options_forum_description"></p>
<p>
<a class="i18n_options_forum_link" href="#" target="_blank"></a>
</p>
<h1 class="i18n_options_media_title"></h1>
<p class="i18n_options_media_description"></p>
<p>
<a href="#" target="_blank">Twitter</a>
<a href="#" target="_blank">Facebook</a>
<a href="#" target="_blank">Google+</a>
</p>
</div>
</div>
</div>
<!-- Dialog -->
<div id="dialog">
<header>
<span id="dialog-title">
<span id="dialog-title-customlist" class="i18n_options_dialog_customlist_title"></span>
<span id="dialog-title-language" class="i18n_options_dialog_language_title"></span>
</span>
<button id="dialog-close" class="i18n_options_close"></button>
</header>
<div id="dialog-body" class="content">
<!-- Add other website language: Dialog -->
<div id="dialog-content-language" class="dialog-content">
<div class="dialog-content-block">
<h3 class="i18n_options_dialog_language_added"></h3>
<ul id="blocking-languages-dialog-table" class="table list">
<template>
<span class="display"></span>
</template>
</ul>
</div>
<div id="other-language" class="dialog-content-block">
<h3 class="i18n_options_dialog_language_other"></h3>
<div>
<input type="search" id="find-language" />
</div>
<ul id="all-lang-table" class="table list">
<template>
<button class="button-add control">
+<span></span>
</button>
<span class="display"></span>
</template>
</ul>
</div>
</div>
<!-- Add other blocking list: Dialog -->
<div id="dialog-content-customlist" class="dialog-content">
<div class="dialog-content-block">
<h3 class="i18n_options_dialog_customlist_subscription_title"></h3>
<div>
<input id="blockingList-textbox" type="text" placeholder="www.example.com/blockinglist.txt" />
</div>
<div id="import-blockingList-button" class="button-wrapper">
<span class="icon icon-arrow"></span>
<span class="i18n_options_dialog_customlist_import"></span>
</div>
</div>
<div class="dialog-content-block">
<h3 class="i18n_options_dialog_edit_own_list"></h3>
<div id="edit-ownBlockingList-button" class="button-wrapper">
<span class="icon icon-arrow"></span>
<span class="i18n_options_dialog_create_own_list"></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
/*
* This file is part of Adblock Plus <https://adblockplus.org/>,
* Copyright (C) 2006-2015 Eyeo GmbH
*
* Adblock Plus is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as
* published by the Free Software Foundation.
*
* Adblock Plus is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
*/
"use strict";
(function()
{
var subscriptionsMap = Object.create(null);
var recommendationsMap = Object.create(null);
var filtersMap = Object.create(null);
var collections = Object.create(null);
function Collection(details)
{
this.details = details;
this.items = [];
}
Collection.prototype.addItems = function()
{
var length = Array.prototype.push.apply(this.items, arguments);
if (length == 0)
return;
this.items.sort(function(a, b)
{
var aValue = (a.title || a.url || a.text).toLowerCase();
var bValue = (b.title || b.url || a.text).toLowerCase();
return aValue.localeCompare(bValue);
});
for (var j = 0; j < this.details.length; j++)
{
var table = E(this.details[j].id);
var template = table.querySelector("template");
for (var i = 0; i < arguments.length; i++)
{
var item = arguments[i];
var text = item.title || item.url || item.text;
var listItem = document.createElement("li");
listItem.appendChild(document.importNode(template.content, true));
listItem.dataset.access = item.url || item.text;
listItem.querySelector(".display").textContent = text;
if (text)
listItem.dataset.search = text.toLowerCase();
var control = listItem.querySelector(".control");
if (control)
{
control.addEventListener("click", this.details[j].onClick, false);
control.checked = item.disabled == false;
}
if (table.hasChildNodes())
table.insertBefore(listItem, table.childNodes[this.items.indexOf(item)]);
else
table.appendChild(listItem);
}
}
return length;
};
Collection.prototype.removeItem = function(item)
{
var index = this.items.indexOf(item);
if (index == -1)
return;
this.items.splice(index, 1);
var access = (item.url || item.text).replace(/'/g, "\\'");
for (var i = 0; i < this.details.length; i++)
{
var table = E(this.details[i].id);
var element = table.querySelector("[data-access='" + access + "']");
element.parentElement.removeChild(element);
}
};
Collection.prototype.clearAll = function()
{
for (var i = 0; i < this.details.length; i++)
{
var table = E(this.details[i].id);
var template = table.querySelector("template");
table.innerHTML = "";
table.appendChild(template);
}
this.items.length = 0;
};
function onToggleSubscriptionClick(e)
{
e.preventDefault();
var subscriptionUrl = e.target.parentNode.dataset.access;
if (!e.target.checked)
removeSubscription(subscriptionUrl);
else
addEnableSubscription(subscriptionUrl);
}
function onAddLanguageSubscriptionClick(e)
{
e.preventDefault();
var url = this.parentNode.dataset.access;
addEnableSubscription(url);
}
function onRemoveFilterClick()
{
var filter = this.parentNode.dataset.access;
removeFilter(filter);
}
collections.popular = new Collection(
[
{
id: "recommend-list-table",
onClick: onToggleSubscriptionClick
}
]);
collections.langs = new Collection(
[
{
id: "blocking-languages-table",
onClick: onToggleSubscriptionClick
},
{
id: "blocking-languages-dialog-table"
}
]);
collections.allLangs = new Collection(
[
{
id: "all-lang-table",
onClick: onAddLanguageSubscriptionClick
}
]);