First version of media plugin which supports searching Youtube videos and embedding Youtube and Vimeo videos.

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,
@@ -74,15 +75,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 
@@ -203,13 +209,6 @@
                                         }
                                         PubSub.pub('swordpushweb.saved');
                                     });
-                                } else {
-                                    $('#statusmessage').data('message')('Saved');
-                                    GenericButton.getButtons()["save"].enable(false);
-                                    $('.btn.save').html('Saved');
-                                    if (callback_function) {
-                                        callback_function();
-                                    }
                                 }
                             }
                         }
@@ -248,10 +247,9 @@
                         // Fetch the preview
                         $('#statusmessage').data('message')('Loading preview...');
                         Aloha.jQuery.get(body_url, function(data){
-                            var d = document.createElement('html');
-                            d.innerHTML = data;
+                            var $d = Aloha.jQuery('<div />').html(data);
                             var $editable = Aloha.jQuery('#canvas').html(
-                                $('body > *', d));
+                                $d.find('> *'));
 
                             // Remove the pyramid debug toolbar from the preview
                             // if it exists. This code should do nothing in production
@@ -264,14 +262,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);
@@ -345,7 +344,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/gpickerdialog.js

@@ -41,18 +41,6 @@ function ImagePickerCallback(data) {
 function 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){
@@ -65,3 +53,14 @@ function VideoPickerCallback(data) {
         AlohaInsertIntoDom(embed_code);
     }
 }
+
+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);
+}

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,39 @@ 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%;
+
+}
+#linkModal input[type="text"][class="validURL"] {
+    border: 2px solid #00FF00;
+    outline-color: #00FF00;
+}
+#linkModal input[type="text"][class="validURL"]:focus {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+}
+
+#linkModal input[type="text"][class="invalidURL"] {
+    border: 2px solid red;
+    outline-color: red;
+}
+#linkModal input[type="text"][class="invalidURL"]:focus {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+}

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

@@ -0,0 +1,13 @@
+// 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) {
+    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,27 @@
 ###
 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', 
+  './gpickerdialog', 
+  './figure', 
+  './title-figcaption', 
+  './list' ], (
+  Plugin, 
+  $, 
+  Popover, 
+  linkConfig, 
+  imageConfig, 
+  videoConfig, 
+  gpickerConfig,
+  figureConfig, 
+  figcaptionConfig
+  ) ->
   Plugin.create 'assorted',
     defaultSettings:
         image:

src/plugins/oer/assorted/lib/gpickerdialog.js

@@ -0,0 +1,72 @@
+// Google Picker for uploading images
+function newImagePicker() {
+    google.load('picker', '1', {"callback" : createImagePicker});
+}       
+
+// Create and render a Picker object for selecting documents
+function createImagePicker() {
+    var picker = new google.picker.PickerBuilder().
+        addView(new google.picker.ImageSearchView().
+                setLicense(google.picker.ImageSearchView.License.REUSE)
+            ).
+        addView(google.picker.ViewId.PHOTO_UPLOAD).
+        /*
+        addViewGroup(
+        new google.picker.ViewGroup(google.picker.ViewId.PHOTOS).
+            addView(new google.picker.PhotosView().
+                setType(google.picker.PhotosView.Type.UPLOADED)).
+            addView(new google.picker.PhotosView().
+                setType(google.picker.PhotosView.Type.FEATURED))).
+        */        
+        addView(google.picker.ViewId.PHOTOS).
+        addView(new google.picker.WebCamView(google.picker.WebCamViewType.STANDARD)).
+        setCallback(ImagePickerCallback).
+        build();
+    picker.setVisible(true);
+}
+
+// A simple callback implementation for Picker.
+function ImagePickerCallback(data) {
+    if(data.action == google.picker.Action.PICKED){
+        var doc = data[google.picker.Response.DOCUMENTS][0];
+        site_url = doc[google.picker.Document.URL]; // only shows website url :(
+        image_url = data.docs[0].thumbnails[data.docs[0].thumbnails.length - 1].url;
+
+        var img = Aloha.jQuery("<img />").attr("src", image_url);
+        AlohaInsertIntoDom(img);
+    }
+}
+
+// Google Picker for uploading videos
+function 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){
+        console.log(data);
+        var doc = data[google.picker.Response.DOCUMENTS][0];
+        site_url = doc[google.picker.Document.URL]; // only shows website url :(
+        // image_url = data.docs[0].thumbnails[data.docs[0].thumbnails.length - 1].url; // we only get a image preview with this
+        embed_url = doc[google.picker.Document.EMBEDDABLE_URL];
+        video_id = doc[google.picker.Document.ID];
+        // 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" wmode="transparent" frameborder="0"></embed></object>');
+        var embed_code_template = Aloha.jQuery('<div class="multimedia-video"><iframe style="width:420px; height:360px" width="640" height="360" src="" frameborder="0"></iframe></div>');
+        // var embed_code_template = Aloha.jQuery('<object width="420" height="360"><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><iframe src="" type="application/x-shockwave-flash" width="560" height="360" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" frameborder="0"></iframe></object>');
+        //TODO Replace this to ensure only the specific video is changed
+        var embed_code = Aloha.jQuery(embed_code_template).find('iframe').attr('src', "http://www.youtube.com/embed/"+video_id+"?wmode=transparent");
+        AlohaInsertIntoDom(embed_code);
+    }
+}