rust-clippy/util/gh-pages/index.html
Pascal Hertleif 3e2bb3fd81 Actually scroll lint panels into view
The trick to writing horrible hacks such as this is to recognize angular
as a technology stack that may be endearing to some as one can do easy
stuff quickly. But fundamentally, it is built on top of crazy shit.

Like: Yes, I just wrote a directive that for some reason automatically
has access to the scope of the repeated item, and fires an event each
time the last `np-repeat` item was seen (delayed by one render loop
cycle, of course). And – obviously – when defining the directive it is
in camelCase  but when using it in the template it has to by in
dash-case.

Great times.
2016-08-28 21:11:02 +02:00

206 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Clippy</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css"/>
<style>
blockquote { font-size: 1em; }
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
.panel .anchor { display: none; }
.panel:hover .anchor { display: inline; color: #fff; }
</style>
</head>
<body>
<div class="container" ng-app="clippy" ng-controller="lintList">
<div class="page-header">
<h1>ALL the Clippy Lints</h1>
</div>
<noscript>
<div class="alert alert-danger" role="alert">
Sorry, this site only works with JavaScript!
</div>
</noscript>
<div ng-cloak>
<div class="alert alert-info" role="alert" ng-if="loading">
Loading&#x2026;
</div>
<div class="alert alert-danger" role="alert" ng-if="error">
Error loading lints!
</div>
<div class="panel panel-default" ng-show="data">
<div class="panel-body row">
<div class="col-md-6 form-inline">
<div class="form-group form-group-lg">
<div class="checkbox" ng-repeat="(level, enabled) in levels" style="margin-right: 0.6em">
<label>
<input type="checkbox" ng-model="levels[level]" />
{{level}}
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="filter-label">Filter:</span>
<input type="text" class="form-control" placeholder="Keywords or search string" aria-describedby="filter-label" ng-model="search" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="search = ''">
Clear
</button>
</span>
</div>
</div>
</div>
</div>
<article class="panel panel-default" id="{{lint.id}}"
ng-repeat="lint in data | filter:byLevels | filter:search | orderBy:'id' track by lint.id" on-finish-render="ngRepeatFinished">
<header class="panel-heading" ng-click="open[lint.id] = !open[lint.id]">
<button class="btn btn-default btn-sm pull-right" style="margin-top: -6px;">
<span ng-show="open[lint.id]">&minus;</span>
<span ng-hide="open[lint.id]">&plus;</span>
</button>
<h2 class="panel-title">
{{lint.id}}
<span ng-if="lint.level == 'Allow'" class="label label-info">Allow</span>
<span ng-if="lint.level == 'Warn'" class="label label-warning">Warn</span>
<span ng-if="lint.level == 'Deny'" class="label label-danger">Deny</span>
<span ng-if="lint.level == 'Deprecated'" class="label label-default">Deprecated</span>
<a href="#{{lint.id}}" class="anchor label label-default" ng-click="open[lint.id] = true; $event.stopPropagation()">&para;</a>
</h2>
</header>
<ul class="list-group lint-docs" ng-if="lint.docs" ng-class="{collapse: true, in: open[lint.id]}">
<li class="list-group-item" ng-repeat="(title, text) in lint.docs">
<h4 class="list-group-item-heading">
{{title}}
</h4>
<div class="list-group-item-text" ng-bind-html="text | markdown"></div>
</li>
</ul>
</article>
</div>
</div>
<a href="https://github.com/Manishearth/rust-clippy">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"/>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/7.0.0/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/rust.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script>
<script>
(function () {
var md = window.markdownit({
html: true,
linkify: true,
typographer: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
function scrollToLint(lintId) {
var target = document.getElementById(lintId);
if (!target) {
return;
}
target.scrollIntoView();
}
function scrollToLintByURL($scope) {
var removeListener = $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
scrollToLint(window.location.hash.slice(1));
removeListener();
});
}
angular.module("clippy", [])
.filter('markdown', function ($sce) {
return function (text) {
return $sce.trustAsHtml(
md.render(text || '')
// Oh deer, what a hack :O
.replace('<table', '<table class="table"')
);
};
})
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
};
})
.controller("lintList", function ($scope, $http, $timeout) {
// Level filter
var LEVEL_FILTERS_DEFAULT = {Allow: true, Warn: true, Deny: true, Deprecated: true};
$scope.levels = LEVEL_FILTERS_DEFAULT;
$scope.byLevels = function (lint) {
return $scope.levels[lint.level];
};
// Get data
$scope.open = {};
$scope.loading = true;
if (window.location.hash.length > 1) {
$scope.search = window.location.hash.slice(1);
$scope.open[window.location.hash.slice(1)] = true;
scrollToLintByURL($scope);
}
$http.get('./lints.json')
.success(function (data) {
$scope.data = data;
$scope.loading = false;
scrollToLintByURL($scope);
})
.error(function (data) {
$scope.error = data;
$scope.loading = false;
});
window.addEventListener('hashchange', function () {
// trigger re-render
$timeout(function () {
$scope.levels = LEVEL_FILTERS_DEFAULT;
$scope.search = window.location.hash.slice(1);
$scope.open[window.location.hash.slice(1)] = true;
scrollToLintByURL($scope);
});
return true;
}, false);
});
})();
</script>
</body>
</html>