mirror of
https://github.com/KevinMidboe/vue-js-modal.git
synced 2025-10-29 18:00:20 +00:00
Added code linting & cleaned code acording to JavaScript Standard Style
This commit is contained in:
24
dist/index.js
vendored
24
dist/index.js
vendored
File diff suppressed because one or more lines are too long
24
dist/ssr.index.js
vendored
24
dist/ssr.index.js
vendored
File diff suppressed because one or more lines are too long
10
package.json
10
package.json
@@ -20,8 +20,9 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
|
"build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
|
||||||
"build:server": "webpack --config ./build/webpack.server.config.js --progress --hide-modules",
|
"build:server": "webpack --config ./build/webpack.server.config.js --progress --hide-modules",
|
||||||
|
"lint": "eslint --ext .js,.vue src test/unit/specs",
|
||||||
"unit": "karma start test/unit/karma.conf.js",
|
"unit": "karma start test/unit/karma.conf.js",
|
||||||
"build": "npm run unit && npm run build:client && npm run build:server"
|
"build": "npm run lint && npm run unit && npm run build:client && npm run build:server"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -43,6 +44,13 @@
|
|||||||
"karma-sourcemap-loader": "^0.3.7",
|
"karma-sourcemap-loader": "^0.3.7",
|
||||||
"karma-spec-reporter": "0.0.31",
|
"karma-spec-reporter": "0.0.31",
|
||||||
"karma-webpack": "^2.0.2",
|
"karma-webpack": "^2.0.2",
|
||||||
|
"eslint": "^3.19.0",
|
||||||
|
"eslint-config-standard": "^6.2.1",
|
||||||
|
"eslint-friendly-formatter": "^2.0.7",
|
||||||
|
"eslint-loader": "^1.7.1",
|
||||||
|
"eslint-plugin-html": "^2.0.0",
|
||||||
|
"eslint-plugin-promise": "^3.4.0",
|
||||||
|
"eslint-plugin-standard": "^2.0.1",
|
||||||
"lolex": "^1.5.2",
|
"lolex": "^1.5.2",
|
||||||
"mocha": "^3.2.0",
|
"mocha": "^3.2.0",
|
||||||
"node-sass": "^4.5.0",
|
"node-sass": "^4.5.0",
|
||||||
|
|||||||
@@ -41,7 +41,7 @@
|
|||||||
},
|
},
|
||||||
delay: {
|
delay: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0
|
||||||
},
|
},
|
||||||
resizable: {
|
resizable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
},
|
},
|
||||||
classes: {
|
classes: {
|
||||||
type: [String, Array],
|
type: [String, Array],
|
||||||
default: 'v--modal',
|
default: 'v--modal'
|
||||||
},
|
},
|
||||||
minWidth: {
|
minWidth: {
|
||||||
type: Number,
|
type: Number,
|
||||||
@@ -94,8 +94,8 @@
|
|||||||
validator (value) {
|
validator (value) {
|
||||||
if (typeof value === 'string') {
|
if (typeof value === 'string') {
|
||||||
let width = parseNumber(value)
|
let width = parseNumber(value)
|
||||||
return (width.type === '%' || width.type === 'px')
|
return (width.type === '%' || width.type === 'px') &&
|
||||||
&& width.value > 0
|
width.value > 0
|
||||||
}
|
}
|
||||||
|
|
||||||
return value >= 0
|
return value >= 0
|
||||||
@@ -111,8 +111,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let height = parseNumber(value)
|
let height = parseNumber(value)
|
||||||
return (height.type === '%' || height.type === 'px')
|
return (height.type === '%' || height.type === 'px') &&
|
||||||
&& height.value > 0
|
height.value > 0
|
||||||
}
|
}
|
||||||
|
|
||||||
return value >= 0
|
return value >= 0
|
||||||
@@ -201,7 +201,7 @@
|
|||||||
|
|
||||||
this.toggle(state, params)
|
this.toggle(state, params)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
window.addEventListener('resize', this.onWindowResize)
|
window.addEventListener('resize', this.onWindowResize)
|
||||||
this.onWindowResize()
|
this.onWindowResize()
|
||||||
@@ -229,8 +229,8 @@
|
|||||||
* pivots, window size and modal size
|
* pivots, window size and modal size
|
||||||
*/
|
*/
|
||||||
position () {
|
position () {
|
||||||
const { window, modal, shift, pivotX, pivotY,
|
const { window, shift, pivotX, pivotY,
|
||||||
trueModalWidth, trueModalHeight, isAutoHeight } = this
|
trueModalWidth, trueModalHeight } = this
|
||||||
|
|
||||||
const maxLeft = window.width - trueModalWidth
|
const maxLeft = window.width - trueModalWidth
|
||||||
const maxTop = window.height - trueModalHeight
|
const maxTop = window.height - trueModalHeight
|
||||||
@@ -338,18 +338,15 @@
|
|||||||
* Generates event object
|
* Generates event object
|
||||||
*/
|
*/
|
||||||
genEventObject (params) {
|
genEventObject (params) {
|
||||||
//todo: clean this up (change to ...)
|
// @todo: clean this up (change to ...)
|
||||||
var data = {
|
var data = {
|
||||||
name: this.name,
|
name: this.name,
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
canceled: false,
|
canceled: false,
|
||||||
ref: this.$refs.modal,
|
ref: this.$refs.modal
|
||||||
stop: function() {
|
|
||||||
this.canceled = true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return Vue.util.extend(data, params || {});
|
return Vue.util.extend(data, params || {})
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Event handler which is triggered on modal resize
|
* Event handler which is triggered on modal resize
|
||||||
@@ -362,7 +359,7 @@
|
|||||||
this.modal.height = event.size.height
|
this.modal.height = event.size.height
|
||||||
|
|
||||||
const { size } = this.modal
|
const { size } = this.modal
|
||||||
const resizeEvent = this.genEventObject({ size });
|
const resizeEvent = this.genEventObject({ size })
|
||||||
|
|
||||||
this.$emit('resize', resizeEvent)
|
this.$emit('resize', resizeEvent)
|
||||||
},
|
},
|
||||||
@@ -403,12 +400,6 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
emitCancelableEvent (data) {
|
|
||||||
let stopEventExecution = false
|
|
||||||
let stop = () => { stopEventExecution = true }
|
|
||||||
let event = this.genEventObject(data)
|
|
||||||
},
|
|
||||||
|
|
||||||
getDraggableElement () {
|
getDraggableElement () {
|
||||||
var selector = typeof this.draggable !== 'string'
|
var selector = typeof this.draggable !== 'string'
|
||||||
? '.v--modal-box'
|
? '.v--modal-box'
|
||||||
@@ -432,7 +423,7 @@
|
|||||||
|
|
||||||
addDraggableListeners () {
|
addDraggableListeners () {
|
||||||
if (!this.draggable) {
|
if (!this.draggable) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
let dragger = this.getDraggableElement()
|
let dragger = this.getDraggableElement()
|
||||||
@@ -493,7 +484,7 @@
|
|||||||
// console.log('removing draggable handlers')
|
// console.log('removing draggable handlers')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.v--modal-overlay {
|
.v--modal-overlay {
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export default {
|
|||||||
this.$emit('resize-stop', {
|
this.$emit('resize-stop', {
|
||||||
element: this.$el.parentElement,
|
element: this.$el.parentElement,
|
||||||
size: this.size
|
size: this.size
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
mousemove (event) {
|
mousemove (event) {
|
||||||
this.resize(event)
|
this.resize(event)
|
||||||
|
|||||||
@@ -1,26 +1,21 @@
|
|||||||
// Parses string with float number and suffix:
|
const floatRegexp = '[-+]?[0-9]*.?[0-9]+'
|
||||||
// "0.001" => { type: "px", value: 0.001 }
|
|
||||||
// "0.001px" => { type: "px", value: 0.001 }
|
|
||||||
// "0.1%" => { type: "px", value: 0.1 }
|
|
||||||
// "foo" => { type: "", value: "foo" }
|
|
||||||
// "auto" => { type: "auto", value: 0 }
|
|
||||||
|
|
||||||
var floatRegexp = '[-+]?[0-9]*\.?[0-9]+'
|
const types = [
|
||||||
|
|
||||||
var types = [
|
|
||||||
{
|
{
|
||||||
name: 'px',
|
name: 'px',
|
||||||
regexp: new RegExp(`^${floatRegexp}px\$`)
|
regexp: new RegExp(`^${floatRegexp}px$`)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '%',
|
name: '%',
|
||||||
regexp: new RegExp(`^${floatRegexp}%\$`)
|
regexp: new RegExp(`^${floatRegexp}%$`)
|
||||||
},
|
},
|
||||||
// Fallback option:
|
/**
|
||||||
// If no suffix specified, assign to px
|
* Fallback optopn
|
||||||
|
* If no suffix specified, assigning "px"
|
||||||
|
*/
|
||||||
{
|
{
|
||||||
name: 'px',
|
name: 'px',
|
||||||
regexp: new RegExp(`^${floatRegexp}\$`)
|
regexp: new RegExp(`^${floatRegexp}$`)
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
11
src/util.js
11
src/util.js
@@ -1,3 +1,12 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {Number} from Lower limit
|
||||||
|
* @param {Number} to Upper limit
|
||||||
|
* @param {Number} value Checked number value
|
||||||
|
*
|
||||||
|
* @return {Number} Either source value itself or limit value if range limits
|
||||||
|
* are exceeded
|
||||||
|
*/
|
||||||
export const inRange = (from, to, value) => {
|
export const inRange = (from, to, value) => {
|
||||||
if (value < from) {
|
if (value < from) {
|
||||||
return from
|
return from
|
||||||
@@ -8,6 +17,8 @@ export const inRange = (from, to, value) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return value
|
return value
|
||||||
|
// lol
|
||||||
|
// return value < from ? from : (value > to ? to : value)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default { inRange }
|
export default { inRange }
|
||||||
|
|||||||
Reference in New Issue
Block a user