mozilla
/
lightbeam
зеркало из https://github.com/mozilla/lightbeam.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

changed default behaviors for dropdown menus

This commit is contained in:
Mavis Ou 2013-07-15 15:54:28 -07:00
Родитель 7fbd574633
Коммит 91cabbc6c0
2 изменённых файлов: 20 добавлений и 34 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

20
data/index.html
Просмотреть файл

@ -18,17 +18,17 @@
<div data-view class="dropdown_button">
<span>VISUALIZATION</span>
<div class="arrow">
<i class="icon-sort-down"></i><i class="icon-sort-up hidden"></i>
<i class="icon-sort-down hidden"></i><i class="icon-sort-up"></i>
</div>
</div>
<div data-list class="dropdown_options">
<a class="collapsed" data-value="Graph">
<div data-list class="dropdown_options expanded">
<a data-value="Graph">
<img src="image/collusion_icon_graph.png" />graph
</a>
<a class="collapsed" data-value="Clock">
<a data-value="Clock">
<img src="image/collusion_icon_clock.png" />clock
</a>
<a class="collapsed" data-value="List">
<a data-value="List">
<img src="image/collusion_icon_list.png" />list
</a>
</div>
@ -37,14 +37,14 @@
<div data-view class="dropdown_button">
<span>SESSION</span>
<div class="arrow">
<i class="icon-sort-down"></i><i class="icon-sort-up hidden"></i>
<i class="icon-sort-down hidden"></i><i class="icon-sort-up"></i>
</div>
</div>
<div data-list class="dropdown_options">
<div data-list class="dropdown_options expanded">
<a data-selected data-value="recent">recent site</a>
<a class="collapsed" data-value="last10sites">last 10 sites</a>
<a class="collapsed" data-value="daily">daily</a>
<a class="collapsed" data-value="weekly">weekly</a>
<a data-value="last10sites">last 10 sites</a>
<a data-value="daily">daily</a>
<a data-value="weekly">weekly</a>
</div>
</div>
<div class="btn">

34
data/ui.js
Просмотреть файл

@ -9,42 +9,28 @@ function toArray(nl){
* Buttons
*/
var btnSelectCallback = function(e,btnGroup,callback){
var targetValue = e.target.getAttribute("data-value");
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
btnGroup.querySelector(".dropdown_options").classList.remove("expanded");
btnGroup.querySelector(".arrow").querySelector(".icon-sort-down").classList.remove("hidden");
btnGroup.querySelector(".arrow").querySelector(".icon-sort-up").classList.add("hidden");
toArray(otherOptions).forEach(function(option){
option.classList.add("collapsed");
});
callback(targetValue);
}
function dropdownGroup(btnGroup, callback){
callback = callback || function(){};
var arrow = btnGroup.querySelector(".arrow");
arrow.addEventListener("click", function(event){
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
var allOptions = btnGroup.querySelectorAll(".dropdown_options a");
arrow.querySelector(".icon-sort-down").classList.toggle("hidden");
arrow.querySelector(".icon-sort-up").classList.toggle("hidden");
btnGroup.querySelector(".dropdown_options").classList.toggle("expanded");
toArray(otherOptions).forEach(function(option){
option.classList.toggle("collapsed");
});
toArray(allOptions).forEach(function(option){
option.addEventListener("click", function(e){
btnGroup.querySelector("[data-selected]").removeAttribute("data-selected");
e.target.setAttribute("data-selected", true);
btnSelectCallback(e,btnGroup,function(selectedValue){
callback(selectedValue);
});
});
});
}, false);
var allOptions = btnGroup.querySelectorAll(".dropdown_options a");
toArray(allOptions).forEach(function(option){
option.addEventListener("click", function(e){
btnGroup.querySelector("[data-selected]").removeAttribute("data-selected");
e.target.setAttribute("data-selected", true);
callback( e.target.getAttribute("data-value") );
});
});
}
/* Bind click event listener to each of the btn_group memebers */