Media plugin

dev-workflow.md

@@ -1,25 +1,11 @@
-# How we use branches and pull requests and redmine tickets:
-## Branches
+# How we use branches:
 * We have two long lived branches -- master and dev. 
-* Dev is for integration testing. Feature and fix branches get merged here for immediate testing. 
-Dev can be deleted and rebuilt from master if needed.
+* Pull requests go from feature and fix branches to master.
 * Releases and gh-pages will run off of master.
 * New features or bug fixes branch from master.
-  * Bug fix branches should use the redmine.oerpub.org ticket number in their name.
-
-## Releases
-* oerpub releases to remix.oerpub.org as close to immediately after new things are merged to master. 
-* Each release will be tagged. Major releases will get release branches. 
-* For releases that accumulate multiple features and fixes, a branch from master should be used to collect all the 
-changes that will be released together.
-
-## Pull requests
-* Pull requests go from feature and fix branches to master.
-* Before merging to master, the pull request must be code reviewed and tested. When each is approved (code review, test)
-a comment on the pull request should indicate the approval. When both approval comments are there, the pull request can
-merged to master
+* Dev is for integration testing. Feature and fix branches get merged here for immediate testing.  
 
-## Integration with redmine
+# Integration with redmine
 OERPUB is using [redmine.oerpub.org](http://redmine.oerpub.org) for tracking issues to the editor. When developers
 are fixing bugs or adding ticketed features, they should reference the ticket in the commits as explained here:
 [Referencing-issues-in-commit-messages](http://www.redmine.org/projects/redmine/wiki/RedmineSettings#Referencing-issues-in-commit-messages)
@@ -28,9 +14,8 @@ are fixing bugs or adding ticketed features, they should reference the ticket in
 1. Make a feature-or-fix branch off of master.
 2. Develop and test on the branch.
 3. Merge to dev and build on testing.oerpub.org
-4. Issue a pull request from the feature-or-fix branch to master. This can be after testing or simultaneous. If after 
-testing, be sure to indicate in a comment on the pull request that testing already passed.
-5. Someone not-affiliated with the branch will review the request and ensure testing passes.
+4. When testing passes, issue a pull request from the feature-or-fix branch to master.
+5. Someone not-affiliated with the branch will review the request.
    * 5A. Pull request is accepted
      * merge pull-request into master
      * merge master to gh-pages

oerpub/css/toolbar.css

@@ -59,7 +59,7 @@ figure figcaption::before {
   width: 100%;
   padding-left: 1em;
   box-shadow: 0 2px 3px 0 #CCC;
-  z-index: 1010;
+  z-index: 900;
 }
 .toolbar [class^="icon-"] {
   margin: 0;
@@ -113,6 +113,9 @@ figure figcaption::before {
 .toolbar .icon-image-insert {
   background-position: -122px 0;
 }
+.toolbar .icon-video-insert {
+  background-position: -617px 0;
+}
 .toolbar .icon-link-insert {
   background-position: -188px 0;
 }
@@ -204,6 +207,13 @@ figure figcaption::before {
 .toolbar .btn-group > .btn.active .icon-image-insert {
   background-position: -122px -66px;
 }
+.toolbar .btn-group > .btn:hover .icon-video-insert,
+.toolbar .btn-group > .btn:focus .icon-video-insert,
+.toolbar .btn-group > .btn:active .icon-video-insert,
+.toolbar .btn-group > .btn.active .icon-video-insert {
+  background-position: -617px -66px;
+}
+
 .toolbar .btn-group > .btn:hover .icon-link-insert,
 .toolbar .btn-group > .btn:focus .icon-link-insert,
 .toolbar .btn-group > .btn:active .icon-link-insert,
@@ -256,3 +266,4 @@ figure figcaption::before {
   word-spacing: normal;
   vertical-align: middle;
 }
+

oerpub/index.html

@@ -55,6 +55,7 @@
                     tal:attributes="src string:${request.static_url('oerpub.rhaptoslabs.swordpushweb:static/aloha-settings.js')}"> <!-- xhtml workaround --></script>
             <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"
                     tal:attributes="src string:${request.application_url}/bootstrap/docs/assets/js/bootstrap.js"> <!-- xhtml workaround --></script>
+
             <script type="text/javascript" src="/Aloha-Editor/src/lib/aloha.js"
                     tal:attributes="src string:${request.application_url}/aloha/src/lib/aloha.js"
                 data-aloha-plugins="common/ui,
@@ -73,15 +74,20 @@
                                     common/undo,
                                     oer/undobutton,
                                     oer/genericbutton"> <!-- xhtml workaround --></script>
-
             <script type="text/javascript"
                     tal:content="string:var body_url = '${body_url}';">
                     var body_url = '/Aloha-Editor/oerpub/sandbox/index.html';</script>
             <script type="text/javascript"
                     tal:content="string:var save_url = '${request.route_url('preview_save')}';">
                     var save_url = null;</script>
+            <!--Google Picker Includes -->
+            <script src="http://www.google.com/jsapi"></script> 
+            <script type="text/javascript" src="/Aloha-Editor/src/plugins/oer/assorted/lib/image-dialog.js" tal:attributes="src string:${request.application_url}/aloha/src/plugins/oer/assorted/lib/image-dialog.js"></script>
+            <script type="text/javascript" src="/Aloha-Editor/src/plugins/oer/assorted/lib/aloha-helper.js" tal:attributes="src string:${request.application_url}/aloha/src/plugins/oer/assorted/lib/aloha-helper.js"></script>
+            <!--<script type="text/javascript" src="/Aloha-Editor/src/plugins/oer/assorted/lib/gpickerdialog.js"></script>-->
             <script type="text/javascript">
 
+
                 // HTML elements which are the options in the heading drop down
                 var headingChoices = null;
                 // Element tags which are generated as headings 
@@ -198,13 +204,6 @@
                                         }
                                         PubSub.pub('swordpushweb.saved');
                                     });
-                                } else {
-                                    $('#statusmessage').data('message')('Saved');
-                                    GenericButton.getButtons()["save"].enable(false);
-                                    $('.btn.save').html('Saved');
-                                    if (callback_function) {
-                                        callback_function();
-                                    }
                                 }
                             }
                         }
@@ -256,14 +255,15 @@
                             // editor.isModified().
                             window.setInterval(savePreview, 30000);
 
-                            setInterval(function() {
-                                var editor = Aloha.getEditableById('canvas');
-                                if (editor.isModified()) {
+
+                            // Bind a handler for the changed event
+                            var editor = Aloha.getEditableById('canvas');
+                            Aloha.bind('aloha-smart-content-changed', function(){
+                                if(editor.isModified()){
                                     $('.btn.save').html('Save');
                                     GenericButton.getButtons()["save"].enable(true);
                                 }
-                            }, 250);
-
+                            });
                             // Binds the function to all headers, paragraphs, and pre tags
                             Aloha.jQuery(":header, p, pre").bind('click', headingFunc);
                             Aloha.jQuery('#canvas').bind('keyup', recursiveHeadingFunc);
@@ -337,7 +337,7 @@
                       <span class="separator"> </span>
                       <div class="btn-group">
                         <button class="btn action insertImage-oer" rel="tooltip" title="Insert Image"><i class="icon-image-insert"></i></button>
-                        <button class="btn action insertVideo-oer" rel="tooltip" title="Insert Video"><i class="icon-image-insert"></i></button>
+                        <button class="btn action insertVideo-oer" rel="tooltip" title="Insert Video"><i class="icon-video-insert"></i></button>
                         <button class="btn action createTable" rel="tooltip" title="Create Table"><i class="icon-table-insert"></i></button>
                         <button class="btn dropdown-toggle" data-toggle="dropdown" rel="tooltip" title="Table Operations">
                           <span class="caret"></span>

src/demo/imageribbon/aloha-helper.js

@@ -1,6 +1,7 @@
 // Insert custom HTML into dom tree at the current cursor position of Aloha editor
 // used this as template: https://github.com/michaelperrin/sfAlohaPlugin/blob/cc320dcc984bcf7a2b54bb0191276679eb951742/web/js/aloha-plugins/image-upload/lib/image-upload-plugin.js#L106
 function AlohaInsertIntoDom(code) {
+	console.log("Trying to insert into the DOM");
     var range = Aloha.Selection.getRangeObject();
 
         GENTICS.Utils.Dom.insertIntoDOM(

src/demo/imageribbon/gpickerdialog.js

@@ -1,5 +1,6 @@
 // Google Picker for uploading images
 function newImagePicker() {
+    console.log("Creating new image Picker");
     google.load('picker', '1', {"callback" : createImagePicker});
 }       
 
@@ -34,25 +35,15 @@ function ImagePickerCallback(data) {
 
         var img = Aloha.jQuery("<img />").attr("src", image_url);
         AlohaInsertIntoDom(img);
+        console.log("Inserting into Dom from ImagePickerCallback");
     }
 }
 
 // Google Picker for uploading videos
 function newVideoPicker() {
+    console.log("Creating new video Picker in newVideoPicker");
     google.load('picker', '1', {"callback" : createVideoPicker});
 }
-
-function createVideoPicker() {
-    var picker = new google.picker.PickerBuilder().
-        addView(new google.picker.VideoSearchView().
-            setSite(google.picker.VideoSearchView.YOUTUBE)).
-        addView(google.picker.ViewId.YOUTUBE).
-        addView(new google.picker.WebCamView()).
-        setCallback(VideoPickerCallback).
-        build();
-    picker.setVisible(true);
-}
-
 // A simple callback implementation for Picker.
 function VideoPickerCallback(data) {
     if(data.action == google.picker.Action.PICKED){
@@ -62,6 +53,20 @@ function VideoPickerCallback(data) {
         embed_url = doc[google.picker.Document.EMBEDDABLE_URL];
         var embed_code_template = Aloha.jQuery('<object width="420" height="236"><param name="movie" value="http://www.youtube.com/v/Rj8JoAAytyg?version=3&amp;hl=de_DE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>');
         var embed_code = Aloha.jQuery(embed_code_template).find('embed').attr('src', embed_url);
+        console.log("Inserting into Dom from VideoPickerCallback");
         AlohaInsertIntoDom(embed_code);
     }
 }
+
+function createVideoPicker() {
+    console.log("Creating new video Picker");
+    var picker = new google.picker.PickerBuilder().
+        addView(new google.picker.VideoSearchView().
+            setSite(google.picker.VideoSearchView.YOUTUBE)).
+        addView(google.picker.ViewId.YOUTUBE).
+        addView(new google.picker.WebCamView()).
+        setCallback(VideoPickerCallback).
+        build();
+        console.log("Created video Picker and set call back");
+    picker.setVisible(true);
+}

src/plugins/oer/assorted/css/image.css

@@ -24,6 +24,12 @@ form#linkModal:focus {
     outline: none;
 }
 
+.multimedia-video{
+    /*border: 10px solid #0000FF;*/
+    width: 500px;
+    height: 500px;
+}
+
 .placeholder.preview {
     border: 1px solid #dddddd;
     border-radius: 5px;
@@ -34,3 +40,24 @@ form#linkModal:focus {
 .placeholder.preview h4 {
     margin: 0 0 1em 0;
 }
+
+.search-result {
+    background: #fff;
+    width:100%;
+    border-bottom: 2px solid white;
+    cursor:pointer;
+    font-size:90%;
+}
+
+.search-result:hover {
+    background: #999;
+}
+
+.search-result-selected {
+    background:#888;
+    width:100%;
+    border-bottom: 2px solid white;
+    cursor:pointer;
+    font-size:90%;
+
+}

src/plugins/oer/assorted/lib/aloha-helper.js

@@ -0,0 +1,14 @@
+// Insert custom HTML into dom tree at the current cursor position of Aloha editor
+// used this as template: https://github.com/michaelperrin/sfAlohaPlugin/blob/cc320dcc984bcf7a2b54bb0191276679eb951742/web/js/aloha-plugins/image-upload/lib/image-upload-plugin.js#L106
+function AlohaInsertIntoDom(code) {
+	console.log("Trying to insert into the DOM");
+    var range = Aloha.Selection.getRangeObject();
+
+        GENTICS.Utils.Dom.insertIntoDOM(
+            code,
+            range,
+            Aloha,
+            true
+        );
+        range.select();
+}

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

@@ -1,7 +1,7 @@
 ###
 Register a couple of assorted oer plugins
 ###
-define [ 'aloha/plugin', 'jquery', 'popover', './link', './image', './figure', './title-figcaption', './list' ], (Plugin, $, Popover, linkConfig, imageConfig, figureConfig, figcaptionConfig) ->
+define [ 'aloha/plugin', 'jquery', 'popover', './link', './image', './video', './figure', './title-figcaption', './list' ], (Plugin, $, Popover, linkConfig, imageConfig, videoConfig, figureConfig, figcaptionConfig) ->
   Plugin.create 'assorted',
     defaultSettings:
         image:

src/plugins/oer/assorted/lib/assorted-plugin.js

@@ -1,13 +1,11 @@
-// Generated by CoffeeScript 1.3.3
 
 /*
 Register a couple of assorted oer plugins
 */
 
-
 (function() {
 
-  define(['aloha/plugin', 'jquery', 'popover', './link', './image', './figure', './title-figcaption', './list'], function(Plugin, $, Popover, linkConfig, imageConfig, figureConfig, figcaptionConfig) {
+  define(['aloha/plugin', 'jquery', 'popover', './link', './image', './video', './gpickerdialog', './figure', './title-figcaption', './list'], function(Plugin, $, Popover, linkConfig, imageConfig, videoConfig, gpickerConfig, figureConfig, figcaptionConfig) {
     return Plugin.create('assorted', {
       defaultSettings: {
         image: {