Skip to content

Commit

Permalink
Merge branch 'master' into add-github-workflow
Browse files Browse the repository at this point in the history
  • Loading branch information
clpetersonucf committed Oct 30, 2023
2 parents 12438cf + 37bf05f commit d3e51ee
Showing 11 changed files with 6,467 additions and 5,551 deletions.
9 changes: 4 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -5,15 +5,14 @@
},
"version": "1.0.4",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p",
"build-dev": "webpack",
"start": "mwdk-start",
"build": "mwdk-build-prod",
"build-dev": "mwdk-build-dev",
"test": "echo 'tests not implemented'",
"test-ci": "echo 'tests not implemented'"
},
"dependencies": {
"html-webpack-plugin": "^3.2.0",
"materia-widget-development-kit": "2.4.2",
"materia-widget-development-kit": "~3.0.0",
"meta-marked": "^0.4.2"
},
"license": "AGPL-3.0",
73 changes: 61 additions & 12 deletions src/creator.coffee
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ Namespace('Labeling').Creator = do ->
_gettingStarted = false

_defaultLabel = '[label title]'
_defaultDescription = '[ARIA label description]'

initNewWidget = (widget, baseUrl) ->
$('#image').hide()
@@ -122,6 +123,11 @@ Namespace('Labeling').Creator = do ->
$('#btnMoveResizeDone').click ->
_resizeMode false

$('#btnChangeDescription').click ->
$('#descriptionchanger').addClass 'show'
$('#backgroundcover').addClass 'show'
$('.arrow_box').addClass('hide')

$('#btnChooseImage').click ->
Materia.CreatorCore.showMediaImporter()

@@ -139,6 +145,11 @@ Namespace('Labeling').Creator = do ->
$('#backgroundcover').removeClass 'show'
$('#title').html (title or 'My labeling widget')

window.setImageDescription = (alt = document.getElementById("alttext")) ->
$('#descriptionchanger').removeClass 'show'
$('#backgroundcover').removeClass 'show'
$('#image').attr('alt', alt)

document.getElementById('canvas').addEventListener('click', _addTerm, false)

# update background
@@ -222,6 +233,15 @@ Namespace('Labeling').Creator = do ->
_img.onload = ->
$('#imagewrapper').css('height', (_img.height * _qset.options.imageScale))
$('#imagewrapper').css('width', (_img.width * _qset.options.imageScale))
_img.alt = _qset.options.image.alt or ''

# set the image alt
$('#image').attr('alt', _img.alt)
$('#alttxt').val(_img.alt)

# if image has no description, prompt creator make one
if _img.alt == ''
$('.arrow_box').removeClass('hide')

# set the resizable image wrapper to the size and pos from qset
$('#imagewrapper').css('left', (_qset.options.imageX))
@@ -237,7 +257,7 @@ Namespace('Labeling').Creator = do ->
if questions[0]? and questions[0].items
questions = questions[0].items
for item in questions
_makeTerm(item.options.endPointX, item.options.endPointY, item.questions[0].text, item.options.labelBoxX, item.options.labelBoxY, item.id)
_makeTerm(item.options.endPointX, item.options.endPointY, item.questions[0].text, item.options.labelBoxX, item.options.labelBoxY, item.id, item.options.description or _defaultDescription)

# draw lines on the board
_drawBoard = ->
@@ -274,13 +294,13 @@ Namespace('Labeling').Creator = do ->
,400

# generate a term div
_makeTerm = (x, y, text = _defaultLabel, labelX=null, labelY=null, id='') ->
_makeTerm = (x, y, text = _defaultLabel, labelX=null, labelY=null, id='', description = _defaultDescription) ->
dotx = x
doty = y

term = document.createElement 'div'
term.id = 'term_' + Math.random(); # fake id for linking with dot
term.innerHTML = "<div class='label-input' contenteditable='true' onkeypress='return (this.innerText.length <= 400)'>"+text+"</div><div class='delete'></div>"
term.innerHTML = "<div class='label-input' id='text-input' tabindex='0' contenteditable='true' onkeypress='return (this.innerText.length <= 400)'>"+text+"</div><div class='delete'></div><div class='label-input' id='description-input' contenteditable='true' tabindex='0' onkeypress='return (this.innerText.length <= 400)'>"+description+"</div>"
term.className = 'term'

# if we're generating a generic one, decide on a position
@@ -338,24 +358,37 @@ Namespace('Labeling').Creator = do ->
$('#terms').append dot

# edit on click
term.onclick = ->
term.childNodes[0].onclick = ->
term.childNodes[0].focus()
document.execCommand 'selectAll',false,null
if term.childNodes[0].innerHTML == _defaultLabel then term.childNodes[0].innerHTML = ''
term.childNodes[2].onclick = ->
term.childNodes[2].focus()
document.execCommand 'selectAll',false,null

term.childNodes[0].onfocus = ->
document.execCommand 'selectAll',false,null

term.childNodes[2].onfocus = ->
document.execCommand 'selectAll',false,null

# resize text on change
term.childNodes[0].onkeyup = _termKeyUp
term.childNodes[2].onkeyup = _termKeyUp
# set initial font size
term.childNodes[0].onkeyup target: term.childNodes[0]
term.childNodes[2].onkeyup target: term.childNodes[2]

# enter key press should stop editing
term.childNodes[0].onkeydown = _termKeyDown
term.childNodes[2].onkeydown = _termKeyDown

# check if blank when the text is cleared
term.childNodes[0].onblur = _termBlurred
term.childNodes[0].onblur = (e) => _termBlurred(term.childNodes[0], 0)
term.childNodes[2].onblur = (e) => _termBlurred(term.childNodes[2], 2)

# clean up pasted content to make sure we don't accidentally get invisible html garbage
term.childNodes[0].onpaste = _termPaste
term.childNodes[2].onpaste = _termPaste

# make delete button remove it from the list
term.childNodes[1].onclick = ->
@@ -409,8 +442,11 @@ Namespace('Labeling').Creator = do ->
# put event in a sleeper hold
e.stopPropagation() if e.stopPropagation?
e.preventDefault()
if e.target.id == "text-input"
e.target.parentElement.childNodes[2].focus()
return false


# Escape
if e.keyCode is 27
if e.target.innerHTML.length < 1
@@ -423,9 +459,11 @@ Namespace('Labeling').Creator = do ->
window.getSelection().removeAllRanges() # needed for contenteditable blur

# If the term is blank, put dummy text in it
_termBlurred = (e) ->
e = window.event if not e?
e.target.innerHTML = _defaultLabel if e.target.innerHTML is ''
_termBlurred = (target, type) ->
if type == 0
target.innerHTML = _defaultLabel if target.innerHTML is ''
else if type == 2
target.innerHTML = _defaultDescription if target.innerHTML is ''

# Convert anything on the clipboard into pure text before pasting it into the label
_termPaste = (e) ->
@@ -491,7 +529,7 @@ Namespace('Labeling').Creator = do ->
# called from Materia creator page
onSaveClicked = (mode = 'save') ->
if not _buildSaveData()
return Materia.CreatorCore.cancelSave 'Widget needs a title and at least one term.'
return Materia.CreatorCore.cancelSave 'Widget needs a title, at least one term, and a description of the image.'
Materia.CreatorCore.save _title, _qset

onSaveComplete = (title, widget, qset, version) -> true
@@ -500,7 +538,7 @@ Namespace('Labeling').Creator = do ->
# place the questions in an arbitrary location to be moved
onQuestionImportComplete = (items) ->
for item in items
_makeTerm(150,300,item.questions[0].text,null,null,item.id)
_makeTerm(150,300,item.questions[0].text,null,null,item.id,item.options.description or _defaultDescription)

# generate the qset
_buildSaveData = ->
@@ -521,6 +559,9 @@ Namespace('Labeling').Creator = do ->
for dot in dots
item = {}
label = dot.childNodes[0].innerHTML
description = dot.childNodes[2].innerHTML
if description == _defaultDescription
description = ''

answer =
text: label
@@ -534,6 +575,7 @@ Namespace('Labeling').Creator = do ->
item.type = 'QA'
item.id = dot.getAttribute('data-id') or ''
item.options =
description: description
labelBoxX: parseInt(dot.style.left.replace('px',''))
labelBoxY: parseInt(dot.style.top.replace('px',''))
endPointX: parseInt(dot.getAttribute('data-x'))
@@ -552,13 +594,17 @@ Namespace('Labeling').Creator = do ->
else if _anchorOpacity.indexOf('transparent') > -1
_anchorOpacityValue = 0.0

if $('#image').attr('alt') == ''
_okToSave = false

_qset.options =
backgroundTheme: _qset.options.backgroundTheme
backgroundColor: _qset.options.backgroundColor
imageScale: $('#imagewrapper').width() / _img.width
image:
id: $('#image').attr('data-imgid')
materiaType: "asset"
alt: $('#image').attr('alt')
imageX: $('#imagewrapper').position().left
imageY: $('#imagewrapper').position().top
opacity: _anchorOpacityValue
@@ -591,8 +637,11 @@ Namespace('Labeling').Creator = do ->

$('#imagewrapper').css('left', (600 / 2) - (iw.width() / 2))
$('#imagewrapper').css('top', (550 / 2) - (iw.height() / 2))
_img.alt = ""


# add image description dialog
$('#descriptionchanger').addClass 'show'
$('#backgroundcover').addClass 'show'

_makeDraggable()

11 changes: 11 additions & 0 deletions src/creator.html
Original file line number Diff line number Diff line change
@@ -36,9 +36,12 @@ <h1 id='title'></h1>
</div>
</div>

<div class="arrow_box hide">Add Image Description</div>

<div id='controls'>
<input type='button' value='Choose a different image' data-intro='Choose an image' id='btnChooseImage'>
<input type='button' value='Move &amp; resize image' id='btnMoveResize'>
<input type='button' value='Change image description' id='btnChangeDescription'>
<div class='helpbox' id='help_adding' style='display:none'>
<b>Adding labels:</b><br>
Click anywhere<br>on the image<br>
@@ -103,6 +106,14 @@ <h1 id='title'></h1>
</form>
</div>

<div id='descriptionchanger' class='box fade'>
<b>Give your Image a description</b>
<form onsubmit='setImageDescription(alttxt.value);return false;'>
<input type='text' id='alttxt' required name='alttxt' placeholder='My image description' autofocus='1'>
<input type='submit' value='Done'>
</form>
</div>

<div id='titlebox' class='box fade intro'>
<img src='assets/creator_example.jpg'>
<h1>Labeling</h1>
66 changes: 64 additions & 2 deletions src/creator.scss
Original file line number Diff line number Diff line change
@@ -241,11 +241,17 @@ textarea {
}
[type=button],
[type=submit],
[type=text] {
[type=text],
[type=textbox] {
margin-left: 7px;
}
}

#image_alt {
width: 170px;
height: 200px;
}

#opacity-toggle {
margin-top: 10px;
}
@@ -268,6 +274,10 @@ textarea {

overflow-x: hidden;
overflow-y: auto;

&:focus {
border: solid 2px #27c0ff;
}
}

div.term {
@@ -316,7 +326,7 @@ div.term {
&:hover .delete {
opacity: 1;
}
&:hover {
&:hover, &:focus {
border: solid 2px #27c0ff;
margin: -12px;
}
@@ -619,3 +629,55 @@ h1 {
margin-left: 4px;
cursor: pointer;
}

/** ~~thanks crossword~~ **/
.arrow_box {
left: 245px;
position: absolute;
top: 145px;
background: #9c52a4;
z-index: 10000;
padding: 24px;
color: #fff;
text-align: center;
cursor:default;
animation: pounce 1.5s infinite;

&.hide {
display: none;
}
}
.arrow_box:after, .arrow_box:before {
right: 98%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(156, 82, 164, 0);
border-right-color: #9c52a4;
border-width: 55px;
margin-top: -55px;
}
.arrow_box:before {
border-color: rgba(156, 82, 164, 0);
border-right-color: #9c52a4;
border-width: 58px;
margin-top: -58px;
}

@keyframes pounce {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(20px, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
Loading

0 comments on commit d3e51ee

Please sign in to comment.