jon
/
Quill
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add tokenfield for tags

pull/82/head
Aaron Parecki 8 years ago
parent
8aa73596e8
commit
3bdcd009c8
No known key found for this signature in database GPG Key ID: 276C2817346D6056
11 changed files with 114 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      public/editor-files/editor.js
  2. 25
      public/editor-files/style.css
  3. 5
      public/libs/tokenfield/bootstrap-tokenfield.min.css
  4. 7
      public/libs/tokenfield/bootstrap-tokenfield.min.js
  5. 5
      public/libs/tokenfield/tokenfield-typeahead.min.css
  6. 9
      views/editor.php
  7. 7
      views/event.php
  8. 10
      views/layout.php
  9. 7
      views/new-bookmark.php
  10. 7
      views/new-itinerary.php
  11. 39
      views/new-post.php

18
public/editor-files/editor.js
View File

@ -72,10 +72,12 @@ $(function() {
$('#publish-in-progress').removeClass('hidden');
$('#publish-fields').addClass('hidden');
var category = csv_to_array($("#post-tags").tokenfield('getTokensList'));
$.post('/editor/publish', {
name: $("#post-name").val(),
body: editor.serialize().content.value,
category: csv_to_array($("#post-tags").val()),
category: category,
slug: $("#post-slug").val(),
status: $("#post-status").val(),
publish: $("#post-publish-date").val()
@ -138,7 +140,7 @@ $(function() {
function reset_page() {
$("#post-name").val('');
$("#post-slug").val('');
$("#post-tags").val('');
$("#post-tags").tokenfield('setTokens',[]);
$("#post-status").val('published');
$("#post-publish-date").val('now');
$("#content").html('');
@ -168,7 +170,7 @@ function doAutoSave() {
var savedData = {
title: $("#post-name").val(),
body: editor.serialize().content.value,
tags: $("#post-tags").val(),
tags: $("#post-tags").tokenfield('getTokensList'),
slug: $("#post-slug").val(),
status: $("#post-status").val(),
publish: $("#post-publish-date").val()
@ -177,6 +179,13 @@ function doAutoSave() {
$("#draft-status").text("Saved");
});
}
function activateTokenField() {
$("#post-tags").tokenfield({
createTokensOnBlur: true,
beautify: true
}).on('tokenfield:createdtoken', contentChanged)
.on('tokenfield:removedtoken', contentChanged);
}
$(function(){
// Restore draft if present
localforage.getItem('currentdraft', function(err,val){
@ -190,6 +199,9 @@ $(function(){
$("#post-publish-date").val(val.publish);
// drop the cursor into the editor which clears the placeholder text
$("#content").focus().click();
activateTokenField();
} else {
activateTokenField();
}
});
});

25
public/editor-files/style.css
View File

@ -130,10 +130,16 @@ input.form-field-small {
font-size: 13px;
color: #51a1a8;
padding: 0 10px;
}
input.form-field-small, .tokenfield.form-control {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 1px #93dee5 solid;
border: 1px #93dee5 solid;
}
.tokenfield.form-control {
padding: 6px;
padding-bottom: 0;
}
select.form-select-small {
border-radius: 6px;
@ -144,6 +150,15 @@ select.form-select-small {
color: #51a1a8;
}
.tokenfield .token {
height: 20px;
font-size: 13px;
}
.tokenfield a.close {
text-decoration: none;
opacity: 0.3;
}
.publish-dropdown {
position: fixed;
top: 62px;
@ -193,6 +208,13 @@ select.form-select-small {
padding: 8px 4px 12px 4px;
color: #333;
}
#publish-fields {
width: 100%;
}
#publish-fields .form-field-small {
width: calc(100% - 22px);
}
pre#publish-error-debug {
overflow: scroll;
font-size: 11px;
@ -292,3 +314,4 @@ blockquote {
.editable .placeholder {
color: #ccc;
}

5
public/libs/tokenfield/bootstrap-tokenfield.min.css
View File

@ -0,0 +1,5 @@
/*!
* bootstrap-tokenfield
* https://github.com/sliptree/bootstrap-tokenfield
* Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
*/@-webkit-keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}@-moz-keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}@keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}.tokenfield{height:auto;min-height:34px;padding-bottom:0}.tokenfield.focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.tokenfield .token{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;border:1px solid #d9d9d9;background-color:#ededed;white-space:nowrap;margin:-1px 5px 5px 0;height:22px;vertical-align:top;cursor:default}.tokenfield .token:hover{border-color:#b9b9b9}.tokenfield .token.active{border-color:#52a8ec;border-color:rgba(82,168,236,.8)}.tokenfield .token.duplicate{border-color:#ebccd1;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.tokenfield .token.invalid{background:0 0;border:1px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-bottom:1px dotted #d9534f}.tokenfield .token.invalid.active{background:#ededed;border:1px solid #ededed;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.tokenfield .token .token-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;padding-left:4px;vertical-align:top}.tokenfield .token .close{font-family:Arial;display:inline-block;line-height:100%;font-size:1.1em;line-height:1.49em;margin-left:5px;float:none;height:100%;vertical-align:top;padding-right:4px}.tokenfield .token-input{background:0 0;width:60px;min-width:60px;border:0;height:20px;padding:0;margin-bottom:6px;-webkit-box-shadow:none;box-shadow:none}.tokenfield .token-input:focus{border-color:transparent;outline:0;-webkit-box-shadow:none;box-shadow:none}.tokenfield.disabled{cursor:not-allowed;background-color:#eee}.tokenfield.disabled .token-input{cursor:not-allowed}.tokenfield.disabled .token:hover{cursor:not-allowed;border-color:#d9d9d9}.tokenfield.disabled .token:hover .close{cursor:not-allowed;opacity:.2;filter:alpha(opacity=20)}.has-warning .tokenfield.focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-error .tokenfield.focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-success .tokenfield.focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.tokenfield.input-sm,.input-group-sm .tokenfield{min-height:30px;padding-bottom:0}.input-group-sm .token,.tokenfield.input-sm .token{height:20px;margin-bottom:4px}.input-group-sm .token-input,.tokenfield.input-sm .token-input{height:18px;margin-bottom:5px}.tokenfield.input-lg,.input-group-lg .tokenfield{height:auto;min-height:45px;padding-bottom:4px}.input-group-lg .token,.tokenfield.input-lg .token{height:25px}.input-group-lg .token-label,.tokenfield.input-lg .token-label{line-height:23px}.input-group-lg .token .close,.tokenfield.input-lg .token .close{line-height:1.3em}.input-group-lg .token-input,.tokenfield.input-lg .token-input{height:23px;line-height:23px;margin-bottom:6px;vertical-align:top}.tokenfield.rtl{direction:rtl;text-align:right}.tokenfield.rtl .token{margin:-1px 0 5px 5px}.tokenfield.rtl .token .token-label{padding-left:0;padding-right:4px}

7
public/libs/tokenfield/bootstrap-tokenfield.min.js
File diff suppressed because it is too large
View File

5
public/libs/tokenfield/tokenfield-typeahead.min.css
View File

@ -0,0 +1,5 @@
/*!
* bootstrap-tokenfield
* https://github.com/sliptree/bootstrap-tokenfield
* Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
*/.twitter-typeahead{width:100%;position:relative;vertical-align:top}.twitter-typeahead .tt-input,.twitter-typeahead .tt-hint{margin:0;width:100%;vertical-align:middle;background-color:#fff}.twitter-typeahead .tt-hint{color:#999;z-index:1;border:1px solid transparent}.twitter-typeahead .tt-input{color:#555;z-index:2}.twitter-typeahead .tt-input,.twitter-typeahead .tt-hint{height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429}.twitter-typeahead .input-sm.tt-input,.twitter-typeahead .hint-sm.tt-hint{border-radius:3px}.twitter-typeahead .input-lg.tt-input,.twitter-typeahead .hint-lg.tt-hint{border-radius:6px}.input-group .twitter-typeahead:first-child .tt-input,.input-group .twitter-typeahead:first-child .tt-hint{border-radius:4px 0 0 4px!important}.input-group .twitter-typeahead:last-child .tt-input,.input-group .twitter-typeahead:last-child .tt-hint{border-radius:0 4px 4px 0!important}.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint{border-radius:3px 0 0 3px!important}.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint{border-radius:0 3px 3px 0!important}.input-sm.tt-input,.hint-sm.tt-hint,.input-group.input-group-sm .tt-input,.input-group.input-group-sm .tt-hint{height:30px;padding:5px 10px;font-size:12px;line-height:1.5}.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint{border-radius:6px 0 0 6px!important}.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint{border-radius:0 6px 6px 0!important}.input-lg.tt-input,.hint-lg.tt-hint,.input-group.input-group-lg .tt-input,.input-group.input-group-lg .tt-hint{height:45px;padding:10px 16px;font-size:18px;line-height:1.33}.tt-dropdown-menu{width:100%;min-width:160px;margin-top:2px;padding:5px 0;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);*border-right-width:2px;*border-bottom-width:2px;border-radius:6px;-webkit-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-cursor{color:#262626;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)}.tt-suggestion.tt-cursor a{color:#fff}.tt-suggestion p{margin:0}.tokenfield .twitter-typeahead{width:auto}.tokenfield .twitter-typeahead .tt-hint{padding:0;height:20px}.tokenfield.input-sm .twitter-typeahead .tt-input,.tokenfield.input-sm .twitter-typeahead .tt-hint{height:18px;font-size:12px;line-height:1.5}.tokenfield.input-lg .twitter-typeahead .tt-input,.tokenfield.input-lg .twitter-typeahead .tt-hint{height:23px;font-size:18px;line-height:1.33}.tokenfield .twitter-typeahead .tt-suggestions{font-size:14px}

9
views/editor.php
View File

@ -20,7 +20,6 @@
<link rel="stylesheet" href="/editor-files/medium-editor/css/medium-editor-insert-plugin.min.css">
<link rel="stylesheet" href="/editor-files/medium-editor/css/medium-editor-insert-plugin-frontend.min.css">
<link href="/editor-files/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="/editor-files/style.css">
<script src="/editor-files/jquery-1.11.3.min.js"></script>
<script src="/editor-files/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
@ -32,6 +31,12 @@
<script src="/editor-files/medium-editor/js/medium-editor-insert-plugin.min.js"></script>
<script src="/libs/localforage.js"></script>
<script src="/libs/tokenfield/bootstrap-tokenfield.min.js"></script>
<link rel="stylesheet" href="/libs/tokenfield/bootstrap-tokenfield.min.css">
<link rel="stylesheet" href="/libs/tokenfield/tokenfield-typeahead.min.css">
<link rel="stylesheet" href="/editor-files/style.css">
<link rel="apple-touch-icon" sizes="57x57" href="/images/quill-icon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/quill-icon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/quill-icon-114.png">
@ -74,7 +79,7 @@
<table id="publish-fields">
<tr>
<td>Tags:</td>
<td><input type="text" class="form-field-small" placeholder="comma separated" id="post-tags"></td>
<td><input type="text" class="form-field-small" placeholder="" id="post-tags"></td>
</tr>
<tr>
<td>Slug:</td>

7
views/event.php
View File

@ -38,7 +38,7 @@
<div class="form-group" style="margin-top: 18px;">
<label for="note_category">Tags (comma-separated)</label>
<label for="note_category">Tags</label>
<input type="text" id="note_category" value="" class="form-control">
</div>
@ -56,6 +56,11 @@
$("#start_date .timezone").val(tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1));
});
$("#note_category").tokenfield({
createTokensOnBlur: true,
beautify: true
});
$("#btn_post").click(function(){
var event_start = $("#start_date .date").val()+"T"+$("#start_date .time").val()+$("#start_date .timezone").val();

10
views/layout.php
View File

@ -18,6 +18,14 @@
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css">
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/libs/localforage.js"></script>
<script src="/libs/tokenfield/bootstrap-tokenfield.min.js"></script>
<link rel="stylesheet" href="/libs/tokenfield/bootstrap-tokenfield.min.css">
<link rel="stylesheet" href="/libs/tokenfield/tokenfield-typeahead.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="apple-touch-icon" sizes="57x57" href="/images/quill-icon-57.png">
@ -32,8 +40,6 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#428bca">
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/libs/localforage.js"></script>
<script src="/js/script.js"></script>
<script src="/js/date.js"></script>
<script src="/js/cassis.js"></script>

7
views/new-bookmark.php
View File

@ -28,7 +28,7 @@
</div>
<div class="form-group">
<label for="note_category">Tags (<code>category</code>, optional, comma-separated list of tags)</label>
<label for="note_category">Tags (<code>category</code>)</label>
<input type="text" id="note_category" value="<?= $this->bookmark_tags ?>" class="form-control" placeholder="e.g. web, personal">
</div>
@ -67,6 +67,11 @@
<script>
$(function(){
$("#note_category").tokenfield({
createTokensOnBlur: true,
beautify: true
});
$("#btn_post").click(function(){
if($("#note_bookmark").val() == "") {

7
views/new-itinerary.php
View File

@ -68,7 +68,7 @@
<button class="btn btn-default" id="btn_add_leg">Add Leg</button>
<div class="form-group" style="margin-top: 18px;">
<label for="note_category">Tags (comma-separated)</label>
<label for="note_category">Tags</label>
<input type="text" id="note_category" value="" class="form-control">
</div>
@ -108,6 +108,11 @@
<script>
$(function(){
$("#note_category").tokenfield({
createTokensOnBlur: true,
beautify: true
});
$("#btn_add_leg").click(function(){
add_leg();
return false;

39
views/new-post.php
View File

@ -32,7 +32,7 @@
</div>
<div class="form-group" id="form_tags">
<label for="note_category">Tags (comma-separated list)</label>
<label for="note_category">Tags</label>
<input type="text" id="note_category" value="" class="form-control" placeholder="e.g. web, personal">
</div>
@ -180,6 +180,7 @@ function saveNoteState() {
$("#syndication-container button.btn-info").each(function(i,btn){
state.syndications[$(btn).data('syndicate-to')] = 'selected';
});
console.log("saving",state);
localforage.setItem('current-note', state);
}
@ -202,6 +203,9 @@ function restoreNoteState() {
}
});
$("#note_content").change();
activateTokenField();
} else {
activateTokenField();
}
});
}
@ -238,6 +242,13 @@ function expandReplySection() {
$("#note_in_reply_to").change();
}
function activateTokenField() {
$("#note_category").tokenfield({
createTokensOnBlur: true,
beautify: true
});
}
$(function(){
var userHasSetCategory = false;
@ -314,12 +325,12 @@ $(function(){
$("#note_content_remaining").addClass("pcheck"+tweet_check);
// If the user didn't enter any categories, add them from the post
if(!userHasSetCategory) {
var tags = $("#note_content").val().match(/#[a-z][a-z0-9]+/ig);
if(tags) {
$("#note_category").val(tags.map(function(tag){ return tag.replace('#',''); }).join(", "));
}
}
// if(!userHasSetCategory) {
// var tags = $("#note_content").val().match(/#[a-z][a-z0-9]+/ig);
// if(tags) {
// $("#note_category").val(tags.map(function(tag){ return tag.replace('#',''); }).join(", "));
// }
// }
});
$("#note_in_reply_to").on('change', function(){
@ -338,13 +349,13 @@ $(function(){
if(data.canonical_reply_url != reply_to) {
$("#note_in_reply_to").val(data.canonical_reply_url);
}
var category = csv_to_array($("#note_category").val());
for(var i in data.entry.category) {
if($.inArray(data.entry.category[i], category) == -1) {
category.push(data.entry.category[i]);
}
}
$("#note_category").val(category.join(", "));
// var category = csv_to_array($("#note_category").val());
// for(var i in data.entry.category) {
// if($.inArray(data.entry.category[i], category) == -1) {
// category.push(data.entry.category[i]);
// }
// }
// $("#note_category").val(category.join(", "));
if($("#note_content").val() == "" && data.mentions) {
var mentions = '';

Write Preview
Loading…
Cancel
Save