Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/omcrn/yii2-i18ncontent
Browse files Browse the repository at this point in the history
  • Loading branch information
@thecodeholic
thecodeholic committed Feb 13, 2017
2 parents ac9a593 + 7fcc395 commit afc7d0a
Show file tree
Hide file tree
Showing 34 changed files with 924 additions and 79 deletions.
228 changes: 208 additions & 20 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,33 +70,33 @@
.i18ncontent-table-wrapper td.i18n-language-translations .label {
margin-right: 5px;
}
.togglebutton {
.i18ncontent-table-wrapper .togglebutton {
vertical-align: middle;
}
.togglebutton,
.togglebutton label,
.togglebutton input,
.togglebutton .toggle {
.i18ncontent-table-wrapper .togglebutton,
.i18ncontent-table-wrapper .togglebutton label,
.i18ncontent-table-wrapper .togglebutton input,
.i18ncontent-table-wrapper .togglebutton .toggle {
user-select: none;
}
.togglebutton label {
.i18ncontent-table-wrapper .togglebutton label {
cursor: pointer;
color: rgba(0, 0, 0, 0.26);
}
.togglebutton label:focus {
.i18ncontent-table-wrapper .togglebutton label:focus {
outline: 0;
}
.togglebutton label input[type=checkbox] {
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
display: none;
}
.togglebutton label .toggle {
.i18ncontent-table-wrapper .togglebutton label .toggle {
text-align: left;
}
.togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled] + .toggle {
.i18ncontent-table-wrapper .togglebutton label .toggle,
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox][disabled] + .toggle {
content: "";
display: inline-block;
width: 30px;
Expand All @@ -107,7 +107,7 @@
transition: background 0.3s ease;
vertical-align: middle;
}
.togglebutton label .toggle:after {
.i18ncontent-table-wrapper .togglebutton label .toggle:after {
content: "";
display: inline-block;
width: 20px;
Expand All @@ -120,23 +120,211 @@
top: -2px;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
.togglebutton label input[type=checkbox][disabled] + .toggle:after,
.togglebutton label input[type=checkbox][disabled]:checked + .toggle:after {
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox][disabled] + .toggle:after,
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox][disabled]:checked + .toggle:after {
background-color: #BDBDBD;
}
.togglebutton label input[type=checkbox] + .toggle:active:after,
.togglebutton label input[type=checkbox][disabled] + .toggle:active:after {
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox] + .toggle:active:after,
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox][disabled] + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
.togglebutton label input[type=checkbox]:checked + .toggle:after {
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox]:checked + .toggle:after {
left: 15px;
}
.togglebutton label input[type=checkbox]:checked + .toggle {
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox]:checked + .toggle {
background-color: rgba(60, 141, 188, 0.5);
}
.togglebutton label input[type=checkbox]:checked + .toggle:after {
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox]:checked + .toggle:after {
background-color: #3c8dbc;
}
.togglebutton label input[type=checkbox]:checked + .toggle:active:after {
.i18ncontent-table-wrapper .togglebutton label input[type=checkbox]:checked + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(60, 141, 188, 0.1);
}
.i18ncontent-table-wrapper .om-checkbox label,
.i18ncontent-form .om-checkbox label {
font-size: 16px;
line-height: 1.42857143;
font-weight: 400;
}
.i18ncontent-table-wrapper .om-checkbox input[type=checkbox],
.i18ncontent-form .om-checkbox input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.i18ncontent-table-wrapper .om-checkbox .om-checkbox-material,
.i18ncontent-form .om-checkbox .om-checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
}
.i18ncontent-table-wrapper .om-checkbox .om-checkbox-material .check,
.i18ncontent-form .om-checkbox .om-checkbox-material .check {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(0, 0, 0, 0.54);
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.i18ncontent-table-wrapper .om-checkbox .om-checkbox-material .check:before,
.i18ncontent-form .om-checkbox .om-checkbox-material .check:before {
position: absolute;
content: "";
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
animation: checkbox-off;
-webkit-animation: checkbox-off;
}
.i18ncontent-table-wrapper .om-checkbox .om-checkbox-material:before,
.i18ncontent-form .om-checkbox .om-checkbox-material:before {
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0, 0, 0, 0.84);
height: 20px;
width: 20px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(2.3, 2.3, 1);
-webkit-transform: scale3d(2.3, 2.3, 1);
}
.i18ncontent-table-wrapper .om-checkbox input[type=checkbox]:checked + .om-checkbox-material .check:before,
.i18ncontent-form .om-checkbox input[type=checkbox]:checked + .om-checkbox-material .check:before {
color: #009688;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
animation: checkbox-on 0.3s forwards;
-webkit-animation: checkbox-on 0.3s forwards;
}
@keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@-webkit-keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
50% {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
51% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0 0 10px inset;
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0 0 0 inset;
}
}
@-webkit-keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
50% {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
51% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0 0 10px inset;
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0 0 0 inset;
}
}
28 changes: 27 additions & 1 deletion assets/js/i18nContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
(function ($) {
var I18nContent = function () {
this.$toggleBtn = $('.togglebutton > label > input');

this.$greedView = $('.grid-view');
this.$multipleDeleteButton = $('.delete-multiple');
this.init();
};

Expand All @@ -13,6 +14,7 @@

init: function () {
this.toggleStatus();
this.onDeleteCheckedItems();
},


Expand All @@ -33,6 +35,29 @@
},


onDeleteCheckedItems: function () {
var me = this;
me.$multipleDeleteButton.on('click', function (e) {
e.preventDefault();
var $itemIds, conf, deleteUrl;
$itemIds = me.$greedView.yiiGridView('getSelectedRows');
if($itemIds.length < 1){
return;
}
conf = confirm('Are you sure you want to delete this/these item(s)?');
if(conf !== true) return;

deleteUrl = $(this).data('url') || 'delete';
me._post(deleteUrl, {id: $itemIds}).done(function (res) {
if(res.errorMsg){
alert(res.errorMsg);
}
//console.log(res);
});
});
},


_get: function (url, data) {
return $.ajax({
url: url,
Expand All @@ -42,6 +67,7 @@
});
},


_post: function (url, data) {
return $.ajax({
url: url,
Expand Down
Loading

0 comments on commit afc7d0a

Please sign in to comment.