Iconolab

').get(0)); + + vm.$on('close', () => { + this.clear(); + }); + vm.$on('save', (data) => { + this.save(data); + }); + + popoverOptions.content = vm.$el; + + var target = new Snap(this.getTooltipTarget()); + + var $el = $(target.node); + $el + .popover(popoverOptions) + .popover('show'); + + this.$on('drag:start', function() { + $el.popover('hide'); + }); + this.$on('drag:end', function() { + $el.popover('show'); + }); + + $el.on('shown.bs.popover', (e) => { + var $tip = $el.data('bs.popover').$tip; + $tip.find('input[name="title"]').focus(); + }); + }, + destroyTooltip: function() { + var target = new Snap(this.getTooltipTarget()); + + var $el = $(target.node); + if ($el.data('bs.popover')) { + $el.popover('destroy'); + } + }, + hideTooltip: function() { + var target = new Snap(this.getTooltipTarget()); + + var $el = $(target.node); + if ($el.data('bs.popover')) { + $el.popover('hide'); + } + }, + showTooltip: function() { + var target = new Snap(this.getTooltipTarget()); + + var $el = $(target.node); + if ($el.data('bs.popover')) { + $el.popover('show'); + } + }, + } +} diff -r bca3e4b1d0f1 -r 81945eedc63f src_js/iconolab-bundle/src/components/tagform/ColorButtons.vue --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src_js/iconolab-bundle/src/components/tagform/ColorButtons.vue Wed Feb 15 16:42:06 2017 +0100 @@ -0,0 +1,139 @@ + + + + + diff -r bca3e4b1d0f1 -r 81945eedc63f src_js/iconolab-bundle/src/components/tagform/TagList.vue --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src_js/iconolab-bundle/src/components/tagform/TagList.vue Wed Feb 15 16:42:06 2017 +0100 @@ -0,0 +1,69 @@ + + + + + diff -r bca3e4b1d0f1 -r 81945eedc63f src_js/iconolab-bundle/src/components/tagform/TagListItem.vue --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src_js/iconolab-bundle/src/components/tagform/TagListItem.vue Wed Feb 15 16:42:06 2017 +0100 @@ -0,0 +1,202 @@ + + + + + diff -r bca3e4b1d0f1 -r 81945eedc63f src_js/iconolab-bundle/src/components/tagform/Typeahead.vue --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src_js/iconolab-bundle/src/components/tagform/Typeahead.vue Wed Feb 15 16:42:06 2017 +0100 @@ -0,0 +1,160 @@ + + + + + diff -r bca3e4b1d0f1 -r 81945eedc63f src_js/iconolab-bundle/src/components/tagform/typeahead.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src_js/iconolab-bundle/src/components/tagform/typeahead.css Wed Feb 15 16:42:06 2017 +0100 @@ -0,0 +1,70 @@ +Typeahead { + position: relative; +} +.selected-tags { border: 1px solid red; width: 200px !important; } +.selected-tags select {display: inline-block;} + +.Typeahead__input { + width: 100%; + font-size: 14px; + color: #2c3e50; + line-height: 1.42857143; + box-shadow: inset 0 1px 4px rgba(0,0,0,.4); + -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; + font-weight: 300; + padding: 12px 26px; + border: none; + border-radius: 22px; + letter-spacing: 1px; + box-sizing: border-box; +} +.Typeahead__input:focus { + border-color: #4fc08d; + outline: 0; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #4fc08d; +} +.tag-item {border: 1px solid red;} +.fa-times { + cursor: pointer; +} + +ul { + padding: 0; + margin-top: 8px; + min-width: 100%; + background-color: #fff; + list-style: none; + border-radius: 4px; + box-shadow: 0 0 10px rgba(0,0,0, 0.25); + z-index: 1000; +} +li { + padding: 10px 16px; + border-bottom: 1px solid #ccc; + cursor: pointer; +} +li:first-child { + border-radius: 4px 4px 0 0; +} +li:last-child { + border-radius: 0 0 4px 4px; + border-bottom: 0; +} +span { + display: block; + color: #2c3e50; +} +.active { + background-color: #3aa373; +} +.active span { + color: white; +} +.name { + font-weight: 700; + font-size: 18px; +} +.screen-name { + font-style: italic; +} diff -r bca3e4b1d0f1 -r 81945eedc63f src_js/iconolab-bundle/src/main.js --- a/src_js/iconolab-bundle/src/main.js Thu Feb 09 16:57:05 2017 +0100 +++ b/src_js/iconolab-bundle/src/main.js Wed Feb 15 16:42:06 2017 +0100 @@ -12,6 +12,9 @@ import DescriptionViewer from './components/collectionhome/descriptionviewer/DescriptionViewer.vue' import DiffViewer from './components/diffviewer/diffviewer.vue' import jsondiffpatch from 'jsondiffpatch' +import Editor from './components/editor' +import ColorButtons from './components/tagform/ColorButtons.vue' +import TagList from './components/tagform/TagList.vue' const Diff = require('diff') Vue.config.ignoredElements = ["mask"]; @@ -26,10 +29,17 @@ Typeahead: Typeahead, MergeTool: MergeTool, Zoomview: Zoomview, - DiffViewer: DiffViewer + DiffViewer: DiffViewer, + Editor: Editor, + ColorButtons: ColorButtons, + TagList: TagList } }; +Vue.component('color-buttons', ColorButtons); +Vue.component('image-annotator', Editor.Canvas); +Vue.component('annotation', Editor.Annotation); + if (!window.iconolab) { window.iconolab = iconolab; } diff -r bca3e4b1d0f1 -r 81945eedc63f src_js/iconolab-bundle/tagform.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src_js/iconolab-bundle/tagform.html Wed Feb 15 16:42:06 2017 +0100 @@ -0,0 +1,82 @@ + + + + + Iconolab + + + + +

+ +

+ + + + + +