diff --git a/demo/bundle.js b/demo/bundle.js index 98aed6de2c..9f3eee58d1 100644 --- a/demo/bundle.js +++ b/demo/bundle.js @@ -28,6 +28,7 @@ define([ "./src/conductor/DemoTelemetryDecorator", "./src/telemetry/DemoTelemetryProvider", "./src/DemoModelProvider", + 'text!./res/image-template.html', 'legacyRegistry' ], function ( DemoConductorRepresenter, @@ -36,6 +37,7 @@ define([ DemoTelemetryDecorator, DemoTelemetryProvider, DemoModelProvider, + ImageTemplate, legacyRegistry ) { "use strict"; @@ -118,7 +120,27 @@ define([ } ] } - } + }, + { + "key": "image-include", + "name": "Image include", + "glyph": "ã", + "description": "An image include that is resized to fit" + + " its container", + "views": [ + "image-view" + ], + "properties": [ + { + "key": "url", + "name": "URL", + "control": "textfield", + "pattern": "^(ftp|https?)\\:\\/\\/\\w+(\\.\\w+)*(\\:\\d+)?(\\/\\S*)*$", + "required": true, + "cssclass": "l-input-lg" + } + ] + }, ], "licenses": [ { @@ -140,6 +162,9 @@ define([ }, { "stylesheetUrl": "css/tour.css" + }, + { + "stylesheetUrl": "css/image.css" } ], "constants": [ @@ -149,7 +174,15 @@ define([ "comment": "1 minute." } ], - + "views": [ + { + "template": ImageTemplate, + "name": "ImageInclude", + "type": "image-include", + "key": "image-view", + "editable": false + } + ] } }); }); diff --git a/demo/data/demo-models.json b/demo/data/demo-models.json index 847d65355b..d8c9c84aae 100644 --- a/demo/data/demo-models.json +++ b/demo/data/demo-models.json @@ -1,6 +1,6 @@ { "f3744144-8842-4b7a-bddc-4abbf21315d9": { - "composition": ["9b297044-84be-4814-9400-cbe2d4e72589", "79b89853-6947-4516-8d8c-bfe239c83836", "02d98e70-792e-4de9-9b1e-9b36685bff29", "msl_tlm:pressure", "e2f57978-dcae-4fe2-a637-4707929286ae", "6b2c3426-6d35-42ad-8720-95543567241f"], + "composition": ["79b89853-6947-4516-8d8c-bfe239c83836", "02d98e70-792e-4de9-9b1e-9b36685bff29", "msl_tlm:pressure", "6b2c3426-6d35-42ad-8720-95543567241f", "11247663-fad1-481a-93d8-429ba159bf6b"], "name": "Mars Weather Display Layout", "type": "layout", "configuration": { @@ -28,44 +28,46 @@ }, "79b89853-6947-4516-8d8c-bfe239c83836": { "position": [0, 0], - "dimensions": [24, 9] + "dimensions": [14, 8] }, "02d98e70-792e-4de9-9b1e-9b36685bff29": { - "position": [0, 9], - "dimensions": [24, 9] + "position": [0, 8], + "dimensions": [14, 8] }, "b66be4e2-b918-42d2-ad0a-f70c7a6f4102": { "position": [24, 10], "dimensions": [12, 8] }, "msl_tlm:pressure": { - "position": [0, 18], - "dimensions": [24, 9] + "position": [0, 16], + "dimensions": [14, 8] }, "e2f57978-dcae-4fe2-a637-4707929286ae": { "position": [24, 0], "dimensions": [24, 9] }, "6b2c3426-6d35-42ad-8720-95543567241f": { - "position": [24, 18], - "dimensions": [24, 9] + "position": [14, 16], + "dimensions": [20, 8] + }, + "11247663-fad1-481a-93d8-429ba159bf6b": { + "position": [14, 0], + "dimensions": [20, 16] } } } }, - "modified": 1461351021462, + "modified": 1461720385628, "location": "mct:demo", - "persisted": 1461351021462 + "persisted": 1461720385628 }, "b171cc31-2cc5-4ae9-ba40-baf1163f22c4": { - "composition": [ - "90b28cb9-444b-4f57-a584-49032361d2a1" - ], + "composition": ["90b28cb9-444b-4f57-a584-49032361d2a1", "11247663-fad1-481a-93d8-429ba159bf6b"], "name": "Curiosity Rover", "type": "folder", - "modified": 1460333909213, + "modified": 1461720290523, "location": "mct:demo", - "persisted": 1460333909213 + "persisted": 1461720290523 }, "9b297044-84be-4814-9400-cbe2d4e72589": { "composition": [ @@ -1062,5 +1064,13 @@ "modified": 1461703126657, "location": "a32079d0-676b-4e9f-ade7-86d5d2f152fc", "persisted": 1461703126657 + }, + "11247663-fad1-481a-93d8-429ba159bf6b": { + "name": "Where is Curiosity?", + "type": "image-include", + "url": "http://mars.nasa.gov/msl/imgs/2016/04/MSL_TraverseMap_Sol1298-br2.jpg", + "modified": 1461720290507, + "location": "b171cc31-2cc5-4ae9-ba40-baf1163f22c4", + "persisted": 1461720290507 } } \ No newline at end of file diff --git a/demo/res/css/shepherd-theme-arrows.css b/demo/res/css/shepherd-theme-arrows.css deleted file mode 100755 index fde90a713d..0000000000 --- a/demo/res/css/shepherd-theme-arrows.css +++ /dev/null @@ -1,195 +0,0 @@ -.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before { - box-sizing: border-box; } - -.shepherd-element { - position: absolute; - display: none; } - .shepherd-element.shepherd-open { - display: block; } - -.shepherd-element.shepherd-theme-arrows { - max-width: 100%; - max-height: 100%; } - .shepherd-element.shepherd-theme-arrows .shepherd-content { - border-radius: 5px; - position: relative; - font-family: inherit; - background: #fff; - color: #444; - padding: 1em; - font-size: 1.1em; - line-height: 1.5em; - -webkit-transform: translateZ(0); - transform: translateZ(0); - -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); - filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); } - .shepherd-element.shepherd-theme-arrows .shepherd-content:before { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-width: 16px; - border-style: solid; - pointer-events: none; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content { - margin-bottom: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before { - top: 100%; - left: 50%; - margin-left: -16px; - border-top-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content { - margin-top: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before { - bottom: 100%; - left: 50%; - margin-left: -16px; - border-bottom-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content { - margin-right: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before { - left: 100%; - top: 50%; - margin-top: -16px; - border-left-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content { - margin-left: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before { - right: 100%; - top: 50%; - margin-top: -16px; - border-right-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content { - margin-top: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before { - bottom: 100%; - left: 16px; - border-bottom-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content { - margin-top: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before { - bottom: 100%; - right: 16px; - border-bottom-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content { - margin-bottom: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before { - top: 100%; - left: 16px; - border-top-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content { - margin-bottom: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before { - top: 100%; - right: 16px; - border-top-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content { - margin-right: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before { - top: 16px; - left: 100%; - border-left-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content { - margin-left: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before { - top: 16px; - right: 100%; - border-right-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content { - margin-right: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before { - bottom: 16px; - left: 100%; - border-left-color: #fff; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content { - margin-left: 16px; } - .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before { - bottom: 16px; - right: 100%; - border-right-color: #fff; } - -.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before { - border-bottom-color: #eee; } - -.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header { - background: #eee; - padding: 1em; } - .shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header a.shepherd-cancel-link { - padding: 0; - margin-bottom: 0; } - -.shepherd-element.shepherd-theme-arrows.shepherd-has-cancel-link .shepherd-content header h3 { - float: left; } - -.shepherd-element.shepherd-theme-arrows .shepherd-content { - padding: 0; } - .shepherd-element.shepherd-theme-arrows .shepherd-content * { - font-size: inherit; } - .shepherd-element.shepherd-theme-arrows .shepherd-content header { - *zoom: 1; - border-radius: 5px 5px 0 0; } - .shepherd-element.shepherd-theme-arrows .shepherd-content header:after { - content: ""; - display: table; - clear: both; } - .shepherd-element.shepherd-theme-arrows .shepherd-content header h3 { - margin: 0; - line-height: 1; - font-weight: normal; } - .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link { - float: right; - text-decoration: none; - font-size: 1.25em; - line-height: .8em; - font-weight: normal; - color: rgba(0, 0, 0, 0.5); - opacity: 0.25; - position: relative; - top: .1em; - padding: .8em; - margin-bottom: -.8em; } - .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link:hover { - opacity: 1; } - .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text { - padding: 1em; } - .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p { - margin: 0 0 .5em 0; - line-height: 1.3em; } - .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p:last-child { - margin-bottom: 0; } - .shepherd-element.shepherd-theme-arrows .shepherd-content footer { - padding: 0 1em 1em; } - .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons { - text-align: right; - list-style: none; - padding: 0; - margin: 0; } - .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li { - display: inline; - padding: 0; - margin: 0; } - .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button { - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - *zoom: 1; - *display: inline; - border-radius: 3px; - cursor: pointer; - border: 0; - margin: 0 .5em 0 0; - font-family: inherit; - text-transform: uppercase; - letter-spacing: .1em; - font-size: .8em; - line-height: 1em; - padding: .75em 2em; - background: #3288e6; - color: #fff; } - .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary { - background: #eee; - color: #888; } - .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button { - margin-right: 0; } diff --git a/demo/res/image-template.html b/demo/res/image-template.html new file mode 100644 index 0000000000..5f525e80cc --- /dev/null +++ b/demo/res/image-template.html @@ -0,0 +1,24 @@ + +
+ +
\ No newline at end of file