Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moved placeholder logic out of Javascript and the DOM and into CSS #6

Merged
merged 14 commits into from
Jun 21, 2013
Merged

Moved placeholder logic out of Javascript and the DOM and into CSS #6

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
fb97e7a
Moved placeholder logic out of Javascript and the DOM
philschatz May 30, 2013
6f32dbb
Removed cnxmlplus handler
philschatz May 30, 2013
ef532ac
Moved title out of the type-container element
philschatz May 30, 2013
c1d283a
type-container is removed from the serialized DOM
philschatz May 30, 2013
abe9dc7
Merge branch 'master' into placeholder-in-css
philschatz Jun 8, 2013
e2ae39e
Renamed variable
philschatz Jun 8, 2013
a93604a
Notes with textnode children will get a para
philschatz Jun 8, 2013
c7710e5
fix typo in semanticBlock makeClean
TomWoodward Jun 8, 2013
b558eea
fix images and exercises
TomWoodward Jun 8, 2013
55d6725
add note type if it doesn't exist
TomWoodward Jun 8, 2013
02171e1
fix bug in note title handling
TomWoodward Jun 20, 2013
8f96b7d
Merge branch 'master' into placeholder-in-css
TomWoodward Jun 20, 2013
79abd25
fix type selection for notes
TomWoodward Jun 20, 2013
a81f1ce
remove unused variable in note plugin
TomWoodward Jun 21, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cnx/aloha-config.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

138 changes: 61 additions & 77 deletions src/plugins/oer/note/lib/note-plugin.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@ define [
'semanticblock/semanticblock-plugin'
'css!note/css/note-plugin.css'], (Aloha, Plugin, jQuery, Ephemera, UI, Button, semanticBlock) ->

TITLE_CONTAINER = jQuery('''
<div class="type-container dropdown">
<a class="type" data-toggle="dropdown"></a>
<span class="title" placeholder="Add a title (optional)"></span>
<ul class="dropdown-menu">
</ul>
</div>
''')
TYPE_CONTAINER = jQuery '''
<span class="type-container dropdown aloha-ephemera">
<a class="type" data-toggle="dropdown"></a>
<ul class="dropdown-menu">
</ul>
</span>
'''

# Find all classes that could mean something is "notish"
# so they can be removed when the type is changed from the dropdown.
Expand Down Expand Up @@ -72,86 +71,71 @@ define [
if hasTitle
newTemplate.append("<#{titleTagName} class='title'></#{titleTagName}")

semanticBlock.activateHandler(selector, (element) =>
if hasTitle
titleElement = element.children('.title')

if titleElement.length
title = titleElement.html()
titleElement.remove()
else
title = ''

type = element.attr('data-type') or className

body = element.children()
element.children().remove()

if hasTitle
titleContainer = TITLE_CONTAINER.clone()
# Add dropdown elements for each possible type
jQuery.each @settings, (i, foo) =>
$option = jQuery('<li><a href=""></a></li>')
$option.appendTo(titleContainer.find('.dropdown-menu'))
$option = $option.children('a')
$option.text(foo.label)
$option.on 'click', =>
# Remove the title if this type does not have one
# The title was moved into `.type-container` for some reason
if foo.hasTitle
# If there is no `.title` element then add one in and enable it as an Aloha block
if not element.find('> .type-container > .title')[0]
$newTitle = jQuery("<#{foo.titleTagName or 'span'} class='title'></#{foo.titleTagName or 'span'}")
element.children('.type-container').append($newTitle)
$newTitle.aloha()

else
element.find('> .type-container > .title').remove()

# Remove the `data-type` if this type does not have one
if foo.type
element.attr('data-type', foo.type)
else
element.removeAttr('data-type')

# Remove all notish class names and then add this one in
for key of notishClasses
element.removeClass key
element.addClass(foo.cls)


titleContainer.find('.title').text(title)
titleContainer.find('.type').text(label)
titleContainer.prependTo(element)
titleContainer.children('.title').aloha()
semanticBlock.activateHandler(selector, ($element) =>
type = $element.attr('data-type') or className

$title = $element.children('.title')
$title.attr('placeholder', 'Add a title (optional)')
$title.aloha()

$body = $element.contents().not($title)

typeContainer = TYPE_CONTAINER.clone()
# Add dropdown elements for each possible type
jQuery.each @settings, (i, foo) =>
$option = jQuery('<li><a href=""></a></li>')
$option.appendTo(typeContainer.find('.dropdown-menu'))
$option = $option.children('a')
$option.text(foo.label)
$option.on 'click', =>
# Remove the title if this type does not have one
if foo.hasTitle
# If there is no `.title` element then add one in and enable it as an Aloha block
if not $element.children('.title')[0]
$newTitle = jQuery("<#{foo.titleTagName or 'span'} class='title'></#{foo.titleTagName or 'span'}")
$element.append($newTitle)
$newTitle.aloha()

else
$element.children('.title').remove()

# Remove the `data-type` if this type does not have one
if foo.type
$element.attr('data-type', foo.type)
else
$element.removeAttr('data-type')

# Remove all notish class names and then add this one in
for key of notishClasses
$element.removeClass key
$element.addClass(foo.cls)


typeContainer.find('.type').text(label)
typeContainer.prependTo($element)

# Create the body and add some placeholder text
$('<div>').addClass('body')
.attr('placeholder', "Type the text of your #{className} here.")
.append(body)
.appendTo(element)
.append($body)
.appendTo($element)
.aloha()
)
semanticBlock.deactivateHandler(selector, (element) ->
bodyElement = element.children('.body')
body = bodyElement.children()
semanticBlock.deactivateHandler(selector, ($element) ->
$body = $element.children('.body')
$body = $body.children()

if body == bodyElement.attr('placeholder')
body = ''

element.children('.body').remove()
$element.children('.body').remove()

if hasTitle
titleElement = element.children('.type-container').children('.title')
title = titleElement.text()

if title == titleElement.attr('placeholder')
title = ''
$title = $element.children('.title')
if not $title[0]
$title = jQuery("<#{titleTagName}></#{titleTagName}>")
$title.addClass 'title'

element.children('.type-container').remove()
jQuery("<div>").addClass('title').text(title).prependTo(element)
$title.prependTo($element)

element.append(body)
$element.append($body)
)
# Add a listener
UI.adopt "insert-#{className}#{typeName}", Button,
Expand Down
115 changes: 50 additions & 65 deletions src/plugins/oer/note/lib/note-plugin.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 25 additions & 7 deletions src/plugins/oer/semanticblock/css/semanticblock-plugin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,26 @@

.placeholder {
/* Logic for displaying placeholder text.
There are 2 cases when placeholder text should become visible:
1. If the user is hovering over a semantic element
2. If the user is editing a semantic element

Then, the placeholder text should appear on an element when all of the following occur:
- has a `placeholder` attribute
- does not contain text in the children (`.aloha-empty` is set on init/blur)
- is not currently being edited (no cursor inside)

The placeholder text is added to the DOM using `:before { content: '...'; }`.
This way, the browser does most of the heavy lifting AND the actual text
is never part of the DOM for serializing.
*/
.aloha-oer-block:hover *[placeholder].aloha-empty:not(:focus):before,
.aloha-block-active *[placeholder].aloha-empty:not(:focus):before {
color: #AAA;
content: attr(placeholder);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this actually work? appears to not be supported anywhere according to https://developer.mozilla.org/en-US/docs/Web/CSS/attr

nvm, is supported in all modern browsers

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, this will work with any browser that supports CSS 2.1

}

/* Make titles inline so they show up next to the type dropdown if there is one */
.aloha-oer-block > .title { display: inline; }

.semantic-drag-helper {
display: block;
height: auto !important;
Expand All @@ -22,8 +40,8 @@
}

.semantic-container .aloha-block-handle {
background-image:
linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%),
background-image:
linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%),
linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%);
background-position: 0 0, 2px 2px;
background-color: #FAFAFA;
Expand All @@ -50,13 +68,13 @@
.semantic-container .semantic-controls {
border-left: 1px solid #ccc;
background: #F5F5F5;
padding-left: 1px;
padding-left: 1px;
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 100%;
display: none;
display: none;
}
.semantic-container.focused > .semantic-controls {
display: block;
Expand Down Expand Up @@ -106,7 +124,7 @@
}

.aloha-oer-block .type-container li {
list-style-type: none !important;
list-style-type: none !important;
}

.aloha-oer-block .title {
Expand Down
Loading