Fix #120: BS4 Custom Controls Enhancements: Switch and File

Author: kartik-v

.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+# github: [kartik-v]
+open_collective: yii2-widgets

CHANGE.md

@@ -5,6 +5,8 @@ Change Log: `yii2-widget-activeform`
 
 **Date**: _under development_
 
+- (enh #120): BS4 Custom Controls Enhancements: Switch and File.
+
 ## Version 1.5.8
 
 **Date**: 24-Feb-2019

src/ActiveField.php

@@ -499,7 +499,9 @@ public function init()
      * @param array $options the tag options in terms of name-value pairs. The following options are specially
      * handled:
      *
-     * - `custom`: _bool_, whether to render bootstrap 4.x custom checkbox/radio styled control. Defaults to `false`.
+     * - `custom`: _bool_, whether to render bootstrap 4.x custom checkbox styled control. Defaults to `false`.
+     *    This is applicable only for Bootstrap 4.x forms.
+     * - `switch`: _bool_, whether to render bootstrap 4.x custom switch styled control. Defaults to `false`.
      *    This is applicable only for Bootstrap 4.x forms.
      * @see https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios-1
      * - `uncheck`: _string_, the value associated with the uncheck state of the checkbox. If not set, it will take
@@ -608,6 +610,9 @@ protected function isCustomControl(&$options)
     public function fileInput($options = [])
     {
         if ($this->isCustomControl($options)) {
+            $view = $this->form->getView();
+            Bs4CustomFileInputAsset::register($view);
+            $view->registerJs('bsCustomFileInput.init();');
             Html::removeCssClass($options, 'form-control');
             Html::addCssClass($options, 'custom-file-input');
             Html::addCssClass($this->labelOptions, 'custom-file-label');
@@ -696,7 +701,7 @@ public function passwordInput($options = [])
      * @param array $options the tag options in terms of name-value pairs. The following options are specially
      * handled:
      *
-     * - `custom`: _bool_, whether to render bootstrap 4.x custom checkbox/radio styled control. Defaults to `false`.
+     * - `custom`: _bool_, whether to render bootstrap 4.x custom radio styled control. Defaults to `false`.
      *    This is applicable only for Bootstrap 4.x forms.
      * @see https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios-1
      * - `uncheck`: _string_, the value associated with the uncheck state of the radio button. If not set, it will take the
@@ -987,8 +992,9 @@ protected function getColCss($size)
     protected function getToggleField($type = self::TYPE_CHECKBOX, $options = [], $enclosedByLabel = null)
     {
         $this->initDisability($options);
-        $custom = $this->isCustomControl($options);
         $isBs4 = $this->form->isBs4();
+        $custom = $this->isCustomControl($options);
+        $switch = ArrayHelper::remove($options, 'switch', false) && $isBs4 && $type === self::TYPE_CHECKBOX;
         if ($enclosedByLabel === null) {
             $enclosedByLabel = !$isBs4 && !$custom;
         }
@@ -1006,7 +1012,7 @@ protected function getToggleField($type = self::TYPE_CHECKBOX, $options = [], $e
             Html::addCssClass($this->labelOptions, "{$prefix}-label");
             Html::addCssClass($options, "{$prefix}-input");
             if ($custom) {
-                Html::addCssClass($this->checkWrapperOptions, "custom-{$type}");
+                Html::addCssClass($this->checkWrapperOptions, 'custom-' . ($switch ? 'switch' : $type));
             }
         } elseif (!$enclosedByLabel) {
             Html::addCssClass($this->checkWrapperOptions, "not-enclosed");

src/Bs4CustomFileInputAsset.php

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * @copyright  Copyright &copy; Kartik Visweswaran, Krajee.com, 2015 - 2019
+ * @package    yii2-widgets
+ * @subpackage yii2-widget-activeform
+ * @version    1.5.9
+ */
+
+namespace kartik\form;
+
+use kartik\base\PluginAssetBundle;
+
+/**
+ * Asset bundle for the custom file input animation for bootstrap 4.
+ *
+ * @author Kartik Visweswaran <[email protected]>
+ * @since  1.0
+ */
+class Bs4CustomFileInputAsset extends PluginAssetBundle
+{
+    /**
+     * @inheritdoc
+     */
+    public function init()
+    {
+        $this->setSourcePath(__DIR__ . '/assets');
+        $this->setupAssets('js', ['js/bs-custom-file-input']);
+        parent::init();
+    }
+}

src/assets/css/activeform.css

@@ -17,63 +17,51 @@
     cursor: help;
     opacity: 0.8;
 }
-
 .kv-hint-icon:hover, .kv-hint-icon:focus {
     opacity: 1;
 }
-
 .kv-hint-content {
     opacity: 0.9;
 }
-
 .kv-hint-label {
     border-bottom: 1px dashed #888;
     cursor: help;
 }
-
 label.disabled, label.readonly, .disabled label, .readonly label {
     cursor: not-allowed;
     filter: alpha(opacity=65);
     -webkit-box-shadow: none;
     box-shadow: none;
     opacity: .65;
 }
-
 @media (min-width: 768px) {
     .form-inline .form-group, .form-inline .form-control {
         vertical-align: top;
     }
-
     .form-inline .btn-default {
         margin: 0;
     }
-
     .form-inline .checkbox, .form-inline .radio {
         padding-top: 6px;
     }
 }
-
 .input-multiselect {
     overflow: auto;
     min-height: 145px !important;
 }
-
 .kv-form-bs4.tooltip-feedback .form-group.has-error {
     position: relative;
     margin-bottom: 2rem;
 }
-
 /**
  * feedback icon styling
  */
 .kv-form-bs4 .has-feedback {
     position: relative;
 }
-
 .kv-form-bs4 .has-feedback .form-control {
     padding-right: 2.65625rem;
 }
-
 .kv-form-bs4 .form-control-feedback {
     position: absolute;
     top: 0;
@@ -85,80 +73,65 @@ label.disabled, label.readonly, .disabled label, .readonly label {
     text-align: center;
     pointer-events: none;
 }
-
 .has-feedback.has-size-lg .form-control-feedback {
     font-size: 18px;
     top: 31px;
 }
-
 .has-feedback.has-size-sm .form-control-feedback {
     font-size: 12px;
 }
-
 .kv-form-bs4 .has-feedback.has-size-lg .form-control-feedback {
     width: 2.875rem;
     height: 2.875rem;
     line-height: 2.875rem;
     font-size: 1.25rem;
 }
-
 .kv-form-bs4 .has-feedback.has-size-sm .form-control-feedback {
     width: 1.75rem;
     height: 1.75rem;
     line-height: 1.75rem;
     font-size: 0.875rem;
 }
-
 .has-error .form-control-feedback {
     color: #a94442;
 }
-
 .kv-form-bs4 .has-feedback label ~ .form-control-feedback {
     top: 2.125rem;
 }
-
 .kv-form-bs4 .has-feedback label.sr-only ~ .form-control-feedback {
     top: 0;
 }
-
 .kv-feedback-success,
 .kv-feedback-error,
 .has-error .kv-feedback-default,
 .has-success .kv-feedback-default {
     display: none;
 }
-
 .has-error .kv-feedback-error,
 .has-success .kv-feedback-success {
     display: inline-block;
 }
-
 @media (min-width: 768px) {
     .kv-form-bs4.form-inline .has-feedback .form-control-feedback,
     .kv-form-bs4.navbar-form .has-feedback .form-control-feedback {
         top: 0;
     }
 }
-
 .kv-form-bs4.form-horizontal .has-feedback .form-control-feedback {
     right: 0.9375rem;
 }
-
 /**
  * multiple addons border fix
  **/
 .input-group .input-group-addon:not(:last-child) {
     border-right: 0;
 }
-
 .input-group .input-group-addon:last-child {
     border-left: 1px solid #ccc;
 }
-
 .form-control + .input-group-addon:not(:first-child) {
     border-left: 0;
 }
-
 /**
  * addons success and error states
  **/
@@ -167,113 +140,93 @@ label.disabled, label.readonly, .disabled label, .readonly label {
     background-color: #dff0d8;
     border-color: #3c763d;
 }
-
 .has-error.highlight-addon .input-group-addon {
     color: #a94442;
     background-color: #f2dede;
     border-color: #a94442;
 }
-
 .has-success.highlight-addon .input-group-btn .btn:not(:disabled):not(.disabled) {
     color: #fff;
     background-color: #449d44;
     border-color: #398439;
 }
-
 .has-success.highlight-addon .input-group-btn .btn:not(:disabled):not(.disabled):hover {
     color: #fff;
     background-color: #449d44;
     border-color: #398439;
 }
-
 .has-error.highlight-addon .input-group-btn .btn:not(:disabled):not(.disabled) {
     color: #fff;
     background-color: #c9302c;
     border-color: #ac2925;
 }
-
 .has-error.highlight-addon .input-group-btn .btn:not(:disabled):not(.disabled):hover {
     color: #fff;
     background-color: #c9302c;
     border-color: #ac2925;
 }
-
 .kv-form-bs4 .has-success.highlight-addon .input-group-text {
     color: #28a745;
     background-color: #d4edda;
     border-color: #28a745;
 }
-
 .kv-form-bs4 .has-error.highlight-addon .input-group-text {
     color: #dc3545;
     background-color: #f8d7da;
     border-color: #dc3545;
 }
-
 .kv-form-bs4 .has-success.highlight-addon .input-group .btn:not(:disabled):not(.disabled) {
     color: #fff;
     background-color: #28a745;
     border-color: #28a745;
 }
-
 .kv-form-bs4 .has-success.highlight-addon .input-group .btn:not(:disabled):not(.disabled):hover {
     color: #fff;
     background-color: #218838;
     border-color: #1e7e34;
 }
-
 .kv-form-bs4 .has-success.highlight-addon .input-group .btn:not(:disabled):not(.disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
 }
-
 .kv-form-bs4 .has-error.highlight-addon .input-group .btn:not(:disabled):not(.disabled) {
     color: #fff;
     background-color: #dc3545;
     border-color: #dc3545;
 }
-
 .kv-form-bs4 .has-error.highlight-addon .input-group .btn:not(:disabled):not(.disabled):hover {
     color: #fff;
     background-color: #c82333;
     border-color: #bd2130;
 }
-
 .kv-form-bs4 .has-error.highlight-addon .input-group .btn:not(:disabled):not(.disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
 }
-
 .kv-form-bs4 .has-error .invalid-feedback {
     display: block;
 }
-
 .kv-form-bs4 .hint-block {
     font-size: 0.75rem;
     margin-top: 0.375rem;
     color: #999;
 }
-
 .checkbox.not-enclosed,
 .radio.not-enclosed {
     padding-left: 20px;
 }
-
 .checkbox.not-enclosed label,
 .radio.not-enclosed label {
     padding-left: 2px;
 }
-
 .form-inline .checkbox.not-enclosed,
 .form-inline .radio.not-enclosed {
     padding-left: 5px;
     padding-right: 5px;
 }
-
 .form-inline .checkbox.not-enclosed label,
 .form-inline .radio.not-enclosed label {
     margin-top: -5px;
 }
-
-.form-group.required .has-star:not(.custom-control-label)::after,
+.form-group.required .has-star:not(.custom-control-label):not(.custom-file-label)::after,
 .is-required::after {
     content: "*";
     margin-left: 3px;