Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor/clone #54

Merged
merged 19 commits into from
Mar 16, 2019
Merged

Refactor/clone #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9a64fb9
refactor: cloning technique to use vnode
abdelrahman3d Mar 12, 2019
66dcb57
refactor: change loaded flag to isLoaded
abdelrahman3d Mar 14, 2019
57017e5
enhance: slider track transition
abdelrahman3d Mar 14, 2019
d4b0c34
feat: update slide state based on its index
abdelrahman3d Mar 14, 2019
8e48edb
refactor: change $settings variable name to config
abdelrahman3d Mar 14, 2019
1b93363
refactor: change $settings variable name in slide component
abdelrahman3d Mar 14, 2019
3a9ec3b
reafactor: overall clean up
abdelrahman3d Mar 14, 2019
e35f3bc
fix: hopper addons after update
abdelrahman3d Mar 14, 2019
4281980
chore: clean up
abdelrahman3d Mar 14, 2019
632f2f7
refactor: cloning technique to use vnode
abdelrahman3d Mar 12, 2019
07c106a
refactor: change loaded flag to isLoaded
abdelrahman3d Mar 14, 2019
a0377bf
enhance: slider track transition
abdelrahman3d Mar 14, 2019
12e640f
feat: update slide state based on its index
abdelrahman3d Mar 14, 2019
9936386
refactor: change $settings variable name to config
abdelrahman3d Mar 14, 2019
01f6c4d
refactor: change $settings variable name in slide component
abdelrahman3d Mar 14, 2019
f147cb9
reafactor: overall clean up
abdelrahman3d Mar 14, 2019
589c0a4
fix: hopper addons after update
abdelrahman3d Mar 14, 2019
4032d42
chore: clean up
abdelrahman3d Mar 14, 2019
b32887a
Merge branch 'refactor/clone' of github.com:baianat/hooper into refac…
abdelrahman3d Mar 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 13 additions & 77 deletions demo/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<slide>
slide 5
</slide>
<slide>
<slide @click.native="click">
slide 6
</slide>
<!-- optional elements -->
Expand All @@ -33,68 +33,6 @@
</svg>
</hooper-navigation>
</hooper>

<div style="direction: rtl">
<hooper ref="hooper2">
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
<slide>
slide 3
</slide>
<slide>
slide 4
</slide>
<slide>
slide 5
</slide>
<slide>
slide 6
</slide>

<!-- optionaly elements -->
<svg height="24" viewBox="0 0 24 24" class="icon-keyboard-arrow-right" slot="hooper-prev">
<title>keyboard arrow right</title>
<path d="M8.29,17.29,13.59,12,8.29,6.71A1,1,0,0,1,9.71,5.29l6,6a1,1,0,0,1,0,1.42l-6,6a1,1,0,0,1-1.42,0A1,1,0,0,1,8.29,17.29Z" />
</svg>
<svg width="24" height="24" viewBox="0 0 20 20" class="icon-keyboard-arrow-left" slot="hooper-next">
<path d="M15.71,6.71,10.41,12l5.3,5.29a1,1,0,0,1,0,1.42,1,1,0,0,1-1.42,0l-6-6a1,1,0,0,1,0-1.42l6-6a1,1,0,1,1,1.42,1.42Z" />
</svg>
</hooper>
</div>
<hooper :settings="hooperVertical" style="height: 400px">
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
<slide>
slide 3
</slide>
<slide>
slide 4
</slide>
<slide>
slide 5
</slide>
<slide>
slide 6
</slide>
<!-- optionaly elements -->
<svg height="24" viewBox="0 0 24 24" class="icon-keyboard-arrow-down" slot="hooper-next">
<title>keyboard arrow right</title>
<path d="M11.29,15.71l-6-6A1,1,0,0,1,6.71,8.29L12,13.59l5.29-5.3a1,1,0,0,1,1.42,1.42l-6,6a1,1,0,0,1-1.42,0Z" />
</svg>
<svg width="24" height="24" viewBox="0 0 20 20" class="icon-keyboard-arrow-up" slot="hooper-prev">
<path d="M5.29,15.71a1,1,0,0,1,0-1.42l6-6a1,1,0,0,1,1.42,0l6,6a1,1,0,0,1,0,1.42,1,1,0,0,1-1.42,0L12,10.41l-5.29,5.3A1,1,0,0,1,5.29,15.71Z" />
</svg>

</hooper>

</div>

</template>
Expand All @@ -117,22 +55,19 @@ export default {
HooperPagination,
HooperNavigation
},
methods: {
click() {
console.log('dde');
}
},
data () {
return {
hooper: {
itemsToShow: 3,
shortDrag: true,
sync: 'hooper2',
breakpoints: {
800: {
centerMode: false,
itemsToShow: 3
},
1000: {
itemsToShow: 6,
pagination: 'fraction'
}
}
itemsToShow: 2,
shortDrag: false,
centerMode: false,
infiniteScroll: true,
vertical: false
},
hooperRTL: {
itemsToShow: 2,
Expand Down Expand Up @@ -168,7 +103,8 @@ export default {
font-size: 30px;
border-radius: 10px;
}
.is-active {
.is-clone,
.hooper-clone {
background-color: rgb(71, 218, 127);
}
</style>
Expand Down
Loading