Skip to content

D
django-wiki
Commit aca44f09 by benjaoming
Options

fix #197 - use twitter typeahead

parent 9716942b
Showing with 199 additions and 13 deletions
wiki/plugins/links/templates/wiki/plugins/links/sidebar.html
......@@ -8,12 +8,16 @@
<pre>[Title of link](wiki:ArticleSlug)</pre>
<p>
<input type="text" class="page_title_query" id="links_page_title_query" value="" placeholder="Type to search..." style="max-width: 90%;" />
<button type="button" class="btn btn-default" onclick="wikiInsertLink()">
{% trans "Insert" %}
</button>
</p>
<div class="row">
<div class="input-group col-sm-12">
<input type="text" class="page_title_query form-control" id="links_page_title_query" value="" placeholder="Type to search..." />
<span class="input-group-btn">
<button type="button" class="btn btn-default" onclick="wikiInsertLink()">
{% trans "Insert" %}
</button>
</span>
</div>
</div>
<hr />
......@@ -24,15 +28,15 @@
</p>
<pre>[Clickable text](http://example.com)</pre>
{% addtoblock "js" %}<script type="text/javascript" src="{{ STATIC_URL }}wiki/js/typeahead.min.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
$('.page_title_query').typeahead({
source: function (query, process) {
return $.get('{% url 'wiki:links_query_urlpath' path=urlpath.path article_id=article.id %}', { query: query }, function (data) {
return process(data);
});
}
});
$(document).ready(function() {
$('.page_title_query').typeahead({
remote: "{% url 'wiki:links_query_urlpath' path=urlpath.path article_id=article.id %}?query=%QUERY",
dataType: String
});
});
function wikiInsertLink() {
$('#id_content').insertAtCaret($('#links_page_title_query').val());
......
wiki/static/wiki/bootstrap/css/wiki-bootstrap.css
......@@ -6440,3 +6440,85 @@ a .icon-flip-vertical:before {
font-weight: bold;
}
/* Literal.Number.Integer.Long */
/******************************
TWITTER TYPEAHEAD
*******************************/
.twitter-typeahead {
width: 100%;
position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.twitter-typeahead .tt-hint {
color: #a1a1a1;
z-index: 1;
padding: 6px 12px;
border: 1px solid transparent;
}
.twitter-typeahead .tt-query {
z-index: 2;
border-radius: 4px!important;
/* add these 2 statements if you have an appended input group */
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
/* add these 2 statements if you have an prepended input group */
/* border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important; */
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}
wiki/static/wiki/bootstrap/css/wiki-bootstrap.min.css
......@@ -1084,3 +1084,13 @@ a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .
.codehilite .vg{color:#d07000;font-weight:bold;}
.codehilite .vi{color:#3030b0;}
.codehilite .il{color:#0000D0;font-weight:bold;}
.twitter-typeahead{width:100%;position:relative;}
.twitter-typeahead .tt-query,.twitter-typeahead .tt-hint{margin-bottom:0;width:100%;position:absolute;top:0;left:0;}
.twitter-typeahead .tt-hint{color:#a1a1a1;z-index:1;padding:6px 12px;border:1px solid transparent;}
.twitter-typeahead .tt-query{z-index:2;border-radius:4px!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important;}
.tt-dropdown-menu{min-width:160px;margin-top:2px;padding:5px 0;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.tt-suggestion{display:block;padding:3px 20px;}
.tt-suggestion.tt-is-under-cursor{color:#fff;background-color:#0081c2;background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(to bottom, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);}
.tt-suggestion.tt-is-under-cursor a{color:#fff;}
.tt-suggestion p{margin:0;}
.twitter-typeahead .tt-hint{display:block;height:38px;padding:8px 12px;font-size:14px;line-height:1.428571429;border:1px solid transparent;}
wiki/static/wiki/bootstrap/less/wiki/typeahead.less 0 → 100644
.twitter-typeahead {
width: 100%;
position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
width:100%;
position: absolute;
top:0;
left:0;
}
.twitter-typeahead .tt-hint {
color:#a1a1a1;
z-index: 1;
padding: 6px 12px;
border:1px solid transparent;
}
.twitter-typeahead .tt-query {
z-index: 2;
border-radius: 4px!important;
/* add these 2 statements if you have an appended input group */
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
/* add these 2 statements if you have an prepended input group */
/* border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important; */
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}
wiki/static/wiki/bootstrap/less/wiki/wiki-bootstrap.less
......@@ -364,3 +364,10 @@ input[type=file] {float: none; width: auto;}
*******************************/
@import "codehilite.less";
/******************************
TWITTER TYPEAHEAD
*******************************/
@import "typeahead.less";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment