Skip to content

Commit

Permalink
2.2.8
Browse files Browse the repository at this point in the history 
- prettyCheckboxes2.js is merged with grisel.js and
prettyCheckboxes2.css with grisel.css
- Fixed page rendering in 'Show selected' mode
  • Loading branch information
@ukrbublik
ukrbublik committed Mar 16, 2016
1 parent 514d704 commit 48a7772
Show file tree
Hide file tree
Showing 11 changed files with 179 additions and 175 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,9 @@ to open, Esc to close. Popup will autoclose when looses focus.</li>
<ul>
<li>Added bower.json.</li>
</ul>
<li><b>2016-03-16 - v2.2.8</b><br>
<ul>
<li>prettyCheckboxes2.js is merged with grisel.js and prettyCheckboxes2.css with grisel.css</li>
<li>Fixed page rendering in 'Show selected' mode</li>
</ul>
</ul>
2 changes: 0 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ Customizable. Has cool animations. Useful for big list of options.
```
<script src="vendor/jquery-1.11.3.js"></script>
<script src="vendor/jquery.easing.1.3.2.js"></script>
<script src="src/js/prettyCheckboxes2.js"></script>
<link type="text/css" rel="stylesheet" href="src/css/prettyCheckboxes2.css" />
<script src="src/js/grisel.js"></script>
<link type="text/css" rel="stylesheet" href="src/css/grisel.css" />
```
Expand Down
2 changes: 0 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
"name": "grisel",
"description": "jQuery-based custom select control, represents options as paginated grid, features search and filter by first letter.",
"main": [
"src/css/prettyCheckboxes2.css",
"src/css/grisel.css",
"src/js/prettyCheckboxes2.js",
"src/js/grisel.js",
"src/images/arrow-down.gif",
"src/images/arrow-up.gif",
Expand Down
2 changes: 0 additions & 2 deletions demo/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
<title>grisel - Demo</title>
<script src="../vendor/jquery-1.11.3.js"></script>
<script src="../vendor/jquery.easing.1.3.2.js"></script>
<script src="../src/js/prettyCheckboxes2.js"></script>
<link type="text/css" rel="stylesheet" href="../src/css/prettyCheckboxes2.css" />
<script src="../src/js/grisel.js"></script>
<link type="text/css" rel="stylesheet" href="../src/css/grisel.css" />
<script src="grisel_setup_demo.js"></script>
Expand Down
2 changes: 0 additions & 2 deletions demo/demo_domplus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
<title>grisel - Demo for dom-plus.ua</title>
<script src="../vendor/jquery-1.11.3.js"></script>
<script src="../vendor/jquery.easing.1.3.2.js"></script>
<script src="../src/js/prettyCheckboxes2.js"></script>
<link type="text/css" rel="stylesheet" href="../src/css/prettyCheckboxes2.css" />
<script src="../src/js/grisel.js"></script>
<link type="text/css" rel="stylesheet" href="../src/css/grisel.css" />
<script src="grisel_setup_domplus.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion grisel.jquery.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "grisel",
"version": "2.2.7",
"version": "2.2.8",
"title": "grisel (GRId_SELect)",
"description": "jQuery-based custom select control, represents options as paginated grid, features search and filter by first letter.",
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "grisel",
"version": "2.2.7",
"version": "2.2.8",
"title": "grisel (GRId_SELect)",
"description": "jQuery-based custom select control, represents options as paginated grid, features search and filter by first letter.",
"keywords": [
Expand Down
54 changes: 53 additions & 1 deletion src/css/grisel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,66 @@
*
* Requires: browser with CSS3 support (for flex), jQuery, jQuery easing plugin
*
* @version 2.2.7
* @version 2.2.8
* @homepage https://github.com/ukrbublik/grisel
* @author ukrbublik
* @license MIT
*
* Copyright (c) 2015 Oblogin Denis <ukrbublik>
*/


/* prettyCheckboxes2 */
.prch2-label.prch2-type-checkbox span.prch2-holder {
height: 100px;
background: url(../images/checkbox.png) 0 -0px no-repeat;
}
.prch2-label.prch2-type-radio span.prch2-holder {
height: 100px;
background: url(../images/radio.png) 0 -1px no-repeat;
}
.prch2-label.prch2-type-checkbox:hover span.prch2-holder,
.prch2-label.prch2-type-radio:hover span.prch2-holder {
top: -33px !important;
}
.prch2-label.prch2-checked span.prch2-holder,
.prch2-label.prch2-checked:hover span.prch2-holder {
top: -66px !important;
}
.prch2-label.prch2-list {
float: left;
clear: left;
margin: 0 0 5px 0;
}
.prch2-label.prch2-inline {
float: left;
margin: 0 10px 0 -5px;
line-height: 28px;
font-size: 15px;
color: #4e4e4e;
font-weight: 100;
}
.prch2-hidden {
position: absolute;
left: -10000px;
}
/* defaiult class prch2 */
.prch2-label.prch2 .prch2-holderWrap {
display: block;
float: left;
position: relative;
margin-top: -1px;
margin-right: 8px;
overflow: hidden;
}
.prch2-label.prch2 .prch2-holder {
display: block;
position: absolute;
top: 0;
left: 0;
}


/* common */
.grisel-select,
.grisel-popup {
Expand Down
48 changes: 0 additions & 48 deletions src/css/prettyCheckboxes2.css
View file

This file was deleted.

120 changes: 119 additions & 1 deletion src/js/grisel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*
* Requires: browser with CSS3 support (for flex), jQuery, jQuery easing plugin
*
* @version 2.2.7
* @version 2.2.8
* @homepage https://github.com/ukrbublik/grisel
* @author ukrbublik
* @license MIT
Expand All @@ -34,6 +34,7 @@
*
*/


//
// Class grisel
//
Expand Down Expand Up @@ -2279,6 +2280,7 @@ grisel.prototype.onSelectItem = function(info, $chkbx) {
grisel.prototype.onSelectionChanged = function() {
if(this.getFilterMode() == 'sel') {
this.mFilterItemsBySelected();
this.doRenderPagesList();
var page = this.currPage;
//fix page
if(!this.canGoToPage(page)) {
Expand Down Expand Up @@ -2362,3 +2364,119 @@ jQuery( document ).ready(function() {
}
});



/* ------------------------------------------------------------------------
prettyCheckboxes
Developped By: Stephane Caron (http://www.no-margin-for-errors.com)
Inspired By: All the non user friendly custom checkboxes solutions ;)
Version: 1.1
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */

/**
* Version 1.2 mod by ukrbublik
* - Don't use original <label>, create new <div> instead (to use focus on it)
* - Using namespace prefix 'prch2-' for css
*/

jQuery.fn.prettyCheckboxes2 = function(settings) {
settings = jQuery.extend({
checkboxWidth: 30,
checkboxHeight: 30,
className : 'prch2',
display: 'inline', //'inline', 'list'
}, settings);

$(this).each(function() {
var $input = $(this);
var _id = $input.attr('id');
var _name = $input.attr('name');
var _type = $input.attr('type');

$realLabel = $('label[for="'+_id+'"]:eq(0)');

// Create custom labal
$label = $("<div class='prch2-label'><span class='prch2-holderWrap'><span class='prch2-holder'></span></span><span class='prch2-text-wrapper'><span class='prch2-text'></span></span></div>").insertAfter($realLabel);
$label.find('.prch2-text').text( $realLabel.text() );
if($realLabel.attr('_class'))
$label.addClass($realLabel.attr('_class'));

// If the checkbox is checked, display it as checked
if($input.is(':checked'))
$label.addClass('prch2-checked');
// Assign the classes on the label
$label.addClass(settings.className).addClass('prch2-type-'+_type).addClass('prch2-'+settings.display);

// Assign the dimensions to the checkbox display
$label.find('span.prch2-holderWrap').width(settings.checkboxWidth).height(settings.checkboxHeight).css({
'min-height': settings.checkboxHeight,
'max-height': settings.checkboxHeight,
'min-width': settings.checkboxWidth,
'max-width': settings.checkboxWidth,
});
$label.find('span.prch2-holder').width(settings.checkboxWidth);

// Hide the checkbox & real label
$input.addClass('prch2-hidden');
$realLabel.addClass('prch2-hidden');
$input.attr('tabindex', -1);

//Sync: label -> input
$label.bind('click', function() {
var $label = $(this);
var $realLabel = $label.prev('label');
var _for = $realLabel.attr('for');
var $input = $('input#' + _for);
var _name = $input.attr('name');
var _id = $input.attr('id');

//trigger click for input
$input.trigger('click');

//change .prch2-checked for custom label
if($input.is(':checkbox')) {
$label.toggleClass('prch2-checked', $input.is(':checked'));
} else {
var $inputs = $('input[name="'+_name+'"]');
$inputs.each(function() {
var $input = $(this);
var _id = $input.attr('id');
var $realLabel = $('label[for="' +_id+'"]');
var $label = $realLabel.next('.prch2-label');
$label.removeClass('prch2-checked');
});
$label.addClass('prch2-checked');
};
});

//Sync: input -> label
var $inputs = $('input[name="'+_name+'"]');
$input.change(function() {
var $input = $(this);
var _id = $input.attr('id');
var $realLabel = $('label[for="' +_id+'"]');
var $label = $realLabel.next('.prch2-label');
var _name = $input.attr('name');

//change .prch2-checked for custom label
if($input.is(':checkbox')) {
$label.toggleClass('prch2-checked', $input.is(':checked'));
} else {
var $inputs = $('input[name="'+_name+'"]');
$inputs.each(function() {
var $input = $(this);
var _id = $input.attr('id');
var $realLabel = $('label[for="' +_id+'"]');
var $label = $realLabel.next('.prch2-label');
$label.removeClass('prch2-checked');
});
$label.addClass('prch2-checked');
};
});

});
};
Loading

0 comments on commit 48a7772

Please sign in to comment.