Repository files navigation

• Slideshow system built on top of the Vue 2
• Supports animations, themes, interactive widgets (for web demos)
• Easy to reuse components, slides and styles across presentations
• Lightweight core and various helpful extensions
• All APIs public, maximum hackability

This project is considered feature-completed and not actively maintained currently. We recommend you to useslidev for better support of Vue 3.

Most of all, eagle.js aims at offering a simple and very hackable API so youcan get off the beaten tracks and craft the slideshows you really want.

Here is what the eagle.js syntax looks like (Example here are usingPug, but you can still use plain HTML):

.eg-slideshow    slide      h1 My slideshow      h4 By Zulko    slide      h3 Title of this slide      p  Paragraph 1.      p  Paragraph 2.    slide(:steps=3)      h3 Slide with bullet points      p(v-if='step >= 2') This will appear first.      p(v-if='step >= 3') This will appear second.

If you are not familiar with Vue.js you will find eagle.js harder to use than, say,Reveal.js, but on the long term eagle.js makes it easier to organize your slides and implement new ideas.

• elpete/eaglejs-template Eagle.js Template for vue-cli.
• christian-nils/presentation_template Presentation template using VueJS and EagleJS, with some custom components. (demo)

You must have Node.js/npm installed to use eagle.js.

Then the best to get started is to clonethe example repo:

$ git clone https://github.com/Zulko/eaglejs-demo.git

Install the dependencies (they will only be downloaded in a local folder):

$cd eaglejs-demo$ npm install

Then runnpm run dev to start the server, and open your browser athttp://localhost:8080 to see the slideshows.

To start editing, click onMy first slideshow to display this slideshow, then open the fileeagle/src/slideshows/first-slideshow/FirstSlideshow.vue and change the content of the first slide. Observe the changes happen automatically in your browser. The only times you need to refresh the page is when you add remove or add slides to the presentation.

Install by npm

npm install --save eagle.js

Or install by yarn

yarn add eagle.js

Eagle.js is a vue plugin. You need touse eagle.js in your vue app's main file.
New in 0.3:animate.css is now a peer dependency. User need install their own version.
New in 0.5: By default eagle.js doesn't export all plugins but only core components. You have to explicitly use your widgets or plugins from now on. See more onextensions section.
New in 0.6: You do not need to explicitly import the default style anymore.

importEaglefrom'eagle.js'// import animate.css for slide transitionimport'animate.css'Vue.use(Eagle)

Eagle.js's basic components areslideshow andslide. You useslideshow as mixin to writeslideshow component, which could include multipleslides. A very basic Single File Component forslideshow would look like this:

<template lang="pug">    slide(:steps="4")      p(v-if="step >= 1")        | {{step}}      p(v-if="step >= 2")        | {{step}}      p(v-if="step >= 3")        | {{step}}      p(v-if="step >= 4")        | {{step}}</template><script>import {Slideshow }from'eagle.js'exportdefault {  mixins: [Slideshow]}</script>

We useslideshow's datastep to control the conditional rendering inslide, thusslideshow is used as a mixin. Also by this way eagle.js exposes the maximum hackability to users.

slideshow can only be used as mixin.

Note: For vue mixins, template cannot be extended.slideshow needs one HTML element to wrap around your followingslides because there are events registered toslideshow after component mounted.We recommend you to wrap your template in aeg-slideshow div for default styling. Also, do not add conditional rendering onslideshow (for example, addv-if="active" on yourslideshow template) as it would breakslideshow's events registration as well.

You can configure your authoredslideshow component with these properties:

More explaination onbackBySlide:

By default, slideshow navigates back by step, but you can change the behavior to be slide based: so if you go back to the previous slide, it lands on the first step instead of last step. See a comparison:

Back by Step:	Back by slide:

Please note, if you have any embedded slideshows, you have to use default back mode, because for now parent slideshow cannot know how many steps child slideshow backs. This is a feature to be implemented in the future.

A nested slideshow can be aninserted one or anembedded one. If the nested slideshow's parent is a slideshow, then it's aninserted slideshow; if the parent is a slide, then it's anembedded slideshow.Anembedded slideshow would have its own events and embedded styles, while aninserted slideshow does not.Do not mix them up: aembedded slideshow in a slideshow will replace its parent slideshow, while ainsertedslideshow inside a slide will simply not work.

slide can be used both as mixin or component. If your want to author a complexslide, writing it as a seperated SFC withslide mixin would really help. Including the following template(pug) as wrapper in yourslide component to keep the default style:

eg-transition(:enter='enter',:leave='leave').eg-slide(v-if='active').eg-slide-content      // Your own markup...

You can configureslide with these properties:

enterPrev,enterNext,leavePrev andleaveNext provides flexibility if you want to customize the animation for prev/next direction. If set to null they will use defaultenter andleave styles.

Note:enter andleave must be set in pairs. Don't only set one property, becauseslide has two directions to move: prev/next, and both directions needs animations.We recommend either you set animation for all yourslide on bothenter andleave, or don't set any at all.

Under the hood,eg-transition is just vue'stransition that supportsanimate.css: you can use animate.css's class name forenter andleave property and it just works. All eagle.js's transition effects, includingslide, happen with this component, and you can use it just like using vue'stransition.

Starting from 0.5 we introduced extensions to eagle.js. It includes two categories, namely widgets and plugins:

1. Widgets are Vue components that can be directly used in aslide.
2. Plugins are used inslideshow to enhanceslide globally.

Both widgets and plugins have the same interface to use, just like how Vue uses plugins, for example:

// pluginEagle.use(Zoom,{scale:2})// WidgetEagle.use(CodeBlock)

Eagle.js ships several useful widgets that can be used in yourslide:

1. eg-modal
2. eg-code-block (code highlighted byhighlight.js)
3. eg-code-comment
4. eg-toggle
5. eg-radio-button
6. eg-triggered-message

Using widgets is really simple

importEagle,{Modal,CodeBlock}from'eagle.js'Eagle.use(Modal)Eagle.use(CodeBlock)// You can still do this, which eagle does the same under the hood// Vue.component(Modal.name, Modal)// Vue.component(CodeBlock.name, CodeBlock)

Widgets' name follows the same rule: uppercase for importing,eg prefixed lowercase connected with dash in HTML.See more of their usage in thedemo project.

New in 0.3:highlight.js is not a dependency anymore, so if you need to useeg-code-block, you need to install your own version ofhighlight.js, then specifiy it in yourmain.js:

// import your own highlight.js(only for javascript)importhljsfrom'highlight.js/lib/highlight';importjavascriptfrom'highlight.js/lib/languages/javascript';hljs.registerLanguage('javascript',javascript);// then pass it to eagleimport{Options}from'eagle.js'Options.hljs=hljs

This way drastically decrease eagle.js's package size and user could manage their ownhighlight.js version.

You can use presenter plugin to enable presenter mode:

// first, use plugin in your entry fileimportEagle,{Presenter}fromeagle.jsEagle.use(Presenter,{presenterModeKey:'a'// default is p})// second, in your slideshow, declare two `data` property{data:function(){return{childWindow:null,parentWindow:null,// .. the rest of your data}}}

Press your configured button would toggle presenter mode: you have two windows that share control with each other. Enabling presenter mode gives user two additiondata forslideshow:parentWindow andchildWindow. For example:

.eg-slideshow  slide    p Eagle.is is awesome!    p(v-if="parentWindow") I can be a note!    p(v-if="childWindow") I can be a note too!

It might be counter-intuitive that(v-if="parentWindow") is actually child window. It's because it means this window has a parent window, thus making itself a child window. But it is really just user's preference to put notes in either window, as two windows are almost functionally identical, except only parent window could close persenter mode.

You can use zoom plugin to enable zoom mode:

importEagle,{Zoom}fromeagle.jsEagle.use(Presenter,{scale:1// default is 2})

Option+Click (Alt+click on non-Mac) would zoom in and out.

For minimum working style,you need to wrap yourslideshow template in aeg-slideshow container. Eagle.js also has two themes for now:argume andgourmet. You can import theme style instead of default one to use them:

// in your main.jsimport'eagle.js/dist/themes/gourmet/gourmet.css'

To make theme style work, in yourslideshow you should also have a wrapper with theme class, for example if you are usinggourmet theme:

<divclass="eg-theme-gourmet"><divclass="eg-slideshow">    ...</div></div>

If you want to customize eagle.js, most likely you will work onslideshow component. In this case, We recommend you to read throughslideshow's source code to get a better understanding of how eagle.js works. Becauseslideshow works as a vue mixin, alldata andmethod will follow vue'soption merging rule. If you are not sure about whether you overwrite eagle.js's API, you can put your functions inafterMounted, which eagle.js exposes explicitly for users.

slideshow's mostly used methods arenextStep,previousStep,nextSlide,previousSlide, which are pretty self-explanatory.

Eagle.js supports basic mouse, keyboard and touch event, but doesn't support any advanced mobile gestures, like 'swipe'. Still, it is very easy to add mobile support with a well-tested library, likehammer.js.

In your slideshow component'smounted lifecycle hook,

mounted:{// You can also register to this.$el if you want// to control the gesture only on your slideshow componentconsthammer=newHammer(window)hammer.on('swiperight',()=>{this.previousStep()})hammer.on('swipeleft',()=>{this.nextStep()})}

Eagle.js does not comes with permalinks implementation, because eagle.js does not assume your usage with it. Using eagle.js as a completely standalone slideshow, likereveal.js orRemark, or as a component inserted into your routes, permalinks can get quite different. What's more,vue-router is not a dependency for eagle.js. So it's not a 'battery included' situtation. However, it is fairly easy to implement your own.

The most common implementation for permalinks is to use hashbang in URLs. You can achieve with withvue-router's hash mode, or even better, with history mode, to get rid of the ugly hashbang. Also withvue-router, it gives your more flexibility and more granularity control.

For example, if we are using Eagle.js as a standalone application. In our router file:

constrouter=newVueRouter({routes:[{path:'/:slide/:step',component:MySlideshow}]})

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

 ....  methods:{    ....updateSlides:function(){this.currentSlideIndex=+this.$route.params.slidethis.$nextTick(()=>{this.step=+this.$route.params.step})},updateURL:function(){this.$router.push(`/${this.currentSlideIndex}/${this.step}`)}},watch:{'$route':'updateSlides',step:'updateURL',currentSlideIndex:'updateURL'}

Demo

Intuitively, writing yourslide components and then using Vue'sasync component by dynamically importingslide components in your slideshow sounds like a perfect solution, unfortunately this won't work, asslideshow needs all its $children to be properly initialized. Currently, if you really need to do code splitting, you can consider splitting yourslideshow in different routes andlazy-loading them.

• (Vue-CLI v.4+) The white-spaces in my code are not preserved by the CodeBlock widget, how can I fix it?

The way Vue-CLI treats white-spaceshas changed in the version 4. If you use Vue-CLI to create your slideshow, you will need to add the following configuration in yourvue.config.js file (seeissue#90).

// vue.config.jsmodule.exports={chainWebpack:config=>{config.module.rule('vue').use('vue-loader').tap(args=>{args.compilerOptions.whitespace='preserve'})}}

Eagle.js is an open source framework originally written byZulko and released onGithub under the ISC licence. Everyone is welcome to contribute!

Below are a few ideas that deserve more attention in the future:

• Bundler to make standalone HTML presentations
• PDF export?
• Themes
• Better docs? (What do JavaScript people use to write docs?)

Eagle.js uses storybook for development:

$ git clone https://github.com/Zulko/eagle.js.git$ npm install$ npm run storybook

1. Zulko(owner)
2. Yao Ding