Skip to content

Commit

Permalink
Added jquery flatelements plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@andystrobel
andystrobel committed Apr 27, 2014
1 parent 094bfaf commit d1ea05e
Show file tree
Hide file tree
Showing 10 changed files with 542 additions and 0 deletions.
185 changes: 185 additions & 0 deletions css/flatelements.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
/*
/* Checkboxes (Slider)
/* --------------------------------------------------
*/
.onoffswitch {
position: relative;
width: 33px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
margin: 1px 5px 0 0;
float: left;
}

.onoffswitch-checkbox {
display: none;
}

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 30px;
}

.onoffswitch-inner {
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.2s ease-in 0s;
-webkit-transition: margin 0.2s ease-in 0s;
-o-transition: margin 0.2s ease-in 0s;
transition: margin 0.2s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left;
width: 50%;
height: 16px;
padding: 0;
line-height: 16px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #428bca;
color: #FFFFFF;
}

.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #CCCCCC;
color: #999999;
text-align: right;
}

.onoffswitch-switch {
width: 12px;
height: 12px;
margin: 2px;
background: #FFFFFF;
border-radius: 30px;
position: absolute;
top: 0;
bottom: 0;
right: 17px;
-moz-transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

.onoffswitch-label {
cursor: pointer;
font-weight: normal;
}

.onoffswitch-clear {
clear: both;
}


/*
/* Checkboxes (Slider)
/* --------------------------------------------------
*/

.regular-checkbox-container {
padding-left: 0;
}

.regular-checkbox {
display: none;
}

.regular-checkbox + .regular-checkbox-box {
background-color: none;
border: 2px solid #ccc;
padding: 7px;
border-radius: 3px;
display: inline-block;
position: relative;
float: left;
margin: 0 5px 5px 0;
}

.regular-checkbox:checked + .regular-checkbox-box {
border: 2px solid #428bca;
background: #428bca;
color: white;
}

.regular-checkbox:checked + .regular-checkbox-box:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: -3px;
left: 1px;
color: white;
-webkit-transition: margin 0.2s ease-in 0s;
}

.regular-checkbox-clear {
clear: both;
}

/*
/* Checkboxes (Slider)
/* --------------------------------------------------
*/
.regular-radio-container {
padding-left: 0;
}

.regular-radio {
display: none;
}

.regular-radio + .regular-radio-button {
-webkit-appearance: none;
background-color: none;
border: 2px solid #ccc;
padding: 7px;
border-radius: 50px;
display: inline-block;
position: relative;
margin-right: 5px;
float: left;
}

.regular-radio:checked + .regular-radio-button:after {
content: ' ';
width: 8px;
height: 8px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #428bca;
text-shadow: 0px;
left: 3px;
font-size: 32px;
}

.regular-radio:checked + .regular-radio-button {
background-color: none;
color: #99a1a7;
border: 2px solid #ccc;
margin-right: 5px;
}
143 changes: 143 additions & 0 deletions js/jquery.flatelements.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/*
* FlatElements v0.2 by @andystrobel
* Copyright 2014 HumHub
*
* Modified standard checkboxes and radio buttons
*/

//
// create closure
//
(function ($) {
//
// plugin definition
//
$.fn.flatelements = function (options) {

// build main options before element iteration
var opts = $.extend({}, $.fn.flatelements.defaults, options);

// iterate and reformat each matched element
return this.each(function () {

// save object in a variable
$this = $(this);

// modify elements for checkboxes
if ($this.attr('type') == "checkbox") {

// make checkbox to a slider element
if ($this.attr('data-view') == 'slider') {

// check if the standard bootstrap container <div> and <label> exists
if ($this.parent().parent().attr('class') == "checkbox" && $this.parent().prop("tagName") == "LABEL") {

// remove existing container class
$this.parent().parent().removeClass('checkbox');

// add new container class
$this.parent().parent().addClass('onoffswitch');

// add new input class
$this.addClass('onoffswitch-checkbox');

// save label text
var _label = $.trim($this.parent().parent().text());

// remove label text
$this.parent().html($this.parent().find('input'));

// build new slider construct
var _newHTML = '<label class="onoffswitch-label" for="' + $this.attr('id') + '">' +
'<div class="onoffswitch-inner"></div>' +
'<div class="onoffswitch-switch"></div>' +
'</label>';

// add new slider construckt
$this.parent().append(_newHTML);

// build closing slider construct
_newHTML = '<label class="onoffswitch-label" for="' + $this.attr('id') + '">' + _label + '</label>' +
'<div class="onoffswitch-clear"></div>';

// add closing slider contruct
$this.parent().parent().after(_newHTML);

// remove the enclosing label tag
$this.parent().replaceWith($this.parent().html());

}


} else {

// check if the standard bootstrap container <div> exists
if ($this.parent().parent().attr('class') == "checkbox") {

// add new class
$this.parent().parent().addClass('regular-checkbox-container');

// add a new <div> at the end to clear floats
$this.parent().parent().append('<div class="regular-checkbox-clear"></div>');
}

// check if the standard bootstrap <label> exists
if ($this.parent().prop("tagName") == "LABEL") {

// if there is no assignment
if ($this.parent().attr('for') == undefined) {

// assign label to checkbox
$this.parent().attr('for', $this.attr('id'));

// add new checkbox element
$this.parent().append('<div class="regular-checkbox-box"></div>');
}
}

// add new class to checkbox
$this.addClass('regular-checkbox');
}

// modify elements for radio buttons
} else if ($this.attr('type') == "radio") {

// check if the standard bootstrap container <div> exists
if ($this.parent().parent().attr('class') == "radio") {

// add new class
$this.parent().parent().addClass('regular-radio-container');

}

// check if the standard bootstrap <label> exists
if ($this.parent().prop("tagName") == "LABEL") {

// if there is no assignment
if ($this.parent().attr('for') == undefined) {

// assign label to radio element
$this.parent().attr('for', $this.attr('id'));

// add new radio element
$this.parent().append('<div class="regular-radio-button"></div>');
}
}

// add new class to radio element
$this.addClass('regular-radio');

}

});
};


//
// plugin defaults
//
$.fn.flatelements.defaults = {};
//
// end of closure
//
})(jQuery);
4 changes: 4 additions & 0 deletions protected/modules_core/wall/views/wallEntry.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,9 @@

<?php if ($mode != "activity") : ?>
</div>
<script type="text/javascript">
// Replace the standard checkbox and radio buttons
$('#wallEntry_<?php echo $entry->id; ?>').find(':checkbox, :radio').flatelements();
</script>
<?php endif; ?>

2 changes: 2 additions & 0 deletions protected/views/layouts/head.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<link href="<?php echo Yii::app()->baseUrl; ?>/css/style.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/css/bootstrap-wysihtml5.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/css/flatelements.css" rel="stylesheet">
<!-- end: CSS -->


Expand All @@ -32,6 +33,7 @@
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/bootstrap3-wysihtml5.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.flatelements.js"></script>

<!-- Global app functions -->
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/app.js"></script>
Expand Down
4 changes: 4 additions & 0 deletions protected/views/layouts/main.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,13 @@ class="icon-signout"></i> <?php echo Yii::t('UserModule.base', 'Logout'); ?>

<script type="text/javascript">

// Replace the standard checkbox and radio buttons
$('body').find(':checkbox, :radio').flatelements();

$(document).ready(function () {



// Open the notification menu
$('#icon-notifications').click(function () {

Expand Down
Loading

0 comments on commit d1ea05e

Please sign in to comment.