zulko / eagle.js Goto Github PK

Using it with Nuxt (with server side rendering turned off for the plugin) and I'm getting this error when I reload a page:

{ /Users/andreaslarsen/Git/larsenwork.github.io/node_modules/eagle.js/dist/eagle.js:8
import { throttle } from 'lodash';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at r (/Users/andreaslarsen/Git/larsenwork.github.io/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:3613:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 3d086a4db7f344e8b701:25:0)
    at Object.67 (pages/talks/piter.vue?6872:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 3d086a4db7f344e8b701:25:0)
    at Object.49 (pages/talks/piter.vue:1:0) statusCode: 500, name: 'SyntaxError' }

The vue file looks like this:

<template>
  <div class="c-presentation eg-slideshow">
    <slide :steps="4">
      <p v-if="step >= 1">{{ step }}</p>
      <p v-if="step >= 2">{{ step }}</p>
      <p v-if="step >= 3">{{ step }}</p>
      <p v-if="step >= 4">{{ step }}</p>
    </slide>
  </div>
</template>

<script>
import eagle from 'eagle.js'
export default {
  mixins: [eagle.slideshow],
}
</script>

and I'm registering the plugin like this

import Vue from 'vue'
import Eagle from 'eagle.js'

Vue.use(Eagle)

and then like this in nuxt config

  plugins: [
    { src: '~/plugins/eagle', ssr: false },
  ],

It'd be nice to have a vue-cli template for this.

i'm looking for a framework which can change theirs pages like native(iOS)

example: when the router is changing, the page can slide-in from the right, and the page can slide-out from right when i leave

i try to resolve it, but if the page can scroll, i can not made the page in right position when the page is changing

Using the example (https://github.com/Zulko/eaglejs-demo/tree/master/src/slideshows/eagle-recipes),
the subslide with the code
eg-code-block(lang='html').
doesn't update. No matter what you write in there it always show the first block that it was render.

Disclaimer: This is a bot

It looks like your repo is trending. The github_trending_videos Instgram account automatically shows the demo gifs of trending repos in Github.

Your README doesn't seem to have any demo gifs. Add one and the next time the parser runs it will pick it up and post it on its Instagram feed. If you don't want to just close this issue we won't bother you again.

@Zulko I'm thinking adding a presenter mode with postMessage API. what do you think? Does it need to be in core or a plug-in is good?

Hi there,

Thanks for the work, this looks amazing!

I am having an issue. After npm install it says this

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-57_binding.node":

Any suggestions?

Is there a reason for evt.preventDefault() in the Slideshow component's keydown handler?

It prevents other keyboard shortcuts from working (like pressing F11 in Firefox to enter/leave fullscreen mode).

I just tested to remove that line in my local copy and have seen no negative side-effects so far.

@Zulko I have been trying to find your contact but failed to do so, thus I open this issue hoping you could grant my permission to become a maintainer for this project and also the demo project.

I have been actively contributing to this project (issue 18 23 24 25 26 27 28) and also using Vue on work. I believe I could help other people make better use of this wonderful project.

Thank you!

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 ?

I installed eagle through npm, and when I add it to a nuxt plugin:
/plugins/eagle_slider.js

import Vue from 'vue'
import Eagle from 'eagle.js'
Vue.use(Eagle)

I get the following error:

{ D:\Sites\nuxt\batorangol\node_modules\eagle.js\dist\eagle.js:8
import { throttle } from 'lodash';

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at r (D:\Sites\nuxt\batorangol\node_modules\vue-server-renderer\build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:3847:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 7f713d772752d58f1904:25:0)
    at Object.<anonymous> (plugins/core-components.js:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7f713d772752d58f1904:25:0)
    at Object.<anonymous> (.nuxt/index.js:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7f713d772752d58f1904:25:0) statusCode: 500, name: 'SyntaxError' }

package.json contains:
"eagle.js": "^0.1.5"

Any idea why this happens?

At least for me, swiping does not work with new Hammer(window) on phones. It works fine on desktop browsers with the swiping emulation.

Changing Hammer(window) to Hammer(getElementById('app')) works out of the box for desktop and mobile.

Maybe you can change the example?

I've created my "HelloWorld" presentation with Eagle and am excited to go further but even though I made every attempt to follow the directions provided I am getting a lot of errors:

Note, the presentation IS presenting and navigation controls seem to work. Maybe I'm making a newbie mistake but I'm at a bit of a loss on how to proceed. I am using the latest build (0.2.0).

When I'm trying to organize my slides into sub components I get this error:

vue.common.js?e881:525 TypeError: Cannot set property 'fontSize' of undefined
    at VueComponent.handleResize (eval at <anonymous> (app.js:861), <anonymous>:141:31)
    at VueComponent.boundFn [as handleResize] (eval at <anonymous> (app.js:721), <anonymous>:167:12)
    at VueComponent.mounted (eval at <anonymous> (app.js:861), <anonymous>:81:10)
    at callHook (eval at <anonymous> (app.js:721), <anonymous>:2558:21)
    at Object.insert (eval at <anonymous> (app.js:721), <anonymous>:3385:7)
    at invokeInsertHook (eval at <anonymous> (app.js:721), <anonymous>:5212:28)
    at Vue$3.patch [as __patch__] (eval at <anonymous> (app.js:721), <anonymous>:5377:5)
    at Vue$3.Vue._update (eval at <anonymous> (app.js:721), <anonymous>:2318:19)
    at Vue$3.updateComponent (eval at <anonymous> (app.js:721), <anonymous>:2441:10)
    at Watcher.get (eval at <anonymous> (app.js:721), <anonymous>:2780:25)

Hey there,

I'm currently trying to implement a feature which allows me to have different durations for different slides.
For instance: I want one slide to be displayed 10 seconds and one slide to be displayed 5 seconds.

     setInterval(() => {
      this.nextStep();
    }, 5000); //or use a timer variable

I'm currently using the setInterval method on my mounted function.
Furthermore I have overwritten the nextStep function in order to check which slide is currently displayed and to adapt the duration of the slide.

   nextStep() {
      this.slides.forEach(function(slide) {
        slide.direction = "next";
      });
      this.$root.direction = "next";
      const self = this;
      this.$nextTick(function() {
        if (self.step >= self.currentSlide.steps) {
          self.nextSlide();
        } else {
          self.step++;
        }
      });
      //adapt timer variable regarding of corresponding slide duration

However I figured out that I have to reuse setInterval() after I adapted the duration (which is obvious because it's only called in the mount method once). This leads to weird effects though. Could you give me a hint how to achieve different durations for different slides?

EDIT:

It looks like I just forgot to call clearInterval. How ever is there an easier option to achieve that?

First off, great work! This looks really good.

I am trying to include eagle.js as a library into my project, but it seems to be a lot of trouble to get running.

This is the following steps I exectuted:

npm install --save eagle.js

import Eagle from 'eagle.js' in my main.js

Unfortunately, it seems that eagle.js is no way build, so it will be build during my build process. That means I need to fetch all the dependencies which eagle.js requires. such as:

    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-component": "0.9.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0"
    "pug"...

Etc. This means the the eagle library is not scoped, so each time I would like to update to a new version, I will have a bad time. I would really like to use this framework, but as it is right now, it is not possible to reuse.

Either with https://www.npmjs.com/package/lodash.throttle or as part of babel using something like https://github.com/lodash/babel-plugin-lodash

Would shave maybe 100kb off the bundle size.

These warnings are shown at the end of the npm install output:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

More info:

$ npm -v
3.5.2
$ lsb_release -a 
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 16.04.3 LTS
Release:	16.04
Codename:	xenial

Under Usage, the documentation says to import 'eagle.js/dist/eagle.css' into your main.js file.
I did this and don't see any styles applied.

I installed eagle.js via npm (yarn add eagle.js) into a project bootstrapped with vue init webpack.

Also, the documentation mentions that eagle supports animate.css transitions. Is animate.css included within eagle.css or is it a separate dependency that should be documented to be manually added?

wonder if you have researched to load each slides' vue file as async component?

https://vuejs.org/v2/guide/components.html#Async-Components

I can think the current one file list all slides will have a scalability issue when there's growing too many slides in the central registration, and build into one js file will be big!
to the viewers, most probably view one or two slides only, it will be heavy for browser to load all available slides

https://github.com/Zulko/eaglejs-demo/blob/master/src/slideshows/slideshows.js

for example, how about make the front page https://zulko.github.io/eaglejs-demo/ just list all available slides with links, and then load the https://github.com/Zulko/eaglejs-demo/blob/master/src/slideshows/introducing-eagle/IntroducingEagle.vue only when user click https://zulko.github.io/eaglejs-demo/#/introducing-eagle ??

For event click and wheel, (or later added touch support), these should be registered to Slideshow element instead of window.

Just tested on chrome, mac os with Apple Magic Mouse.
The scroll here is very sensitive and with one, 'normal' finger swiper i moved all slides. I needed to use keyboard to see anything from demos ;)

It would be quite nice to be able to easely create diagrams with eagle.

As there is a dedicated repo https://github.com/Zulko/eaglejs-demo for demo, removing example folder only makes sense.

Arrows' flow and "Ctrl + right" / left doesn't work.
Sliding gesture skippes animation on arrival page.

Is there a recommended way to jump back to the first slide after reaching the last?

Before anything else: eagle.js is a fantastic framework!

Having mouseNavigation enabled and using router-link in a template to redirect to another slide, the click is recorded again on the new slide and the next step (in my case the next slide) is shown. I could not find a way to fix this.

Regards
Christian

Eagle.js doesn't depend on pug and it is discouraging for some people are under the impression that eagle.js does.

• eagle.js
• eaglejs-demo

eagle.js 0.1.2 does not include its dist folder on npm.

This is quite a problem as the current main field points toward a non-require-able un-transpiled module (c.f. #14).

@ktsn has done a great work in #15 in solving this issue. I am looking forward to use it.

I would like to include a slide progress indicator in my presentation. Something similar to what spectacle has.

Is there an API I can use to keep track of this?

In theme demo page, advance to the third slide, then go back to the second slide, then the second slide would not have any transition effect showing up.

This is because the third slide has 'none' for leave property. This would happen for an even common case when user doesn't set leaveproperty. Because slide is absolute position, later-rendered slide would be on top of previous slide, thus blocking the transition effect.

To fix this we should have a default leave class to hide the slide. Also in documentation should note that if user sets leave, make sure it doesn't block the previous slide's enter transition.

This looks really good!

I would like to build slideshows dynamically from some content. Is it possible to use eagle.js as a library?

Not sure how to get you more info but happy to help.

Affects:
Chrome on iPad
Safari on iPad

iOS version 10.2.1

Maybe chrome/safari remote debugging - will try later this week.

Just wonder if you have twitter so we can follow you! Cheers

Slides are not formatted correctly when 'eagle-recipes' is not included in 'slideshows.js'.
The height of 100% seems to have gone which makes the slide background looking ugly.

error in ./src/slideshows/themes-slideshow/ThemesSlideshow.vue
error in ./src/slideshows/introducing-eagle/AwesomeInsertedSlide.vue
error in ./src/slideshows/introducing-eagle/FiguresSlide.vue
error in ./src/slideshows/eagle-recipes/DemoSlideshow.vue
error in ./src/slideshows/introducing-eagle/components/EndCredits.vue
error in ./src/slideshows/introducing-eagle/AwesomeEmbeddedSlideshow.vue
...
Module build failed: Error: Cannot find module 'node-sass'
And erron on browser http://localhost:8080/
Cannot GET/

error when following install instructions: npm run dev results in
`npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v6.11.3
npm ERR! npm v3.10.10

npm ERR! missing script: dev
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! E:\Projects\Vue.js\eagle.js\npm-debug.log
`

Hi! Looks like a great project, but when I opened a deck on my phone, it doesn't work. it suggests i use ctrl-arrow for navigation.

is there an example of using hammerJS or other tap/touch events to swipe for mobile?

We need some scripts for build and tests in NPM.

I would like to know, if possible, why you choose the ISC over MIT.

Anyway, great job with that library.

Anyone had experience using this with Nuxt?

I'm wondering how to generate the routes for each individual presentation.

Is there any support for auto slide.

Thanks,
Bala

Hey there,

I've currently implemented a basic slideshow with various different slides.
My slides are stored in an array called active slides and are iterated as shown in the following example:

slide(v-for="(slide, index) in activeSlides"...

Everything works fine and slides are rendered successfully. How ever I want do add new slides dynamically to my presentation so I decided to add them to my activeSlide array. Unfortunately eagle.js does not show the newly added slides. I'm adding the slides in my mounted method as following:

mounted() {
        setInterval(() => {
            this.nextStep();
        }, 5000);

        Vue.http
            .get('/allSlides')
            .then(
                (response) => {
                    this.fillActiveArray(response.body);
                },
                (error) => {
                    console.log(error);
                },
            );

I'm successfully retrieving the slides from the server but my array is not update and the slides are not rendered successfully. Documentation says:

The only times you need to refresh the page is when you add remove or add slides to the presentation.

How can I trigger this refresh? Or are you referring to an entire site refresh? If I refresh my entire site it wont have any effects though because my activeSlide array will be re initialized and I'll receive the same state as before. Any hints on how this is supposed to work would be highly appreciated! :)

If you use the browser zoom, nothing changes.

As the title says — currently the webpack bundle when using default eagle.js becomes quite big (I think mine jumped from ~90kb to ~700kb).
The biggest culprit is the highlight.js dependency but ideally any component besides the main slideshow and slide component should only be included if explicitly imported/used.

I've been using eagle.js to make slides for an upcoming conference talk. Very nice! It addresses a couple of the complaints I had about using mdx-deck (their <Appear> component doesn't work to reveal deeply nested pieces, and it wasn't Vue!).

One difficulty I've run into is including a slide defined in another component. I've written most of my slides inline in App.vue. One of them is too big though (it has a big nested svg), and I'd like to put it in a component. When I do that, it doesn't seem to appear!

I have, in App.vue:

...
<slide>
  <h2>Who uses personal access tokens?</h2>
  <ul class="center-list">
    <li>GitHub, Trello, Twitter, many others</li>
    <li>Mostly targeted at developers</li>
  </ul>
  <span v-if="isParent">These are actually a solid step towards OAuth!</span>
</slide>
<PersonalAccessToken />
...

And then in PersonalAccessToken.vue:

<template>
  <div :steps="6" v-if="active">
    <svg class="white-back img-contain" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="397px" preserveAspectRatio="none" version="1.1" viewBox="0 0 568 397" width="568px" zoomAndPan="magnify">
    ...
    </svg>
  </div>
</template>
<script>
import eagle from 'eagle.js'

export default {
  name: 'PersonalAccessToken',
  mixins: [eagle.slide],
}
</script>

I've also tried replacing the top-level div in PersonalAccessToken.vue with a <slide>, as well as wrapping it in an <eg-transition> like in AwesomeInsertedSlide.vue in your eaglejs-demo.

My code is up at https://github.com/bgschiller/lets-build-oauth/blob/995f25b05d17c8a58078b6daaba64c747664901c/src/components/PersonalAccessToken.vue if it's useful to take a look. Thanks!

Just did a clean install (cloned repo, installed dependencies and ran npm run dev)
I'm getting the following error which isn't very helpful:

(node:4041) UnhandledPromiseRejectionWarning: Error: Exited with code 3
    at ChildProcess.<anonymous> (/mnt/c/Users/Guy Nesher/Work/presentations/eaglejs-demo/node_modules/opn/index.js:83:13)
    at Object.onceWrapper (events.js:317:30)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Socket.stream.socket.on (internal/child_process.js:346:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:567:12)
(node:4041) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 5)
(node:4041) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The demo does load and I can't tell exactly what's broken - but it's a little disconcerting

This is my setup:

<template>
  <div>
    <slide :steps=3>
      <h1>Test</h1>
      <p v-if="step >= 2">Test</p>
      <p v-if="step >= 3">Test</p>
    </slide>

    <slide>
      Test!
    </slide>
  </div>
</template>

<script>
  import eagle from 'eagle.js'

  export default {
    mixins: [eagle.slideshow]
  }
</script>

And I get this warning:

vue.common.js?e881:436 [Vue warn]: The computed property "active" is already defined in data.

found in

---> at /app/src/Root.vue
at /app/src/App.vue

#26 introduced a fix for #17: if user didn't have a wrapper element for slideshow, when it's mounted, because all slide is set to active: false by default, so its DOM node will be a Comment node, thus slideshow's $el would not have fontSize property.

The fix is simple but dumb: by adding a div for every slide, we can ensure that slideshow will always have a real DOM node, but this also means all slide would be rendered, even if it's not active. This is critial issue 1. Also because all slide s are always rendered, slide would have no transition effect at all. This would be critial issue 2.

The original issue still needs to be fixed. We can note the documentation for now that slideshow must have one wrapper element.

I didn't think it though and I apologize for this...