BogdanMihaiciuc / BMPresentationController

A set of widgets that presents a mashup in either a popup window or a popover.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🛑 Note: If you are planning to use this widget in Thingworx 8.5 or newer, strongly consider using Core UI Widgets instead.

This repository contains the standalone development version of the BMPresentationController widget and is the source from which the widget is merged into core ui widgets.

BMPresentationController

A set of widgets that presents a mashup in either a popup window or a popover.

Index

About

This repository contains a set of widgets, the Popover Controller and the Window Controller built on top of BMCoreUI to display a mashup in either a popup window or a popover.

This enables creation of context menus, information tooltips, as well as modal popups and more.

Usage

Both widgets work similarly in concept to the Navigation widget, when used as a modal popup. The Popover Controller is intended to be uses to show popover, context menus or information tooltips that appear next to the content the user is interacting with, while the Window Controller is intended to be used to show popups and information dialogs, that show up in the middle of the screen.

Bindings and properties

Properties

The following properties are available on both the Popover Controller and the Window Controller:

  • anchorKind: The kind of anchor from which this controller will originate. In other words, describes the location where the popover will appear and the source for the window animation. Has the following options:
    • Event Origin: Uses the location of the event (the location where the user clicked or touched).
    • Event Target: Uses the location of the html element that the user has clicked or touched.
    • Selector: Uses the location of the first html element found that matches the CSS selector in the anchor property using document.querySelector.
    • Widget: Uses the location of the widget with the display name equal to the anchor property.
    • None: Defaults to using the Event Origin.
  • anchor: Binding Target: See the anchorKind Selector and Widget options.
  • mashupName: Binding Target: The name of the mashup to be displayed.
  • controllerWidth, controllerHeight: The dimensions of the mashup that will be displayed.
  • Other Parameters: The mashup parameters set on mashupName will also be displayed for as properties of this widget.

The following properties are only available on the Window Controller:

  • modal: Controls whether this window is modal.
  • movable: Controls whether this window can be moved.
  • resizable: Controls whether this window can be resized.
  • fullScreenButton: If enabled, the window will have a toggle full screen button.
  • multipleWindows: If enabled, the controller will be able to create multiple windows.

Services

  • bringToFront: Shows this controller.
  • dismiss: Dismisses this controller.

Events

  • controllerDidClose: Triggered when this controller closes.

Developing

Installation

  • Navigate to the releases page
  • Under the latest release, view all the assets
  • Download the file BMPresentationController-min-<VERSION>.zip
  • Import the widget into Thingworx

Development

This projects welcomes contributions. For details about pre-requisites, development environment and file structure, please see https://github.com/ptc-iot-sharing/ThingworxDemoWebpackWidget/tree/supportv2.

To setup a development environment, run the following:

  • npm install: installs the necessary development dependencies

To run a build:

  • npm run build: builds the extension. Creates a new extension zip file under the zip folder.
  • npm run buildDev: builds the extension with sourcemaps enabled. Creates a new extension zip file under the zip folder.
  • npm run upload: creates a build, and uploads the extension zip to the thingworx server configured in package.json.

If you want to develop both bm-core-ui and this package in parallel, you can use npm link. The following instructions should get you started:

  1. In the BMCoreUI project folder, run npm link
  2. In the BMPresentationController, run npm link bm-core-ui

This will create a symlink in BMPresentationController\node_modules\bm-core-ui to the BMCoreUI folder.

About

A set of widgets that presents a mashup in either a popup window or a popover.

License:MIT License


Languages

Language:TypeScript 79.4%Language:JavaScript 18.5%Language:CSS 1.8%Language:HTML 0.4%