zulko / eagle.js Goto Github PK
View Code? Open in Web Editor NEWA hackable slideshow framework built with Vue.js
Home Page: https://zulko.github.io/eaglejs-demo/
License: ISC License
A hackable slideshow framework built with Vue.js
Home Page: https://zulko.github.io/eaglejs-demo/
License: ISC License
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 },
],
Just wonder if you have twitter so we can follow you! Cheers
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.
Arrows' flow and "Ctrl + right" / left doesn't work.
Sliding gesture skippes animation on arrival page.
Eagle.js doesn't depend on pug and it is discouraging for some people are under the impression that eagle.js does.
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
For event click
and wheel
, (or later added touch support), these should be registered to Slideshow element instead of window.
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
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 ??
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?
It'd be nice to have a vue-cli template for this.
@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!
Anyone had experience using this with Nuxt?
I'm wondering how to generate the routes for each individual presentation.
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
Is there any support for auto slide.
Thanks,
Bala
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
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.
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?
I would like to know, if possible, why you choose the ISC over MIT.
Anyway, great job with that library.
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 ;)
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.
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/
It would be quite nice to be able to easely create diagrams with eagle.
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
).
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 leave
property. 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.
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.
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.
As there is a dedicated repo https://github.com/Zulko/eaglejs-demo for demo, removing example folder only makes sense.
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.
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.
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! :)
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?
We need some scripts for build and tests in NPM.
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'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!
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?
#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...
Is there a recommended way to jump back to the first slide after reaching the last?
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?
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?
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
`
@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?
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.
If you use the browser zoom, nothing changes.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.