inital commit
This commit is contained in:
4
public/plugins/simpleStar/.gitignore
vendored
Normal file
4
public/plugins/simpleStar/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
bower_components
|
||||
node_modules
|
||||
npm-debug.log
|
||||
110
public/plugins/simpleStar/.scrutinizer.yml
Normal file
110
public/plugins/simpleStar/.scrutinizer.yml
Normal file
@@ -0,0 +1,110 @@
|
||||
# language: javascript
|
||||
|
||||
filter:
|
||||
excluded_paths:
|
||||
- demo/*
|
||||
- dist/*
|
||||
- node_modules/
|
||||
- gulpfile.js
|
||||
|
||||
checks:
|
||||
javascript:
|
||||
check_for_loops_test: true
|
||||
check_loop_no_body: true
|
||||
check_switch_ambiguous_test: true
|
||||
check_switch_default_not_last: true
|
||||
check_switch_default_only: true
|
||||
check_switch_no_default: true
|
||||
check_too_many_arguments: true
|
||||
check_try_statement: true
|
||||
check_undeclared_vars: true
|
||||
check_unnecessary_continue: true
|
||||
check_unnecessary_return: true
|
||||
check_unused_member_calls: true
|
||||
check_unused_object_creation: true
|
||||
check_unused_parameters: true
|
||||
code_rating: true
|
||||
consistent_return: true
|
||||
curly: false
|
||||
duplicate_code: true
|
||||
eqeqeq: true
|
||||
guard_for_in: true
|
||||
jsdoc_no_duplicate_params: true
|
||||
jsdoc_non_existent_params: true
|
||||
new_cap: true
|
||||
no_alert: true
|
||||
no_alias_builtins: true
|
||||
no_array_constructor: true
|
||||
no_bitwise: true
|
||||
no_caller: true
|
||||
no_comma_dangle: true
|
||||
no_console: true
|
||||
no_constant_condition: true
|
||||
no_debugger: true
|
||||
no_delete_var: true
|
||||
no_dupe_keys: true
|
||||
no_else_return: true
|
||||
no_empty: true
|
||||
no_empty_class: true
|
||||
no_empty_label: true
|
||||
no_eval: true
|
||||
no_ex_assign: true
|
||||
no_extend_native: true
|
||||
no_extra_bind: true
|
||||
no_func_assign: true
|
||||
no_implicit_undefined_return: true
|
||||
no_implied_eval: true
|
||||
no_inner_declarations: true
|
||||
no_invalid_regexp: true
|
||||
no_label_var: true
|
||||
no_loop_var_assign: true
|
||||
no_native_reassign: true
|
||||
no_negated_in_lhs: true
|
||||
no_new_func: true
|
||||
no_new_require: true
|
||||
no_new_wrappers: true
|
||||
no_param_assign: true
|
||||
no_path_concat: true
|
||||
no_process_exit: true
|
||||
no_redeclare: true
|
||||
no_redeclared_const: true
|
||||
no_return_assign: true
|
||||
no_sequences: true
|
||||
no_shadow_builtins: true
|
||||
no_sparse_arrays: true
|
||||
no_undef: true
|
||||
no_undef_init: true
|
||||
no_unreachable: true
|
||||
no_unused_assignment: true
|
||||
no_unused_const: true
|
||||
no_unused_expressions: true
|
||||
no_unused_function: true
|
||||
no_unused_vars: true
|
||||
no_use_before_define: true
|
||||
no_var: true
|
||||
no_void: true
|
||||
no_with: true
|
||||
nsp_vulnerabilities: true
|
||||
unsafe_mutable_variable_usage: true
|
||||
unsafe_undefined: true
|
||||
use_isnan: true
|
||||
valid_typeof: true
|
||||
var_never_initialized: true
|
||||
var_sometimes_initialized: true
|
||||
|
||||
build:
|
||||
nodes:
|
||||
analysis:
|
||||
environment:
|
||||
elasticsearch: false
|
||||
memcached: false
|
||||
mongodb: false
|
||||
neo4j: false
|
||||
node: '9.3.0'
|
||||
php: '7.2.0'
|
||||
postgresql: false
|
||||
rabbitmq: false
|
||||
redis: false
|
||||
tests:
|
||||
override:
|
||||
- js-scrutinizer-run
|
||||
8
public/plugins/simpleStar/.travis.yml
Normal file
8
public/plugins/simpleStar/.travis.yml
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"language": "node_js",
|
||||
"node_js": "stable",
|
||||
"script": [
|
||||
"npm run lint"
|
||||
],
|
||||
"sudo": false
|
||||
}
|
||||
21
public/plugins/simpleStar/LICENSE
Normal file
21
public/plugins/simpleStar/LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2016 pryley
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
281
public/plugins/simpleStar/README.md
Normal file
281
public/plugins/simpleStar/README.md
Normal file
@@ -0,0 +1,281 @@
|
||||
# star-rating.js
|
||||
|
||||
[](https://badge.fury.io/js/star-rating.js)
|
||||
[](https://github.com/pryley/star-rating.js/blob/master/LICENSE)
|
||||
|
||||
A zero-dependency library that transforms a select with numerical-range values (i.e. 1-5) into a dynamic star rating element.
|
||||
|
||||
For production, use the files from the `dist/` folder.
|
||||
|
||||
## Installation
|
||||
|
||||
Use one of the following methods to add the Star Rating library to your project:
|
||||
|
||||
- [Download ZIP](https://github.com/pryley/star-rating.js/zipball/master)
|
||||
- `yarn add star-rating.js`
|
||||
- `npm install star-rating.js`
|
||||
- `bower install star-rating.js`
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<link href="css/star-rating.css" rel="stylesheet">
|
||||
|
||||
<select class="star-rating">
|
||||
<option value="">Select a rating</option>
|
||||
<option value="5">Excellent</option>
|
||||
<option value="4">Very Good</option>
|
||||
<option value="3">Average</option>
|
||||
<option value="2">Poor</option>
|
||||
<option value="1">Terrible</option>
|
||||
</select>
|
||||
|
||||
<script src="js/star-rating.min.js"></script>
|
||||
<script>
|
||||
var starRatingControls = new StarRating( '.star-rating' );
|
||||
</script>
|
||||
```
|
||||
|
||||
To rebuild all star rating controls (e.g. after form fields have changed with ajax):
|
||||
|
||||
```js
|
||||
starRatingControls.rebuild();
|
||||
```
|
||||
|
||||
To fully remove all star rating controls, including all attached Event Listeners:
|
||||
|
||||
```js
|
||||
starRatingControls.destroy();
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
Here are the default options
|
||||
|
||||
```js
|
||||
{
|
||||
classname: "gl-star-rating",
|
||||
clearable: true,
|
||||
initialText: "Select a Rating",
|
||||
maxStars: 10,
|
||||
showText: true,
|
||||
}
|
||||
```
|
||||
|
||||
### classname:
|
||||
|
||||
Type: `String`
|
||||
|
||||
Determines the classname to use of the rendered star-rating HTMLElement. If you change this, make sure you also change the SCSS `$star-rating[base-classname]` map variable to match.
|
||||
|
||||
### clearable:
|
||||
|
||||
Type: `Boolean`
|
||||
|
||||
Determines whether the star rating can be cleared by clicking on an already pre-selected star.
|
||||
|
||||
### initialText:
|
||||
|
||||
Type: `String`
|
||||
|
||||
Determines the initial text when no value is selected. This has no effect if `showText` is set to false.
|
||||
|
||||
### maxStars:
|
||||
|
||||
Type: `Integer`
|
||||
|
||||
Determines the maximum number of stars allowed in a star rating.
|
||||
|
||||
### showText:
|
||||
|
||||
Type: `Boolean`
|
||||
|
||||
Determines whether or not the rating text is shown.
|
||||
|
||||
## Build
|
||||
|
||||
Star Rating uses [npm](https://www.npmjs.com/get-npm) or [yarn](https://yarnpkg.com/) to manage package dependencies and [gulp](http://gulpjs.com/) to build from `src/`.
|
||||
|
||||
```sh
|
||||
yarn
|
||||
gulp
|
||||
```
|
||||
|
||||
The compiled files will be saved in the `dist/` folder.
|
||||
|
||||
### Style Customization
|
||||
|
||||
Sass is used to build the stylesheet so you can `@import` the `src/star-rating.scss` file to compile it directly into your Sass project.
|
||||
|
||||
Following are the default sass values for Star Rating, they are contained in a map variable.
|
||||
|
||||
```sass
|
||||
$star-rating-defaults: (
|
||||
base-classname : 'gl-star-rating',
|
||||
base-display : block,
|
||||
base-height : 26px,
|
||||
font-size : 0.8em,
|
||||
font-weight : 600,
|
||||
parent : '',
|
||||
star-empty : url(../img/star-empty.svg),
|
||||
star-full : url(../img/star-full.svg),
|
||||
star-half : url(../img/star-half.svg),
|
||||
star-size : 24px,
|
||||
text-background: #1a1a1a,
|
||||
text-color : #fff,
|
||||
);
|
||||
```
|
||||
|
||||
To override any values with your own, simply create a new `$star-rating` map variable and include only the values you wish to change.
|
||||
|
||||
Important: Make sure you define `$star-rating` before you import the `src/star-rating.scss` file:
|
||||
|
||||
```sass
|
||||
$star-rating: (
|
||||
base-height: 32px,
|
||||
star-size : 30px,
|
||||
);
|
||||
|
||||
@import "../../node_modules/star-rating.js/src/star-rating"
|
||||
```
|
||||
|
||||
### How to change CSS style priority
|
||||
|
||||
Sometimes an existing stylesheet rules will override the default CSS styles for Star Ratings. To solve this problem, you can specify a "parent" option in the `$star-rating` map variable. This option value should be a high priority/specificity property such as an id attribute or similar.
|
||||
|
||||
In the following example, all Star Rating css rules will begin with `[id^=stars]` which targets any id attributes that begin with "stars" (i.e. `#stars-1`):
|
||||
|
||||
```sass
|
||||
$star-rating: (
|
||||
parent: '[id^=stars]',
|
||||
);
|
||||
```
|
||||
|
||||
The CSS rule `.gl-star-rating { ... }` now becomes `[id^=stars] .gl-star-rating { ... }`.
|
||||
|
||||
## Compatibility
|
||||
|
||||
- All modern browsers
|
||||
|
||||
If you need to use the Star Rating library in a unsupported browser (i.e. Internet Explorer), use the [Polyfill service](https://polyfill.io).
|
||||
|
||||
## Contributing
|
||||
|
||||
All changes should be committed to the files in `src/`.
|
||||
|
||||
## Changelog
|
||||
|
||||
`v3.4.0 - [2020-10-18]`
|
||||
- Specify passive:false on event listeners to suppress Chrome warnings
|
||||
|
||||
`v3.2.0 - [2020-07-13]`
|
||||
- Cleanup stale DOM if needed before initializing
|
||||
|
||||
`v3.1.8 - [2020-06-29]`
|
||||
- Fixed clearable option
|
||||
- Fixed events on disabled SELECT
|
||||
|
||||
`v3.1.5 - [2019-11-01]`
|
||||
- Added ability to use a NodeList as a selector
|
||||
|
||||
`v3.1.4 - [2019-01-28]`
|
||||
- Updated package URL
|
||||
|
||||
`v3.1.3 - [2019-01-27]`
|
||||
- Fixed issue when used outside of a FORM
|
||||
|
||||
`v3.1.2 - [2019-01-07]`
|
||||
- Fixed issue that allowed multiple star-rating transformations on the same SELECT element
|
||||
|
||||
`v3.1.1 - [2018-07-27]`
|
||||
- Provided an un-minified CSS file in /dist
|
||||
- Removed the change event trigger from the reset event
|
||||
|
||||
`v3.1.0 - [2018-07-24]`
|
||||
- Changed the `star-filled` SCSS map option to `star-full`
|
||||
- Changed the `star-empty`, `star-full`, and `star-half` SCSS map options to `url(...)`. This allows one to use `none` as the value of `background-image`.
|
||||
|
||||
`v3.0.0 - [2018-07-24]`
|
||||
- Dropped support for Internet Explorer (use polyfill.io, specifically: Element.prototype.closest, Element.prototype.dataset, Event)
|
||||
- Removed the `onClick` option (listen for the `change` event instead)
|
||||
|
||||
`v2.3.1 - [2018-07-22]`
|
||||
- CSS improvements
|
||||
|
||||
`v2.3.0 - [2018-07-20]`
|
||||
- Added a `$star-rating[parent]` SCSS option
|
||||
|
||||
`v2.2.2 - [2018-07-16]`
|
||||
- Fixed IE 11+ compatibility
|
||||
|
||||
`v2.2.1 - [2018-07-13]`
|
||||
- Fixed touch events on Android devices
|
||||
|
||||
`v2.2.0 - [2018-07-09]`
|
||||
|
||||
- Added a `classname` option
|
||||
- Added a `$star-rating[base-classname]` SCSS option
|
||||
- Added touch events
|
||||
- Fixed detection of an unset option value
|
||||
- Optimised the minified output
|
||||
- Removed unused code
|
||||
|
||||
`v2.1.1 - [2018-05-25]`
|
||||
|
||||
- Fixed jshint warnings
|
||||
|
||||
`v2.1.0 - [2018-05-11]`
|
||||
|
||||
- Added support for the keyboard
|
||||
- Fixed accessibility support
|
||||
- Fixed RTL support
|
||||
|
||||
`v2.0.0 - [2018-05-02]`
|
||||
|
||||
- Major rewrite of library
|
||||
- Added support for loading as a module
|
||||
- Added support for RTL
|
||||
- Removed jQuery plugin
|
||||
- Removed IE9 support
|
||||
|
||||
`v1.3.3 - [2017-04-11]`
|
||||
|
||||
- Fixed race conditions preventing correct element.outerWidth calculation
|
||||
|
||||
`v1.3.1 - [2016-12-22]`
|
||||
|
||||
- Fixed checking existence of parent form element before attaching an event to it
|
||||
- Fixed mousemove event not correctly unattaching
|
||||
|
||||
`v1.3.0 - [2016-10-10]`
|
||||
|
||||
- Changed `clickFn` to `onClick` which now passes the select HTMLElement as the argument
|
||||
|
||||
`v1.2.2 - [2016-10-10]`
|
||||
|
||||
- Fixed "reset" event when the `clearable` option is false
|
||||
|
||||
`v1.2.1 - [2016-10-09]`
|
||||
|
||||
- Fixed resetting the star-rating when a form "reset" event is triggered
|
||||
|
||||
`v1.2.0 - [2016-10-09]`
|
||||
|
||||
- Removed dependencies
|
||||
- Fixed HTML5 “required” attribute validation
|
||||
|
||||
`v1.1.0 - [2016-10-06]`
|
||||
|
||||
- Added `showText` option
|
||||
|
||||
`v1.0.1 - [2016-10-06]`
|
||||
|
||||
- Fixed using the wrong left offset
|
||||
|
||||
`v1.0.0 - [2016-10-06]`
|
||||
|
||||
- Initial release
|
||||
|
||||
## License
|
||||
|
||||
[MIT](/LICENSE)
|
||||
27
public/plugins/simpleStar/bower.json
Normal file
27
public/plugins/simpleStar/bower.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "star-rating.js",
|
||||
"description": "This zero-dependency library transforms a SELECT into a dynamic star rating element.",
|
||||
"version": "3.4.0",
|
||||
"homepage": "https://github.com/pryley/star-rating.js",
|
||||
"authors": [
|
||||
"Paul Ryley <paul@geminilabs.io>"
|
||||
],
|
||||
"main": [
|
||||
"dist/star-rating.js",
|
||||
"dist/star-rating.css"
|
||||
],
|
||||
"keywords": [
|
||||
"starrating",
|
||||
"star-rating",
|
||||
"geminilabs",
|
||||
"pryley"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
16
public/plugins/simpleStar/config.yml
Normal file
16
public/plugins/simpleStar/config.yml
Normal file
@@ -0,0 +1,16 @@
|
||||
bump:
|
||||
- bower.json
|
||||
- package.json
|
||||
- src/star-rating.js
|
||||
- src/star-rating.scss
|
||||
- index.html
|
||||
dest: dist/
|
||||
watch:
|
||||
css:
|
||||
- dist/*.css
|
||||
- "!dist/*.min.css"
|
||||
html: index.html
|
||||
js: src/star-rating.js
|
||||
scss:
|
||||
- demo/styles.scss
|
||||
- src/star-rating.scss
|
||||
1034
public/plugins/simpleStar/demo/styles.css
Normal file
1034
public/plugins/simpleStar/demo/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
272
public/plugins/simpleStar/demo/styles.scss
Normal file
272
public/plugins/simpleStar/demo/styles.scss
Normal file
@@ -0,0 +1,272 @@
|
||||
@mixin small {
|
||||
@media screen and (min-width: 35em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin medium {
|
||||
@media screen and (min-width: 42em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin large {
|
||||
@media screen and (min-width: 50em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$features: (
|
||||
// debug: true,
|
||||
styled: false,
|
||||
);
|
||||
|
||||
@import "node_modules/nolie/src/1-functions/all";
|
||||
@import "node_modules/nolie/src/2-config/all";
|
||||
|
||||
$colors: (
|
||||
white: #fff,
|
||||
text: material-color(grey, 900),
|
||||
primary: material-color(pink, 500),
|
||||
);
|
||||
|
||||
$typefaces: extend($typefaces, (
|
||||
body: ('Open Sans', sans-serif),
|
||||
));
|
||||
|
||||
$typestyles: extend($typestyles, (
|
||||
heading-1: h3 1 bold,
|
||||
heading-2: xxl 1 bold,
|
||||
heading-3: l 1 bold,
|
||||
heading-4: m 1 bold,
|
||||
));
|
||||
|
||||
$star-rating: (
|
||||
star-size: 24px,
|
||||
base-height: 34px,
|
||||
font-size: 14px,
|
||||
font-weight: 400,
|
||||
text-background: material-color(grey, 900),
|
||||
// text-color: material-color(grey, 900),
|
||||
);
|
||||
|
||||
@import "node_modules/nolie/src/3-mixins/all";
|
||||
@import "node_modules/nolie/src/4-components/all";
|
||||
@import "../src/star-rating";
|
||||
|
||||
$transition-duration: 0.2s;
|
||||
$transition-function: ease-in-out;
|
||||
|
||||
a {
|
||||
color: color(primary);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid material-color(grey, 200);
|
||||
p {
|
||||
@include font-size(s);
|
||||
&:not(:last-child) {
|
||||
@include margin-bottom(0.5);
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include font-size(m);
|
||||
border-radius: $border-radius;
|
||||
background-color: material-color(grey, 200);
|
||||
text-shadow: 1px 1px 0 rgba(color(white), 0.75);
|
||||
}
|
||||
|
||||
pre {
|
||||
@include line-height(1);
|
||||
font-weight: weight(light);
|
||||
background-color: material-color(grey, 900);
|
||||
code {
|
||||
@include font-size(s);
|
||||
color: material-color(yellow, 50);
|
||||
text-shadow: 1px 1px 0 rgba(color(black), 0.25);
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@include debug-baseline;
|
||||
@include padding(2 1);
|
||||
background-color: material-color(yellow, 600);
|
||||
text-align: center;
|
||||
|
||||
@include medium {
|
||||
@include padding(2 3);
|
||||
}
|
||||
|
||||
@include large {
|
||||
@include padding(4 3);
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button-medium;
|
||||
@include margin(0.75 0 0);
|
||||
|
||||
@include small {
|
||||
@include margin(0.75 0.25 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
max-width: 52em;
|
||||
margin: 0 auto;
|
||||
@include padding(1);
|
||||
p:first-child {
|
||||
position: relative;
|
||||
top: $border-width;
|
||||
font-weight: bold;
|
||||
border-top: $border-width solid material-color(grey, 200);
|
||||
margin: -($border-width * 2) 0 0;
|
||||
@include padding-top(1);
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
max-width: 52em;
|
||||
margin: 0 auto;
|
||||
@include padding(1.5 1 0);
|
||||
}
|
||||
|
||||
.section ul {
|
||||
@include line-height(1.25);
|
||||
}
|
||||
|
||||
.section:not(:last-child) {
|
||||
@include margin-bottom(2);
|
||||
}
|
||||
|
||||
.project-name {
|
||||
color: material-color(grey, 900);
|
||||
max-width: 52rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@include margin-bottom(2);
|
||||
|
||||
@include medium {
|
||||
@include font-size(h2);
|
||||
@include line-height(2);
|
||||
}
|
||||
|
||||
@include large {
|
||||
@include font-size(h1);
|
||||
}
|
||||
}
|
||||
|
||||
.project-tagline {
|
||||
max-width: 52rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: material-color(grey, 900);
|
||||
font-weight: weight(normal);
|
||||
@include font-size(m);
|
||||
@include margin-bottom(1);
|
||||
|
||||
@include medium {
|
||||
@include font-size(xl);
|
||||
@include line-height(2);
|
||||
@include line-height(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
@include line-height(1.5);
|
||||
@include margin-bottom(1);
|
||||
img {
|
||||
@include spacing(height, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button;
|
||||
@include button-group;
|
||||
@include button-solid(material-color(pink, 500), color(white));
|
||||
@include button-transition;
|
||||
text-shadow: 0 -1px 0 rgba(material-color(pink, 800), 0.5);
|
||||
|
||||
&.secondary {
|
||||
@include button-solid(material-color(grey, 800), color(white));
|
||||
text-shadow: 0 -1px 0 rgba(color(black), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button-group {
|
||||
@include clearfix;
|
||||
display: block;
|
||||
@include margin-bottom(1);
|
||||
}
|
||||
|
||||
:not(.button-group) > .button {
|
||||
width: 100%;
|
||||
@include small {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
form .button {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
@include margin-bottom(1);
|
||||
border-radius: $border-radius;
|
||||
background-color: material-color(grey, 50);
|
||||
box-shadow: inset 0 0 8px material-color(grey, 200);
|
||||
@include padding(0.5);
|
||||
@include medium {
|
||||
@include padding(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: #fff;
|
||||
border-color: material-color(grey, 300);
|
||||
height: sr(base-height);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button-group .button:not(:first-child) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.gl-star-rating-stars > span {
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
background-size: 20px;
|
||||
background-position: center;
|
||||
@media screen and (min-width: 375px) {
|
||||
width: 24px;
|
||||
background-size: 24px;
|
||||
}
|
||||
@media screen and (min-width: 414px) {
|
||||
width: 28px;
|
||||
background-size: 28px;
|
||||
}
|
||||
@include small {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 32px;
|
||||
}
|
||||
}
|
||||
134
public/plugins/simpleStar/dist/star-rating.css
vendored
Normal file
134
public/plugins/simpleStar/dist/star-rating.css
vendored
Normal file
@@ -0,0 +1,134 @@
|
||||
/*!
|
||||
* Star Rating
|
||||
* @version: 3.4.0
|
||||
* @author: Paul Ryley (http://geminilabs.io)
|
||||
* @url: https://github.com/pryley/star-rating.js
|
||||
* @license: MIT
|
||||
*/
|
||||
.gl-star-rating[data-star-rating] {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gl-star-rating[data-star-rating] > select {
|
||||
overflow: hidden;
|
||||
visibility: visible !important;
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
-webkit-clip-path: circle(1px at 0 0);
|
||||
clip-path: circle(1px at 0 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gl-star-rating[data-star-rating] > select::before,
|
||||
.gl-star-rating[data-star-rating] > select::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gl-star-rating-ltr[data-star-rating] > select {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gl-star-rating-rtl[data-star-rating] > select {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.gl-star-rating[data-star-rating] > select:focus + .gl-star-rating-stars::before {
|
||||
opacity: 0.5;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
outline: dotted 1px currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gl-star-rating-stars {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select[disabled] + .gl-star-rating-stars {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.gl-star-rating-stars > span {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../img/star-empty.svg);
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.gl-star-rating-stars > span:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gl-star-rating-rtl[data-star-rating] .gl-star-rating-stars > span {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.gl-star-rating-rtl[data-star-rating] .gl-star-rating-stars > span:last-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.gl-star-rating-stars.s10 > span:nth-child(1),
|
||||
.gl-star-rating-stars.s20 > span:nth-child(-1n+2),
|
||||
.gl-star-rating-stars.s30 > span:nth-child(-1n+3),
|
||||
.gl-star-rating-stars.s40 > span:nth-child(-1n+4),
|
||||
.gl-star-rating-stars.s50 > span:nth-child(-1n+5),
|
||||
.gl-star-rating-stars.s60 > span:nth-child(-1n+6),
|
||||
.gl-star-rating-stars.s70 > span:nth-child(-1n+7),
|
||||
.gl-star-rating-stars.s80 > span:nth-child(-1n+8),
|
||||
.gl-star-rating-stars.s90 > span:nth-child(-1n+9),
|
||||
.gl-star-rating-stars.s100 > span {
|
||||
background-image: url(../img/star-full.svg);
|
||||
}
|
||||
|
||||
.gl-star-rating-text {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
padding: 0 12px 0 6px;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
|
||||
.gl-star-rating-text::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -12px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
border-width: 13px 12px 13px 0;
|
||||
border-color: transparent #1a1a1a transparent transparent;
|
||||
}
|
||||
|
||||
.gl-star-rating-rtl[data-star-rating] .gl-star-rating-text {
|
||||
padding: 0 6px 0 12px;
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
|
||||
.gl-star-rating-rtl[data-star-rating] .gl-star-rating-text::before {
|
||||
left: unset;
|
||||
right: -12px;
|
||||
border-width: 13px 0 13px 12px;
|
||||
border-color: transparent transparent transparent #1a1a1a;
|
||||
}
|
||||
7
public/plugins/simpleStar/dist/star-rating.min.css
vendored
Normal file
7
public/plugins/simpleStar/dist/star-rating.min.css
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* Star Rating
|
||||
* @version: 3.4.0
|
||||
* @author: Paul Ryley (http://geminilabs.io)
|
||||
* @url: https://github.com/pryley/star-rating.js
|
||||
* @license: MIT
|
||||
*/.gl-star-rating[data-star-rating]{position:relative;display:block}.gl-star-rating[data-star-rating]>select{overflow:hidden;visibility:visible!important;position:absolute!important;top:0;width:1px;height:1px;clip:rect(1px,1px,1px,1px);-webkit-clip-path:circle(1px at 0 0);clip-path:circle(1px at 0 0);white-space:nowrap}.gl-star-rating[data-star-rating]>select:after,.gl-star-rating[data-star-rating]>select:before{display:none!important}.gl-star-rating-ltr[data-star-rating]>select{left:0}.gl-star-rating-rtl[data-star-rating]>select{right:0}.gl-star-rating[data-star-rating]>select:focus+.gl-star-rating-stars:before{opacity:.5;display:block;position:absolute;width:100%;height:100%;content:"";outline:1px dotted currentColor;pointer-events:none}.gl-star-rating-stars{position:relative;display:inline-block;height:26px;vertical-align:middle;cursor:pointer}select[disabled]+.gl-star-rating-stars{cursor:default}.gl-star-rating-stars>span{display:inline-block;width:24px;height:24px;background-size:24px;background-repeat:no-repeat;background-image:url(../img/star-empty.svg);margin:0 4px 0 0}.gl-star-rating-stars>span:last-of-type{margin-right:0}.gl-star-rating-rtl[data-star-rating] .gl-star-rating-stars>span{margin:0 0 0 4px}.gl-star-rating-rtl[data-star-rating] .gl-star-rating-stars>span:last-of-type{margin-left:0}.gl-star-rating-stars.s10>span:first-child,.gl-star-rating-stars.s20>span:nth-child(-1n+2),.gl-star-rating-stars.s30>span:nth-child(-1n+3),.gl-star-rating-stars.s40>span:nth-child(-1n+4),.gl-star-rating-stars.s50>span:nth-child(-1n+5),.gl-star-rating-stars.s60>span:nth-child(-1n+6),.gl-star-rating-stars.s70>span:nth-child(-1n+7),.gl-star-rating-stars.s80>span:nth-child(-1n+8),.gl-star-rating-stars.s90>span:nth-child(-1n+9),.gl-star-rating-stars.s100>span{background-image:url(../img/star-full.svg)}.gl-star-rating-text{display:inline-block;position:relative;height:26px;line-height:26px;font-size:.8em;font-weight:600;color:#fff;background-color:#1a1a1a;white-space:nowrap;vertical-align:middle;padding:0 12px 0 6px;margin:0 0 0 12px}.gl-star-rating-text:before{position:absolute;top:0;left:-12px;width:0;height:0;content:"";border-style:solid;border-width:13px 12px 13px 0;border-color:transparent #1a1a1a transparent transparent}.gl-star-rating-rtl[data-star-rating] .gl-star-rating-text{padding:0 6px 0 12px;margin:0 12px 0 0}.gl-star-rating-rtl[data-star-rating] .gl-star-rating-text:before{left:unset;right:-12px;border-width:13px 0 13px 12px;border-color:transparent transparent transparent #1a1a1a}
|
||||
8
public/plugins/simpleStar/dist/star-rating.min.js
vendored
Normal file
8
public/plugins/simpleStar/dist/star-rating.min.js
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* Star Rating
|
||||
* @version: 3.4.0
|
||||
* @author: Paul Ryley (http://geminilabs.io)
|
||||
* @url: https://github.com/pryley/star-rating.js
|
||||
* @license: MIT
|
||||
*/
|
||||
!function(s,e){"use strict";function t(t,i){var s={}.toString.call(t);this.selects="[object String]"===s?e.querySelectorAll(t):"[object NodeList]"===s?t:[t],this.destroy=function(){this.widgets.forEach(function(t){t.t()})},this.rebuild=function(){this.widgets.forEach(function(t){t.i()})},this.widgets=[];for(var n=0;n<this.selects.length;n++)if("SELECT"===this.selects[n].tagName&&!this.selects[n][o]){var h=new r(this.selects[n],i);void 0!==h.direction&&this.widgets.push(h)}}var o="star-rating",r=function(t,i){this.el=t,this.s=this.n({},this.h,i||{},JSON.parse(t.getAttribute("data-options"))),this.e(),this.stars<1||this.stars>this.s.maxStars||this.i()};r.prototype={h:{classname:"gl-star-rating",clearable:!0,initialText:"Select a Rating",maxStars:10,showText:!0},o:function(){this.r(),this.current=this.selected=this.a(),this.u(),this.c(),this.f(),this.v(this.current),this.l("add"),this.el[o]=!0},d:function(){this.s.showText&&(this.textEl=this._(this.widgetEl,{class:this.s.classname+"-text"},!0))},c:function(){var t=this.m(),i=this._(this.el,{class:this.s.classname+"-stars"},!0);for(var s in t){var n=this.g({"data-value":s,"data-text":t[s]});i.innerHTML+=n.outerHTML}this.widgetEl=i,this.d()},p:function(t){(t<0||isNaN(t))&&(t=0),t>this.stars&&(t=this.stars),this.widgetEl.classList.remove("s"+10*this.current),this.widgetEl.classList.add("s"+10*t),this.s.showText&&(this.textEl.textContent=t<1?this.s.initialText:this.widgetEl.childNodes[t-1].dataset.text),this.current=t},g:function(t){var i=e.createElement("span");for(var s in t=t||{})i.setAttribute(s,t[s]);return i},t:function(){this.l("remove");var t=this.el.parentNode;t.parentNode.replaceChild(this.el,t),delete this.el[o]},w:function(i,s,t,n){n=n||!1,t.forEach(function(t){this.events&&i[s+"EventListener"](t,this.events[t],n)}.bind(this))},n:function(){var t=[].slice.call(arguments),s=t[0],n=t.slice(1);return Object.keys(n).forEach(function(t){for(var i in n[t])n[t].hasOwnProperty(i)&&(s[i]=n[t][i])}),s},b:function(){var t=!1;try{var i=Object.defineProperty({},"passive",{get:function(){t={passive:!1}}});s.addEventListener("test",null,i)}catch(t){}return t},S:function(t){var i={},s=t.pageX||t.changedTouches[0].pageX,n=this.widgetEl.offsetWidth;return i.ltr=Math.max(s-this.offsetLeft,1),i.rtl=n-i.ltr,Math.min(Math.ceil(i[this.direction]/Math.round(n/this.stars)),this.stars)},m:function(){for(var t=this.el,i={},s={},n=0;n<t.length;n++)this.y(t[n])||(i[t[n].value]=t[n].text);return Object.keys(i).sort().forEach(function(t){s[t]=i[t]}),s},a:function(){return parseInt(this.el.options[Math.max(this.el.selectedIndex,0)].value)||0},l:function(t){var i=this.el.closest("form");i&&"FORM"===i.tagName&&this.w(i,t,["reset"]),"add"===t&&this.el.disabled||(this.w(this.el,t,["change","keydown"]),this.w(this.widgetEl,t,["mousedown","mouseleave","mousemove","mouseover","touchend","touchmove","touchstart"],this.b()))},r:function(){this.events={change:this.M.bind(this),keydown:this.x.bind(this),mousedown:this.L.bind(this),mouseleave:this.O.bind(this),mousemove:this.j.bind(this),mouseover:this.N.bind(this),reset:this.F.bind(this),touchend:this.L.bind(this),touchmove:this.j.bind(this),touchstart:this.N.bind(this)}},_:function(t,i,s){var n=this.g(i);return t.parentNode.insertBefore(n,!0===s?t.nextSibling:t),n},y:function(t){return null===t.getAttribute("value")||""===t.value},M:function(){this.p(this.a())},x:function(t){if(~["ArrowLeft","ArrowRight"].indexOf(t.key)){var i="ArrowLeft"===t.key?-1:1;"rtl"===this.direction&&(i*=-1),this.v(Math.min(Math.max(this.a()+i,0),this.stars)),this.C()}},L:function(t){t.preventDefault();var i=this.S(t);0!==this.current&&parseFloat(this.selected)===i&&this.s.clearable&&(i=0),this.v(i),this.C()},O:function(t){t.preventDefault(),this.p(this.selected)},j:function(t){t.preventDefault(),this.p(this.S(t))},N:function(t){t.preventDefault();var i=this.widgetEl.getBoundingClientRect();this.offsetLeft=i.left+e.body.scrollLeft},F:function(){var t=this.el.querySelector("[selected]"),i=t?t.value:"";this.el.value=i,this.selected=parseInt(i)||0,this.p(i)},i:function(){this.el.parentNode.classList.contains(this.s.classname)&&this.t(),this.o()},f:function(){var t=this.el.parentNode;this.direction=s.getComputedStyle(t,null).getPropertyValue("direction"),t.classList.add(this.s.classname+"-"+this.direction)},v:function(t){this.el.value=this.selected=t,this.p(t)},e:function(){for(var t=this.el,i=this.stars=0;i<t.length;i++)if(!this.y(t[i])){if(isNaN(parseFloat(t[i].value))||!isFinite(t[i].value))return void(this.stars=0);this.stars++}},C:function(){this.el.dispatchEvent(new Event("change"))},u:function(){this._(this.el,{class:this.s.classname,"data-star-rating":""}).appendChild(this.el)}},"function"==typeof define&&define.amd?define([],function(){return t}):"object"==typeof module&&module.exports?module.exports=t:s.StarRating=t}(window,document);
|
||||
91
public/plugins/simpleStar/gulpfile.js
Normal file
91
public/plugins/simpleStar/gulpfile.js
Normal file
@@ -0,0 +1,91 @@
|
||||
var args = require('yargs').argv;
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
var browserSync = require('browser-sync').create();
|
||||
var bump = require('gulp-bump');
|
||||
var cssnano = require('gulp-cssnano');
|
||||
var gulp = require('gulp');
|
||||
var jshint = require('gulp-jshint');
|
||||
var moduleImporter = require('sass-module-importer');
|
||||
var pump = require('pump');
|
||||
var rename = require('gulp-rename');
|
||||
var sass = require('gulp-sass');
|
||||
var uglify = require('gulp-uglify');
|
||||
var yaml = require('yamljs');
|
||||
|
||||
var config = yaml.load('config.yml');
|
||||
|
||||
gulp.task('bump', function(cb) {
|
||||
var type = 'patch';
|
||||
['prerelease','patch','minor','major'].some(function(arg) {
|
||||
if(!args[arg])return;
|
||||
type = arg;
|
||||
return true;
|
||||
});
|
||||
pump([
|
||||
gulp.src(config.bump, {base: '.'}),
|
||||
bump({type: type, keys: ['version','ver=']}),
|
||||
gulp.dest('.'),
|
||||
], cb);
|
||||
});
|
||||
|
||||
gulp.task('css', function(cb) {
|
||||
pump([
|
||||
gulp.src(config.watch.css),
|
||||
cssnano({
|
||||
minifyFontValues: false,
|
||||
zindex: false,
|
||||
}),
|
||||
rename({suffix: '.min'}),
|
||||
gulp.dest(config.dest),
|
||||
], cb);
|
||||
});
|
||||
|
||||
gulp.task('js', function(cb) {
|
||||
pump([
|
||||
gulp.src(config.watch.js),
|
||||
uglify({
|
||||
mangle: {properties: {regex: /_$/}},
|
||||
output: {comments: 'some'},
|
||||
}),
|
||||
rename({suffix: '.min'}),
|
||||
gulp.dest(config.dest),
|
||||
browserSync.stream(),
|
||||
], cb);
|
||||
});
|
||||
|
||||
gulp.task('jshint', function(cb) {
|
||||
pump([
|
||||
gulp.src(config.watch.js),
|
||||
jshint(),
|
||||
jshint.reporter('jshint-stylish'),
|
||||
jshint.reporter('fail'),
|
||||
], cb);
|
||||
});
|
||||
|
||||
gulp.task('scss', function(cb) {
|
||||
pump([
|
||||
gulp.src(config.watch.scss, {base: '.'}),
|
||||
sass({
|
||||
importer: moduleImporter(),
|
||||
outputStyle: 'expanded',
|
||||
}).on('error', sass.logError),
|
||||
autoprefixer(),
|
||||
rename(function(path) {
|
||||
path.dirname = path.dirname.replace('src','dist');
|
||||
path.dirname = path.dirname.replace('scss','css');
|
||||
}),
|
||||
gulp.dest('.'),
|
||||
browserSync.stream(),
|
||||
], cb);
|
||||
});
|
||||
|
||||
gulp.task('watch', function() {
|
||||
browserSync.init({
|
||||
server: {baseDir: '.'},
|
||||
});
|
||||
gulp.watch(config.watch.js, gulp.parallel('jshint','js'));
|
||||
gulp.watch(config.watch.scss, gulp.series('scss','css'));
|
||||
gulp.watch(config.watch.html).on('change', browserSync.reload);
|
||||
});
|
||||
|
||||
gulp.task('default', gulp.parallel(gulp.series('scss','css'),'jshint','js'));
|
||||
1
public/plugins/simpleStar/img/star-empty.svg
Normal file
1
public/plugins/simpleStar/img/star-empty.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800"><title>star-empty</title><path fill="#FFB900" d="M900 0l300 600 600 75-413 462 113 663-600-300-600 300 112-663L0 675l600-75L900 0zm0 224L666 693l-465 58 318 356-87 515 468-234 468 234-87-515 318-356-465-58-234-469z"/></svg>
|
||||
|
After Width: | Height: | Size: 287 B |
1
public/plugins/simpleStar/img/star-full.svg
Normal file
1
public/plugins/simpleStar/img/star-full.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800"><title>star-full</title><path fill="#FFB900" d="M900 0L600 600 0 675l412 462-112 663 600-300 600 300-113-663 413-462-600-75z"/></svg>
|
||||
|
After Width: | Height: | Size: 198 B |
1
public/plugins/simpleStar/img/star-half.svg
Normal file
1
public/plugins/simpleStar/img/star-half.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800"><title>star-half</title><path fill="#FFB900" d="M900 0L600 600 0 675l413 462-113 663 600-300 600 300-112-663 412-462-600-75L900 0zm0 224l234 469 465 58-318 356 87 515-468-234V224z"/></svg>
|
||||
|
After Width: | Height: | Size: 252 B |
226
public/plugins/simpleStar/index.html
Normal file
226
public/plugins/simpleStar/index.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Star Rating by pryley</title>
|
||||
<meta name="keywords" content="starrating star-rating star rating">
|
||||
<meta name="description" content="A zero-dependency library that transforms a SELECT with numerical-range values (i.e. 1-5) into a dynamic star rating element.">
|
||||
<meta name="author" content="Paul Ryley">
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' type='text/css'>
|
||||
<link rel="stylesheet" href="demo/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="page-header">
|
||||
<h1 class="project-name">star-rating.js</h1>
|
||||
<h2 class="project-tagline">A zero-dependency library that transforms a SELECT with numerical-range values (i.e. 1-5) into a dynamic star rating element.</h2>
|
||||
<a class="button medium" href="https://github.com/pryley/star-rating.js">View on GitHub</a>
|
||||
<a class="button medium" href="https://github.com/pryley/star-rating.js/zipball/master">Download .zip</a>
|
||||
<a class="button medium" href="https://github.com/pryley/star-rating.js/tarball/master">Download .tar.gz</a>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
|
||||
<section class="section">
|
||||
<a class="badge" href="https://badge.fury.io/js/star-rating.js"><img src="https://badge.fury.io/js/star-rating.js.svg" alt="npm version" height="18"></a>
|
||||
<a class="badge" href="https://github.com/pryley/star-rating.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" height="18"></a>
|
||||
<p>For production, use the files from the <code>dist/</code> folder.</p>
|
||||
</section>
|
||||
|
||||
<section class="section" id="section-1">
|
||||
<h2>Demo</h2>
|
||||
<form class="form-1">
|
||||
<label for="glsr-ltr">Left to Right</label>
|
||||
<div class="form-field">
|
||||
<select id="glsr-ltr" class="star-rating">
|
||||
<option value="">Select a rating</option>
|
||||
<option value="5">Fantastic</option>
|
||||
<option value="4">Great</option>
|
||||
<option value="3">Good</option>
|
||||
<option value="2">Poor</option>
|
||||
<option value="1">Terrible</option>
|
||||
</select>
|
||||
</div>
|
||||
<label for="glsr-rtl">Right to Left</label>
|
||||
<div class="form-field" style="direction: rtl;">
|
||||
<select id="glsr-rtl" class="star-rating">
|
||||
<option value="">Select a rating</option>
|
||||
<option value="5">Fantastic</option>
|
||||
<option value="4">Great</option>
|
||||
<option value="3">Good</option>
|
||||
<option value="2">Poor</option>
|
||||
<option value="1">Terrible</option>
|
||||
</select>
|
||||
</div>
|
||||
<label for="glsr-custom-options">Using the "data-options" attribute to hide the tooltip and prevent the control from being cleared</label>
|
||||
<div class="form-field">
|
||||
<select id="glsr-custom-options" class="star-rating" data-options='{"clearable":false, "showText":false}'>
|
||||
<option value="">Select a rating</option>
|
||||
<option value="10">10</option>
|
||||
<option value="9">9</option>
|
||||
<option value="8">8</option>
|
||||
<option value="7">7</option>
|
||||
<option value="6">6</option>
|
||||
<option value="5" selected>5</option>
|
||||
<option value="4">4</option>
|
||||
<option value="3">3</option>
|
||||
<option value="2">2</option>
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button type="button" class="button large toggle-star-rating">Toggle Star Rating</button>
|
||||
<button type="reset" class="button large secondary">Reset form</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Installation</h2>
|
||||
<p>Use one of the following methods to add the Star Rating library to your project:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/pryley/star-rating.js/zipball/master">Download ZIP</a></li>
|
||||
<li><code>yarn add star-rating.js</code></li>
|
||||
<li><code>npm install star-rating.js</code></li>
|
||||
<li><code>bower install star-rating.js</code></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Usage</h2>
|
||||
<p>Load the <code>dist/star-rating.css</code> and <code>dist/star-rating.min.js</code> files somewhere on your page and then trigger the Star Ratie Star Rating library as follows:</p>
|
||||
<div class="highlight highlight-Javascript"><pre class="alt"><code>var starRatingControls = new StarRating( '.star-rating' );</code></pre></div>
|
||||
<p>To rebuild all star rating controls (e.g. after form fields have changed with ajax):</p>
|
||||
<div class="highlight highlight-Javascript"><pre class="alt"><code>starRatingControls.rebuild();</code></pre></div>
|
||||
<p>To fully remove all star rating controls, including all attached Event Listeners:</p>
|
||||
<div class="highlight highlight-Javascript"><pre class="alt"><code>starRatingControls.destroy();</code></pre></div>
|
||||
<h3>HTML markup</h3>
|
||||
<p>Your SELECT option fields must have numerical values.</p>
|
||||
<div class="highlight highlight-Html"><pre class="alt"><code><select class="star-rating">
|
||||
<option value="">Select a rating</option>
|
||||
<option value="5">Excellent</option>
|
||||
<option value="4">Very Good</option>
|
||||
<option value="3">Average</option>
|
||||
<option value="2">Poor</option>
|
||||
<option value="1">Terrible</option>
|
||||
</select></code></pre></div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Options</h2>
|
||||
<h3>Default options</h3>
|
||||
<div class="highlight highlight-Javascript"><pre><code>{
|
||||
classname: "gl-star-rating",
|
||||
clearable: true,
|
||||
initialText: "Select a Rating",
|
||||
maxStars: 10,
|
||||
showText: true,
|
||||
}</code></pre></div>
|
||||
<h4>classname</h4>
|
||||
<blockquote>
|
||||
<p>Type: <code>String</code></p>
|
||||
<p>Determines the classname to use of the rendered star-rating HTMLElement. If you change this, make sure you also change the SCSS <code>$star-rating[base-classname]</code> map variable to match.</p>
|
||||
</blockquote>
|
||||
<h4>clearable</h4>
|
||||
<blockquote>
|
||||
<p>Type: <code>Boolean</code></p>
|
||||
<p>Determines whether the star rating can be cleared by clicking on an already pre-selected star.</p>
|
||||
</blockquote>
|
||||
<h4>initialText</h4>
|
||||
<blockquote>
|
||||
<p>Type: <code>String</code></p>
|
||||
<p>Determines the initial text when no value is selected. This has no effect if `showText` is set to false.</p>
|
||||
</blockquote>
|
||||
<h4>maxStars</h4>
|
||||
<blockquote>
|
||||
<p>Type: <code>Integer</code></p>
|
||||
<p>Determines the maximum number of stars allowed in a star rating.</p>
|
||||
</blockquote>
|
||||
<h4>showText</h4>
|
||||
<blockquote>
|
||||
<p>Type: <code>Boolean</code></p>
|
||||
<p>Determines whether or not the rating text is shown.</p>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Build</h2>
|
||||
<p>star-rating.js uses <a href="https://www.npmjs.com/get-npm">npm</a> or <a href="https://yarnpkg.com/">yarn</a> to manage package dependencies and <a href="http://gulpjs.com/">gulp</a> to build from <code>src/</code>.</p>
|
||||
<div class="highlight highlight-Bash"><pre><code>$ yarn
|
||||
$ gulp</code></pre></div>
|
||||
<p>The compiled files will be saved in the <code>dist/</code> folder.</p>
|
||||
<h3>Style Customization</h3>
|
||||
<p><a href="http://sass-lang.com/">Sass</a> is used to build the stylesheet so you can <code>@import</code> the <code>src/star-rating.scss</code> file to compile it directly into your Sass project.</p>
|
||||
<p>Following are the default sass values for Star Rating, they are contained in a map variable.</p>
|
||||
<pre><code>$star-rating-defaults: (
|
||||
base-classname : 'gl-star-rating',
|
||||
base-display : block,
|
||||
base-height : 26px,
|
||||
font-size : 0.8em,
|
||||
font-weight : 600,
|
||||
parent : '',
|
||||
star-empty : url(../img/star-empty.svg),
|
||||
star-full : url(../img/star-full.svg),
|
||||
star-half : url(../img/star-half.svg),
|
||||
star-size : 24px,
|
||||
text-background: #1a1a1a,
|
||||
text-color : #fff,
|
||||
);</code></pre>
|
||||
<p>To override any values with your own, simply create a new <code>$star-rating</code> map variable and include only the values you wish to change.</p>
|
||||
<p><strong>Important:</strong> Make sure you define <code>$star-rating</code> before you import the <code>src/star-rating.scss</code> file:</p>
|
||||
<pre><code>$star-rating: (
|
||||
base-height: 32px,
|
||||
star-size : 30px,
|
||||
);
|
||||
@import "../../node_modules/star-rating.js/src/star-rating"</code></pre>
|
||||
<h3>How to change CSS style priority</h3>
|
||||
<p>Sometimes an existing stylesheet rules will override the default CSS styles for Star Ratings. To solve this problem, you can specify a "parent" option in the <code>$star-rating</code> map variable. This option value should be a high priority/specificity property such as an id attribute or similar.</p>
|
||||
<p>In the following example, all Star Rating css rules will begin with <code>[id^=stars]</code> which targets any id attributes that begin with "stars" (i.e. <code>#stars-1</code>):</p>
|
||||
<pre><code>$star-rating: (
|
||||
parent: '[id^=stars]',
|
||||
);</code></pre>
|
||||
<p>The CSS rule <code>.gl-star-rating { ... }</code> now becomes <code>[id^=stars] .gl-star-rating { ... }</code>.
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Compatibility</h2>
|
||||
<ul>
|
||||
<li>All modern browsers</li>
|
||||
</ul>
|
||||
<p>If you need to use the Star Rating library in a unsupported browser (i.e. Internet Explorer), use the <a href="https://polyfill.io">Polyfill service</a>.
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>License</h2>
|
||||
<p><a href="https://github.com/pryley/star-rating.js/blob/master/LICENSE">MIT</a></p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="page-footer">
|
||||
<p>This project is maintained by <a href="https://github.com/pryley">Paul Ryley</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="src/star-rating.js?ver=3.4.0"></script>
|
||||
<script>
|
||||
var destroyed = false;
|
||||
var starratings = new StarRating( '.star-rating', {
|
||||
onClick: function( el ) {
|
||||
console.log( 'Selected: ' + el[el.selectedIndex].text );
|
||||
},
|
||||
});
|
||||
document.querySelector( '.toggle-star-rating' ).addEventListener( 'click', function() {
|
||||
if( !destroyed ) {
|
||||
starratings.destroy();
|
||||
destroyed = true;
|
||||
}
|
||||
else {
|
||||
starratings.rebuild();
|
||||
destroyed = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9384
public/plugins/simpleStar/package-lock.json
generated
Normal file
9384
public/plugins/simpleStar/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
public/plugins/simpleStar/package.json
Normal file
43
public/plugins/simpleStar/package.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "star-rating.js",
|
||||
"description": "This zero-dependency library transforms a SELECT into a dynamic star rating element.",
|
||||
"version": "3.4.0",
|
||||
"author": {
|
||||
"name": "Paul Ryley",
|
||||
"email": "paul@geminilabs.io",
|
||||
"url": "http://geminilabs.io"
|
||||
},
|
||||
"homepage": "https://github.com/pryley/star-rating.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/pryley/star-rating.js.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/pryley/star-rating.js/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"browser-sync": "^2.26.7",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-autoprefixer": "^7.0.1",
|
||||
"gulp-bump": "^3.2.0",
|
||||
"gulp-cssnano": "^2.1.2",
|
||||
"gulp-jshint": "^2.0.4",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"jshint": "^2.11.1",
|
||||
"jshint-stylish": "^2.2.1",
|
||||
"nolie": "github:pryley/nolie.css#develop",
|
||||
"pump": "^3.0.0",
|
||||
"sass-module-importer": "^1.4.0",
|
||||
"yamljs": "^0.3.0",
|
||||
"yargs": "^15.4.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "./node_modules/gulp/bin/gulp.js default --production",
|
||||
"lint": "jshint src/star-rating.js",
|
||||
"postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mLove Star Rating? Support Paul\\'s work by donating on paypal:\\u001b[22m\\u001b[39m\\n > \\u001b[32mhttps://www.paypal.me/pryley\\u001b[0m\\n')\""
|
||||
},
|
||||
"main": "src/star-rating.js"
|
||||
}
|
||||
362
public/plugins/simpleStar/src/star-rating.js
Normal file
362
public/plugins/simpleStar/src/star-rating.js
Normal file
@@ -0,0 +1,362 @@
|
||||
/*!
|
||||
* Star Rating
|
||||
* @version: 3.4.0
|
||||
* @author: Paul Ryley (http://geminilabs.io)
|
||||
* @url: https://github.com/pryley/star-rating.js
|
||||
* @license: MIT
|
||||
*/
|
||||
/** global: define, Event */
|
||||
;(function (window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var handle = 'star-rating';
|
||||
|
||||
/** @return object */
|
||||
var Plugin = function (selector, options) { // string|object|NodeList, object
|
||||
var selectorType = {}.toString.call(selector);
|
||||
if ('[object String]' === selectorType) {
|
||||
this.selects = document.querySelectorAll(selector);
|
||||
} else if ('[object NodeList]' === selectorType) {
|
||||
this.selects = selector;
|
||||
} else {
|
||||
this.selects = [selector];
|
||||
}
|
||||
this.destroy = function () {
|
||||
this.widgets.forEach(function (widget) {
|
||||
widget.destroy_();
|
||||
});
|
||||
};
|
||||
this.rebuild = function () {
|
||||
this.widgets.forEach(function (widget) {
|
||||
widget.rebuild_();
|
||||
});
|
||||
};
|
||||
this.widgets = [];
|
||||
for (var i = 0; i < this.selects.length; i++) {
|
||||
if (this.selects[i].tagName !== 'SELECT' || this.selects[i][handle]) continue;
|
||||
var widget = new Widget(this.selects[i], options);
|
||||
if (widget.direction === undefined) continue;
|
||||
this.widgets.push(widget);
|
||||
}
|
||||
};
|
||||
|
||||
/** @return void */
|
||||
var Widget = function (el, options) { // HTMLElement, object|null
|
||||
this.el = el;
|
||||
this.options_ = this.extend_({}, this.defaults_, options || {}, JSON.parse(el.getAttribute('data-options')));
|
||||
this.setStarCount_();
|
||||
if (this.stars < 1 || this.stars > this.options_.maxStars) return;
|
||||
this.rebuild_();
|
||||
};
|
||||
|
||||
Widget.prototype = {
|
||||
|
||||
defaults_: {
|
||||
classname: 'gl-star-rating',
|
||||
clearable: true,
|
||||
initialText: 'Select a Rating',
|
||||
maxStars: 10,
|
||||
showText: true,
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
init_: function () {
|
||||
this.initEvents_();
|
||||
this.current = this.selected = this.getSelectedValue_();
|
||||
this.wrapEl_();
|
||||
this.buildWidgetEl_();
|
||||
this.setDirection_();
|
||||
this.setValue_(this.current);
|
||||
this.handleEvents_('add');
|
||||
this.el[handle] = true;
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
buildLabelEl_: function () {
|
||||
if (!this.options_.showText) return;
|
||||
this.textEl = this.insertSpanEl_(this.widgetEl, {
|
||||
class: this.options_.classname + '-text',
|
||||
}, true);
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
buildWidgetEl_: function () {
|
||||
var values = this.getOptionValues_();
|
||||
var widgetEl = this.insertSpanEl_(this.el, {
|
||||
class: this.options_.classname + '-stars',
|
||||
}, true);
|
||||
for (var key in values) {
|
||||
var newEl = this.createSpanEl_({
|
||||
'data-value': key,
|
||||
'data-text': values[key],
|
||||
});
|
||||
widgetEl.innerHTML += newEl.outerHTML;
|
||||
}
|
||||
this.widgetEl = widgetEl;
|
||||
this.buildLabelEl_();
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
changeTo_: function (index) { // int
|
||||
if (index < 0 || isNaN(index)) {
|
||||
index = 0;
|
||||
}
|
||||
if (index > this.stars) {
|
||||
index = this.stars;
|
||||
}
|
||||
this.widgetEl.classList.remove('s' + (10 * this.current));
|
||||
this.widgetEl.classList.add('s' + (10 * index));
|
||||
if (this.options_.showText) {
|
||||
this.textEl.textContent = index < 1 ? this.options_.initialText : this.widgetEl.childNodes[index - 1].dataset.text;
|
||||
}
|
||||
this.current = index;
|
||||
},
|
||||
|
||||
/** @return HTMLElement */
|
||||
createSpanEl_: function (attributes) { // object
|
||||
var el = document.createElement('span');
|
||||
attributes = attributes || {};
|
||||
for (var key in attributes) {
|
||||
el.setAttribute(key, attributes[key]);
|
||||
}
|
||||
return el;
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
destroy_: function () {
|
||||
this.handleEvents_('remove');
|
||||
var wrapEl = this.el.parentNode;
|
||||
wrapEl.parentNode.replaceChild(this.el, wrapEl);
|
||||
delete this.el[handle];
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
eventListener_: function (el, action, events, options) { // HTMLElement, string, array
|
||||
options = options || false;
|
||||
events.forEach(function (event) {
|
||||
if (this.events) {
|
||||
el[action + 'EventListener'](event, this.events[event], options);
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
/** @return object */
|
||||
extend_: function () { // ...object
|
||||
var args = [].slice.call(arguments);
|
||||
var result = args[0];
|
||||
var extenders = args.slice(1);
|
||||
Object.keys(extenders).forEach(function (i) {
|
||||
for (var key in extenders[i]) {
|
||||
if (!extenders[i].hasOwnProperty(key)) continue;
|
||||
result[key] = extenders[i][key];
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
/** @return false|object */
|
||||
getEventOptions_: function () { // string
|
||||
var eventOptions = false;
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function () {
|
||||
eventOptions = { passive: false };
|
||||
}
|
||||
});
|
||||
window.addEventListener('test', null, opts);
|
||||
} catch (e) {}
|
||||
return eventOptions;
|
||||
},
|
||||
|
||||
/** @return int */
|
||||
getIndexFromEvent_: function (ev) { // MouseEvent|TouchEvent
|
||||
var direction = {};
|
||||
var pageX = ev.pageX || ev.changedTouches[0].pageX;
|
||||
var widgetWidth = this.widgetEl.offsetWidth;
|
||||
direction.ltr = Math.max(pageX - this.offsetLeft, 1);
|
||||
direction.rtl = widgetWidth - direction.ltr;
|
||||
return Math.min(
|
||||
Math.ceil(direction[this.direction] / Math.round(widgetWidth / this.stars)),
|
||||
this.stars
|
||||
);
|
||||
},
|
||||
|
||||
/** @return object */
|
||||
getOptionValues_: function () {
|
||||
var el = this.el;
|
||||
var unorderedValues = {};
|
||||
var orderedValues = {};
|
||||
for (var i = 0; i < el.length; i++) {
|
||||
if (this.isValueEmpty_(el[i])) continue;
|
||||
unorderedValues[el[i].value] = el[i].text;
|
||||
}
|
||||
Object.keys(unorderedValues).sort().forEach(function (key) {
|
||||
orderedValues[key] = unorderedValues[key];
|
||||
});
|
||||
return orderedValues;
|
||||
},
|
||||
|
||||
/** @return int */
|
||||
getSelectedValue_: function () {
|
||||
return parseInt(this.el.options[Math.max(this.el.selectedIndex, 0)].value) || 0;
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
handleEvents_: function (action) { // string
|
||||
var formEl = this.el.closest('form');
|
||||
if (formEl && formEl.tagName === 'FORM') {
|
||||
this.eventListener_(formEl, action, ['reset']);
|
||||
}
|
||||
if ('add' === action && this.el.disabled) return;
|
||||
this.eventListener_(this.el, action, ['change', 'keydown']);
|
||||
this.eventListener_(this.widgetEl, action, [
|
||||
'mousedown', 'mouseleave', 'mousemove', 'mouseover',
|
||||
'touchend', 'touchmove', 'touchstart',
|
||||
], this.getEventOptions_());
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
initEvents_: function () {
|
||||
this.events = {
|
||||
change: this.onChange_.bind(this),
|
||||
keydown: this.onKeydown_.bind(this),
|
||||
mousedown: this.onPointerdown_.bind(this),
|
||||
mouseleave: this.onPointerleave_.bind(this),
|
||||
mousemove: this.onPointermove_.bind(this),
|
||||
mouseover: this.onPointerover_.bind(this),
|
||||
reset: this.onReset_.bind(this),
|
||||
touchend: this.onPointerdown_.bind(this),
|
||||
touchmove: this.onPointermove_.bind(this),
|
||||
touchstart: this.onPointerover_.bind(this),
|
||||
};
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
insertSpanEl_: function (el, attributes, after) { // HTMLElement, object, bool
|
||||
var newEl = this.createSpanEl_(attributes);
|
||||
el.parentNode.insertBefore(newEl, after === true ? el.nextSibling : el);
|
||||
return newEl;
|
||||
},
|
||||
|
||||
/** @return bool */
|
||||
isValueEmpty_: function (el) { // HTMLElement
|
||||
return el.getAttribute('value') === null || el.value === '';
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
onChange_: function () {
|
||||
this.changeTo_(this.getSelectedValue_());
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
onKeydown_: function (ev) { // KeyboardEvent
|
||||
if (!~['ArrowLeft', 'ArrowRight'].indexOf(ev.key)) return;
|
||||
var increment = ev.key === 'ArrowLeft' ? -1 : 1;
|
||||
if (this.direction === 'rtl') {
|
||||
increment *= -1;
|
||||
}
|
||||
this.setValue_(Math.min(Math.max(this.getSelectedValue_() + increment, 0), this.stars));
|
||||
this.triggerChangeEvent_();
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
onPointerdown_: function (ev) { // MouseEvent|TouchEvent
|
||||
ev.preventDefault();
|
||||
var index = this.getIndexFromEvent_(ev);
|
||||
if (this.current !== 0 && parseFloat(this.selected) === index && this.options_.clearable) {
|
||||
index = 0;
|
||||
}
|
||||
this.setValue_(index);
|
||||
this.triggerChangeEvent_();
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
onPointerleave_: function (ev) { // MouseEvent
|
||||
ev.preventDefault();
|
||||
this.changeTo_(this.selected);
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
onPointermove_: function (ev) { // MouseEvent|TouchEvent
|
||||
ev.preventDefault();
|
||||
this.changeTo_(this.getIndexFromEvent_(ev));
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
onPointerover_: function (ev) { // MouseEvent|TouchEvent
|
||||
ev.preventDefault();
|
||||
var rect = this.widgetEl.getBoundingClientRect();
|
||||
this.offsetLeft = rect.left + document.body.scrollLeft;
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
onReset_: function () {
|
||||
var originallySelected = this.el.querySelector('[selected]');
|
||||
var value = originallySelected ? originallySelected.value : '';
|
||||
this.el.value = value;
|
||||
this.selected = parseInt(value) || 0;
|
||||
this.changeTo_(value);
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
rebuild_: function () {
|
||||
if (this.el.parentNode.classList.contains(this.options_.classname)) {
|
||||
this.destroy_();
|
||||
}
|
||||
this.init_();
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
setDirection_: function () {
|
||||
var wrapEl = this.el.parentNode;
|
||||
this.direction = window.getComputedStyle(wrapEl, null).getPropertyValue('direction');
|
||||
wrapEl.classList.add(this.options_.classname + '-' + this.direction);
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
setValue_: function (index) {
|
||||
this.el.value = this.selected = index;
|
||||
this.changeTo_(index);
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
setStarCount_: function () {
|
||||
var el = this.el;
|
||||
this.stars = 0;
|
||||
for (var i = 0; i < el.length; i++) {
|
||||
if (this.isValueEmpty_(el[i])) continue;
|
||||
if (isNaN(parseFloat(el[i].value)) || !isFinite(el[i].value)) {
|
||||
this.stars = 0;
|
||||
return;
|
||||
}
|
||||
this.stars++;
|
||||
}
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
triggerChangeEvent_: function () {
|
||||
this.el.dispatchEvent(new Event('change'));
|
||||
},
|
||||
|
||||
/** @return void */
|
||||
wrapEl_: function () {
|
||||
var wrapEl = this.insertSpanEl_(this.el, {
|
||||
class: this.options_.classname,
|
||||
'data-star-rating': '',
|
||||
});
|
||||
wrapEl.appendChild(this.el);
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define([], function () { return Plugin; });
|
||||
}
|
||||
else if (typeof module === 'object' && module.exports) {
|
||||
module.exports = Plugin;
|
||||
}
|
||||
else {
|
||||
window.StarRating = Plugin;
|
||||
}
|
||||
|
||||
})(window, document);
|
||||
153
public/plugins/simpleStar/src/star-rating.scss
Normal file
153
public/plugins/simpleStar/src/star-rating.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
/*!
|
||||
* Star Rating
|
||||
* @version: 3.4.0
|
||||
* @author: Paul Ryley (http://geminilabs.io)
|
||||
* @url: https://github.com/pryley/star-rating.js
|
||||
* @license: MIT
|
||||
*/
|
||||
|
||||
$star-rating: () !default;
|
||||
|
||||
$star-rating-defaults: (
|
||||
base-classname : 'gl-star-rating',
|
||||
base-display : block,
|
||||
base-height : 26px,
|
||||
font-size : 0.8em,
|
||||
font-weight : 600,
|
||||
parent : '',
|
||||
star-empty : url(../img/star-empty.svg),
|
||||
star-full : url(../img/star-full.svg),
|
||||
star-half : url(../img/star-half.svg),
|
||||
star-size : 24px,
|
||||
text-background: #1a1a1a,
|
||||
text-color : #fff,
|
||||
);
|
||||
|
||||
@function sr($value) {
|
||||
@return map-get(map-merge($star-rating-defaults, $star-rating), $value);
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}[data-star-rating] {
|
||||
position: relative;
|
||||
display: sr(base-display);
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}[data-star-rating] > select {
|
||||
overflow: hidden;
|
||||
visibility: visible !important;
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
clip: rect(1px, 1px, 1px, 1px); // IE/Edge
|
||||
clip-path: circle(1px at 0 0); // Modern
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}[data-star-rating] > select::before,
|
||||
#{sr(parent)} .#{sr(base-classname)}[data-star-rating] > select::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-ltr[data-star-rating] > select {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-rtl[data-star-rating] > select {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}[data-star-rating] > select:focus + .#{sr(base-classname)}-stars::before {
|
||||
opacity: 0.5;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
outline: dotted 1px currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: sr(base-height);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#{sr(parent)} select[disabled] + .#{sr(base-classname)}-stars {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars > span {
|
||||
display: inline-block;
|
||||
width: sr(star-size);
|
||||
height: sr(star-size);
|
||||
background-size: sr(star-size);
|
||||
background-repeat: no-repeat;
|
||||
background-image: sr(star-empty);
|
||||
margin: 0 sr(star-size)/6 0 0;
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-rtl[data-star-rating] .#{sr(base-classname)}-stars > span {
|
||||
margin: 0 0 0 sr(star-size)/6;
|
||||
&:last-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s10 > span:nth-child(1),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s20 > span:nth-child(-1n+2),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s30 > span:nth-child(-1n+3),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s40 > span:nth-child(-1n+4),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s50 > span:nth-child(-1n+5),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s60 > span:nth-child(-1n+6),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s70 > span:nth-child(-1n+7),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s80 > span:nth-child(-1n+8),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s90 > span:nth-child(-1n+9),
|
||||
#{sr(parent)} .#{sr(base-classname)}-stars.s100 > span {
|
||||
background-image: sr(star-full);
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-text {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: sr(base-height);
|
||||
line-height: sr(base-height);
|
||||
font-size: sr(font-size);
|
||||
font-weight: sr(font-weight);
|
||||
color: sr(text-color);
|
||||
background-color: sr(text-background);
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
padding: 0 sr(star-size)/2 0 sr(star-size)/4;
|
||||
margin: 0 0 0 sr(star-size)/2;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -(sr(star-size)/2);
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
border-width: sr(base-height)/2 sr(star-size)/2 sr(base-height)/2 0;
|
||||
border-color: transparent sr(text-background) transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
#{sr(parent)} .#{sr(base-classname)}-rtl[data-star-rating] .#{sr(base-classname)}-text {
|
||||
padding: 0 sr(star-size)/4 0 sr(star-size)/2;
|
||||
margin: 0 sr(star-size)/2 0 0;
|
||||
|
||||
&::before {
|
||||
left: unset;
|
||||
right: -(sr(star-size)/2);
|
||||
border-width: sr(base-height)/2 0 sr(base-height)/2 sr(star-size)/2;
|
||||
border-color: transparent transparent transparent sr(text-background);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user