Browse Source

Replaced checkboxes with pure css version

rfm69
Xose Pérez 6 years ago
parent
commit
32553192e5
14 changed files with 3205 additions and 3213 deletions
  1. BIN
      code/espurna/data/index.html.gz
  2. +3072
    -2686
      code/espurna/static/index.html.gz.h
  3. +63
    -1
      code/html/custom.css
  4. +68
    -36
      code/html/custom.js
  5. +2
    -4
      code/html/index.html
  6. +0
    -120
      code/html/vendor/checkboxes.css
  7. +0
    -366
      code/html/vendor/checkboxes.js
  8. BIN
      code/html/vendor/images/border-off.png
  9. BIN
      code/html/vendor/images/border-on.png
  10. BIN
      code/html/vendor/images/handle-center.png
  11. BIN
      code/html/vendor/images/handle-left.png
  12. BIN
      code/html/vendor/images/handle-right.png
  13. BIN
      code/html/vendor/images/label-off.png
  14. BIN
      code/html/vendor/images/label-on.png

BIN
code/espurna/data/index.html.gz View File


+ 3072
- 2686
code/espurna/static/index.html.gz.h
File diff suppressed because it is too large
View File


+ 63
- 1
code/html/custom.css View File

@ -147,8 +147,12 @@ div.state {
color: white; color: white;
letter-spacing: 0; letter-spacing: 0;
margin-bottom: 10px; margin-bottom: 10px;
padding: 8px 8px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
font-family: 'FreeSans','Arimo','Droid Sans','Helvetica','Arial','sans-serif';
font-size: .7em;
height: 35px;
padding: 8px 8px;
} }
.main-buttons { .main-buttons {
@ -221,6 +225,64 @@ span.slider {
margin-top: 7px; margin-top: 7px;
} }
/* -----------------------------------------------------------------------------
Checkboxes
-------------------------------------------------------------------------- */
.checkbox-container {
width: 130px;
height: 30px;
margin: 3px 0 10px 0px;
position: relative;
border-radius: 4px;
overflow: hidden;
user-select: none;
cursor: pointer;
}
.checkbox-container input {
display: none;
}
.inner-container {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
text-transform: uppercase;
font-size: .7em;
letter-spacing: .2em;
}
.inner-container:first-child {
background: #e9e9e9;
color: #a9a9a9;
}
.inner-container:nth-child(2) {
background: #c00000;
color: white;
clip-path: inset(0 50% 0 0);
transition: .3s cubic-bezier(0,0,0,1);
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
box-sizing: border-box;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Loading Loading
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */


+ 68
- 36
code/html/custom.js View File

@ -454,12 +454,8 @@ function doUpdate() {
// Empty special fields // Empty special fields
$(".pwrExpected").val(0); $(".pwrExpected").val(0);
$("input[name='pwrResetCalibration']").
prop("checked", false).
iphoneStyle("refresh");
$("input[name='pwrResetE']").
prop("checked", false).
iphoneStyle("refresh");
$("input[name='pwrResetCalibration']").prop("checked", false);
$("input[name='pwrResetE']").prop("checked", false);
// Change handling // Change handling
numChanged = 0; numChanged = 0;
@ -541,8 +537,7 @@ function doFactoryReset() {
return false; return false;
} }
function doToggle(element, value) {
var id = parseInt(element.attr("data"), 10);
function doToggle(id, value) {
sendAction("relay", {id: id, status: value ? 1 : 0 }); sendAction("relay", {id: id, status: value ? 1 : 0 });
return false; return false;
} }
@ -586,10 +581,7 @@ function toggleMenu() {
function showPanel() { function showPanel() {
$(".panel").hide(); $(".panel").hide();
if ($("#layout").hasClass("active")) { toggleMenu(); } if ($("#layout").hasClass("active")) { toggleMenu(); }
$("#" + $(this).attr("data")).show().
find("input[type='checkbox']").
iphoneStyle("calculateDimensions").
iphoneStyle("refresh");
$("#" + $(this).attr("data")).show();
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@ -682,6 +674,7 @@ function moreSchedule() {
} }
function addSchedule(event) { function addSchedule(event) {
var numSchedules = $("#schedules > div").length; var numSchedules = $("#schedules > div").length;
if (numSchedules >= maxSchedules) { if (numSchedules >= maxSchedules) {
alert("Max number of schedules reached"); alert("Max number of schedules reached");
@ -704,13 +697,12 @@ function addSchedule(event) {
$(line).find(".button-del-schedule").on("click", delSchedule); $(line).find(".button-del-schedule").on("click", delSchedule);
$(line).find(".button-more-schedule").on("click", moreSchedule); $(line).find(".button-more-schedule").on("click", moreSchedule);
line.appendTo("#schedules"); line.appendTo("#schedules");
$(line).find("input[type='checkbox']").prop("checked", false);
$(line).find("input[type='checkbox']").
prop("checked", false).
iphoneStyle("calculateDimensions").
iphoneStyle("refresh");
initCheckboxes();
return line; return line;
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@ -728,15 +720,8 @@ function initRelays(data) {
// Add relay fields // Add relay fields
var line = $(template).clone(); var line = $(template).clone();
$(".id", line).html(i); $(".id", line).html(i);
$("input", line).attr("data", i);
$(":checkbox", line).prop('checked', data[i]).attr("data", i);
line.appendTo("#relays"); line.appendTo("#relays");
$("input[type='checkbox']", line).iphoneStyle({
onChange: doToggle,
resizeContainer: true,
resizeHandle: true,
checkedLabel: "ON",
uncheckedLabel: "OFF"
});
// Populate the relay SELECTs // Populate the relay SELECTs
$("select.isrelay").append( $("select.isrelay").append(
@ -746,6 +731,60 @@ function initRelays(data) {
} }
function initCheckboxes() {
var setCheckbox = function(element, value) {
var container = $(".toggle-container", $(element));
if (value) {
container.css("clipPath", "inset(0 0 0 50%)");
container.css("backgroundColor", "#00c000");
} else {
container.css("clipPath", "inset(0 50% 0 0)");
container.css("backgroundColor", "#c00000");
}
}
$(".checkbox-container")
.each(function() {
var status = $(this).next().prop('checked');
setCheckbox(this, status);
})
.off('click')
.on('click', function() {
var checkbox = $(this).next();
var status = checkbox.prop('checked');
status = !status;
checkbox.prop('checked', status);
setCheckbox(this, status);
if ("relay" == checkbox.attr('name')) {
var id = checkbox.prop('data');
doToggle(id, status);
}
});
}
function createCheckboxes() {
$("input[type='checkbox']").each(function() {
var text_on = $(this).attr("on") || "YES";
var text_off = $(this).attr("off") || "NO";
var toggles = "<div class=\"toggle\"><p>" + text_on + "</p></div><div class=\"toggle\"><p>" + text_off + "</p></div>";
var content = "<div class=\"checkbox-container\"><div class=\"inner-container\">" + toggles
+ "</div><div class=\"inner-container toggle-container\">" + toggles + "</div></div>";
$(this).before(content).hide();
});
}
function initRelayConfig(data) { function initRelayConfig(data) {
var current = $("#relayConfig > div").length; var current = $("#relayConfig > div").length;
@ -1165,9 +1204,7 @@ function processData(data) {
var sch_value = schedule[key]; var sch_value = schedule[key];
$("input[name='" + key + "']", sch_line).val(sch_value); $("input[name='" + key + "']", sch_line).val(sch_value);
$("select[name='" + key + "']", sch_line).prop("value", sch_value); $("select[name='" + key + "']", sch_line).prop("value", sch_value);
$("input[type='checkbox'][name='" + key + "']", sch_line).
prop("checked", sch_value).
iphoneStyle("refresh");
$("input[type='checkbox'][name='" + key + "']", sch_line).prop("checked", sch_value);
}); });
} }
return; return;
@ -1180,12 +1217,7 @@ function processData(data) {
if ("relayStatus" === key) { if ("relayStatus" === key) {
initRelays(value); initRelays(value);
for (i in value) { for (i in value) {
// Set the status for each relay
$("input.relayStatus[data='" + i + "']").
prop("checked", value[i]).
iphoneStyle("refresh");
$("input[name='relay'][data='" + i + "']").prop("checked", value[i]);
} }
return; return;
} }
@ -1300,9 +1332,7 @@ function processData(data) {
var input = $("input[name='" + key + "']"); var input = $("input[name='" + key + "']");
if (input.length > 0) { if (input.length > 0) {
if (input.attr("type") === "checkbox") { if (input.attr("type") === "checkbox") {
input.
prop("checked", value).
iphoneStyle("refresh");
input.prop("checked", value);
} else if (input.attr("type") === "radio") { } else if (input.attr("type") === "radio") {
input.val([value]); input.val([value]);
} else { } else {
@ -1334,6 +1364,7 @@ function processData(data) {
} }
resetOriginals(); resetOriginals();
initCheckboxes();
} }
@ -1433,6 +1464,7 @@ $(function() {
initMessages(); initMessages();
loadTimeZones(); loadTimeZones();
createCheckboxes();
setInterval(function() { keepTime(); }, 1000); setInterval(function() { keepTime(); }, 1000);
$("#menuLink").on("click", toggleMenu); $("#menuLink").on("click", toggleMenu);


+ 2
- 4
code/html/index.html View File

@ -11,7 +11,6 @@
<link rel="stylesheet" href="vendor/pure-1.0.0.min.css" /> <link rel="stylesheet" href="vendor/pure-1.0.0.min.css" />
<link rel="stylesheet" href="vendor/pure-grids-responsive-1.0.0.min.css" /> <link rel="stylesheet" href="vendor/pure-grids-responsive-1.0.0.min.css" />
<link rel="stylesheet" href="vendor/side-menu.css" /> <link rel="stylesheet" href="vendor/side-menu.css" />
<link rel="stylesheet" href="vendor/checkboxes.css" />
<!-- removeIf(!light)--> <!-- removeIf(!light)-->
<link rel="stylesheet" href="vendor/jquery.wheelcolorpicker-3.0.3.css" /> <link rel="stylesheet" href="vendor/jquery.wheelcolorpicker-3.0.3.css" />
<!-- endRemoveIf(!light)--> <!-- endRemoveIf(!light)-->
@ -353,7 +352,7 @@
<div class="pure-g module module-alexa"> <div class="pure-g module module-alexa">
<label class="pure-u-1 pure-u-lg-1-4">Alexa integration</label> <label class="pure-u-1 pure-u-lg-1-4">Alexa integration</label>
<div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="alexaEnabled" tabindex="13" /></div>
<div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="alexaEnabled" /></div>
</div> </div>
</fieldset> </fieldset>
@ -1339,7 +1338,7 @@
<div id="relayTemplate" class="template"> <div id="relayTemplate" class="template">
<div class="pure-g"> <div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Switch #<span class="id"></span></label> <label class="pure-u-1 pure-u-lg-1-4">Switch #<span class="id"></span></label>
<div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" class="relayStatus pure-u-1 pure-u-lg-1-4" data="0" /></div>
<input name="relay" type="checkbox" on="ON" off="OFF" />
</div> </div>
</div> </div>
@ -1479,7 +1478,6 @@
<!-- build:js script.js --> <!-- build:js script.js -->
<script src="vendor/jquery-3.2.1.min.js"></script> <script src="vendor/jquery-3.2.1.min.js"></script>
<script src="custom.js"></script> <script src="custom.js"></script>
<script src="vendor/checkboxes.js"></script>
<!-- removeIf(!light)--> <!-- removeIf(!light)-->
<script src="vendor/jquery.wheelcolorpicker-3.0.3.min.js"></script> <script src="vendor/jquery.wheelcolorpicker-3.0.3.min.js"></script>
<!-- endRemoveIf(!light)--> <!-- endRemoveIf(!light)-->


+ 0
- 120
code/html/vendor/checkboxes.css View File

@ -1,120 +0,0 @@
.iPhoneCheckContainer {
-webkit-transform:translate3d(0,0,0);
position: relative;
height: 30px;
cursor: pointer;
overflow: hidden;
margin: 5px 0 10px 0;
}
.iPhoneCheckContainer input {
position: absolute;
top: 5px;
left: 30px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
.iPhoneCheckContainer label {
white-space: nowrap;
font-size: 17px;
line-height: 17px;
font-weight: bold;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
cursor: pointer;
display: block;
height: 27px;
position: absolute;
width: auto;
top: 0;
padding-top: 5px;
overflow: hidden;
}
.iPhoneCheckContainer, .iPhoneCheckContainer label {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
}
.iPhoneCheckDisabled {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
div.iPhoneCheckBorderOn {
position: absolute;
left: 0;
width: 4px;
height: 100%;
background-image: url('images/border-on.png');
background-repeat: no-repeat;
}
label.iPhoneCheckLabelOn {
color: white;
background-image: url('images/label-on.png');
background-repeat: repeat-x;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
left: 0;
padding-top: 5px;
margin-left: 4px;
margin-top: 0px;
}
label.iPhoneCheckLabelOn span {
padding-left: 4px;
}
label.iPhoneCheckLabelOff {
color: #8b8b8b;
background-image: url('images/label-off.png');
background-repeat: repeat-x;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
text-align: right;
margin-right: 4px;
margin-top: 0px;
right: 0;
}
label.iPhoneCheckLabelOff span {
padding-right: 4px;
}
div.iPhoneCheckBorderOff {
position: absolute;
width: 4px;
height: 100%;
background-image: url('images/border-off.png');
background-repeat: no-repeat;
}
.iPhoneCheckHandle {
display: block;
height: 27px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 0;
background-image: url('images/handle-left.png');
background-repeat: no-repeat;
padding-left: 4px;
}
.iPhoneCheckHandleCenter {
position: absolute;
width: 100%;
height: 100%;
background-image: url('images/handle-center.png');
background-repeat: repeat-x;
}
.iPhoneCheckHandleRight {
position: absolute;
height: 100%;
width: 4px;
right: 0px;
background-image: url('images/handle-right.png');
background-repeat: no-repeat;
}

+ 0
- 366
code/html/vendor/checkboxes.js View File

@ -1,366 +0,0 @@
// Generated by CoffeeScript 1.6.2
/*eslint quotes: ["error", "double"]*/
/*eslint-env es6*/
(function() {
var iOSCheckbox, matched, userAgent,
__slice = [].slice;
if ($.browser == null) {
userAgent = navigator.userAgent || "";
jQuery.uaMatch = function(ua) {
var match;
ua = ua.toLowerCase();
match = /(chrome)[ \/]([\w.]+)/.exec(ua) || /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) || [];
return {
browser: match[1] || "",
version: match[2] || "0"
};
};
matched = jQuery.uaMatch(userAgent);
jQuery.browser = {};
if (matched.browser) {
jQuery.browser[matched.browser] = true;
jQuery.browser.version = matched.version;
}
if (jQuery.browser.webkit) {
jQuery.browser.safari = true;
}
}
iOSCheckbox = (function() {
function iOSCheckbox(elem, options) {
var key, opts, value;
this.elem = $(elem);
opts = $.extend({}, iOSCheckbox.defaults, options);
for (key in opts) {
if ({}.hasOwnProperty.call(opts, key)) {
value = opts[key];
this[key] = value;
}
}
this.elem.data(this.dataName, this);
this.wrapCheckboxWithDivs();
this.attachEvents();
this.disableTextSelection();
this.calculateDimensions();
}
iOSCheckbox.prototype.calculateDimensions = function() {
if (this.resizeHandle) {
this.optionallyResize("handle");
}
if (this.resizeContainer) {
this.optionallyResize("container");
}
return this.initialPosition();
};
iOSCheckbox.prototype.isDisabled = function() {
return this.elem.is(":disabled");
};
iOSCheckbox.prototype.wrapCheckboxWithDivs = function() {
this.elem.wrap("<div class='" + this.containerClass + "' />");
this.container = this.elem.parent();
this.offLabel = $("<label class='" + this.labelOffClass + "'>\n <span>" + this.uncheckedLabel + "</span>\n</label>").appendTo(this.container);
this.offSpan = this.offLabel.children("span");
this.onLabel = $("<label class='" + this.labelOnClass + "'>\n <span>" + this.checkedLabel + "</span>\n</label>").appendTo(this.container);
this.onBorder = $("<div class='iPhoneCheckBorderOn'</div>").appendTo(this.container);
this.offBorder = $("<div class='iPhoneCheckBorderOff'</div>").appendTo(this.container);
this.onSpan = this.onLabel.children("span");
this.handle = $("<div class='" + this.handleClass + "'></div>").appendTo(this.container);
this.handleCenter = $("<div class='" + this.handleCenterClass + "'></div>").appendTo(this.handle);
this.handleRight = $("<div class='" + this.handleRightClass + "'></div>").appendTo(this.handle);
return true;
};
iOSCheckbox.prototype.disableTextSelection = function() {
if ($.browser.msie) {
return $([this.handle, this.offLabel, this.onLabel, this.container]).attr("unselectable", "on");
}
};
iOSCheckbox.prototype._getDimension = function(elem, dimension) {
if ($.fn.actual != null) {
return elem.actual(dimension);
} else {
return elem[dimension]();
}
};
iOSCheckbox.prototype.optionallyResize = function(mode) {
var newWidth, offLabelWidth, offSpan, onLabelWidth, onSpan;
onSpan = this.onLabel.find("span");
onLabelWidth = this._getDimension(onSpan, "width");
onLabelWidth += parseInt(onSpan.css("padding-left"), 10);
offSpan = this.offLabel.find("span");
offLabelWidth = this._getDimension(offSpan, "width");
offLabelWidth += parseInt(offSpan.css("padding-right"), 10);
if (mode === "container") {
newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;
newWidth += this._getDimension(this.handle, "width") + this.handleMargin;
return this.container.css({
width: newWidth
});
} else {
newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;
this.handleCenter.css({
width: newWidth + 4
});
return this.handle.css({
width: newWidth + 7
});
}
};
iOSCheckbox.prototype.onMouseDown = function(event) {
var x;
event.preventDefault();
if (this.isDisabled()) {
return;
}
x = event.pageX || event.originalEvent.changedTouches[0].pageX;
iOSCheckbox.currentlyClicking = this.handle;
iOSCheckbox.dragStartPosition = x;
return iOSCheckbox.handleLeftOffset = parseInt(this.handle.css("left"), 10) || 0;
};
iOSCheckbox.prototype.onDragMove = function(event, x) {
var newWidth, p;
if (iOSCheckbox.currentlyClicking !== this.handle) {
return;
}
p = (x + iOSCheckbox.handleLeftOffset - iOSCheckbox.dragStartPosition) / this.rightSide;
if (p < 0) {
p = 0;
}
if (p > 1) {
p = 1;
}
newWidth = p * this.rightSide;
this.handle.css({
left: newWidth
});
this.onLabel.css({
width: newWidth + this.handleRadius
});
this.offSpan.css({
marginRight: -newWidth
});
return this.onSpan.css({
marginLeft: -(1 - p) * this.rightSide
});
};
iOSCheckbox.prototype.onDragEnd = function(event, x) {
var p;
if (iOSCheckbox.currentlyClicking !== this.handle) {
return;
}
if (this.isDisabled()) {
return;
}
if (iOSCheckbox.dragging) {
p = (x - iOSCheckbox.dragStartPosition) / this.rightSide;
this.elem.prop("checked", p >= 0.5).change();
} else {
this.elem.prop("checked", !this.elem.prop("checked")).change();
}
iOSCheckbox.currentlyClicking = null;
iOSCheckbox.dragging = null;
if (typeof this.onChange === "function") {
this.onChange(this.elem, this.elem.prop("checked"));
}
return this.didChange();
};
iOSCheckbox.prototype.refresh = function() {
return this.didChange();
};
iOSCheckbox.prototype.didChange = function() {
var newLeft;
if (this.isDisabled()) {
this.container.addClass(this.disabledClass);
return false;
} else {
this.container.removeClass(this.disabledClass);
}
newLeft = this.elem.prop("checked") ? this.rightSide + 2 : 0;
this.handle.animate({
left: newLeft
}, this.duration);
this.onLabel.animate({
width: newLeft + this.handleRadius
}, this.duration);
this.offSpan.animate({
marginRight: - newLeft
}, this.duration);
return this.onSpan.animate({
marginLeft: newLeft - this.rightSide
}, this.duration);
};
iOSCheckbox.prototype.attachEvents = function() {
var localMouseMove, localMouseUp, self;
self = this;
localMouseMove = function(event) {
return self.onGlobalMove.apply(self, arguments);
};
localMouseUp = function(event) {
self.onGlobalUp.apply(self, arguments);
$(document).unbind("mousemove touchmove", localMouseMove);
return $(document).unbind("mouseup touchend", localMouseUp);
};
this.elem.change(function() {
return self.refresh();
});
return this.container.bind("mousedown touchstart", function(event) {
self.onMouseDown.apply(self, arguments);
$(document).bind("mousemove touchmove", localMouseMove);
return $(document).bind("mouseup touchend", localMouseUp);
});
};
iOSCheckbox.prototype.initialPosition = function() {
var containerWidth, offset;
containerWidth = this._getDimension(this.container, "width");
this.offLabel.css({
width: containerWidth - this.containerRadius - 4
});
this.offBorder.css({
left: containerWidth - 4
});
offset = this.containerRadius + 1;
if ($.browser.msie && $.browser.version < 7) {
offset -= 3;
}
this.rightSide = containerWidth - this._getDimension(this.handle, "width") - offset;
if (this.elem.is(":checked")) {
this.handle.css({
left: this.rightSide
});
this.onLabel.css({
width: this.rightSide + this.handleRadius
});
this.offSpan.css({
marginRight: -this.rightSide,
});
} else {
this.onLabel.css({
width: 0
});
this.onSpan.css({
marginLeft: -this.rightSide
});
}
if (this.isDisabled()) {
return this.container.addClass(this.disabledClass);
}
};
iOSCheckbox.prototype.onGlobalMove = function(event) {
var x;
if (!(!this.isDisabled() && iOSCheckbox.currentlyClicking)) {
return;
}
event.preventDefault();
x = event.pageX || event.originalEvent.changedTouches[0].pageX;
if (!iOSCheckbox.dragging && (Math.abs(iOSCheckbox.dragStartPosition - x) > this.dragThreshold)) {
iOSCheckbox.dragging = true;
}
return this.onDragMove(event, x);
};
iOSCheckbox.prototype.onGlobalUp = function(event) {
var x;
if (!iOSCheckbox.currentlyClicking) {
return;
}
event.preventDefault();
x = event.pageX || event.originalEvent.changedTouches[0].pageX;
this.onDragEnd(event, x);
return false;
};
iOSCheckbox.defaults = {
duration: 200,
checkedLabel: "ON",
uncheckedLabel: "OFF",
resizeHandle: true,
resizeContainer: true,
disabledClass: "iPhoneCheckDisabled",
containerClass: "iPhoneCheckContainer",
labelOnClass: "iPhoneCheckLabelOn",
labelOffClass: "iPhoneCheckLabelOff",
handleClass: "iPhoneCheckHandle",
handleCenterClass: "iPhoneCheckHandleCenter",
handleRightClass: "iPhoneCheckHandleRight",
dragThreshold: 5,
handleMargin: 15,
handleRadius: 4,
containerRadius: 5,
dataName: "iphoneStyle",
onChange: function() {}
};
return iOSCheckbox;
})();
$.iphoneStyle = this.iOSCheckbox = iOSCheckbox;
$.fn.iphoneStyle = function() {
var args, checkbox, dataName, existingControl, method, params, _i, _len, _ref, _ref1, _ref2, _ref3;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
dataName = (_ref = (_ref1 = args[0]) != null ? _ref1.dataName : void 0) != null ? _ref : iOSCheckbox.defaults.dataName;
_ref2 = this.filter(":checkbox");
for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
checkbox = _ref2[_i];
existingControl = $(checkbox).data(dataName);
if (existingControl != null) {
method = args[0], params = 2 <= args.length ? __slice.call(args, 1) : [];
if ((_ref3 = existingControl[method]) != null) {
_ref3.apply(existingControl, params);
}
} else {
new iOSCheckbox(checkbox, args[0]);
}
}
return this;
};
$.fn.iOSCheckbox = function(options) {
var opts;
if (options == null) {
options = {};
}
opts = $.extend({}, options, {
resizeHandle: false,
disabledClass: "iOSCheckDisabled",
containerClass: "iOSCheckContainer",
labelOnClass: "iOSCheckLabelOn",
labelOffClass: "iOSCheckLabelOff",
handleClass: "iOSCheckHandle",
handleCenterClass: "iOSCheckHandleCenter",
handleRightClass: "iOSCheckHandleRight",
dataName: "iOSCheckbox"
});
return this.iphoneStyle(opts);
};
}).call(this);

BIN
code/html/vendor/images/border-off.png View File

Before After
Width: 4  |  Height: 27  |  Size: 308 B

BIN
code/html/vendor/images/border-on.png View File

Before After
Width: 4  |  Height: 27  |  Size: 302 B

BIN
code/html/vendor/images/handle-center.png View File

Before After
Width: 4  |  Height: 27  |  Size: 190 B

BIN
code/html/vendor/images/handle-left.png View File

Before After
Width: 4  |  Height: 27  |  Size: 264 B

BIN
code/html/vendor/images/handle-right.png View File

Before After
Width: 4  |  Height: 27  |  Size: 264 B

BIN
code/html/vendor/images/label-off.png View File

Before After
Width: 4  |  Height: 27  |  Size: 211 B

BIN
code/html/vendor/images/label-on.png View File

Before After
Width: 4  |  Height: 27  |  Size: 214 B

Loading…
Cancel
Save