Skip to content

Commit 9c56035

Browse files
bmuenzenmeyerbmuenzenmeyer
committed
pattern search. closes #101 
1 parent fa89438 commit 9c56035

9 files changed

Lines changed: 226 additions & 7 deletions

File tree

‎CHANGELOG‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ PL-node-v0.8.2
55
- ADD: Added upgrade instructions to README
66
- FIX: Fix issue with styleguide accordions not closing upon click of a sibling menu.
77
- THX: @getsetbro for reporting more issues :)
8+
- ADD: Added support for pattern search. This is 'in beta' and should have more testing applied to it.
89

910
PL-node-v0.8.1
1011
- FIX: v8 is not pulling in values from global data.json

‎config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"disco": true,
1818
"hay": true,
1919
"mqs": true,
20-
"find": false,
20+
"find": true,
2121
"views-all": true,
2222
"views-annotations": true,
2323
"views-code": true,

public/styleguide/css/prism.css renamed to public/styleguide/css/vendor/prism.css

File renamed without changes.

‎public/styleguide/css/vendor/typeahead.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
#sg-find {
2+
color: #000;
3+
text-transform: lowercase;
4+
}
5+
6+
.show-overflow {
7+
overflow: visible;
8+
}
9+
10+
.typeahead,
11+
.tt-query,
12+
.tt-hint {
13+
width: 220px;
14+
height: 30px;
15+
padding: 8px 12px;
16+
font-size: 14px;
17+
line-height: 16px;
18+
border: 2px solid #ccc;
19+
outline: none;
20+
}
21+
22+
.typeahead {
23+
background-color: #fff;
24+
}
25+
26+
.typeahead:focus {
27+
border: 2px solid #999;
28+
}
29+
30+
.tt-query {
31+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
32+
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
33+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
34+
}
35+
36+
.tt-hint {
37+
color: #999
38+
}
39+
40+
.tt-dropdown-menu {
41+
width: 422px;
42+
padding: 8px 0;
43+
background-color: #fff;
44+
border: 1px solid #ccc;
45+
border: 1px solid rgba(0, 0, 0, 0.2);
46+
text-align: left;
47+
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
48+
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
49+
box-shadow: 0 5px 10px rgba(0,0,0,.2);
50+
}
51+
52+
.tt-suggestion {
53+
padding: 3px 13px;
54+
font-size: 14px;
55+
line-height: 16px;
56+
}
57+
58+
.tt-suggestion.tt-cursor {
59+
color: #fff;
60+
background-color: #0097cf;
61+
62+
}
63+
64+
.tt-suggestion p {
65+
margin: 0;
66+
}

‎public/styleguide/js/pattern-finder.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/*!
2+
* Pattern Finder
3+
*
4+
* Copyright (c) 2014 Dave Olsen, http://dmolsen.com
5+
* Licensed under the MIT license
6+
*
7+
*/
8+
9+
var patternFinder = {
10+
11+
data: [],
12+
active: false,
13+
14+
init: function() {
15+
16+
for (var patternType in patternPaths) {
17+
if (patternPaths.hasOwnProperty(patternType)) {
18+
for (var pattern in patternPaths[patternType]) {
19+
var obj = {};
20+
obj.patternPartial = patternType+"-"+pattern;
21+
obj.patternPath = patternPaths[patternType][pattern];
22+
this.data.push(obj);
23+
}
24+
}
25+
}
26+
27+
// instantiate the bloodhound suggestion engine
28+
var patterns = new Bloodhound({
29+
datumTokenizer: function(d) { return Bloodhound.tokenizers.nonword(d.patternPartial); },
30+
queryTokenizer: Bloodhound.tokenizers.nonword,
31+
limit: 10,
32+
local: this.data
33+
});
34+
35+
// initialize the bloodhound suggestion engine
36+
patterns.initialize();
37+
38+
$('#sg-find .typeahead').typeahead({ highlight: true }, {
39+
displayKey: 'patternPartial',
40+
source: patterns.ttAdapter()
41+
}).on('typeahead:selected', patternFinder.onAutocompleted).on('typeahead:autocompleted', patternFinder.onSelected);
42+
43+
},
44+
45+
passPath: function(item) {
46+
// update the iframe via the history api handler
47+
patternFinder.closeFinder();
48+
var obj = JSON.stringify({ "path": urlHandler.getFileName(item.patternPartial) });
49+
document.getElementById("sg-viewport").contentWindow.postMessage(JSON.parse(obj), urlHandler.targetOrigin);
50+
},
51+
52+
onSelected: function(e,item) {
53+
patternFinder.passPath(item);
54+
},
55+
56+
onAutocompleted: function(e,item) {
57+
patternFinder.passPath(item);
58+
},
59+
60+
toggleFinder: function() {
61+
if (!patternFinder.active) {
62+
patternFinder.openFinder();
63+
} else {
64+
patternFinder.closeFinder();
65+
}
66+
},
67+
68+
openFinder: function() {
69+
patternFinder.active = true;
70+
$('#sg-find .typeahead').val("");
71+
$("#sg-find").addClass('show-overflow');
72+
$('#sg-find .typeahead').focus();
73+
},
74+
75+
closeFinder: function() {
76+
patternFinder.active = false;
77+
$("#sg-find").removeClass('show-overflow');
78+
$('.sg-acc-handle, .sg-acc-panel').removeClass('active');
79+
$('#sg-find .typeahead').val("");
80+
},
81+
82+
receiveIframeMessage: function(event) {
83+
84+
var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
85+
86+
// does the origin sending the message match the current host? if not dev/null the request
87+
if ((window.location.protocol !== "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
88+
return;
89+
}
90+
91+
if (data.keyPress !== undefined) {
92+
if (data.keyPress == 'ctrl+shift+f') {
93+
patternFinder.toggleFinder();
94+
return false;
95+
}
96+
}
97+
98+
}
99+
100+
}
101+
102+
patternFinder.init();
103+
104+
window.addEventListener("message", patternFinder.receiveIframeMessage, false);
105+
106+
$('#sg-find .typeahead').focus(function() {
107+
if (!patternFinder.active) {
108+
patternFinder.openFinder();
109+
}
110+
});
111+
112+
$('#sg-find .typeahead').blur(function() {
113+
patternFinder.closeFinder();
114+
});
115+
116+
// jwerty stuff
117+
// toggle the annotations panel
118+
jwerty.key('ctrl+shift+f', function (e) {
119+
$('.sg-find .sg-acc-handle, .sg-find .sg-acc-panel').addClass('active');
120+
patternFinder.toggleFinder();
121+
return false;
122+
});

‎public/styleguide/js/postmessage.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,32 @@ if (self != top) {
3232
window.location.replace(this.getAttribute("href"));
3333
};
3434
}
35+
36+
// bind the keyboard shortcuts for various viewport resizings + pattern search
37+
var keys = [ "s", "m", "l", "d", "h", "f" ];
38+
for (var i = 0; i < keys.length; i++) {
39+
jwerty.key('ctrl+shift+'+keys[i], function (k,t) {
40+
return function(e) {
41+
var obj = JSON.stringify({ "keyPress": "ctrl+shift+"+k });
42+
parent.postMessage(obj,t);
43+
return false;
44+
}
45+
}(keys[i],targetOrigin));
46+
}
47+
48+
// bind the keyboard shortcuts for mqs
49+
var i = 0;
50+
while (i < 10) {
51+
jwerty.key('ctrl+shift+'+i, function (k,t) {
52+
return function(e) {
53+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
54+
var obj = JSON.stringify({ "keyPress": "ctrl+shift+"+k });
55+
parent.postMessage(obj,t);
56+
return false;
57+
}
58+
}(i,targetOrigin));
59+
i++;
60+
}
3561

3662
}
3763

@@ -44,7 +70,7 @@ body[0].onclick = function() {
4470

4571
// watch the iframe source so that it can be sent back to everyone else.
4672
function receiveIframeMessage(event) {
47-
73+
4874
// does the origin sending the message match the current host? if not dev/null the request
4975
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
5076
return;

‎public/styleguide/js/styleguide.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
(function(w){
22

33
var sw = document.body.clientWidth, //Viewport Width
4-
sh = document.body.clientHeight, //Viewport Height
4+
sh = $(document).height(), //Viewport Height
55
minViewportWidth = 240, //Minimum Size for Viewport
66
maxViewportWidth = 2600, //Maxiumum Size for Viewport
77
viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
88
$sgViewport = $('#sg-viewport'), //Viewport element
99
$sizePx = $('.sg-size-px'), //Px size input element in toolbar
1010
$sizeEms = $('.sg-size-em'), //Em size input element in toolbar
1111
$bodySize = parseInt($('body').css('font-size')), //Body size of the document
12+
$headerHeight = $('.sg-header').height(),
1213
$vp = Object,
1314
$sgPattern = Object,
1415
discoID = false,
@@ -18,7 +19,7 @@
1819

1920
$(w).resize(function(){ //Update dimensions on resize
2021
sw = document.body.clientWidth;
21-
sh = document.body.clientHeight;
22+
sh = $(document).height();
2223

2324
setAccordionHeight();
2425
});

‎source/_patternlab-files/index.mustache‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<meta name="viewport" content="width=device-width" />
77
<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />
88
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css" media="all" />
9-
<link rel="stylesheet" href="styleguide/css/prism.css" media="all" />
9+
<link rel="stylesheet" href="styleguide/css/vendor/typeahead.css" media="all" />
10+
<link rel="stylesheet" href="styleguide/css/vendor/prism.css" media="all" />
1011
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
1112
<script>window.jQuery || document.write('<script src="styleguide/js/vendor/jquery.js"><\/script>')</script>
1213
</head>
@@ -79,12 +80,15 @@
7980

8081
<script src="styleguide/js/vendor/prism.js"></script>
8182
<script src="styleguide/js/vendor/jwerty.js"></script>
83+
<script src="styleguide/js/vendor/typeahead.bundle.min.js"></script>
8284
<script src="styleguide/js/data-saver.js"></script>
8385
{{> patternPaths }}
8486
{{> viewAllPaths }}
8587
<script src="styleguide/js/url-handler.js"></script>
8688
<script src="styleguide/js/styleguide.js"></script>
8789
<script src="styleguide/js/annotations-viewer.js "></script>
8890
<script src="styleguide/js/code-viewer.js "></script>
91+
<script src="styleguide/js/pattern-finder.js"></script>
92+
8993
</body>
9094
</html>

‎source/_patternlab-files/styleguide.mustache‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
<script src="../../styleguide/js/postmessage.js"></script>
6363
<script src="../../data/annotations.js"></script>
6464
<script src="../../styleguide/js/annotations-pattern.js"></script>
65-
<script src="../../styleguide/js/code-pattern.js"></script>
66-
65+
<script src="../../styleguide/js/code-pattern.js"></script>
6766
</body>
6867
</html>

0 commit comments

Comments
 (0)