TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes #995 - Adds sorting to repeater

This commit is contained in:
Samuel Georges 2015-03-23 20:03:37 +11:00
parent 6bb1ee3b9a
commit ad6447f5f2
5 changed files with 116 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
modules/backend/formwidgets/repeater/assets/css/repeater.css
View File

@ -1,13 +1,52 @@
.field-repeater {
padding-top: 5px;
}
.field-repeater .field-repeater-item {
.field-repeater ul.field-repeater-items,
.field-repeater li.field-repeater-item {
padding: 0;
margin: 0;
list-style: none;
}
.field-repeater ul.field-repeater-items > li.dragged {
opacity: .7;
position: absolute;
padding-top: 15px;
padding-right: 15px;
z-index: 2000;
background-color: #ffffff;
border: 1px dashed #dbdee0;
}
.field-repeater ul.field-repeater-items > li.dragged .repeater-item-remove {
opacity: 0;
}
.field-repeater ul.field-repeater-items > li.placeholder {
display: block;
position: relative;
height: 25px;
margin-bottom: 5px;
}
.field-repeater ul.field-repeater-items > li.placeholder:before {
display: block;
position: absolute;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
content: "\f054";
color: #d35714;
left: -10px;
top: 8px;
z-index: 2000;
}
.field-repeater li.field-repeater-item {
position: relative;
margin-left: 5px;
padding-left: 15px;
border-left: 1px solid #dbdee0;
}
.field-repeater .field-repeater-item:before {
.field-repeater li.field-repeater-item:before {
color: #bdc3c7;
font-family: FontAwesome;
font-weight: normal;
@ -21,11 +60,11 @@
left: -4px;
top: -2px;
}
.field-repeater .field-repeater-item .field-repeater-form {
.field-repeater li.field-repeater-item .field-repeater-form {
position: relative;
top: -7px;
}
.field-repeater .field-repeater-item .repeater-item-handle {
.field-repeater li.field-repeater-item .repeater-item-handle {
position: absolute;
top: -6px;
left: -10px;
@ -33,28 +72,29 @@
background: #f9f9f9;
cursor: move;
opacity: 0;
border-radius: 999px;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.field-repeater .field-repeater-item .repeater-item-handle:hover {
.field-repeater li.field-repeater-item .repeater-item-handle:hover {
color: #999;
}
.field-repeater .field-repeater-item .repeater-item-remove {
.field-repeater li.field-repeater-item .repeater-item-remove {
position: absolute;
top: -10px;
right: 0;
z-index: 90;
}
.field-repeater .field-repeater-item .repeater-item-handle,
.field-repeater .field-repeater-item .repeater-item-remove {
.field-repeater li.field-repeater-item .repeater-item-handle,
.field-repeater li.field-repeater-item .repeater-item-remove {
width: 20px;
height: 20px;
text-align: center;
}
.field-repeater .field-repeater-item:hover .repeater-item-handle,
.field-repeater .field-repeater-item:active .repeater-item-handle,
.field-repeater .field-repeater-item:hover .repeater-item-remove,
.field-repeater .field-repeater-item:active .repeater-item-remove {
.field-repeater li.field-repeater-item:hover .repeater-item-handle,
.field-repeater li.field-repeater-item:active .repeater-item-handle,
.field-repeater li.field-repeater-item:hover .repeater-item-remove,
.field-repeater li.field-repeater-item:active .repeater-item-remove {
opacity: 1;
}
.field-repeater .field-repeater-add-item {

26
modules/backend/formwidgets/repeater/assets/js/repeater.js
View File

@ -30,14 +30,24 @@
}
Repeater.prototype.init = function() {
// Public properties
this.something = false
// Init with no arguments
this.bindSorting()
}
Repeater.prototype.someFunction = function() {
// Do stuff
Repeater.prototype.bindSorting = function() {
var sortableOptions = {
// useAnimation: true,
handle: '.repeater-item-handle',
nested: false
}
$('ul.field-repeater-items', this.$el).sortable(sortableOptions)
}
Repeater.prototype.unbind = function() {
this.$el.find('ul.field-repeater-items').sortable('destroy')
this.$el.removeData('oc.repeater')
}
// FIELD REPEATER PLUGIN DEFINITION
@ -55,7 +65,7 @@
if (typeof option == 'string') result = data[option].apply(data, args)
if (typeof result != 'undefined') return false
})
return result ? result : this
}
@ -72,8 +82,8 @@
// FIELD REPEATER DATA-API
// ===============
$(document).on('click.oc.myplugin', '[data-control="fieldrepeater"]', function() {
$(this).fieldRepeater()
$(document).render(function() {
$('[data-control="fieldrepeater"]').fieldRepeater()
});
}(window.jQuery);

42
modules/backend/formwidgets/repeater/assets/less/repeater.less
View File

@ -4,7 +4,46 @@
padding-top: 5px;
.field-repeater-item {
ul.field-repeater-items,
li.field-repeater-item {
padding: 0;
margin: 0;
list-style: none;
}
ul.field-repeater-items > li {
&.dragged {
opacity: .7;
position: absolute;
padding-top: 15px;
padding-right: 15px;
z-index: 2000;
background-color: @body-bg;
border: 1px dashed #dbdee0;
.repeater-item-remove {
opacity: 0;
}
}
&.placeholder {
display: block;
position: relative;
height: 25px;
margin-bottom: 5px;
&:before {
display: block;
position: absolute;
.icon(@chevron-right);
color: #d35714;
left: -10px;
top: 8px;
z-index: 2000;
}
}
}
li.field-repeater-item {
position: relative;
margin-left: 5px;
padding-left: 15px;
@ -32,6 +71,7 @@
background: @color-body-bg;
cursor: move;
opacity: 0;
border-radius: 999px;
.transition(~'opacity 0.5s');
&:hover {
color: #999;

6
modules/backend/formwidgets/repeater/partials/_repeater.htm
View File

@ -1,13 +1,13 @@
<div class="field-repeater">
<div class="field-repeater" data-control="fieldrepeater">
<div id="<?= $this->getId('items') ?>" class="field-repeater-items">
<ul id="<?= $this->getId('items') ?>" class="field-repeater-items">
<?php foreach ($this->formWidgets as $index => $widget): ?>
<?= $this->makePartial('repeater_item', [
'widget' => $widget,
'indexValue' => $index
]) ?>
<?php endforeach ?>
</div>
</ul>
<div class="field-repeater-add-item loading-indicator-container indicator-center">
<a

4
modules/backend/formwidgets/repeater/partials/_repeater_item.htm
View File

@ -1,4 +1,4 @@
<div class="field-repeater-item">
<li class="field-repeater-item">
<div class="repeater-item-handle">
<i class="icon-bars"></i>
@ -25,4 +25,4 @@
<input type="hidden" name="<?= $indexName ?>" value="<?= $indexValue ?>" />
</div>
</li>