From 818cbb498ef5f6605ab2bf4a9e3d24ce7aa90b06 Mon Sep 17 00:00:00 2001 From: Guido Vollbach Date: Fri, 4 Dec 2015 16:24:09 +0100 Subject: [PATCH] started implementation --- classes/class.ilObjInteractiveVideoGUI.php | 3 + js/InteractiveVideoPlayerUtils.js | 77 ++++++++++++++++++- js/jquery.InteractiveVideoPlayer.js | 29 ++++++- js/test/InteractiveVideoPlayerUtilsTest.js | 42 ++++++++-- .../InteractiveVideoPlayerUtils_fixtures.html | 1 + .../Bootstraptoggle/bootstrap2-toggle.min.css | 28 +++++++ libs/Bootstraptoggle/bootstrap2-toggle.min.js | 9 +++ templates/default/tpl.video_tpl.html | 33 +++++++- 8 files changed, 210 insertions(+), 12 deletions(-) create mode 100644 libs/Bootstraptoggle/bootstrap2-toggle.min.css create mode 100644 libs/Bootstraptoggle/bootstrap2-toggle.min.js diff --git a/classes/class.ilObjInteractiveVideoGUI.php b/classes/class.ilObjInteractiveVideoGUI.php index d957a6ed..2fb7e8fe 100755 --- a/classes/class.ilObjInteractiveVideoGUI.php +++ b/classes/class.ilObjInteractiveVideoGUI.php @@ -203,6 +203,8 @@ public function showContent() $ilTabs->activateTab('content'); $tpl->addCss($this->plugin->getDirectory() . '/templates/default/xvid.css'); + $tpl->addCss($this->plugin->getDirectory() . '/libs/Bootstraptoggle/bootstrap2-toggle.min.css'); + $tpl->addJavaScript($this->plugin->getDirectory() . '/libs/Bootstraptoggle/bootstrap2-toggle.min.js'); ilObjMediaObjectGUI::includePresentationJS($tpl); $video_tpl = new ilTemplate("tpl.video_tpl.html", true, true, $this->plugin->getDirectory()); @@ -264,6 +266,7 @@ public function showContent() $video_tpl->setVariable('ALREADY_ANSWERED_TEXT', $this->plugin->txt('already_answered')); $video_tpl->setVariable('QUESTION_TEXT', $this->plugin->txt('question')); $video_tpl->setVariable('PRIVATE_TEXT', $this->plugin->txt('is_private_comment')); + $video_tpl->setVariable('RESET_TEXT', $this->plugin->txt('reset')); $tpl->addJavaScript($this->plugin->getDirectory() . '/js/jquery.InteractiveVideoQuestionViewer.js'); $tpl->addJavaScript($this->plugin->getDirectory() . '/js/jquery.InteractiveVideoPlayer.js'); $tpl->addJavaScript($this->plugin->getDirectory() . '/js/InteractiveVideoPlayerUtils.js'); diff --git a/js/InteractiveVideoPlayerUtils.js b/js/InteractiveVideoPlayerUtils.js index 53df1510..858a6f72 100644 --- a/js/InteractiveVideoPlayerUtils.js +++ b/js/InteractiveVideoPlayerUtils.js @@ -24,7 +24,7 @@ il.InteractiveVideoPlayerUtils = (function () { var i; for (i = 0; i < Object.keys(comments).length; i++) { - if (comments[i].comment_time <= time && comments[i].comment_text !== null && parseInt(comments[i].is_interactive, 10) === 0) + if (comments[i].comment_time <= time && comments[i].comment_text !== null) { html = pub.buildListElement(comments[i], comments[i].comment_time, comments[i].user_name) + html; } @@ -53,16 +53,36 @@ il.InteractiveVideoPlayerUtils = (function () { } }; + pro.isBuildListElementAllowed = function(username) + { + if(InteractiveVideo.is_show_all_active === false) + { + if(InteractiveVideo.filter_by_user === false || + (InteractiveVideo.filter_by_user !== false && InteractiveVideo.filter_by_user === username)) + { + return true; + } + } + return false; + }; + pub.buildListElement = function (comment, time, username, counter) { - return '
  • ' + + if(pro.isBuildListElementAllowed(username)) + { + return '
  • ' + pro.builCommentTimeHtml(time, comment.is_interactive) + pro.builCommentUsernameHtml(username, comment.is_interactive) + pro.builCommentTitleHtml(comment.comment_title) + pro.builCommentTextHtml(comment.comment_text ) + pro.appendPrivateHtml(comment.is_private) + pro.builCommentTagsHtml(comment.comment_tags) + - '
    • '; + ''; + } + else + { + return ''; + } }; pro.builCommentTimeHtml = function (time, is_interactice) @@ -94,7 +114,7 @@ il.InteractiveVideoPlayerUtils = (function () { pro.builCommentTitleHtml = function (title) { - if(title === null) + if(title === null || title === undefined) { title = ''; } @@ -134,6 +154,55 @@ il.InteractiveVideoPlayerUtils = (function () { return '
    ' + comment_tags + '
    '; }; + pub.displayAllCommentsAndDeactivateCommentStream = function(on) + { + var html = ''; + var i; + if(on) + { + for (i = 0; i < Object.keys(comments).length; i++) + { + if (comments[i].comment_text !== null) + { + html = pub.buildListElement(comments[i], comments[i].comment_time, comments[i].user_name) + html; + } + } + InteractiveVideo.is_show_all_active = true; + $("#ul_scroll").html(html); + } + else + { + InteractiveVideo.is_show_all_active = false; + pub.replaceCommentsAfterSeeking(InteractiveVideo.last_time); + } + }; + + pro.getAllUserWithComment = function() + { + var i, author_list = []; + for (i = 0; i < Object.keys(comments).length; i++) + { + if ($.inArray( comments[i].user_name, author_list ) === -1) + { + author_list[comments[i].user_name] = comments[i].user_name; + } + } + return author_list; + }; + + pub.loadAllUserWithCommentsIntoFilterList = function() + { + var element; + var author_list = pro.getAllUserWithComment(); + var dropdownList = $('#dropdownMenuInteraktiveList'); + dropdownList.html(''); + for ( element in author_list) + { + element = '
  • ' + element + '
    • '; + dropdownList.append(element); + } + }; + pub.protect = pro; return pub; diff --git a/js/jquery.InteractiveVideoPlayer.js b/js/jquery.InteractiveVideoPlayer.js index e41a0352..683b99aa 100755 --- a/js/jquery.InteractiveVideoPlayer.js +++ b/js/jquery.InteractiveVideoPlayer.js @@ -27,7 +27,7 @@ $( document ).ready(function() { } }); }); - + $("#ilInteractiveVideoCommentCancel").on("click", function(e) { $('#comment_text').val(""); }); @@ -45,6 +45,27 @@ $( document ).ready(function() { $('#ilInteractiveVideo')["0"].pause(); } }); + $('#show_all_comments').change(function() { + il.InteractiveVideoPlayerUtils.displayAllCommentsAndDeactivateCommentStream($(this).prop('checked')); + }); + + il.InteractiveVideoPlayerUtils.loadAllUserWithCommentsIntoFilterList(); + + $('#dropdownMenuInteraktiveList a').click(function(){ + var value = $(this).html(); + var is_show_all_active = InteractiveVideo.is_show_all_active; + if(value === reset_text) + { + InteractiveVideo.filter_by_user = false; + } + else + { + InteractiveVideo.filter_by_user = value; + } + InteractiveVideo.is_show_all_active = false; + il.InteractiveVideoPlayerUtils.displayAllCommentsAndDeactivateCommentStream(is_show_all_active); + InteractiveVideo.is_show_all_active = is_show_all_active; + }); }); @@ -76,7 +97,11 @@ $( document ).ready(function() { } else if (InteractiveVideo.last_time < media.currentTime) { InteractiveVideo.last_time = media.currentTime; } - il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(media.currentTime); + if( InteractiveVideo.is_show_all_active === false) + { + il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(media.currentTime); + } + }, false); media.addEventListener('pause', function(e) { diff --git a/js/test/InteractiveVideoPlayerUtilsTest.js b/js/test/InteractiveVideoPlayerUtilsTest.js index bc693b18..57f7842b 100644 --- a/js/test/InteractiveVideoPlayerUtilsTest.js +++ b/js/test/InteractiveVideoPlayerUtilsTest.js @@ -114,19 +114,51 @@ describe("InteractiveVideoPlayerUtils Tests", function () { it("replaceCommentsAfterSeeking", function () { var expec = ''; + InteractiveVideo.is_show_all_active = false; + InteractiveVideo.filter_by_user = false; loadFixtures('InteractiveVideoPlayerUtils_fixtures.html'); il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(1); expect($("#ul_scroll").html()).toEqual(expec); - expec = '
  • [undefined] undefined Text
    • '; - comments = [{comment_time: 1, comment_text: 'Text', is_interactive: 0, comment_tags: null}]; - il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(5); - expect($("#ul_scroll").html()).toEqual(expec); expec = ''; comments = [{comment_time: 5, comment_text: 'Text', is_interactive: 1, comment_tags: null}]; - il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(1); + il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(6); expect('').toEqual(expec); }); + it("isBuildListElementAllowed", function () { + InteractiveVideo.is_show_all_active = true; + expect(il.InteractiveVideoPlayerUtils.protect.isBuildListElementAllowed('dummy')).toEqual(false); + InteractiveVideo.is_show_all_active = false; + expect(il.InteractiveVideoPlayerUtils.protect.isBuildListElementAllowed('dummy')).toEqual(false); + InteractiveVideo.filter_by_user = true; + InteractiveVideo.filter_by_user = 'dummy'; + expect(il.InteractiveVideoPlayerUtils.protect.isBuildListElementAllowed('dummy')).toEqual(true); + }); + + it("getAllUserWithComment", function () { + var expec = []; + expec['my name'] = 'my name'; + comments = [{'user_name': 'my name'}]; + expect(il.InteractiveVideoPlayerUtils.protect.getAllUserWithComment()).toEqual(expec); + expec['my name2'] = 'my name2'; + comments = [{'user_name': 'my name'}, {'user_name': 'my name2'}]; + expect(il.InteractiveVideoPlayerUtils.protect.getAllUserWithComment()).toEqual(expec); + comments = [{'user_name': 'my name'}, {'user_name': 'my name2'}, {'user_name': 'my name2'}, {'user_name': 'my name2'}]; + expect(il.InteractiveVideoPlayerUtils.protect.getAllUserWithComment()).toEqual(expec); + }); + + it("loadAllUserWithCommentsIntoFilterList", function () { + var expec = '
  • my name
    • '; + loadFixtures('InteractiveVideoPlayerUtils_fixtures.html'); + comments = [{'user_name': 'my name'}]; + il.InteractiveVideoPlayerUtils.loadAllUserWithCommentsIntoFilterList(); + expect($('#dropdownMenuInteraktiveList').html()).toEqual(expec); + comments = [{'user_name': 'my name'}, {'user_name': 'my name2'}]; + expec = '
  • my name
  • my name2
    • '; + il.InteractiveVideoPlayerUtils.loadAllUserWithCommentsIntoFilterList() + expect($('#dropdownMenuInteraktiveList').html()).toEqual(expec); + }); + describe("Utils Test Calling Cases", function () { beforeEach(function () { loadFixtures('InteractiveVideoPlayerUtils_fixtures.html'); diff --git a/js/test/spec/javascripts/fixtures/InteractiveVideoPlayerUtils_fixtures.html b/js/test/spec/javascripts/fixtures/InteractiveVideoPlayerUtils_fixtures.html index 347ab149..af7719ba 100644 --- a/js/test/spec/javascripts/fixtures/InteractiveVideoPlayerUtils_fixtures.html +++ b/js/test/spec/javascripts/fixtures/InteractiveVideoPlayerUtils_fixtures.html @@ -1,2 +1,3 @@
    + diff --git a/libs/Bootstraptoggle/bootstrap2-toggle.min.css b/libs/Bootstraptoggle/bootstrap2-toggle.min.css new file mode 100644 index 00000000..1509c573 --- /dev/null +++ b/libs/Bootstraptoggle/bootstrap2-toggle.min.css @@ -0,0 +1,28 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ +label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px} +.toggle{min-width:40px;height:20px;position:relative;overflow:hidden} +.toggle input[type=checkbox]{display:none} +.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} +.toggle.off .toggle-group{left:-100%} +.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} +.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} +.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} +.toggle-handle.btn-mini{top:-1px} +.toggle.btn{min-width:30px} +.toggle-on.btn{padding-right:24px} +.toggle-off.btn{padding-left:24px} +.toggle.btn-large{min-width:40px} +.toggle-on.btn-large{padding-right:35px} +.toggle-off.btn-large{padding-left:35px} +.toggle.btn-small{min-width:25px} +.toggle-on.btn-small{padding-right:20px} +.toggle-off.btn-small{padding-left:20px} +.toggle.btn-mini{min-width:20px} +.toggle-on.btn-mini{padding-right:12px} +.toggle-off.btn-mini{padding-left:12px} \ No newline at end of file diff --git a/libs/Bootstraptoggle/bootstrap2-toggle.min.js b/libs/Bootstraptoggle/bootstrap2-toggle.min.js new file mode 100644 index 00000000..2aa60aab --- /dev/null +++ b/libs/Bootstraptoggle/bootstrap2-toggle.min.js @@ -0,0 +1,9 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap2-toggle.js v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ ++function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-large":"small"===this.options.size?"btn-small":"mini"===this.options.size?"btn-mini":"",c=a('