We used to have a blue arrow that showed where a table or image would be going. We will want that for the media embedder also.

Can we get it back?

body body body

Remove ability to drag image sizes

Hi,
The demo of oerpub that comes with this bundle is broken.
From what I've seen, just adding the "oer/figure" plugin declaration in /Aloha-Editor/oerpub/index.html line 79 should fix it... Could someone confirm this?
Yours,

To reproduce

• Drag a numbered equation to the editor
• Click to edit the math
• Click out of the equation box which causes the math dialog to close
• There is no way to reopen the math dialog

Allow the user to easily clear the math in the editor with one click.

User should be able to resize an image by either dragging edges or by entering a height and width

The following applies to this content: http://33.33.33.10/#repo/oerpub9/new-book-92/edit/content/module1.html|content/mybook.opf

• Upon adding any content (newline for instance) get a security error regarding the video.

Uncaught SecurityError: Blocked a frame with origin "http://33.33.33.10" from accessing a frame with origin "https://www.youtube.com".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
 jquery.js:5553

There needs to be some text to describe each button when you hover over the button.

This button does nothing and as far as I know we have no plans for it.

The new paste handler needs some documentation, including how to test.

Some stuff that might be useful to include:

Testing book module: #repo/oerpub/test-book/edit/content/pasting-from-word-and-open-office-582cb3e8-d0a9-46d2-815f-b03d4cf73dec.html

Izak's email:

1. The paste plugin creates an off-screen contenteditable div.
2. The paste plugin adds a handler for the paste event, which redirects pastes into the off-screen div.
3. When something is pasted, the content is collected from this div, and the insertHtml command is used to insert it into the real document.
4. Aloha calls any content handlers registered for insertHtml on the content, and each of them gets a chance to modify the content.
5. The result is inserted into the document

After a small css change (#123) the extra scrollbar issue in github-bookeditor is gone, so items 1 to 3 above works as advertised.

Item 4 needs a bit of work. If you get some word content, for example http://www.houstonmethodist.org/WordPasteTest, you'll see that it does clean up nicely, except MsoNormal remains. It also doesn't handle openoffice content, and it should clean up the use of entities (such as  ) which isn't valid in xhtml5.

Info from the redmine ticket:

Information from Petro at Aloha:
Indeed Aloha Editor has a specific content handler just for processing content that originates from Microsoft Word and Open/Libre Office documents:

https://github.com/alohaeditor/Aloha-Editor/blob/master/src/plugins/common/contenthandler/lib/wordcontenthandler.js

More information on how to use the word content handler can be found in the Aloha Editor guides:

http://aloha-editor.org/guides/plugin_contenthandler.html#word-content-handler
http://aloha-editor.org/guides/plugin_contenthandler.html#using-configuration

Need Plugin for numeric lists

Users report that they have to click the edge of the quotation box to get a cursor to edit a Quotation.

Plugin to embed multimedia

We want a multimedia embed tool, that will allow video and other embedded content in the editor.
We will do this in several stages. Each stage will be a separate issue. This issue will cover the
third stage.

Stages

1. Add youtube search.

Goals

1. Allow searching of youtube.

Mockups

editor-57.html Firefox only: To see the action

• Click the [>] symbol in the toolbar.
• Then click "Search YouTube"
• Then select a video and click next.

Screenshots

Variations from the mockup

See #132 for a full list of variations. Just adding the new ones here.

• Search only includes YouTube for now.

Add Search Youtube

• YouTube search is like the mockup
• Choices show with their thumbnails and descriptions.
• Can click anywhere on a choice and select it.
• Once the video is selected, and Next is pressed the UI is the same as for selecting by URL.
• Check for captions once the URL is known.

We have a start at making font icons for the custom toolbar icons.

This arrow : src/plugins/oer/table/img/insert-here-arrow.png, used in src/plugins/oer/table/css/table.css -- should also be added to that list.

Z-index of the embedded stuff is wrong. It slides over the semantic block buttons, and the image dialog slides under the embedded content.

Tom could not reproduce this, but Kathi gets it consistently.

Attaching images.

I plan to integrate the OERPUB version of the Aloah Editor with an EDMS and to experiment it in the editing/remixing of OERs.
Following the instructions "Get a dev environment for Aloah setup", I got a site running at http://oerpub.commonspaces.eu/Aloha-Editor/.
The demo page seems identical to the one at http://oerpub.github.io/Aloha-Editor/, but the 2 demos "Connexions Editor Demo" and "OERPUB Editor Demo" lacked interaction and showed different styles.
I realized that bootstrap wasn't found since the bower_components sub-directory was missing; then installed bower and run the "bower install" command. Even if I am just beginning to know what bower is, it seems to me that it did what it was expected to do. But in the 2 demos the interaction still isn't working; the browser console log says "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher", since the version of jquery required by bootstrap is not used.
I noticed also that

• the demos at http://oerpub.github.io/Aloha-Editor/ use an old version of jquery too, but they don't produce the error message above
• in both installations, in the HTML source of the "OERPUB Editor Demo" the attributes of the TAL templating language aren't intepreted
• in both installations, in the "Connexions Editor Demo" the rendering of the math formulas disappear, while with a more recent version of jquery it persists.
  Could somebody update the installation doc and the demos in the oerpub Git repository and give me some suggestions on how to proceed? Should I get the software from the Git repository of the Connexions project?
  Thanks a lot in advance.

The default label in the heading dropdown should be Normal Text.

Command-B / Command-I don't have any action on Google Chrome on Mac, whereas Ctrl-B/I work properly (but striclty speaking they shouldn't).

On Safari those shortcuts work but using some internal browser markup, thus breaking the highlighting of the toolbar buttons.

The following applies to this content: http://33.33.33.10/#repo/oerpub9/new-book-92/edit/content/module1.html|content/mybook.opf

• Upon opening, get range errors. I thought we fixed that, so really just looking for comment on this.

aloha/range: could not find commonAncestorContainer console.js:164
aloha/range: could not find commonAncestorContainer console.js:164
aloha/range: could not find commonAncestorContainer console.js:164
aloha/range: could not find commonAncestorContainer console.js:164
aloha/selection: encountered range object without start or end container console.js:164
aloha/range: could not find commonAncestorContainer console.js:164
aloha/range: could not find commonAncestorContainer console.js:164
aloha/range: could not find commonAncestorContainer console.js:164
aloha/range: could not find commonAncestorContainer console.js:164
aloha/selection: encountered range object without start or end container 

Plugin to embed multimedia - add accessibility metadata in place

We want a multimedia embed tool that will allow video and other embedded content in the editor.
We will do this in several stages. Each stage will be a separate issue. This issue covers the second stage.
The issue covering the first stage and listing all the stages is here:

* This Stage*

1. Check whether captions are available for the video and add metadata to the embed if so. (This issue.)

Goals

• Make accessible multimedia easy to discover (by including metadata).

Mockups

editor-57.html Firefox only: To see the action

• Click the [>] symbol in the toolbar.

The mockup isn't super relevant to this issue.

Format for the embed code

• Sample video html : N

In particular, note the accessibility metadata.

Implementation Resources

• a11ymetadata API for checking captions: (http://api.a11ymetadata.org/captions/youtubeid=Y2IJb1YnAmQ/youtube/) Note that the API could disappear, so make sure to fail gracefully.

Checklist

• When embedding by URL, check the URL to see if there are captions at youtube.
• If so, add to the metadata within the figure element.
• If the API disappears, output message in the console.
• If the API disappears, just don't add the metadata, but don't inform the author or have the app
  fail in some way. That API could disappear if Benetech stops hosting it.

When you change a heading on a Note, the Case in the dropdown is Title case, but the display is all caps. The heading is also displayed twice in preview. Once in all lower case and the second time in all caps. It is confusing to users.

The initial editing space for a new Page is 1 or 2 lines. If we add a few paragraphs, it would have a couple of benefits.

• Users would better understand where the editor is
• It would eliminate the problem of trapped elements that do not have a paragraph under them.

In OERPub, the setting icon opens a popup where a class attribute can be added. We need that functionality in CNX. It might be a Bootstrap 3 issue.

If nothing is selected, Uncaught TypeError: undefined is not a function

If some text is selected, Cannot set property 'innerHTML' of undefined

The text case is inconsistent when you select different types of examples available from the dropdown menu.

• Example is title case
• activity is lower case
• practical is lower case
• demonstration is lower case
• case-in-point has text separators and is lower case
• case-study has text separators and is lower case
• illustration is lower case

This is a placeholder issue in the base editor. The full problem is described in oerpub/github-bookeditor#174 .

src/plugins/oer/math/lib/math-plugin.coffee

Lines 143-158

• it on the clipboard with a different content type. This will prevent the

• cleanup that the browser does on namespaces. Use this alternative content

• type again when pasting. Prevent the browser default. This will only work

• in browsers that support event.clipboardData, chrome and safari to date.

• editable.obj.on 'copy', (e) ->

•  content = e.oerContent or Aloha.getSelection().getRangeAt(0).cloneContents()
  

•  $content = $('<div />').append(content)
  

•  # If there is math among the content we're copying, treat it specially.
  

•  # Check that we also have a script tag in our selection, that occurs
  

•  # towards the end of the math and ensures we have the whole of it.
  

•  # The idea is to only do custom copy/paste if we need it, and let the
  

•  # browser handle other content. Also buffer it in our local copy buffer.
  

•  if $content.has('span.math-element').length and $content.has('script').length
  

•    e.preventDefault()
  

•    clipboard = e.clipboardData or e.originalEvent.clipboardData
  

Phil's comments: can this follow the custom vendor mimetype recommendations and be application/vnd.oerpub+text? (or, as a fallback, text/x-oerpub). Also, since it is used several times in the file can it be moved up as a const to the top of the file?

•    clipboard.setData 'text/oerpub-content', $content.html()
  

It has been reported that the X to delete math from the editor is not being displayed in Firefox. This makes removing the math difficult.

At some point, the editor had a tooltip that pointed the user at the Paste button when content was first copied. This functionality has been lost and we need to add it back.

I tried uploading an audio file on dev just to see what would happen. The file was 1.2MB. The code for an ngnix error page displayed in the text box. See screenshot.

We have places where colors are hard-coded. Sometimes it has to be that way, but they need nice comments. Also some looking over to make sure that others embedding the editor will be happy with the colors.

Users are frequently reporting that they are uploading images that are too large for the editor and it goes off the page or scrolling becomes enabled. We should add text that tells the user the images should be no wider than 900 pixels. The other choice is to resize it ourselves and offer small, medium and large sizes.

src/plugins/oer/copy/lib/copy-plugin.coffee

Lines 13-17
if $el.addBack

•  # Jquery >= 1.8
  

•  $el = $el.nextUntil(selector).addBack()
  

• else

•  # Jquery < 1.8
  

Comment from Phil: Does this code exist somewhere else (maybe in another PR)? I thought I remember @tmsp1 mentioning jQuery < 1.8 was not possible

Safari (at least on Mac) allows user to copy-paste images directly in the text by rendering them in the form of

Needless to say, the image is not uploaded and disappears as soon as the page is refreshed.

A quick&dirty fix for this could be to update the paste plug-in of the common package, at lines 246-248:

restoreSelection(range);
if (content.indexOf("webkit-fake-url://") != -1) return;
prepRangeForPaste(range);

Works seamlessly on dhwriter.
Credits for this idea to jejacks0n/mercury#179

Design: Implement inline semantic elements.

The designs for the editor include the ability to add semantic tags to text within a sentence, (an inline element rather than a block element ).

Goals

1. Make it possible to mark "definition terms", "foreign words", and "programming code".
2. For definitions, make it possible to insert the definition block into the text.
3. Encourage switching from bold/italics/underline to more semantic description.

Mockup

editor-57.html: To see the action

• highlight any text
• hover over text that appears bold

Basic Design

Menu icon

Menu

Highlighting some text in the body.

• Selected content appears highlighted
• Orange menu circle comes up to the left and pointing down as long as there is room for the menu to come up.
• Orange circle points up if the menu needs to go up to fit in the window.
• If you hover over the orange circle it says, "Click menu for more formatting options"

Hovering over an emphasized or semantic inline element

• Content inside the emphasis or semantic region highlights
• The rest is the same as above

Clicking on the menu

• If the item is semantic (like a definition's term), check that item in the menu.
• If the item is just emphasized bold, italics, or underlined, don't check anything
• Include "key term" bold, "foreign text" italicized, "code font" monospaced, and "unformatted" plain.

Clicking on the "(?)"

• Bring up side help, with the two bolded headings shown in the image above.
• Variation for the first para "This menu appears under highlighted text, emphasized text, and special features like key terms. It provides a quick way to mark text with special features. If you just want to use bold or italics, those can be found in the toolbar at the top of the content."

Clicking on "key term"

• if unchecked, add a check mark
• pull up side option "Define now (optional)"
• add <term></term> around the highlighted text

Clicking on "Define now (optional)"

• drop in a definition block beneath the current block
• auto supply the highlighted text as the term next to "Definition"
• variation: should be the same as if you dragged a definition here. In other words we are not implementing the "Move this definition to the glossary" or "add meaning" yet.

Clicking on "foreign"

• if unchecked, add a check mark
• add <span class="foreign"></span> around the highlighted text
• if data-type has been accepted: add <span data-type="foreign"></span> around the highlighted text

Clicking on "code font"

• if unchecked, add a check mark
• add <pre class="programlisting"></pre> around the highlighted text
• if data-type has been accepted: add <pre data-type="programlisting"></pre> around the highlighted text

Clicking on "unformatted"

• if unchecked, add a check mark
• remove the inline formatting from this text.

In the metadata editing, if you have a single entry (say a single author), you have no reason to type a comma or tab at the end. But if you don't type a comma or tab, that value you put in won't get saved. You will think it got saved, because it will show up if you click the metadata again. But it isn't actually in the files.

Affects the module metadata and the book metadata dialogs.

On closing the dialog, all non tokenized entries need to be tokenized first.

Design: Add module metadata via the module content

Design for adding basic metadata to modules.

This issue should probably be implemented mostly via the Aloha editor with the detection of book metadata and the save interface implemented in github-bookeditor or atc respectively.

Goals

1. Detect when book metadata has not been filled out and encourage adding metadata at the top level.
2. Allow modules to just refer to the book metadata for their metadata if they don't need to be custom.
3. Make the model understandable by authors. We experimented with various complex modes that would allow you to override individual metadata fields, but opted to stick with a simple all or none model where the module can either point to the book metadata or create all custom metadata.

Mockup

w-editor-33.html

Step 1. Module content shows title and authors if different from book authors

Within the module, add a new non-editable region that shows the title (and any custom module metadata that has been added )

• Title shows up in module
• If the module has custom authors, show "By: <author name>"
• On hover over the title, the region highlights and says "Click to edit title, authors, license, etc."
• On click dialog comes up.

Step 1-alternate. Accessing module metadata editing from TOC and Shelf.

• In bookish, if click on the menu off a module in the TOC and shelf/workspace, if choose "edit author, license etc." this same series of actions should happen.

Step 2. If in bookish, check book metadata

If we are in a book editor, check to see if book metadata other than the title has been filled in. If it has not, give the author a prompt to do that first.

• Choice prompt as above comes up.
• If choose to do book first, goes to book metadata dialogs that are already implemented. It is fine to require authors click again on the title if they want to edit the module metadata when they are done.
• If choose to go ahead and edit the module, go to the next step.

Step 3 Metadata dialog: Notes relevant to all the tabs

• The author can click on the tabs to move through them.
• Cancel should have a confirmation since you could lose a lot of work. "Are you sure you want to cancel? The title, authors, and other information about this book will retain their previous values."

Module "About" tab

If we are in the Aloha Editor without being inside a book editor, go directly here. Or if the book metadata is already filled in go directly here. By filled in, we mean that any book metadata besides the title is completed.

• If book metadata is available, "About" dialog shows book metadata, defaults to using the book metadata and provides radio options
• If the radio button for custom is selected, all book metadata disappears
• If switch from custom to book, an alert warns that any changes will be lost, and gives option to cancel.
• Modal title done. "Edit the authors and other metadata on this module"
• Editable title area done. "Title (required): <title>" click to edit, highlights on hover
• Title color matches the module title color in the TOC.
• Implement subject and keywords entry. Comma, tab, or enter, should all separate entries. The entries should then work like gmail addresses, or the author ids on the connexions beta.
• Inside subject and keywords, do light gray italics instructions. This is not on the mockup. "Use comma, or tab to separate"
• Language : Use the list on the metadata page of remix - http://remix.oerpub.org .
• Google Analytics: If this could work like it does on remix, and have a check box that unfolds the value. google-analytics.png ga-unfolded.png
• License: Use the same values as in the image uploader. licenses.png

Module "authors" tab

• If book metadata is available, "Authors" dialog shows book metadata, defaults to using the book metadata and provides radio options
• If the radio button for custom is selected, all book metadata disappears
• If switch from custom to book, an alert warns that any changes will be lost, and gives option to cancel.
• Implement authors, copyright holders, editors, and translators. Use the same entry mechanism as for subjects and keywords.
• Add help text within the author field. (See subjects and keywords)
• Add "Publisher (optional)" beneath "Copyright Holder" (these aren't in the mockup)
• Add "Illustrator (optional)" at the end (these aren't in the mockup)

Module "summary" tab

• If book metadata is available, "Authors" dialog shows book metadata, defaults to using the book metadata and provides radio options
• If the radio button for custom is selected, all book metadata disappears
• If switch from custom to book, an alert warns that any changes will be lost, and gives option to cancel.
• Implement mini-formatting toolbar for the summary eventually (separate ticket for it).
• Make sure can enter multiple paragraphs.
• Make entry box big enough to fill the tab reasonably.
• Make entry box stretchy.

Step 4 Save metadata

• sample-module-metadata.html
• Make sure the epubjs reader still works.

Metadata saves should update the modified date in the module and book

ie. <meta properties="dcterms:modified">2013-12-19</meta>

• Update in the opf file.
• Update in the nav file.
• Update in the module.

Several testers have commented that they had trouble finding where to enter math in the math editor. The hint text is very light and there is no border around the edit box. Adding a border could help users see where to put their math.

Kevin found this

He somehow deleted the math field while editing an equation and the popup lived on and could not be dismissed.

Daniel Williamson reported

I added an exercise box and attempted to change the exercise type.

I was able to select the type but the new type name did not show up.

Firefox, osx

The initial text, "Please change this new Page", should be hint text that disappears once the cursor enters the editor.

The Hide Solution link does nothing in the editor. It should be removed. Users can see the solutions folded in Preview.

Plugin to embed multimedia

We want a multimedia embed tool, that will allow video and other embedded content in the editor.
We will do this in several stages. Each stage will be a separate issue. This issue will cover the
first stage.

Stages

1. Embed by URL (this issue)
2. Check that whether captions are available for the video and add metadata to the embed if so.
3. Add youtube search.
4. Support print alternates.

Goals

1. Make it possible to embed multimedia in OERPUB editor in a standard way.
2. Make accessible multimedia easy to discover (by including metadata).
3. Allow searching of youtube.
4. Create print alternates for multimedia.
5. Design a way to edit the print alternates. (Probably won't implement this.)

Mockups

editor-57.html Firefox only: To see the action

• Click "[>]" symbol in the toolbar

Screenshots

Variations from the mockup

This is the list of all of them. They are duplicated under each step as a checklist.

• Title of the dialog should say "Add video, slides or other media"
• Do NOT include "or Upload video"
• Search isn't in this phase so ignore that at the beginning.
• Not the right video? is the same as "Back" and can be ommitted if it is a hassle. Check
  this item if it has been ommitted.
• Change "Video Caption" to "Figure Caption" to distinguish from captioned video.
• Default text for caption coming soon.
• Add "Figure Title" above "Figure Caption" : default text should be the oEmbed "title"
• Beneath both inputs, add in gray italics "The title will show up above and
  the caption will show up below the media you are inserting."
• Change "Insert Video" to "Insert Now"
• Once inserted show both title and caption like with images.
• Once inserted, add mechanism to edit the title/caption/metadata like with images.

Format for the embed code

• Sample video html : Note that not all parts of the format are relevant at the first stage. In particular, the
  accessibility metadata and the alternates stuff won't be present for the very first version.

Implementation Resources

• oembed examples: Max found some jquery that will negotiate oEmbed for a bunch of different sites
• noembed Noembed also looks interesting. A service that does a bunch
  of oembed providers plus a bunch extra.

Step 1: First page of the dialog for the URL

• MOVED to OWN ISSUE Arrow shows in the doc where the media will go.

Variations from the mockup

• Title of the dialog should say "Add video, slides or other media"
• Do NOT include "or Upload video"
• Search isn't in this phase so ignore that at the beginning.
• Youtube works http://www.youtube.com/watch?v=01viXRa8Hqg
• Vimeo works http://vimeo.com/51075488
• Slideshare works http://www.slideshare.net/kathi-fletcher/real-remix-realized
• Flicker works http://www.flickr.com/photos/openpad/3327933534/
• Twitter works https://twitter.com/kefletcher/status/326810345677152256

Step 1 Error: oEmbed doesn't return good stuff

• If oEmbed doesn't return something useful, "We could not determine how to include the media.
  Please check the URL for the media and try again or cancel."

Step 2: Previewing the video and adding title/caption

Variations from the mockup

• Not the right video? is the same as "Back" and can be ommitted if it is a hassle. Check
  this item if it has been ommitted.
• Change "Video Caption" to "Figure Caption" to distinguish from captioned video.
• Default text for caption coming soon.
• Add "Figure Title" above "Figure Caption" : default text should be the oEmbed "title"
• Beneath both inputs, add in gray italics "The title will show up above and
  the caption will show up below the media you are inserting."
• Change "Insert Video" to "Insert Now"

Step 3: View in the doc

Variations from the mockup

• Once inserted show both title and caption like with images.
• Once inserted, add mechanism to edit the title/caption/metadata like with images.