Zulko / eagle.js

A hackable slideshow framework built with Vue.js
https://zulko.github.io/eaglejs-demo/
ISC License
4.08k stars 222 forks source link

feature request: **PERMALINKS** Go to a specific slide. #24

Closed c0b closed 6 years ago

c0b commented 6 years ago

like https://webslides.tv/#slide=4 PERMALINKS Go to a specific slide.

I found the eagle.js from https://bestof.js.org/tags/presentation/trending/this-month looking for some revealjs alternative, one of the common feature available in others is the PERMALINKS but still lack in eagle.js ?

c0b commented 6 years ago

reveal.js uses http://lab.hakim.se/reveal-js/#/6 as the permalink to specific slide,

can this url https://zulko.github.io/eaglejs-demo/#/introducing-eagle be redesigned to similar like

https://zulko.github.io/eaglejs-demo/introducing-eagle/#/ or the webslides style by #slide=4

yaodingyd commented 6 years ago

Because vue-router is not a dependency to eagle, I don't think implement permalinks inside eagle would be a good idea. But you can easily achieve this by use vue-router.

For example, in project's built-in example, add params to route paths:

slideshows.list.forEach(function (slideshow) {
  routes.push({
    path: '/' + slideshow.infos.path + '/:slide/:step',
    component: slideshow
  })
  routes.push({
    path: '/' + slideshow.infos.path,
    component: slideshow
  })
})

And inside a Slideshow, add watchers to update URL when slides changes, and update slides when URL changes:

 ....
  methods: {
    ....
     updateSlides: function () {
      this.currentSlideIndex = +this.$route.params.slide
      this.$nextTick(() => {
        this.step = +this.$route.params.step
      })
    },
    updateURL: function () {
      this.$router.push(`/${this.$route.path.split('/')[1]}/${this.currentSlideIndex}/${this.step}`)
    }
  },
  watch: {
    '$route': 'updateSlides',
    step: 'updateURL',
    currentSlideIndex: 'updateURL'
  }

You can use the above snippet as a mixins to include into your Slideshow component.

Demo link is here http://eaglejspermalink.surge.sh/#/introducing-eagle/2/1

c0b commented 6 years ago

agree, that may not be part of core functions of eagle.js but could you deploy to the https://zulko.github.io/eaglejs-demo/ ? or switch to use http://eaglejspermalink.surge.sh as demo site?

just because from https://bestof.js.org/tags/presentation you can see: all js based presentation framework has the perma links as a feature it's pretty much a standard

and 'eaglejs-demo' can be called (or alias or rename) as eaglejs-boilerplate?

yaodingyd commented 6 years ago

As eagle.js doesn't have a dependency on any routing solutions for now, this is for user land to implement.

c0b commented 6 years ago

So eaglejs-demo can be maintained as a more user-friendly eaglejs-boilerplate? then users can just copy from boilerplate and just modify content without too much hacking of js code? part of #30 have a list of nice-to-have features for maintainer roadmap?

yaodingyd commented 6 years ago

The current eaglejs-demo does the basic setup already. This project is started with being hackable in mind, so all components are very "raw" and scaffolding is very basic . However there is another issue for vue-cli template and that issue is open for tracking this feature.