iimog/atravelblog
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add toggle-switch library

Browse source
This commit is contained in:
Markus Ankenbrand 2017-02-23 01:04:20 +01:00
parent 3a12120b55
commit f9ec9a8148
4 changed files with 6 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
css/tinytools.toggleswitch.min.css vendored Normal file
View file

@ -0,0 +1 @@
.TinyTools.ToggleSwitch{display:inline-block;font-size:11px;font-weight:bold;border:1px solid #888;border-radius:3px;overflow:hidden;color:#eee;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.TinyTools.ToggleSwitch .NubWrapper{height:100%;width:100%;position:absolute;left:0;top:0;-moz-transition:opacity 1s;-o-transition:opacity 1s;-webkit-transition:opacity 1s;transition:opacity 1s}.TinyTools.ToggleSwitch .NubWrapper.Disabled{opacity:.5}.TinyTools.ToggleSwitch .NubWrapper>*{-moz-transition:left .5s ease-in-out,right .5s ease-in-out;-o-transition:left .5s ease-in-out,right .5s ease-in-out;-webkit-transition:left .5s ease-in-out,right .5s ease-in-out;transition:left .5s ease-in-out,right .5s ease-in-out}.TinyTools.ToggleSwitch .NubWrapper .OnSide,.TinyTools.ToggleSwitch .NubWrapper .OffSide,.TinyTools.ToggleSwitch .NubWrapper .Nub{display:table;vertical-align:middle;width:50%;height:100%;text-align:center;position:absolute;top:0}.TinyTools.ToggleSwitch .NubWrapper .OnSide{right:-50%;background:#590032;background:-moz-linear-gradient(top,#590032 0%,#980061 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#590032),color-stop(100%,#980061));background:-webkit-linear-gradient(top,#590032 0%,#980061 100%);background:-o-linear-gradient(top,#590032 0%,#980061 100%);background:-ms-linear-gradient(top,#590032 0%,#980061 100%);background:linear-gradient(to bottom,#590032 0%,#980061 100%)}.TinyTools.ToggleSwitch .NubWrapper .OffSide{left:0;background:#666;background:-moz-linear-gradient(top,#666 0%,#999 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#666),color-stop(100%,#999));background:-webkit-linear-gradient(top,#666 0%,#999 100%);background:-o-linear-gradient(top,#666 0%,#999 100%);background:-ms-linear-gradient(top,#666 0%,#999 100%);background:linear-gradient(to bottom,#666 0%,#999 100%)}.TinyTools.ToggleSwitch .NubWrapper .OnSide span,.TinyTools.ToggleSwitch .NubWrapper .OffSide span{display:table-cell;vertical-align:middle}.TinyTools.ToggleSwitch .NubWrapper .Nub{left:50%;background:#eee;background:-moz-linear-gradient(top,#fff 0%,#eee 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#eee));background:-webkit-linear-gradient(top,#fff 0%,#eee 100%);background:-o-linear-gradient(top,#fff 0%,#eee 100%);background:-ms-linear-gradient(top,#fff 0%,#eee 100%);background:linear-gradient(to bottom,#fff 0%,#eee 100%)}.TinyTools.ToggleSwitch .NubWrapper.Checked .OnSide{right:0}.TinyTools.ToggleSwitch .NubWrapper.Checked .OffSide{left:-50%}.TinyTools.ToggleSwitch .NubWrapper.Checked .Nub{left:0}

1
js/page-pins-map.js
View file

@ -16,6 +16,7 @@ jQuery('document').ready(function(){
}
jQuery('#travelers-filter-button, #toggle-and-or').on('click', filterByTravelerClick);
jQuery('#travelers-reset-button').on('click', resetFilter);
jQuery('#toggle-and-or').toggleSwitch();
});
var markers = [];
function initMap() {

1
js/tinytools.toggleswitch.min.js vendored Normal file
View file

@ -0,0 +1 @@
(function(n){function f(t){return n.extend({onLabel:"ON",offLabel:"OFF",width:"100px",height:"20px",onToggle:!1},t)}function r(n){return n.closest(".ToggleSwitch").data("settings")}function e(i,r){var h,s,e;n(i).is(":checkbox")&&(h=f({}),h=n.extend(h,u),r=n.extend(h,r),s='<div class="TinyTools ToggleSwitch">',s+='<div class="NubWrapper'+(n(i).is(":checked")?" Checked":"")+(n(i).is(":disabled")?" Disabled":"")+'">',s+='<div class="OffSide"><span>'+r.offLabel+"<\/span><\/div>",s+='<div class="OnSide"><span>'+r.onLabel+"<\/span><\/div>",s+='<div class="Nub"><\/div>',s+="<\/div><\/div>",e=n(s),n(i).css("display","none"),e.width()<=0&&e.css("width",r.width),e.height()<=0&&e.css("height",r.height),n(i).before(e),e.append(n(i)),e.data("settings",r),n(i).change(function(){t(n(this).closest(".ToggleSwitch"),n(this).is(":checked"),!1);o(n(this).closest(".ToggleSwitch"),n(this).is(":disabled"),!1)}),e.click(function(){n(this).children('input[type="checkbox"]').is(":disabled")||t(n(this),n(this).children('input[type="checkbox"]').is(":checked")?!1:!0)}))}function t(t,i,u){i?n(t).children(".NubWrapper").addClass("Checked"):n(t).children(".NubWrapper").removeClass("Checked");u!=!1&&n(t).children("input[type=checkbox]").prop("checked",i);s(r(t).onToggle,i,t)}function o(t,i,r){i?n(t).children(".NubWrapper").addClass("Disabled"):n(t).children(".NubWrapper").removeClass("Disabled");r!=!1&&n(t).children("input[type=checkbox]").prop("disabled",i)}function s(t,i,r){n.isFunction(t)&&t.call(undefined,i,r)}var i="toggleSwitch",u;n.toggleSwitch||(publicMethod=n.fn[i]=n[i]=function(n){var t=n;return this.each(function(n,i){e(i,t)})},n.propHooks.checked={set:function(t,i){t.checked=i;n(t).trigger("change")}},n.propHooks.disabled={set:function(t,i){t.disabled=i;n(t).trigger("change")}},publicMethod.getSettings=function(n){return r(n)},n.fn.toggleCheckedState=function(i){t(n(this).closest(".ToggleSwitch"),i)},publicMethod.toggle=function(i,r){t(n(r),i)})})(jQuery,document,window);

4
page-pins.php
View file

@ -83,7 +83,9 @@
}
}
endwhile;
wp_enqueue_script('page_pins_map', get_stylesheet_directory_uri() . '/js/page-pins-map.js', array('jquery', 'jquery-ui-selectable'));
wp_enqueue_style('toggle_switch', get_stylesheet_directory_uri() . '/css/tinytools.toggleswitch.min.css');
wp_enqueue_script('page_pins_map', get_stylesheet_directory_uri() . '/js/page-pins-map.js', array('jquery'));
wp_enqueue_script('page_pins_map', get_stylesheet_directory_uri() . '/js/page-pins-map.js', array('jquery', 'jquery-ui-selectable', 'toggle_switch'));
wp_localize_script('page_pins_map', 'page_pins_map', array('places' => $locations, 'traveler' => array_values($traveler)));
wp_enqueue_style('page_pins', get_stylesheet_directory_uri() . '/css/page-pins.css');
?>