Switch On/Off Button

Switch Button for Show/Hidden or On/Off.

Directory

File	Folder Link
backend.php	\\SYNAS\Allan\DOCUMENTATION\Component\Switch On Off Button\rckuc\wolf\app\layouts
form.php	\\SYNAS\Allan\DOCUMENTATION\Component\Switch On Off Button\rckuc\wolf\app\views\option
switch_button.css	\\SYNAS\Allan\DOCUMENTATION\Component\Switch On Off Button\rckuc\wolf\admin\themes\black_and_white
backend.js	\\SYNAS\Allan\DOCUMENTATION\Component\Switch On Off Button\rckuc\wolf\admin\javascript
OptionController.php	\\SYNAS\Allan\DOCUMENTATION\Component\Switch On Off Button\rckuc\wolf\app\controllers

Step 1

Update: backend.php

Insert switch_button.css in <head> section

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
</head>

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
</head>

Step 2

Update: form.php (or your create.php and view.php)

<?php
$show = (!empty($postdata['status']) ? $postdata['status'] : (!empty($option->status) ? $option->status : '0'));
?>
<h3><?php echo __('Status'); ?></h3>
<div id="meta-pages" class="switch_container">
    <label class="switch">
        <input type="checkbox" class="status_switch" name="option[status]" <?php echo $show == 1 ? 'checked' : ''; ?> value="1">
        <span class="switch_slider round"></span>
    </label>
    <label class="switch_label"><?php echo $show == 1 ? 'Show' : 'Hidden'; ?><label>
</div>

<?php
$show = (!empty($postdata['status']) ? $postdata['status'] : (!empty($option->status) ? $option->status : '0'));
?>
<h3><?php echo __('Status'); ?></h3>
<div id="meta-pages" class="switch_container">
    <label class="switch">
        <input type="checkbox" class="status_switch" name="option[status]" <?php echo $show == 1 ? 'checked' : ''; ?> value="1">
        <span class="switch_slider round"></span>
    </label>
    <label class="switch_label"><?php echo $show == 1 ? 'Show' : 'Hidden'; ?><label>
</div>

Step 3

Add: switch_button.css

/* =================================================
  On / Off Toggle Radio Button 
================================================= */
.switch {
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 1.36rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .25s;
  transition: .25s;
}

.switch_slider:before {
  position: absolute;
  content: "";
  height: 1.04rem;
  width: 1.04rem;
  left: 0.16rem;
  bottom: 0.16rem;
  background-color: white;
  -webkit-transition: .25s;
  transition: .25s;
}

input:checked + .switch_slider {
  background-color: #2196F3;
}

input:focus + .switch_slider {
  box-shadow: 0 0 0.64px #2196F3;
}

input:checked + .switch_slider:before {
  -webkit-transform: translateX(1.04rem);
  -ms-transform: translateX(1.04rem);
  transform: translateX(1.04rem);
}

.switch_slider.round {
  border-radius: 1.36rem;
}

.switch_slider.round:before {
  border-radius: 50%;
}

/* =================================================
  On / Off Toggle Radio Button 
================================================= */
.switch {
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 1.36rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .25s;
  transition: .25s;
}

.switch_slider:before {
  position: absolute;
  content: "";
  height: 1.04rem;
  width: 1.04rem;
  left: 0.16rem;
  bottom: 0.16rem;
  background-color: white;
  -webkit-transition: .25s;
  transition: .25s;
}

input:checked + .switch_slider {
  background-color: #2196F3;
}

input:focus + .switch_slider {
  box-shadow: 0 0 0.64px #2196F3;
}

input:checked + .switch_slider:before {
  -webkit-transform: translateX(1.04rem);
  -ms-transform: translateX(1.04rem);
  transform: translateX(1.04rem);
}

.switch_slider.round {
  border-radius: 1.36rem;
}

.switch_slider.round:before {
  border-radius: 50%;
}

Step 4

Update: backend.js

    // for toggle button
    $("div.status_switch").click(function () {
        if($(this).is(":checked")) {
            $(this).parents(".switch_container").find(".switch_label").text("Show");
        } else {
            $(this).parents(".switch_container").find(".switch_label").text("Hidden");
        }
    })

    // for toggle button
    $("div.status_switch").click(function () {
        if($(this).is(":checked")) {
            $(this).parents(".switch_container").find(".switch_label").text("Show");
        } else {
            $(this).parents(".switch_container").find(".switch_label").text("Hidden");
        }
    })

Step 5

Update: OptionController.php (or any controller)
In your _add() and _edit() function insert this:

// Set 'status' to 0 by default in 'add' & 'edit' function
if (empty($data['status'])){
    $data['status'] = 0;
}

// Set 'status' to 0 by default in 'add' & 'edit' function
if (empty($data['status'])){
    $data['status'] = 0;
}

Component