diff --git a/AppBuilder/platform/plugins/included/index.js b/AppBuilder/platform/plugins/included/index.js index ddd1413c..6dfee297 100644 --- a/AppBuilder/platform/plugins/included/index.js +++ b/AppBuilder/platform/plugins/included/index.js @@ -1,8 +1,9 @@ +import viewImage from "./view_image/FNAbviewimage.js"; import viewText from "./view_text/FNAbviewtext.js"; import viewList from "./view_list/FNAbviewlist.js"; import viewTab from "./view_tab/FNAbviewtab.js"; -const AllPlugins = [viewTab, viewList, viewText]; +const AllPlugins = [viewTab, viewList, viewImage, viewText]; export default { load: (AB) => { diff --git a/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js b/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js new file mode 100644 index 00000000..49f5357d --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js @@ -0,0 +1,117 @@ +import FNAbviewimageComponent from "./FNAbviewimageComponent.js"; + +// FNAbviewimage Web +// A web side import for an ABView. +// +export default function FNAbviewimage({ + /*AB,*/ + ABViewWidgetPlugin, + ABViewComponentPlugin, + ABViewContainer, +}) { + const ABAbviewimageComponent = FNAbviewimageComponent({ + ABViewComponentPlugin, + }); + + const ABViewImagePropertyComponentDefaults = { + filename: "", + width: 200, + height: 100, + }; + + const ABViewDefaults = { + key: "image", // {string} unique key for this view + icon: "picture-o", // {string} fa-[icon] reference for this view + labelKey: "Image", // {string} the multilingual label key for the class label + }; + + class ABViewImageCore extends ABViewWidgetPlugin { + constructor(values, application, parent, defaultValues) { + super(values, application, parent, defaultValues || ABViewDefaults); + } + + static common() { + return ABViewDefaults; + } + + static defaultValues() { + return ABViewImagePropertyComponentDefaults; + } + + /// + /// Instance Methods + /// + + /** + * @method componentList + * return the list of components available on this view to display in the editor. + */ + componentList() { + return []; + } + + /** + * @property datacollection + * return data source + * NOTE: this view doesn't track a DataCollection. + * @return {ABDataCollection} + */ + get datacollection() { + return null; + } + + /** + * @method fromValues() + * + * initialze this object with the given set of values. + * @param {obj} values + */ + fromValues(values) { + super.fromValues(values); + + // convert from "0" => 0 + this.settings.width = parseInt( + this.settings.width || ABViewImagePropertyComponentDefaults.width + ); + this.settings.height = parseInt( + this.settings.height || ABViewImagePropertyComponentDefaults.height + ); + } + } + + return class ABViewImage extends ABViewImageCore { + /** + * @method getPluginKey + * return the plugin key for this view. + * @return {string} plugin key + */ + static getPluginKey() { + return this.common().key; + } + + /** + * @method component() + * return a UI component based upon this view. + * @return {obj} UI component + */ + component(parentId) { + return new ABAbviewimageComponent(this, parentId); + } + + // constructor(values, application, parent, defaultValues) { + // super(values, application, parent, defaultValues); + // } + + // + // Editor Related + // + + warningsEval() { + super.warningsEval(); + + if (!this.settings.filename) { + this.warningsMessage(`has no image set`); + } + } + }; +} diff --git a/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js b/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js new file mode 100644 index 00000000..2cd41643 --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js @@ -0,0 +1,54 @@ +export default function FNAbviewimageComponent({ + /*AB,*/ + ABViewComponentPlugin, +}) { + return class ABAbviewimageComponent extends ABViewComponentPlugin { + constructor(baseView, idBase, ids) { + super( + baseView, + idBase || `ABViewImage_${baseView.id}`, + Object.assign({ image: "" }, ids) + ); + } + + ui() { + const settings = this.settings; + const _ui = super.ui([ + { + cols: [ + { + id: this.ids.image, + view: "template", + template: "", + height: settings.height, + width: settings.width, + }, + {}, + ], + }, + ]); + + delete _ui.type; + + return _ui; + } + + async init(AB) { + await super.init(AB); + + const $image = $$(this.ids.image); + if (!$image) return; + + const settings = this.settings; + + if (settings.filename) + $image.define( + "template", + `` + ); + else $image.define("template", ""); + + $image.refresh(); + } + }; +}