Browse Source

add tokenfield for tags

pull/82/head
Aaron Parecki 7 years ago
parent
commit
3bdcd009c8
No known key found for this signature in database GPG Key ID: 276C2817346D6056
11 changed files with 114 additions and 25 deletions
  1. +15
    -3
      public/editor-files/editor.js
  2. +24
    -1
      public/editor-files/style.css
  3. +5
    -0
      public/libs/tokenfield/bootstrap-tokenfield.min.css
  4. +7
    -0
      public/libs/tokenfield/bootstrap-tokenfield.min.js
  5. +5
    -0
      public/libs/tokenfield/tokenfield-typeahead.min.css
  6. +7
    -2
      views/editor.php
  7. +6
    -1
      views/event.php
  8. +8
    -2
      views/layout.php
  9. +6
    -1
      views/new-bookmark.php
  10. +6
    -1
      views/new-itinerary.php
  11. +25
    -14
      views/new-post.php

+ 15
- 3
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();
}
});
});

+ 24
- 1
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
- 0
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
- 0
public/libs/tokenfield/bootstrap-tokenfield.min.js
File diff suppressed because it is too large
View File


+ 5
- 0
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}

+ 7
- 2
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>

+ 6
- 1
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();

+ 8
- 2
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>

+ 6
- 1
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() == "") {

+ 6
- 1
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;

+ 25
- 14
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 = '';

Loading…
Cancel
Save