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": {
 | 
			
		||||
    "build:client": "webpack --config ./build/webpack.client.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",
 | 
			
		||||
    "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",
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
@@ -43,6 +44,13 @@
 | 
			
		||||
    "karma-sourcemap-loader": "^0.3.7",
 | 
			
		||||
    "karma-spec-reporter": "0.0.31",
 | 
			
		||||
    "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",
 | 
			
		||||
    "mocha": "^3.2.0",
 | 
			
		||||
    "node-sass": "^4.5.0",
 | 
			
		||||
 
 | 
			
		||||
@@ -30,7 +30,7 @@
 | 
			
		||||
<script>
 | 
			
		||||
  export default {
 | 
			
		||||
    name: 'Dialog',
 | 
			
		||||
    data() {
 | 
			
		||||
    data () {
 | 
			
		||||
      return {
 | 
			
		||||
        params: {},
 | 
			
		||||
        defaultButtons: [{ title: 'CLOSE' }]
 | 
			
		||||
 
 | 
			
		||||
@@ -41,7 +41,7 @@
 | 
			
		||||
      },
 | 
			
		||||
      delay: {
 | 
			
		||||
        type: Number,
 | 
			
		||||
        default: 0,
 | 
			
		||||
        default: 0
 | 
			
		||||
      },
 | 
			
		||||
      resizable: {
 | 
			
		||||
        type: Boolean,
 | 
			
		||||
@@ -72,7 +72,7 @@
 | 
			
		||||
      },
 | 
			
		||||
      classes: {
 | 
			
		||||
        type: [String, Array],
 | 
			
		||||
        default: 'v--modal',
 | 
			
		||||
        default: 'v--modal'
 | 
			
		||||
      },
 | 
			
		||||
      minWidth: {
 | 
			
		||||
        type: Number,
 | 
			
		||||
@@ -94,8 +94,8 @@
 | 
			
		||||
        validator (value) {
 | 
			
		||||
          if (typeof value === 'string') {
 | 
			
		||||
            let width = parseNumber(value)
 | 
			
		||||
            return (width.type === '%' || width.type === 'px')
 | 
			
		||||
              && width.value > 0
 | 
			
		||||
            return (width.type === '%' || width.type === 'px') &&
 | 
			
		||||
              width.value > 0
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          return value >= 0
 | 
			
		||||
@@ -111,8 +111,8 @@
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            let height = parseNumber(value)
 | 
			
		||||
            return (height.type === '%' || height.type === 'px')
 | 
			
		||||
              && height.value > 0
 | 
			
		||||
            return (height.type === '%' || height.type === 'px') &&
 | 
			
		||||
              height.value > 0
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          return value >= 0
 | 
			
		||||
@@ -201,7 +201,7 @@
 | 
			
		||||
 | 
			
		||||
          this.toggle(state, params)
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
      })
 | 
			
		||||
 | 
			
		||||
      window.addEventListener('resize', this.onWindowResize)
 | 
			
		||||
      this.onWindowResize()
 | 
			
		||||
@@ -229,8 +229,8 @@
 | 
			
		||||
       * pivots, window size and modal size
 | 
			
		||||
       */
 | 
			
		||||
      position () {
 | 
			
		||||
        const { window, modal, shift, pivotX, pivotY,
 | 
			
		||||
          trueModalWidth, trueModalHeight, isAutoHeight } = this
 | 
			
		||||
        const { window, shift, pivotX, pivotY,
 | 
			
		||||
          trueModalWidth, trueModalHeight } = this
 | 
			
		||||
 | 
			
		||||
        const maxLeft = window.width - trueModalWidth
 | 
			
		||||
        const maxTop = window.height - trueModalHeight
 | 
			
		||||
@@ -338,18 +338,15 @@
 | 
			
		||||
       * Generates event object
 | 
			
		||||
       */
 | 
			
		||||
      genEventObject (params) {
 | 
			
		||||
        //todo: clean this up (change to ...)
 | 
			
		||||
        // @todo: clean this up (change to ...)
 | 
			
		||||
        var data = {
 | 
			
		||||
          name: this.name,
 | 
			
		||||
          timestamp: Date.now(),
 | 
			
		||||
          canceled: false,
 | 
			
		||||
          ref: this.$refs.modal,
 | 
			
		||||
          stop: function() {
 | 
			
		||||
            this.canceled = true
 | 
			
		||||
          }
 | 
			
		||||
          ref: this.$refs.modal
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return Vue.util.extend(data, params || {});
 | 
			
		||||
        return Vue.util.extend(data, params || {})
 | 
			
		||||
      },
 | 
			
		||||
      /**
 | 
			
		||||
       * Event handler which is triggered on modal resize
 | 
			
		||||
@@ -362,7 +359,7 @@
 | 
			
		||||
        this.modal.height = event.size.height
 | 
			
		||||
 | 
			
		||||
        const { size } = this.modal
 | 
			
		||||
        const resizeEvent = this.genEventObject({ size });
 | 
			
		||||
        const resizeEvent = this.genEventObject({ size })
 | 
			
		||||
 | 
			
		||||
        this.$emit('resize', resizeEvent)
 | 
			
		||||
      },
 | 
			
		||||
@@ -403,12 +400,6 @@
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
 | 
			
		||||
      emitCancelableEvent (data) {
 | 
			
		||||
        let stopEventExecution = false
 | 
			
		||||
        let stop = () => { stopEventExecution = true }
 | 
			
		||||
        let event = this.genEventObject(data)
 | 
			
		||||
      },
 | 
			
		||||
 | 
			
		||||
      getDraggableElement () {
 | 
			
		||||
        var selector = typeof this.draggable !== 'string'
 | 
			
		||||
          ? '.v--modal-box'
 | 
			
		||||
@@ -432,7 +423,7 @@
 | 
			
		||||
 | 
			
		||||
      addDraggableListeners () {
 | 
			
		||||
        if (!this.draggable) {
 | 
			
		||||
          return;
 | 
			
		||||
          return
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        let dragger = this.getDraggableElement()
 | 
			
		||||
@@ -493,7 +484,7 @@
 | 
			
		||||
      //  console.log('removing draggable handlers')
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
  }
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
  .v--modal-overlay {
 | 
			
		||||
 
 | 
			
		||||
@@ -15,7 +15,7 @@ export default {
 | 
			
		||||
      type: Number,
 | 
			
		||||
      default: 0
 | 
			
		||||
    }},
 | 
			
		||||
  data() {
 | 
			
		||||
  data () {
 | 
			
		||||
    return {
 | 
			
		||||
      clicked: false,
 | 
			
		||||
      size: {}
 | 
			
		||||
@@ -30,7 +30,7 @@ export default {
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    start(event) {
 | 
			
		||||
    start (event) {
 | 
			
		||||
      this.clicked = true
 | 
			
		||||
 | 
			
		||||
      window.addEventListener('mousemove', this.mousemove, false)
 | 
			
		||||
@@ -39,7 +39,7 @@ export default {
 | 
			
		||||
      event.stopPropagation()
 | 
			
		||||
      event.preventDefault()
 | 
			
		||||
    },
 | 
			
		||||
    stop() {
 | 
			
		||||
    stop () {
 | 
			
		||||
      this.clicked = false
 | 
			
		||||
 | 
			
		||||
      window.removeEventListener('mousemove', this.mousemove, false)
 | 
			
		||||
@@ -48,12 +48,12 @@ export default {
 | 
			
		||||
      this.$emit('resize-stop', {
 | 
			
		||||
        element: this.$el.parentElement,
 | 
			
		||||
        size: this.size
 | 
			
		||||
      });
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    mousemove(event) {
 | 
			
		||||
    mousemove (event) {
 | 
			
		||||
      this.resize(event)
 | 
			
		||||
    },
 | 
			
		||||
    resize(event) {
 | 
			
		||||
    resize (event) {
 | 
			
		||||
      var el = this.$el.parentElement
 | 
			
		||||
 | 
			
		||||
      if (el) {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,26 +1,21 @@
 | 
			
		||||
// Parses string with float number and suffix:
 | 
			
		||||
// "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 }
 | 
			
		||||
const floatRegexp = '[-+]?[0-9]*.?[0-9]+'
 | 
			
		||||
 | 
			
		||||
var floatRegexp = '[-+]?[0-9]*\.?[0-9]+'
 | 
			
		||||
 | 
			
		||||
var types = [
 | 
			
		||||
const types = [
 | 
			
		||||
  {
 | 
			
		||||
    name: 'px',
 | 
			
		||||
    regexp: new RegExp(`^${floatRegexp}px\$`)
 | 
			
		||||
    regexp: new RegExp(`^${floatRegexp}px$`)
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    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',
 | 
			
		||||
    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) => {
 | 
			
		||||
  if (value < from) {
 | 
			
		||||
    return from
 | 
			
		||||
@@ -8,6 +17,8 @@ export const inRange = (from, to, value) => {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return value
 | 
			
		||||
  // lol
 | 
			
		||||
  // return value < from ? from : (value > to ? to : value)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default { inRange }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user