Skip to content
This repository has been archived by the owner on May 9, 2018. It is now read-only.

Tag edit support #65

Merged
merged 6 commits into from
Nov 30, 2012
Merged

Tag edit support #65

merged 6 commits into from
Nov 30, 2012

Conversation

AAverin
Copy link
Collaborator

@AAverin AAverin commented Nov 27, 2012

Implemented tags edit feature, added a couple of fixes.
Details:

small fixes:

  1. 'style' is now cleared after highlight animation, so it no longer messes with other things you want to style.
  2. fixed Bug: clicking in input and going to another page results in js error #61

features:

  1. each tag label is now marked as 'tagit-label' class - simplifies use of ellipsis for tags and etc.
  2. option 'editable', methods _edit and _postEdit were added

Edit logic:
if 'editable=true' click on a tag:

  • hides corresponding tagit-label using class 'hidden'
  • adds an input with class 'tagit-edit' and width of hidden tagit-label.
  • adds 'edited' class to parent 'tagit-choice'
  • selects tag label text in added input by call to .select()
    'blur' call of that added input:
  • uses only first available value - line is splitted with _splitAt and first value is used
  • if value is identical to old tag label - editing finished, nothing changed, all inputs and classes removed
  • otherwise tries to add a new tag with _addTag. If fails (eg. tag with same value already exists) - stays at edit state
  • if _addTag succeeds:
    • new tag is added at the end of tagsArray
    • removes old tag with _popTag and removes corresponding DOM element
    • moves last added tag to the place where old tag was with 'insertBefore' and _moveTag
    • fires 'tagsChanged' if it's present
    • finished editing process by removing inputs and classes like 'edited' and 'hidden'

Anyway, all this is in code, some comments were also added.
With lots of css changes for tagit in my project I wasn't able to add sample styles for: 'tagit-edit', 'hidden', 'edited', 'tagit-label'
I hope you will figure our yourself how to style these parts.

Changes were also added to tagit-themeroller, although weren't tested, so be careful when using.

Anton Averin added 6 commits November 14, 2012 13:33
Details:

small fixes:
1. 'style' is now cleared after highlight animation, so it no longer messes with other things you want to style.

features:
1. each tag label is now marked as 'tagit-label' class - simplifies use of ellipsis for tags and etc.
2. option 'editable', methods _edit and _postEdit were added

Edit logic:
if 'editable=true' click on a tag:
  - hides corresponding tagit-label using class 'hidden'
  - adds an input with class 'tagit-edit' and width of hidden tagit-label.
  - adds 'edited' class to parent 'tagit-choice'
  - selects tag label text in added input by call to .select()
'blur' call of that added input:
  - uses only first available value - line is splitted with _splitAt and first value is used
  - if value is identical to old tag label - editing finished, nothing changed, all inputs and classes removed
  - otherwise tries to add a new tag with _addTag. If fails (eg. tag with same value already exists) - stays at edit state
  - if _addTag succeeds:
    - new tag is added at the end of tagsArray
    - removes old tag with _popTag and removes corresponding DOM element
    - moves last added tag to the place where old tag was with 'insertBefore' and _moveTag
    - fires 'tagsChanged' if it's present
    - finished editing process by removing inputs and classes like 'edited' and 'hidden'

Anyway, all this is in code, some comments were also added.
With lots of css changes for tagit in my project I wasn't able to add sample styles for: 'tagit-edit', 'hidden', 'edited', 'tagit-label'
I hope you will figure our yourself how to style these parts.

Changes were also added to tagit-themeroller, although weren't tested, so be careful when using.
Bugfix:
timeout is now cleared on destroy, doesn't causing an error when we go to another page and _addTag is called some time later, resultsing in a js error
added support of triggerKeys for editing
@hailwood
Copy link
Owner

@AAverin Two things,
One: You might want to check your git settings, all your commits are coming through as invalid-email-address.
Two: The rest of your commits have been good, and this looks good too and a large contribution, I have added you as a collaborator on the repository so you should be able to just push straight to the repository now.

Can you please organise manually merging these?

@AAverin
Copy link
Collaborator Author

AAverin commented Nov 30, 2012

@hailwood
Thanks for allowing me to push directly=)
Not sure I will have time to actively contribute to tagit, but if during my use of the plugin I fix other bugs or implement new features I will push them for sure.
I'm still quite new to Git, but I will try to find a way to merge edit feature to the master branch.
Issue with invalid-email-address appears because I use not git as the client, but mercurial with a hggit plugin installed, and mercurial has some different user name format - I didn't yet figured out how to write it so that Git would parse it properly.

@AAverin AAverin merged commit c61a0a6 into hailwood:master Nov 30, 2012
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: clicking in input and going to another page results in js error
2 participants