Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor as custom select + Select2 4.1 compatibility #67

Draft
wants to merge 11 commits into
base: master
Choose a base branch
from
Draft

Refactor as custom select + Select2 4.1 compatibility #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3aba158
Update toolchain
tagliala Mar 3, 2021
34f5878
Update demo
tagliala Feb 16, 2021
5f70c4c
Update README
tagliala Mar 5, 2021
6ea50fe
Add compatibility with Select2 4.1
tagliala Feb 16, 2021
954b920
Add SCSS variables
tagliala Mar 3, 2021
0b2711e
Add support for feedback icons
tagliala Mar 3, 2021
c848489
Downgrade jQuery to 3.5.1
tagliala Mar 14, 2021
413d62c
Refactor layout
tagliala Mar 14, 2021
68adcb0
Fix empty select height without allow clear
tagliala Mar 22, 2021
2ae0825
Fix readme
tagliala Mar 22, 2021
b9b12e4
Fix multiline tags
tagliala Jun 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
"stylelint-config-twbs-bootstrap/scss"
],
"rules": {
"selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$"
"block-closing-brace-empty-line-before": "never",
"declaration-no-important": null,
"rule-empty-line-before": ["always", {
"except": ["first-nested"],
"ignore": ["after-comment"]
}],
"selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$",
"selector-no-qualifying-type": null
}
}
19 changes: 11 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,22 @@ $ composer require ttskch/select2-bootstrap4-theme

```js
$('select').select2({
theme: 'bootstrap4',
theme: 'bootstrap4',
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style'
});
```

## Getting involved

1. Fix [src/_layout.scss](src/_layout.scss), [src/_single.scss](src/_single.scss) or [src/_multiple.scss](src/_multiple.scss)
1. Do `npm run build:both`
1. Send me a Pull Request
1. Edit SCSS files in the [src folder](src)
1. Run `npm run build:both`
1. Send a Pull Request

You can use [docs](docs) dir for your development.

1. Do `npm run prepare` (this creates symlink to `dist/select2-bootstrap4.css` onto `docs`)
1. Serve `docs` with your local web server (e.g. `php -S localhost:8888 -t docs`)
1. Do `npm run watch`
1. Tweak scss and browse demo page on your browser
1. Run `npm run prepare` (this creates symlink to `dist/select2-bootstrap4.css` onto `docs`)
1. Serve `docs` from your local web server, examples:
- Using PHP: `php -S localhost:8888 -t docs`
- Using Python 3: `python3 -m http.server -d docs 8888`
1. Run `npm run watch`
1. Tweak SCSS and browse demo page on your browser
346 changes: 174 additions & 172 deletions dist/select2-bootstrap4.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/select2-bootstrap4.min.css
View file
Open in desktop

Large diffs are not rendered by default.

100 changes: 95 additions & 5 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,18 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha256-T/zFmO5s/0aSwc6ics2KLxlfbewyRz6UNw1s3Ppf5gE=" crossorigin="anonymous">
<!-- select2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" integrity="sha256-zaSoHBhwFdle0scfGEFUCwggPN7F+ip9XRglo8IWb4w=" crossorigin="anonymous">

<!-- select2-bootstrap4-theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css"> <!-- for live demo page -->
<link href="select2-bootstrap4.css" rel="stylesheet"> <!-- for local development env -->

<title>Select2 Boostrap 4 Theme</title>
</head>

<body class="pt-5" style="min-height:90vh">
Expand All @@ -22,16 +23,56 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
<hr>

<form>
<div class="form-group">
<label>Reference select</label>
<select class="custom-select">
<option value="" hidden="hidden">Choose one thing</option>
<option>1</option>
<option disabled="disabled">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

<div class="form-group">
<label>Example of select</label>
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option>1</option>
<option disabled="disabled">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
</div>

<div class="form-group">
<label>Example of select (pre-selected)</label>
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
</select>
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
</div>

<div class="form-group">
<label>Example of select (without allow clear)</label>
<select data-placeholder="" data-allow-clear="1">
<option value="" label=" "></option>
<option>1</option>
<option disabled="disabled">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
</div>

<div class="form-group">
Expand All @@ -58,6 +99,47 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
<option>Else Stupka</option>
<option>Pennie Khang</option>
</select>
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
</div>

<div class="form-group">
<label>Example of multiple select (pre-selected)</label>
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
<option selected="selected">Tommy Yount</option>
<option>Hye Panter</option>
<option>Vi Yohe</option>
</select>
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
</div>

<div class="form-group">
<label>Example of multiple select (many pre-selected)</label>
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
<option selected="selected">Tommy Yount</option>
<option selected="selected">Hye Panter</option>
<option selected="selected">Vi Yohe</option>
<option selected="selected">Keva Bandy</option>
<option selected="selected">Hannelore Corning</option>
<option selected="selected">Delorse Whitcher</option>
<option selected="selected">Katharyn Marrinan</option>
<option selected="selected">Jeannine Tope</option>
<option selected="selected">Jamila Braggs</option>
<option selected="selected">Eden Cunniff</option>
<option selected="selected">Suzy Schoen</option>
<option selected="selected">Elza Mccook</option>
<option selected="selected">Liana Goris</option>
<option selected="selected">Pauletta Schlabach</option>
<option selected="selected">Synthia Dupuis</option>
<option selected="selected">Scarlett Kestler</option>
<option selected="selected">Magdalen Mele</option>
<option selected="selected">Susanna Schenk</option>
<option>Else Stupka</option>
<option selected="selected">Pennie Khang</option>
</select>
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
</div>

<div class="form-group">
Expand Down Expand Up @@ -134,6 +216,14 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ

<div class="form-group">
<label>Example of validated select</label>
<select data-placeholder="Valid example" class="form-control is-valid" data-allow-clear="1">
<option></option>
</select>
<div class="valid-feedback">
Everything is fine.
</div>
</div>
<div class="form-group">
<select data-placeholder="Invalid example" class="form-control is-invalid" data-allow-clear="1">
<option></option>
</select>
Expand All @@ -145,11 +235,11 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
</div>

<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha256-7dA7lq5P94hkBsWdff7qobYkp9ope/L5LQy2t/ljPLo=" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" integrity="sha256-9yRP/2EFlblE92vzCA10469Ctd0jT48HnmmMw5rJZrA=" crossorigin="anonymous"></script>

<!-- select2-bootstrap4-theme -->
<script src="script.js"></script>
Expand Down
23 changes: 16 additions & 7 deletions docs/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
$(function () {
$('select').each(function () {
$('select:not(.custom-select)').each(function () {
$(this).select2({
theme: 'bootstrap4',
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
allowClear: Boolean($(this).data('allow-clear')),
closeOnSelect: !$(this).attr('multiple'),
});
});
});
closeOnSelect: !$(this).attr('multiple')
})
})
})

$(document).on('click', '.toggle-validation-js', function (e) {
e.preventDefault()
$this = $(this)

$this.closest('.form-group').toggleClass('was-validated')

$selectElement = $this.closest('.form-group').find('select')
$selectElement
.toggleClass($this.data('validationClass'))
})
31 changes: 20 additions & 11 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,33 @@
},
"homepage": "https://github.com/ttskch/select2-bootstrap4-theme#readme",
"devDependencies": {
"autoprefixer": "^10.2.3",
"autoprefixer": "^10.2.5",
"bootstrap": "^4.6.0",
"css-loader": "^5.0.1",
"mini-css-extract-plugin": "^1.3.4",
"css-loader": "^5.1.2",
"mini-css-extract-plugin": "^1.3.9",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"postcss-loader": "^4.2.0",
"sass-loader": "^10.1.1",
"postcss": "^8.2.8",
"postcss-loader": "^5.2.0",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"stylelint": "^13.9.0",
"stylelint": "^13.12.0",
"stylelint-config-twbs-bootstrap": "^2.1.0",
"stylelint-webpack-plugin": "^2.1.1",
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0"
"webpack": "^5.25.0",
"webpack-cli": "^4.5.0"
},
"jsdelivr": "dist/select2-bootstrap4.min.css",
"browserslist": [
"last 2 versions",
"ios >= 9"
">= 1%",
"last 1 major version",
"not dead",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
}
Loading