tags-ang/index.js at master · notablemind/tags-ang · GitHub

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

/* globals angular: true */

var template = require('./template')
  , keys = require('keys')

module.exports = angular.module('tags', [])
  .directive('tags', function(){
    return {
      scope: {tags: '=tags'},
      replace: true,
      restrict: 'A',
      template: template,
      link: function (scope, element, attrs) {
        var name = attrs.note;
        var localName = 'tags';
        scope.editing = false;
        scope.focused = false;
        scope.new_tag = ''

        scope.$watch('editing', function (value) {
          if ('undefined' === typeof value) return
          if (false === scope.focused) return
          if (false === value) return setTimeout(function () {
            element[0].querySelectorAll('.end')[0].focus()
          }, 0)
          setTimeout(function () {
            var tag = element[0].querySelectorAll('.tag')[value]
            if (!tag) return console.error('cant focus', value)
            tag.getElementsByTagName('input')[0].focus()
          }, 0)
        })

        scope.inWidth = function (value) {
          return {width: 20 + 7*(value.length > 3 ? value.length + 1 : 4) + 'px'}
        }

        scope.midKey = keys({
          'backspace': function (e, i) {
            if (scope.tags[scope.editing].value.trim() !== '') return true
            scope.tags.splice(scope.editing, 1)
            if (scope.editing > 0) scope.editing -= 1
          },
          'shift tab': function (e) {
            if (scope.tags[scope.editing].value.trim() === '') scope.tags.splice(scope.editing, 1)
            scope.editing -= 1
            if (scope.editing < 0) scope.editing = 0
          },
          'tab': function () {
            if (scope.tags[scope.editing].value.trim() === '') scope.tags.splice(scope.editing, 1)
            else scope.editing += 1
            if (scope.editing >= scope.tags.length) scope.editing = false
          },
          'return': function () {
            if (scope.tags[scope.editing].value.trim() === '') scope.tags.splice(scope.editing, 1)
            scope.editing = false
            scope.new_tag = ''
          },
          'escape': function () {
            if (scope.tags[scope.editing].value.trim() === '') scope.tags.splice(scope.editing, 1)
            scope.editing = false
            scope.focused = false
          }
        })
        scope.endKey = keys({
          'backspace': function (e) {
            if (scope.new_tag.trim() !== '') return true
            if (scope.tags.length === 0) return
            scope.editing = scope.tags.length - 1
          },
          'tab': function () {
            if (!scope.new_tag.trim().length) return
            scope.tags.push({value: scope.new_tag})
            scope.new_tag = ''
          },
          'shift tab': function (e) {
            scope.editing = scope.tags.length - 1
            if (scope.new_tag.trim() !== '') scope.tags.push({value: scope.new_tag})
            if (scope.editing < 0) scope.editing = 0
          },
          'return': function () {
            if (scope.new_tag.trim() !== '') scope.tags.push({value: scope.new_tag})
            scope.editing = false
            scope.new_tag = ''
            // scope.focused = false
            // element.children('.end')[0].blur()
          },
          'escape': function () {
            if (scope.new_tag.trim() !== '') scope.tags.push({value: scope.new_tag})
            scope.focused = false
            element.children('.end')[0].blur()
          }
        })
        scope.remove = function (i) {
          scope.tags.splice(i, 1)
          scope.editing = false
          scope.focused = false
        }
        scope.edit = function (i) {
          scope.editing = i
          scope.focused = true
        }
        scope.blurEnd = function () {
          if (scope.editing) return
          if (scope.new_tag.trim() !== '') scope.tags.push({value: scope.new_tag})
          scope.editing = false
          scope.focused = false
          scope.new_tag = ''
        }
        scope.blurMid = function (i) {
          if (scope.editing !== i) return
          if (!scope.tags[scope.editing].value.trim().length) scope.tags.splice(scope.editing, 1)
          scope.editing = false
          scope.focused = false
          scope.new_tag = ''
        }
        scope.focus = function () {
          scope.focused = true
          scope.editing = false
          setTimeout(function () {
            element[0].querySelectorAll('.end')[0].focus()
          }, 0)
        }
      }
    };
  });