Skip to content

Commit

Permalink
1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
bugfish\bugfishtm committed Aug 18, 2024
1 parent 85d1ebe commit 48ea6ed
Show file tree
Hide file tree
Showing 13 changed files with 1,093 additions and 0 deletions.
14 changes: 14 additions & 0 deletions docs/raw/docs/demo.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Demo
Here you can see a demonstration of the bugfish sortselect jquery plugin! Check the Browsers Console after Submitting to see submitted values!

<form action="" method="post">
<select name="multiselectsortable_1" class="multiselectsortable_1 bugfish_1" multiple>
<option value="7" selected data-deneme="deneme" disabled>Entry 7</option>
<option value="6" selected disabled>Entry 6</option>
<option value="5" disabled>Entry 5</option>
<option value="4" selected>Entry 4</option>
<option value="3" selected>Entry 3</option>
<option value="2" selected>Entry 2</option>
<option value="1" selected>Entry 1</option>
</select>
<input type="submit" class="submit_btn md-button" value="Submit Form"></form>
Binary file added docs/raw/docs/favicon.ico
View file
Binary file not shown.
73 changes: 73 additions & 0 deletions docs/raw/docs/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
## General Information

The **"multiselect-sortable"** jQuery plugin enhances multiple select elements by allowing easy sorting and management of selected options within a dual list box. This updated version includes a **"rid" (Resource Identifier)** parameter to distinguish between different instances of the script on the same webpage. Failing to provide a unique "rid" value for each instance can cause errors or unexpected behavior.

## Additional Libraries

This repository includes both jQuery and jQuery-UI to demonstrate the plugin's functionality. These libraries are provided to streamline the integration process, ensuring developers have the necessary resources readily available. By including these files, we aim to make it easier for developers to get up and running with the plugin quickly.

```html
<script src="./jquery-ui.min.js"></script>
<script src="./jquery.multiselect.sortable.js"></script>
<link rel="stylesheet" href="./jquery.multiselect.sortable.js.css">
```

## Implementation Steps

1. **Load the necessary jQuery libraries:**

```html
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>
```

2. **Load the multiselect-sortable plugin's JavaScript and CSS files:**

```html
<script src="assets/js/jquery.multiselect.sortable.js"></script>
<link rel="stylesheet" href="assets/css/jquery.multiselect.sortable.js.css">
```

3. **Add the `multiselectsortable` class to your multiple select element and define pre-selected options using the `selected` attribute. Ensure you provide a unique `rid` value for each instance:**

```html
<!-- Example 1 -->
<select name="multiselectsortable" class="multiselectsortable demo multiselectsortable-1" multiple data-rid="instance-1">
<!-- Options here... -->
</select>

<!-- Example 2 -->
<select name="multiselectsortable" class="multiselectsortable demo multiselectsortable-2" multiple data-rid="instance-2">
<!-- Options here... -->
</select>

<!-- Example 3 -->
<select name="multiselectsortable" class="multiselectsortable demo multiselectsortable-3" multiple data-rid="instance-3">
<!-- Options here... -->
</select>
```

4. **Call the function on the select element to activate the plugin, ensuring you pass the `rid` parameter for each instance:**

```javascript
jQuery(function($){
// Example 1
$('.multiselectsortable-1').bugfish_sortselect({
rid: 'instance-1'
});
});

jQuery(function($){
// Example 2
$('.multiselectsortable-2').bugfish_sortselect({
rid: 'instance-2'
});
});

jQuery(function($){
// Example 3
$('.multiselectsortable-3').bugfish_sortselect({
rid: 'instance-3'
});
});
```
26 changes: 26 additions & 0 deletions docs/raw/docs/javascripts/extra.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll('a[href^="http"]');
links.forEach(link => {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener');
});
});

jQuery(function($){
$('.multiselectsortable_1').bugfish_sortselect({
selectable:{
title:'Disabled'
},
selection :{
title:'Selected'
},
rid: 31
});

$('.submit_btn').on('click',function(){
var a = $('.bugfish_1').val()
console.log(a)
return false;
})

})
2 changes: 2 additions & 0 deletions docs/raw/docs/javascripts/jq.3.6.min.js
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions docs/raw/docs/javascripts/jquery-ui.min.js
View file

Large diffs are not rendered by default.

174 changes: 174 additions & 0 deletions docs/raw/docs/javascripts/jquery.multiselect.sortable.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
/*
Hasan Yüksektepe <hayatikodla.net>
Further Developed by Bugfish <www.bugfish.eu>
Version : 1.0.0
bugfish-jquery-sortselect
*/
(function($){

$.fn.bugfish_sortselect = function(options){

var defaults = {
selectable:{
title :'<b>Inaktiv</b>',
sortable:true
},
selection :{
title :'<b>Aktiv</b>',
sortable:true
},
reverse :true,
rid :10
};

var me = this;

var select_name = me.attr('name');
var classes = $(me).attr('class');

var select = document.createElement('select');
select.setAttribute('multiple', '');
select.setAttribute('name', select_name+'[]');
select.setAttribute('class', classes);
select.setAttribute('style', "display:none");

var select_data = $(me).data();
$.each(select_data, function(i, e){
select.setAttribute('data-'+i, e);
})

var settings = $.extend(true, defaults, options);
var parent = this.parent();

$(me).attr('class', '');
this.addClass('multiselect_sortable_hide');
$(me).prop('disabled', true);

var selectable = '';
var selection = '';
$.each($(' option', me), function(i, e){

var name = $(e).html();
var value = $(e).attr('value');
var selected = $(e).attr('selected');
var disabled = $(e).attr('disabled');
var data = $(e).data();
var element_data_list = '';
var create_id = 'id'+Math.floor(Math.random()*999);

$(e).attr('data-unit_id', create_id)

$.each(data, function(i, e){
element_data_list += 'data-'+i+'="'+e+'"';
})

if(selected!=undefined){
selection += '<li class="select_li_'+defaults.rid+' '+(disabled?'disabled':'')+'" data-uniq_id="'+create_id+'" data-name="'+name+'" data-value="'+value+'" '+element_data_list+'>'+name+'</li>';
}
else{
selectable += '<li class="select_li_'+defaults.rid+' '+(disabled?'disabled':'')+'" data-uniq_id="'+create_id+'" data-name="'+name+'" data-value="'+value+'" '+element_data_list+'>'+name+'</li>';
}
});

if(defaults.reverse==false){
var content = `
<div class="multiselect_sortable_content multiselect_sortable_content_`+defaults.rid+`">
<div class="multiselect_sortable_content_selection multiselect_sortable_content_selection_`+defaults.rid+`">
<div class="selection_title_`+defaults.rid+`">${settings.selection.title}</div>
<ul class="selection_content selection_content_`+defaults.rid+` sortable sortable_`+defaults.rid+`">
${selection}
</ul>
</div>
<div class="multiselect_sortable_content_selectable_`+defaults.rid+`">
<div class="selectable_title_`+defaults.rid+`">${settings.selectable.title}</div>
<ul class="selectable_content_`+defaults.rid+`">
${selectable}
</ul>
</div>
</div>
`;
}
else{
var content = `
<div class="multiselect_sortable_content multiselect_sortable_content_`+defaults.rid+`">
<div class="multiselect_sortable_content_selectable multiselect_sortable_content_selectable_`+defaults.rid+`">
<div class="selectable_title_`+defaults.rid+`">${settings.selectable.title}</div>
<ul class="selectable_content selectable_content_`+defaults.rid+`">
${selectable}
</ul>
</div>
<div class="multiselect_sortable_content_selection multiselect_sortable_content_selection_`+defaults.rid+`">
<div class="selection_title_`+defaults.rid+`">${settings.selection.title}</div>
<ul class="selection_content selection_content_`+defaults.rid+` sortable sortable_`+defaults.rid+`">
${selection}
</ul>
</div>
</div>
`;
}


$(parent).append(content)

$(document).on('click', '.selectable_content_'+defaults.rid+' .select_li_'+defaults.rid+':not(.disabled)', function(){
const html = $(this)[0].outerHTML;
$('.selection_content_'+defaults.rid+'').append(html);
$(this).remove();
sortable_selectbox();
});

$(document).on('click', '.selection_content_'+defaults.rid+' .select_li_'+defaults.rid+':not(.disabled)', function(){
var html = $(this)[0].outerHTML;
$('.selectable_content_'+defaults.rid+'').append(html);
$(this).remove();
sortable_selectbox();
});

if(defaults.selectable.sortable==true){
$(".sortable_"+defaults.rid+"").sortable({
connectWith:"ul",
axis :'y',
start :function(e){
sortable_selectbox();
},
change :function(e){
sortable_selectbox();
},
update :function(e){
sortable_selectbox();
},
});
}

sortable_selectbox();

function sortable_selectbox(){
$('.multiselect_sortable_content_'+defaults.rid+' select option').remove();
$('.selection_content_'+defaults.rid+' .select_li_'+defaults.rid+'').each(function(i, e){

var value = $(e).data('value');
if(value!==undefined){

var opt = document.createElement("option");
opt.text = value;
opt.value = value;
opt.selected = true;

//var MSS = document.createElement("input");
//MSS.setAttribute("type", "hidden");
//MSS.setAttribute("name", select_name+"[]");
//MSS.setAttribute("value", value);
//MSS.setAttribute("class", classes);
select.appendChild(opt);

//$('.multiselect_sortable_content').append(MSS)
}

})

$('.multiselect_sortable_content_'+defaults.rid+'').append(select)

}
}

}(jQuery));
Loading

0 comments on commit 48ea6ed

Please sign in to comment.