-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
128 lines (117 loc) · 6.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>angular-input-highlight</title>
<meta name="description" content="Angular directive adding fragment highlighting capabilities to textarea inputs" />
<!-- Facebook meta -->
<meta property="og:title" content="angular-input-highlight" />
<meta property="og:image" content="http://yavorskiy.github.io/angular-input-highlight/misc/cover.png" />
<meta property="og:url" content="http://yavorskiy.github.io/angular-input-highlight/" />
<meta property="og:site_name" content="angular-input-highlight" />
<meta property="og:description" content="Angular directive adding fragment highlighting capabilities to textarea inputs" />
<!-- /Facebook meta -->
<style>
body {
display: block;
margin: 0 auto;
font-family: "Helvetica Neue", Helvetica, Arial, freesans, sans-serif;
font-size: 14px;
max-width: 600px;
}
pre code {
display: block;
width: 100%;
}
textarea {
width: 100%;
height:100px;
margin: 0 0 0 -10px;
padding: 10px;
border: 5px solid #ddd;
font-size: 14px;
font-family: inherit;
}
input {
padding: 5px 10px;
font-size: 14px;
}
.hl, .hr {
display: inline-block;
margin: 20px 0 20px;
}
.hl {
float: left;
}
.hr {
float: right;
clear: right;
}
</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body ng-app="App" ng-strict-di>
<h1 class="hl">angular-input-highlight</h1>
<span class="hr">
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/yavorskiy/angular-input-highlight" data-icon="octicon-star" data-style="mega" data-count-href="/yavorskiy/angular-input-highlight/stargazers" data-count-api="/repos/yavorskiy/angular-input-highlight#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star yavorskiy/angular-input-highlight on GitHub">Star</a>
<!-- Place this tag right after the last button or just before your close body tag. -->
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</span>
<a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<pre><code class="html">
<textarea ng-model="text"
highlight="format"
highlight-onchange="listMarkers($markers)"></textarea>
</code></pre>
<pre><code class="js">
$rootScope.format = {
'rgba(255,0,0,0.5)' : /\d+/g,
'#619FFF' : /@[a-z0-9]+/g,
'#25B520' : '{{ format['#25B520'] }}'
};
$rootScope.listMarkers = function($markers) {
$rootScope.markers = $markers;
};
</code></pre>
<p>
<textarea style=""
ng-model="text.value"
highlight="format"
highlight-onchange="listMarkers($markers)"></textarea>
</p>
<p>
Dynamically change <code>format</code>, highlight
<input type="text" length="5"
ng-model="format['#25B520']"
ng-model-options="{debounce:500}"/>
with green
</p>
<h4>Matched fragments ({{ markers.length }})</h4>
<pre ng-bind-html="markersHTML"></pre>
<script src="./angular-input-highlight.js"></script>
<script>
angular
.module('App', ['input-highlight'])
.run(['$rootScope', '$sce', function($rootScope, $sce) {
$rootScope.format = {
'rgba(255,0,0,0.5)' : /\d+/g,
'#619FFF' : /@[a-z0-9]+/g,
'#25B520' : 'Sed cursus'
};
$rootScope.listMarkers = function($markers) {
var json = JSON.stringify($markers, null, 2);
$rootScope.markers = $markers;
$rootScope.markersHTML = $sce.trustAsHtml(hljs.highlight('js', json).value);
};
$rootScope.text = {value: '' +
'Lorem ipsum dolor sit @amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.\n\n' +
'Lorem ipsum dolor sit @amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.\n\n' +
'Lorem ipsum dolor sit @amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.\n\n' +
'Lorem ipsum dolor sit @amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.'};
}]);
</script>
</body>
</html>