Module: @bldr/vue-app-presentation

@bldr/vue-app-presentation

The main app of the BALDR project: a presentation app using YAML files.

function mounted () {
 this.$styleConfig.setDefault()

 // Set presentation app to fullscreen:
  this.$fullscreen()

  // vue-notifications
  this.$notify({
    group: 'default',
    type: 'error',
    title: 'Important message',
    text: 'Hello user! This is a notification!'
  })
}

Structure of a master slide

A master slide is a extended Vuejs component. You have to export a additional object called master.

File name: name.vue

The master name is: name

Additional props keys:

  • description: String to describe the property
  • markup (boolean): The specified value can contain markup. The value can be written in Markdown and or in HTML. is converted into HTML. The key type has to be String.
export const master = {
  title: 'Bild',
  icon: 'file-image',
  color: 'green',
  styleConfig: {
    darkMode: false,
    overflow: false,
    slidePadding: '4vw',
    contentTheme: 'default',
    uiTheme: 'default'
  },
  documentation = `# Markdown`,
  example: `
slides:
- title: 'URL: id:'
  image:
    src: id:Haydn
`,
  store: {
    getters,
    actions,
    mutations
  },
  // result must fit to props
  normalizeProps (props) {
    if (typeof props === 'string') {
      return {
        markup: props
      }
    }
  },
  calculateStepCount (props) {
    return props.src.length
  },
  // An array of media URIs to resolve (like [id:beethoven, filename:mozart.mp3])
  resolveMediaUris (props) {
    return props.src
  },
  plainTextFromProps (props) {
  },
  // Called when entering a slide.
  enterSlide ({ oldSlide, oldProps, newSlide, newProps }) {
  },
  // Called when leaving a slide.
  leaveSlide ({ oldSlide, oldProps, newSlide, newProps }) {
  }
  // Called when entering a step.
  enterStep ({ oldStepNo, newStepNo }) {
  },
  // Called when leaving a step.
  leaveStep ({ oldStepNo, newStepNo }) {
  }
}

Classes

BodyAttributes
CenterVertically
ContentTheme
DarkMode
MultipleAttributes
Overflow
StyleConfig
UiTheme

Namespaces

Vue

Type Definitions

prop String | Array | Boolean | Number

The value of the props.

propDef Object

An extended version of the Vue prop definition.

Properties:
Name Type Description
default Mixed

A default value.

description String

A descriptive text shown in the documentation.

inlineMedia Boolean

Indicates that this prop is text for extracting inline media URIs like [id:Beethoven_Ludwig-van].

markup Boolean

If true this property is converted into HTML.

mediaFileUri Boolean

Indicates that this prop contains a media file URI.

required Boolean

In the prop must specifed.

type Object | Array

The same as Vue type.

props Object

This props object gets processed and converted into Vue specific props (propsMain, propsPreview).

Master task:

{
  "markup": "Warum klingen die Takte 23-26 schärfer als die Takte 1-4?"
}

Master generic:

{
  "markup": [
    "<p>Ein aufheulendes Auto</p>\n<p>Die Ideen des Futurismus ..."
  ],
  "charactersOnSlide": 2000
}

Master scoreSample:

{
  "score": "id:Milhauds-Corcovado_NB_Corcovado_Ausschnitt",
  "audio": "id:Milhauds-Corcovado_HB_Corcovado"
}

Master camera:

true

Master image:

{
  "src": "id:Milhauds-Corcovado_BD_Darius-Milhaud"
}

propsDef Object

An extended version of the Vue props defintion.

 const props = {
   src: {
     default: 'id:Fuer-Elise'
     description: 'Den URI zu einer Video-Datei.',
     inlineMedia: false
     markup: false
     mediaFileUri: true,
     required: true,
     type: String,
   }
 }
See:
  • @bldr/vue-app-presentation~propDef

styleConfig object

Properties:
Type Description
styleConfig.centerVertically
styleConfig.darkMode
styleConfig.overflow
styleConfig.contentTheme
styleConfig.uiTheme