Skip to content

Commit

Permalink
effects and update scorm items presentation CT#7339
Browse files Browse the repository at this point in the history
  • Loading branch information
@aragonc
aragonc committed Mar 20, 2015
1 parent 2e677e4 commit 7cc76e7
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 104 deletions.
133 changes: 103 additions & 30 deletions main/css/base.css
View file
Expand Up @@ -3333,7 +3333,7 @@ form .formw .freeze {
}
/* for section */
.scorm_item_section.scorm_completed{
background:url("../img/icon_completed_section.png")no-repeat 280px center #606c88;
background:url("../img/icon_completed_section.png")no-repeat 98% center #606c88;
padding-right: 1.5em;
}
.scorm_item_section{
Expand Down Expand Up @@ -3370,10 +3370,10 @@ form .formw .freeze {
}
/* items scorm*/
.scorm_item_normal.scorm_completed {
background:url("../img/icon_completed.png") no-repeat 280px center;
background:url("../img/icon_completed.png") no-repeat 98% center;
}
.scorm_item_normal.scorm_failed{
background:url("../img/icon_failed.png") no-repeat 280px center;
background:url("../img/icon_failed.png") no-repeat 98% center;
}
.scorm_item_normal .scorm_item_level_0{
padding-left: .5em;
Expand Down Expand Up @@ -5362,19 +5362,6 @@ i.size-32.icon-new-work{
/* LP SCORM */
/* Default LP left column values */

#learning_path_left_zone {
float:left;
width:315px;
height:100%;
padding-left: 8px;
padding-right: 4px;
}

#learning_path_left_zone #header {
font-size:14px;
}


#author_image {
border: 1px solid #CCCCCC;
float: left;
Expand Down Expand Up @@ -5555,29 +5542,115 @@ ul.holder li.bit-box a.closebutton{
visibility: hidden;
display: none;
}
/* Bar toggle scorm */
.scorm-toggle{
background-color: #ddd4b0 !important;
margin-left: 10px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
display: block;
cursor: pointer;
.sidebar-scorm,
.content-scorm{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.sidebar-scorm,
.content-scorm{
float: left;
}
.scorm-toggle.arrow-right{
background: url("../img/arrow-right.png") no-repeat center center;
.total{
width: 100%;
}
.scorm-toggle.arrow-left{
background: url("../img/arrow-left.png") no-repeat center center;
#touch-button{
text-decoration: none;
position: fixed;
top: 40px;
left: -5px;
overflow: hidden;
width: 51px;
height: 51px;
border: none;
text-indent: 100%;
opacity: 50;
z-index: 2;
}
.hidden-touch{
background: url("../img/icons/48/hidden-touch-left.png")center center no-repeat;
}
.show-touch{
background: url("../img/icons/48/show-touch-right.png")center center no-repeat;
}
.inner_lp_toc{
overflow-y:scroll;
}
.scorm-heading{
font-size: 16px;
font-weight: bold;
padding: 10px;
}
/* CSS Responsive */
@media (max-width: 480px) {
@media (min-width: 1025px) and (max-width: 1200px) {
.sidebar-scorm{
width: 16.66666667%;
}
.content-scorm{
width: 83.33333333%;
}

}
@media (min-width: 1024px) {
.sidebar-scorm{
width: 25.66666667%;
}
.content-scorm{
width: 74.33333333%;
}
.total{
width: 100%;
}
}
/* Portrait tablet to landscape and desktop - Escritorio pequeño o Tablet */
@media (min-width: 768px) and (max-width: 979px) {

}
/* Landscape phone to portrait tablet - Tablet o Smartphone Horizontal */
@media (max-width: 767px) {

}
/* Landscape phones and down - Solo Smartphone*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#learning_path_breadcrumb_zone {
display: none;
visibility: hidden;
}
#learning_path_main{
margin-top: 5px;
}
#touch-button{
top: 5px;
}
.sidebar-scorm{
width: 100%;
}
.content-scorm{
visibility: hidden;
}
.total{
width: 100%;
visibility: visible;
}
}
@media (min-width : 480px) and (max-width: 767px) {
#learning_path_breadcrumb_zone {
display: none;
visibility: hidden;
}
#touch-button{
top: 5px;
}
.sidebar-scorm{
width: 100%;
}
.content-scorm{
visibility: hidden;
}
.total{
width: 100%;
visibility: visible;
}
}
Binary file added main/img/icons/48/hidden-touch-left.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added main/img/icons/48/show-touch-right.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 41 additions & 61 deletions main/inc/lib/javascript/jquery.lp_minipanel.js
View file
Expand Up @@ -7,87 +7,67 @@
@author Julio Montoya Cleaning/fixing some code
**/

// Copy little progress bar in <tr></tr>
function toggle_minipanel() {

function minipanel(){
// Construct mini panel
var panel = $('#lp_navigation_elem div:first').clone();

$(panel).attr('id', 'control');
$('#learning_path_main').append(panel);

$('#learning_path_main #control tr').after('<tr></tr>');
$('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html());
$('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_text').remove();
$('#learning_path_main #control tr:eq(1) div').css('width','');
$('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html());
$('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5');
$('#learning_path_main #control tr:eq(1) #progress_text').remove();
$('#learning_path_main #control tr:eq(1) div').css('width','');

$('#learning_path_main #control .buttons').attr('text-align','center');
$('#content_id').css({ height: $('#content_id').height() - ($('#control').height() + 10) });

$('#learning_path_main #control .buttons img').click(function(){
$('#learning_path_main #control tr:eq(1)').remove();
toggle_minipanel();
minipanel();
});
// Hiding navigation left zone
$('#learning_path_left_zone').hide(50);
$('#learning_path_right_zone').css('margin-left','10px');
$('#hide_bar table').css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
}
function hiddenPanel(){
$("#learning_path_left_zone").addClass('demo');
}
var left_width_mini = 20; // (relative) hide_bar position

$(document).ready(function() {

var left_width = $('#learning_path_left_zone').width();

//Adding div to hide panel
$('#learning_path_right_zone').before('<div id="hide_bar" class="scorm-toggle" style="float: left; width: 25px; height: 1000px;"></div>');
//$('#hide_bar table').css({backgroundImage: "url(../img/hide0.png)", backgroundRepeat: "no-repeat", backgroundPosition: "center center"});


$(document).ready(function(){

$("#hider_bar").click(function(){
$("#learning_path_left_zone").css('display:none;');
});
$('#touch-button').click(function(){

//Adding effects to hide bar
/* $('#hide_bar table').hover(function () {
if ($('#hide_bar').position().left >= left_width)
$(this).css('backgroundImage','url(../img/hide1.png)').css('backgroundColor','#888888');
else if($('#hide_bar').position().left <= left_width_mini)
$(this).css('backgroundImage','url(../img/hide3.png)').css('backgroundColor','#888888');
},function (){
if($('#hide_bar').position().left >= left_width)
$(this).css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
else if($('#hide_bar').position().left <= left_width_mini)
$(this).css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
$('#learning_path_left_zone').toggle("slow",function(){
$('#learning_path_right_zone').toggleClass('total');
$(function(){
$('#learning_path_right_zone').slideToggle(300);
minipanel();
});
}
);
*/
var original = $('#content_id').height();

// Adding functionality
);
$(this).toggleClass('show-touch');
$('#learning_path_right_zone').slideToggle(300);
});
//effects items scorm content
$('.scorm_item_normal').click(function(){
$('#learning_path_right_zone').fadeOut(300);
setTimeout(function(){
$('#learning_path_right_zone').fadeIn(300);
},300);

/*$('#hide_bar table').toggle(function(){
if ($('#hide_bar').position().left >= left_width) {
toggle_minipanel();
}
},
function() {
// Show navigation left zone
$('#learning_path_left_zone').show(50);
$('#learning_path_right_zone').css('marginLeft', left_width + 25 + 'px');
/* $('#hide_bar table').css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
$('#learning_path_main #control').remove();
$('#content_id').css({ height: original});
}); */
});
$('.scorm-previous').click(function(){
$('#learning_path_right_zone').fadeOut(300);
setTimeout(function(){
$('#learning_path_right_zone').fadeIn(300);
},300);

});
$('.scorm-next').click(function(){
$('#learning_path_right_zone').fadeOut(300);
setTimeout(function(){
$('#learning_path_right_zone').fadeIn(300);
},300);

});
});
8 changes: 4 additions & 4 deletions main/newscorm/learnpath.class.php
View file
Expand Up @@ -1910,17 +1910,17 @@ public function get_navigation_bar() {
$navbar = '
<div class="buttons well">
<a href="lp_controller.php?action=stats&'.api_get_cidreq(true).'&lp_id='.$lp_id.'" onClick="window.parent.API.save_asset();return true;" target="content_name_blank" title="stats" id="stats_link"><img border="0" src="../img/btn_stats.png" title="' . get_lang('Reporting') . '"></a>
<a href="" onClick="switch_item(' . $mycurrentitemid . ',\'previous\');return false;" title="previous"><img border="0" src="../img/btn_previous.png" title="' . get_lang('ScormPrevious') . '"></a>
<a href="" onClick="switch_item(' . $mycurrentitemid . ',\'next\');return false;" title="next" ><img border="0" src="../img/btn_next.png" title="' . get_lang('ScormNext') . '"></a>.
<a class="scorm-previous" href="" onClick="switch_item(' . $mycurrentitemid . ',\'previous\');return false;" title="previous"><img border="0" src="../img/btn_previous.png" title="' . get_lang('ScormPrevious') . '"></a>
<a class="scorm-next" href="" onClick="switch_item(' . $mycurrentitemid . ',\'next\');return false;" title="next" ><img border="0" src="../img/btn_next.png" title="' . get_lang('ScormNext') . '"></a>.
<a href="lp_controller.php?action=mode&mode=embedded" target="_top" title="embedded mode"><img border="0" src="../img/view_choose.gif" title="'.get_lang('ScormExitFullScreen').'"></a>
</div>';

} else {
$navbar = '
<div class="buttons well">
<a href="lp_controller.php?action=stats&'.api_get_cidreq(true).'&lp_id='.$lp_id.'" onClick="window.parent.API.save_asset();return true;" target="content_name" title="stats" id="stats_link"><img border="0" src="../img/btn_stats.png" title="' . get_lang('Reporting') . '"></a>
<a href="" onClick="switch_item(' . $mycurrentitemid . ',\'previous\');return false;" title="previous"><img border="0" src="../img/btn_previous.png" title="' . get_lang('ScormPrevious') . '"></a>
<a href="" onClick="switch_item(' . $mycurrentitemid . ',\'next\');return false;" title="next" ><img border="0" src="../img/btn_next.png" title="' . get_lang('ScormNext') . '"></a>
<a class="scorm-previous" href="" onClick="switch_item(' . $mycurrentitemid . ',\'previous\');return false;" title="previous"><img border="0" src="../img/btn_previous.png" title="' . get_lang('ScormPrevious') . '"></a>
<a class="scorm-next" href="" onClick="switch_item(' . $mycurrentitemid . ',\'next\');return false;" title="next" ><img border="0" src="../img/btn_next.png" title="' . get_lang('ScormNext') . '"></a>
</div>';
}
return $navbar;
Expand Down
19 changes: 10 additions & 9 deletions main/newscorm/lp_view.php
View file
Expand Up @@ -372,7 +372,11 @@
echo '</div>';
echo '</div>';
}
echo '<div id="learning_path_left_zone" style="'.$display_none.'"> ';
/* button hiden left zone */
echo '<a id="touch-button" class="hidden-touch" href="#"></a>';
/* Fin left zone */
echo '<div class="container-fluid"><div class="row">';
echo '<div id="learning_path_left_zone" class="sidebar-scorm"> ';
echo '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
echo '<div class="panel panel-default">';
echo '<div class="panel-heading" role="tab" id="headingOne">
Expand Down Expand Up @@ -448,11 +452,8 @@
</div>
</div>
</div>

</div>

<!-- end media player layout -->

<!-- TOC layout -->

<div id="toc_id" name="toc_name">
Expand All @@ -462,10 +463,10 @@
</div>
<!-- end TOC layout -->
</div>
<!-- end left zone -->

<!-- end left zone
<div id="hide_bar" class="scorm-toggle" style="display:inline-block; width: 25px; height: 1000px;"></div>-->
<!-- right zone -->
<div id="learning_path_right_zone" style="margin-left:<?php echo $margin_left;?>;height:100%">
<div id="learning_path_right_zone" style="height:100%" class="content-scorm">
<?php
// hub 26-05-2010 Fullscreen or not fullscreen
$height = '100%';
Expand All @@ -477,7 +478,7 @@
?>
</div>
<!-- end right Zone -->
</div>
</div></div></div>

<script>
// Resize right and left pane to full height (HUB 20-05-2010).
Expand Down Expand Up @@ -543,7 +544,7 @@ function updateContentHeight() {
}
$(document).ready(function() {
updateContentHeight();
$('#hide_bar').children().click(function(){
$('#touch-button').children().click(function(){
updateContentHeight();
});
$(window).resize(function() {
Expand Down

0 comments on commit 7cc76e7

Please sign in to comment.