Commit 5f5e1427 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review
Browse files

Merge "Bug 1467252: Fix display problem with Switchbox with long width"

parents 2a410c55 a08f5a34
/**
* Javascript for the switchbox
*
* @package mahara
* @subpackage core
* @author Gilles-Philippe Leblanc
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
* @copyright For copyright information on Mahara, please see the README file distributed with this software.
* @copyright 2017 Université de Montréal
*
*/
// Self executing function.
(function(Switchbox, $) {
"use strict";
Switchbox.computeWidth = function(id) {
var switchbox = $('#' + id).parent(),
// Use a temporary copy to be sure that the switch is not hidden and therefore has an outerWidth.
tempform = switchbox.parent().clone().appendTo('body'),
labels = tempform.find('.switch .state-label');
labels.css('width', 'auto');
var maxWidth = Math.max.apply(null, labels.map(function() {
return $(this).outerWidth();
}).get());
tempform.remove();
switchbox.css('width', (Math.ceil(maxWidth) + 1) + 'px');
};
}(window.Switchbox = window.Switchbox || {}, jQuery));
......@@ -25,38 +25,29 @@ require_once(get_config('docroot') . 'lib/pieforms/pieform/elements/checkbox.php
* @return string The HTML for the element
*/
function pieform_element_switchbox(Pieform $form, $element) {
$wrapper = !empty($element['wrapperclass']) ? $element['wrapperclass'] : '';
$smarty = smarty_core();
$smarty->left_delimiter = '{{';
$smarty->right_delimiter = '}}';
$html = '<div class="' . $wrapper . '">' . pieform_element_checkbox($form, $element) . '</div>';
$checkbox = pieform_element_checkbox($form, array_merge($element, array('arialabel' => true)));
$labels = pieform_element_switchbox_labeltext($element);
$wrapper = (!empty($element['wrapperclass']) ? $element['wrapperclass'] : '');
$smarty->assign('wrapper', $wrapper);
$smarty->assign('elementid', $form->make_id($element, $form->get_name()));
$smarty->assign('libfile', get_config('wwwroot') . 'js/switchbox.js');
$smarty->assign('checkbox', $checkbox);
// Dealing with the label text
$type = $labels['type'];
$onlabel = $labels['on'];
$offlabel = $labels['off'];
$strlength = max(strlen($onlabel), strlen($offlabel));
$width = floor((57 + (($strlength - 2) * 3.5) + pow(1.4, ($strlength - 2)))) . 'px';
$elementid = $form->make_id($element, $form->get_name());
$labels = pieform_element_switchbox_labeltext($element);
$smarty->assign('type', $labels['type']);
$smarty->assign('onlabel', $labels['on']);
$smarty->assign('offlabel', $labels['off']);
$html = '<div class="form-switch ' . $wrapper . '">';
$html .= ' <div class="switch ' . $type . '" style="width:'.$width.'">';
$html .= pieform_element_checkbox($form, array_merge($element, array('arialabel' => true)));
$html .= ' <label class="switch-label" for="' . $elementid . '" aria-hidden="true">';
$html .= ' <span class="switch-inner"></span>';
$html .= ' <span class="switch-indicator"></span>';
$html .= ' <span class="state-label on">'. $onlabel .'</span>';
$html .= ' <span class="state-label off">'. $offlabel .'</span>';
$html .= ' </label>';
$html .= ' </div>';
$html .= '</div>';
return $html;
return $smarty->fetch('form/switchbox.tpl');
}
function pieform_element_switchbox_labeltext($element){
// Dealing with the label text
// Dealing with the label text
$type = isset($element['switchtext']) ? $element['switchtext'] : '';
switch ($type) {
......@@ -88,8 +79,10 @@ function pieform_element_switchbox_labeltext($element){
* @return array An array of HTML elements to go in the <head>
*/
function pieform_element_switchbox_get_headdata($element) {
global $THEME;
return array();
$libfile = get_config('wwwroot') . 'js/switchbox.js';
$scripts = array();
$scripts[] = '<script type="application/javascript" src="' . $libfile . '"></script>';
return $scripts;
}
function pieform_element_switchbox_get_value(Pieform $form, $element) {
......
......@@ -32,8 +32,13 @@
* @return string The HTML for the element
*/
function pieform_element_checkbox(Pieform $form, $element) {/*{{{*/
$smarty = smarty_core();
$baseattributes = $form->element_attributes($element);
$checked = false;
if (isset($element['rules']['required'])){
if (isset($element['rules']['required'])) {
throw new PieformException("For pieform_element_checkbox, 'required' is not allowed as a rule. Radio should be used instead.");
}
if (!empty($element['value'])) {
......@@ -52,14 +57,15 @@ function pieform_element_checkbox(Pieform $form, $element) {/*{{{*/
$arialabel = '';
if (!empty($element['arialabel'])) {
$arialabel = ' aria-label="' . Pieform::hsc($element['title']) . '"';
$arialabel = Pieform::hsc($element['title']);
}
return '<input type="checkbox"'
. $form->element_attributes($element)
. $arialabel
. ($checked ? ' checked="checked"' : '')
. '>';
$smarty->assign('baseattributes', $baseattributes);
$smarty->assign('arialabel', $arialabel);
$smarty->assign('checked', $checked);
return $smarty->fetch('form/checkbox.tpl');
}/*}}}*/
function pieform_element_checkbox_get_value(Pieform $form, $element) {/*{{{*/
......
$transition: 0.1s ease-in 0s;
$height: 28px;
$indicator-horizontal-margin : 9px;
$indicator-size: 10px;
$label-font-size: 14px;
$indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
.switchbox.form-group {
> label {
......@@ -18,7 +22,8 @@ $height: 28px;
-ms-user-select: none;
user-select: none;
position: relative;
width: 60px; //overridden with inline styles
overflow: hidden;
width: 60px; // Overridden with inline styles
input {
@extend .sr-only;
......@@ -74,6 +79,7 @@ $height: 28px;
&:after {
@include box-sizing(border-box);
@include box-shadow(none);
content: '';
background-color: $brand-default;
border: 1px solid $btn-default-border;
display: block;
......@@ -81,22 +87,6 @@ $height: 28px;
width: 50%;
height: $height;
padding: 0;
line-height: 26px;
font-size: 14px;
text-transform: capitalize;
}
&:before {
content:'';
padding-left: 10px;
color: $text-color;
}
&:after {
content:'';
padding-right: 10px;
color: $text-color;
text-align: right;
}
}
......@@ -104,50 +94,61 @@ $height: 28px;
margin-left: 0;
}
.switch-indicator {
@include transition(all $transition);
border-radius: 20px;
border-radius: 50%;
display: block;
width: 10px;
height:10px;
margin: 6px 7px;
width: $indicator-size;
height: $indicator-size;
margin: -($indicator-size / 2) $indicator-horizontal-margin 0;
margin-right: $indicator-horizontal-margin + $indicator-total-width;
background: rgba($brand-danger, 0.8);
border: 1px solid rgba(darken($brand-danger, 5%), 0.8);
position: absolute;
top: 3px;
right: 3.5rem;
top: 50%;
left: 0;
right: 100%;
transform: none;
}
input:checked + .switch-label .switch-indicator {
right: 0px;
left: 100%;
right: 0;
transform: translateX(#{-$indicator-total-width});
background-color: rgba($brand-success, 0.8);
border: 1px solid rgba(darken($brand-success, 5%), 0.8);
~ .off {
text-indent: 55%;
transform: translateX(#{-$indicator-total-width}) translateX(100%);
}
~ .on {
text-indent: -0;
transform: none;
}
}
.state-label {
@include transition(all $transition);
display: block;
float: left;
white-space: nowrap;
display: inline-block;
position: absolute;
left: 0;
top: 0;
height: $height;
padding:3px 10px;
margin-top:-$height;
width: 100%;
padding: 0 $indicator-horizontal-margin;
font-size: $label-font-size;
line-height: $height;
backface-visibility: hidden;
&.off {
padding-left: 45%;
text-indent: 0;
padding-left: $indicator-total-width;
transform: none;
}
&.on {
text-indent: -55%;
padding-right: $indicator-total-width;
transform: translateX(#{$indicator-total-width}) translateX(-100%);
}
}
}
<input type="checkbox" {$baseattributes|safe}
{if $arialabel} aria-label="{$arialabel}"{/if}
{if $checked} checked="checked"{/if}
>
<div class="form-switch {{$wrapper}}">
<div class="switch {{$type}}">
{{$checkbox|safe}}
<label class="switch-label" for="{{$elementid}}" aria-hidden="true">
<span class="switch-inner"></span>
<span class="switch-indicator"></span>
<span class="state-label on">{{$onlabel}}</span>
<span class="state-label off">{{$offlabel}}</span>
</label>
</div>
<script type="application/javascript">
if (!window.Switchbox) {
jQuery.getScript("{{$libfile}}").done(function () { Switchbox.computeWidth("{{$elementid}}"); });
}
else {
Switchbox.computeWidth("{{$elementid}}");
}
</script>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment