inital commit

This commit is contained in:
2024-02-01 09:53:53 +00:00
commit 9743fce12b
19771 changed files with 4230637 additions and 0 deletions

4
public/plugins/simpleStar/.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
.DS_Store
bower_components
node_modules
npm-debug.log

View 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

View File

@@ -0,0 +1,8 @@
{
"language": "node_js",
"node_js": "stable",
"script": [
"npm run lint"
],
"sudo": false
}

View 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.

View File

@@ -0,0 +1,281 @@
# star-rating.js
[![npm version](https://badge.fury.io/js/star-rating.js.svg)](https://badge.fury.io/js/star-rating.js)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](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)

View 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"
]
}

View 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

File diff suppressed because it is too large Load Diff

View 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;
}
}

View 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;
}

View 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}

View 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);

View 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'));

View 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

View 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

View 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

View 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>&lt;select class="star-rating"&gt;
&lt;option value=""&gt;Select a rating&lt;/option&gt;
&lt;option value="5"&gt;Excellent&lt;/option&gt;
&lt;option value="4"&gt;Very Good&lt;/option&gt;
&lt;option value="3"&gt;Average&lt;/option&gt;
&lt;option value="2"&gt;Poor&lt;/option&gt;
&lt;option value="1"&gt;Terrible&lt;/option&gt;
&lt;/select&gt;</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

File diff suppressed because it is too large Load Diff

View 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"
}

View 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);

View 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);
}
}