Skip to content

Commit 4161a67

Browse files
CrazyRokaCrazyRoka
committed
Added dropdown directive to theme-selector
1 parent bb53132 commit 4161a67

File tree

1 file changed

+79
-54
lines changed

1 file changed

+79
-54
lines changed

‎util/gh-pages/index.html

Lines changed: 79 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
.dropdown-menu .checkbox {
3939
width: 100%;
4040
display: block;
41-
padding: 3px 20px;
4241
clear: both;
4342
font-weight: 400;
4443
line-height: 1.42857143;
@@ -47,8 +46,8 @@
4746
}
4847

4948
.dropdown-menu .checkbox label {
50-
padding-left: 0;
51-
width: 100%;
49+
padding: 3px 20px;
50+
width: 100%;
5251
}
5352

5453
.dropdown-menu .checkbox input {
@@ -209,13 +208,17 @@
209208
--inline-code-bg: #191f26;
210209
}
211210

211+
.theme-dropdown {
212+
position: absolute;
213+
margin: 0.7em;
214+
z-index: 10;
215+
}
216+
212217
/* Applying the mdBook theme */
213218
.theme-icon {
214-
position: absolute;
215219
text-align: center;
216220
width: 2em;
217221
height: 2em;
218-
margin: 0.7em;
219222
line-height: 2em;
220223
border: solid 1px var(--icons);
221224
border-radius: 5px;
@@ -226,24 +229,28 @@
226229
background: var(--theme-hover);
227230
}
228231
.theme-choice {
229-
position: absolute;
230-
margin-top: calc(2em + 0.7em);
231-
margin-left: 0.7em;
232+
display: none;
232233
list-style: none;
233234
border: 1px solid var(--theme-popup-border);
234235
border-radius: 5px;
235236
color: var(--fg);
236237
background: var(--theme-popup-bg);
237238
padding: 0 0;
238-
z-index: 10;
239+
overflow: hidden;
239240
}
240-
.theme-choice > li {
241+
242+
.theme-dropdown.open .theme-choice {
243+
display: block;
244+
}
245+
246+
.theme-choice>li {
241247
padding: 5px 10px;
242248
font-size: 0.8em;
243249
user-select: none;
244250
cursor: pointer;
245251
}
246-
.theme-choice > li:hover {
252+
253+
.theme-choice>li:hover {
247254
background: var(--theme-hover);
248255
}
249256

@@ -307,15 +314,13 @@
307314

308315
</style>
309316
</head>
310-
<body ng-app="clippy" ng-controller="lintList" ng-click="toggleDropdown(undefined, $event)">
311-
<div id="theme-icon" class="theme-icon">&#128396;</div>
312-
<ul id="theme-menu" class="theme-choice" style="display: none;">
313-
<li id="light">Light</li>
314-
<li id="rust">Rust</li>
315-
<li id="coal">Coal</li>
316-
<li id="navy">Navy</li>
317-
<li id="ayu">Ayu</li>
318-
</ul>
317+
<body ng-app="clippy" ng-controller="lintList">
318+
<div theme-dropdown class="theme-dropdown">
319+
<div id="theme-icon" class="theme-icon">&#128396;</div>
320+
<ul id="theme-menu" class="theme-choice">
321+
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
322+
</ul>
323+
</div>
319324

320325
<div class="container">
321326
<div class="page-header">
@@ -340,8 +345,7 @@ <h1>Clippy Lints</h1>
340345
<div class="panel panel-default" ng-show="data">
341346
<div class="panel-body row">
342347
<div class="col-12 col-md-4">
343-
<div class="btn-group" ng-class="{ open: selectedDropdown == 'levels' }"
344-
ng-click="toggleDropdown('levels', $event)">
348+
<div class="btn-group" filter-dropdown>
345349
<button type="button" class="btn btn-default dropdown-toggle">
346350
Lint levels <span class="badge">{{selectedValuesCount(levels)}}</span> <span class="caret"></span>
347351
</button>
@@ -365,8 +369,7 @@ <h1>Clippy Lints</h1>
365369
</li>
366370
</ul>
367371
</div>
368-
<div class="btn-group" ng-class="{ open: selectedDropdown == 'groups' }"
369-
ng-click="toggleDropdown('groups', $event)">
372+
<div class="btn-group" filter-dropdown>
370373
<button type="button" class="btn btn-default dropdown-toggle">
371374
Lint groups <span class="badge">{{selectedValuesCount(groups)}}</span> <span class="caret"></span>
372375
</button>
@@ -518,6 +521,46 @@ <h2 class="panel-title">
518521
);
519522
};
520523
})
524+
.directive('themeDropdown', function ($document) {
525+
return {
526+
restrict: 'A',
527+
link: function ($scope, $element, $attr) {
528+
$element.bind('click', function () {
529+
$element.toggleClass('open');
530+
$element.addClass('open-recent');
531+
});
532+
533+
$document.bind('click', function () {
534+
if (!$element.hasClass('open-recent')) {
535+
$element.removeClass('open');
536+
}
537+
$element.removeClass('open-recent');
538+
})
539+
}
540+
}
541+
})
542+
.directive('filterDropdown', function ($document) {
543+
return {
544+
restrict: 'A',
545+
link: function ($scope, $element, $attr) {
546+
$element.bind('click', function (event) {
547+
if (event.target.closest('button')) {
548+
$element.toggleClass('open');
549+
} else {
550+
$element.addClass('open');
551+
}
552+
$element.addClass('open-recent');
553+
});
554+
555+
$document.bind('click', function () {
556+
if (!$element.hasClass('open-recent')) {
557+
$element.removeClass('open');
558+
}
559+
$element.removeClass('open-recent');
560+
})
561+
}
562+
}
563+
})
521564
.directive('onFinishRender', function ($timeout) {
522565
return {
523566
restrict: 'A',
@@ -551,15 +594,19 @@ <h2 class="panel-title">
551594
suspicious: true,
552595
};
553596
$scope.groups = GROUPS_FILTER_DEFAULT;
554-
$scope.toggleDropdown = function (name, $event) {
555-
const target = $event.target;
556-
if (name === $scope.selectedDropdown && target.closest('button')) {
557-
$scope.selectedDropdown = undefined;
558-
} else {
559-
$scope.selectedDropdown = name;
560-
}
561-
$event.stopPropagation();
597+
const THEMES_DEFAULT = {
598+
light: "Light",
599+
rust: "Rust",
600+
coal: "Coal",
601+
navy: "Navy",
602+
ayu: "Ayu"
603+
};
604+
$scope.themes = THEMES_DEFAULT;
605+
606+
$scope.selectTheme = function (theme) {
607+
setTheme(theme, true);
562608
}
609+
563610
$scope.toggleLevels = function (value) {
564611
const levels = $scope.levels;
565612
for (const key in levels) {
@@ -670,28 +717,6 @@ <h2 class="panel-title">
670717
}
671718
}
672719

673-
function setupListeners() {
674-
let themeIcon = document.getElementById("theme-icon");
675-
let themeMenu = document.getElementById("theme-menu");
676-
themeIcon.addEventListener("click", function(e) {
677-
if (themeMenu.style.display == "none") {
678-
themeMenu.style.display = "block";
679-
} else {
680-
themeMenu.style.display = "none";
681-
}
682-
});
683-
684-
let children = themeMenu.children;
685-
for (let index = 0; index < children.length; index++) {
686-
let child = children[index];
687-
child.addEventListener("click", function(e) {
688-
setTheme(child.id, true);
689-
});
690-
}
691-
}
692-
693-
setupListeners();
694-
695720
function setTheme(theme, store) {
696721
let enableHighlight = false;
697722
let enableNight = false;

0 commit comments

Comments
 (0)