Skip to content

Commit

Permalink
First Release
Browse files Browse the repository at this point in the history
  • Loading branch information
@BosNaufal
BosNaufal committed May 8, 2016
0 parents commit d4f1dc9
Show file tree
Hide file tree
Showing 14 changed files with 888 additions and 0 deletions.
21 changes: 21 additions & 0 deletions LICENSE
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2016 Naufal Rabbani

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.
71 changes: 71 additions & 0 deletions README.md
@@ -0,0 +1,71 @@
# Vue Scrollbar

The Simplest Scroll Area Component with custom scrollbar for [Vue Js](http://vuejs.org/).

[DEMO](https://bosnaufal.github.io/vue-scrollbar)

## Install
You can import [vue-scrollbar.vue](./src/js/components/vue-scrollbar.vue) to your vue component file like [this](./src/js/components/app.js) and process it with your preprocessor.;


You can install it via NPM
```bash
npm install vue-scrollbar
```


## Usage
```html

<template>
<vue-scrollbar classes="my-scrollbar">
<div class="should-have-a-children scroll-me">
<p>And Now</p>
<p>You Can Put</p>
<p>A Long Content Here</p>
</div>
</vue-scrollbar>
</template>

<script>
// Don't forget to import the Scrollbar Sass
require('../../sass/_Scrollbar.sass');
import vueScrollbar from './vue-scrollbar.vue';
export default {
components: { vueScrollbar }
};
</script>
```


## Props
##### clasess (String)
Just the ordinary class name for styling the wrapper. It's TOTALLY CUSTOMIZABLE!
```css
/*The Wrapper*/
.my-scrollbar{
max-width: 500px;
max-height: 450px;
}

/*The Content*/
.scroll-me{
min-width: 750px;
}
```

## Thank You for Making this useful~

## Let's talk about some projects with me
Just Contact Me At:
- Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com)
- Skype Id: bosnaufal254
- twitter: [@BosNaufal](https://twitter.com/BosNaufal)

## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2016 - forever Naufal Rabbani
Binary file added assets/img/share.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions build/build.js

Large diffs are not rendered by default.

39 changes: 39 additions & 0 deletions index.html
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue Scrollbar | The Simplest Scroll Area Component with custom scrollbar for Vue Js.</title>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">

<meta name="description" content="The Simplest Scroll Area Component with custom scrollbar for Vue Js.">
<meta name="keywords" content="vue, component, vue js, scrollbar, scroll, scrollbar effect, smooth scroll, custom scrollbar, slimscroll">
<meta name="robots" content="index, follow">
<meta name="DC.title" content="Vue Scrollbar | The Simplest Scroll Area Component with custom scrollbar for Vue Js.">

<meta property="og:url" content="http://bosnaufal.github.io/vue-scrollbar/">
<meta property="og:type" content="website">
<meta property="og:title" content="Vue Scrollbar">
<meta property="og:description" content="The Simplest Scroll Area Component with custom scrollbar for Vue Js.">
<meta property="og:image" content="http://bosnaufal.github.io/vue-scrollbar/assets/img/share.png">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@BosNaufal">
<meta name="twitter:site" content="@BosNaufal">
<meta name="twitter:title" content="Vue Scrollbar">
<meta name="twitter:description" content="The Simplest Scroll Area Component with custom scrollbar for Vue Js">
<meta name="twitter:image" content="http://bosnaufal.github.io/vue-scrollbar/assets/img/share.png">

<link rel="canonical" href="http://bosnaufal.github.io/vue-scrollbar/">
<link rel="author" href="https://github.com/BosNaufal" />
<link rel="publisher" href="https://github.com/BosNaufal" />
</head>
<body>

<app></app>

<script src="./build/build.js"></script>
<!-- <script src="build.js"></script> -->
</body>
</html>
48 changes: 48 additions & 0 deletions package.json
@@ -0,0 +1,48 @@
{
"name": "vue-scrollbar",
"version": "1.0.0",
"description": "The Simplest Scroll Area Component with custom scrollbar for Vue JS",
"main": "./src/js/component/index.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/BosNaufal/vue-scrollbar.git"
},
"keywords": [
"vue",
"component",
"vue js",
"scrollbar",
"scroll",
"scrollbar effect",
"smooth scroll",
"custom scrollbar",
"slimscroll"
],
"author": "Naufal Rabbani <bosnaufalemail@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/BosNaufal/vue-scrollbar/issues"
},
"homepage": "https://github.com/BosNaufal/vue-scrollbar#readme",
"devDependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"jade-loader": "^0.8.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.2.3",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"vue": "^1.0.21"
}
}
45 changes: 45 additions & 0 deletions src/js/components/app.vue
@@ -0,0 +1,45 @@

<template lang="jade">

div
h1( align="center") Vue Scrollbar
vue-scrollbar( classes="my-scrollbar" )
.scroll-me
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.kolom
.clearfix
br
br
h3( align="center" )
a( href="https://bosnaufal.github.io/vue-scrollbar" ) Fork Me On Github!
</template>

<script>
require('../../sass/main.sass');
import vueScrollbar from './vue-scrollbar.vue';
export default {
components: { vueScrollbar }
};
</script>
155 changes: 155 additions & 0 deletions src/js/components/horizontal-scrollbar.vue
@@ -0,0 +1,155 @@

<template lang="jade">

.vue-scrollbar__scrollbar-horizontal( v-if="width < 100" @click="jump" v-el:container )
.scrollbar(
v-bind:class="dragging || draggingFromParent ? '' : 'vue-scrollbar-transition'"
v-el:scrollbar
@touchstart="startDrag"
@mousedown="startDrag"
v-bind:style="{ width: width+'%', left: scrolling.h + '%' }"
)

</template>

<script>
export default {
props: {
area: {
type: Object,
default: 0
},
wrapper: {
type: Object,
default: 0
},
scrolling: {
type: Object,
default: { v: 0, h: 0 }
},
draggingFromParent: {
type: Boolean,
default: false
},
onChangePosition: {
type: Function,
default: () => {}
},
},
data(){
return{
width: 0,
dragging: false,
start: 0
}
},
methods: {
startDrag(e){
e.preventDefault()
e.stopPropagation()
e = e.changedTouches ? e.changedTouches[0] : e
// Prepare to drag
this.dragging = true
this.start = e.pageX
},
onDrag(e){
if(this.dragging){
e.preventDefault()
e.stopPropagation()
e = e.changedTouches ? e.changedTouches[0] : e
let xMovement = e.pageX - this.start
let xMovementPercentage = xMovement / this.wrapper.width * 100
// Update the last e.pageX
this.start = e.pageX
// The next Horizontal Value will be
let next = this.scrolling.h + xMovementPercentage
this.normalize(next)
// DO THIS WAY IS NOT SAFE FOR WORK!
// But it needed to make it simple~
this.$parent.dragging = true
this.onChangePosition(next, 'horizontal')
}
},
stopDrag(e){
this.dragging = false
// DO THIS WAY IS NOT SAFE FOR WORK!
// But it needed to make it simple~
this.$parent.dragging = false
},
jump(e){
let isContainer = e.target === this.$els.container
if(isContainer){
// Get the Element Position
let position = this.$els.scrollbar.getBoundingClientRect()
// Calculate the horizontal Movement
let xMovement = e.pageX - position.left;
let centerize = (this.width / 2)
let xMovementPercentage = xMovement / this.wrapper.width * 100 - centerize
// Update the last e.pageX
this.start = e.pageX
// The next horizontal Value will be
let next = this.scrolling.h + xMovementPercentage
this.normalize(next)
this.onChangePosition(next, 'horizontal')
}
},
normalize(next){
// Check For the Max Position
let lowerEnd = 100 - this.width
if(next < 0) next = 0
if(next > lowerEnd) next = lowerEnd
this.scrolling.h = next
},
},
ready(){
// Scrollbar Width
this.width = this.wrapper.width / this.area.width * 100
// Put the Listener
document.addEventListener("mousemove", this.onDrag)
document.addEventListener("touchmove", this.onDrag)
document.addEventListener("mouseup", this.stopDrag)
document.addEventListener("touchend", this.stopDrag)
},
beforeDestroy(){
// Remove the Listener
document.addEventListener("mousemove", this.onDrag)
document.addEventListener("touchmove", this.onDrag)
document.addEventListener("mouseup", this.stopDrag)
document.addEventListener("touchend", this.stopDrag)
}
};
</script>

0 comments on commit d4f1dc9

Please sign in to comment.