diff --git a/css/tinytools.toggleswitch.min.css b/css/tinytools.toggleswitch.min.css new file mode 100644 index 0000000..730ad3c --- /dev/null +++ b/css/tinytools.toggleswitch.min.css @@ -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} \ No newline at end of file diff --git a/js/page-pins-map.js b/js/page-pins-map.js index 86ce047..80979eb 100644 --- a/js/page-pins-map.js +++ b/js/page-pins-map.js @@ -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() { diff --git a/js/tinytools.toggleswitch.min.js b/js/tinytools.toggleswitch.min.js new file mode 100644 index 0000000..fe5d93e --- /dev/null +++ b/js/tinytools.toggleswitch.min.js @@ -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='
',s+='
',s+='
'+r.offLabel+"<\/span><\/div>",s+='
'+r.onLabel+"<\/span><\/div>",s+='
<\/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); \ No newline at end of file diff --git a/page-pins.php b/page-pins.php index 20058c7..08ab815 100644 --- a/page-pins.php +++ b/page-pins.php @@ -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'); ?>