-
- Skip
-
-
-
-
WELCOME
+ + +
+
+
+
+
diff --git a/src/templates/first-run/video-placemat/video.placemat.js b/src/templates/first-run/video-placemat/video.placemat.js
deleted file mode 100644
index 07f0479..0000000
--- a/src/templates/first-run/video-placemat/video.placemat.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo.
-
-(function () {
- "use strict";
-
- // The initialize function must be run each time a new page loads.
- Office.initialize = function () {
- $(document).ready(function () {
- document.getElementById("videoimage").onclick = function () {
- showVideoDialog();
- }
- });
- };
-
- // Closes the dialog window. Consider adding additional code here that runs after the video finishes.
- function reEnableParentUI(arg) {
- // Enable the button because they launched the video and then closed the dialog.
- $("#buttonGetStarted").prop("disabled", false);
- }
-
- // Use the display dialog to open a pop-up and display the video.
- function showVideoDialog() {
- var fullUrl = "https://localhost:3000/templates/first-run/video-placemat/video.dialog.html";
-
- // Height and width are percentages of the size of the parent Office application, e.g. PowerPoint, Excel, Word, etc.
- Office.context.ui.displayDialogAsync(fullUrl,
- { height: 50, width: 50, requireHTTPS: false }, reEnableParentUI);
- }
-}());
\ No newline at end of file
diff --git a/src/templates/first-run/video-placemat/video.placemat.scss b/src/templates/first-run/video-placemat/video.placemat.scss
index 1564915..3a98861 100644
--- a/src/templates/first-run/video-placemat/video.placemat.scss
+++ b/src/templates/first-run/video-placemat/video.placemat.scss
@@ -1,123 +1,178 @@
@import '../../../common/common.scss';
-.ms-firstrun-video {
+.dp-video-placemat {
@include flex();
height: 100%;
text-align: center;
+ position: relative;
- &__header {
- padding: $global-spacing;
- min-height: 160px;
- max-height: 250px;
- @include flex();
-
- h1 {
- letter-spacing: 5px;
- }
-
- p {
- margin-top: 7px;
- }
-
- &--skip {
- text-align: right;
- }
-
- &--image {
- @include background-fill(cover) {
- background-image: url('../../../assets/video-placeholder.png');
- }
-
- margin-top: 15px;
- @include stretch-flex();
- @include focus-states(url('../../../assets/video-placeholder.png') center center no-repeat/cover);
-
- flex: 0 1 0;
- min-height: 200px;
- }
+ &--skip {
+ height: 44px;
+ @include inline-flex(flex-end, center);
}
-
- &__welcome {
- width: 100%;
- height: 100%;
- flex: 1 1 0;
- @include center-flex();
-
- img {
- height: 100px;
- }
+ #skip {
+ background: none repeat scroll 0 0 transparent;
+ border: 0px none;
+ line-height: 1;
+ cursor: pointer;
+ margin-right: 20px;
+ padding: 0;
}
- &__player {
- width: 100%;
- height: 100%;
- @include stretch-flex();
+ &--content {
- img {
- height: 100%;
- }
- }
+ &__intro {
+ padding: 35px $global-spacing 30px;
-
- &__content {
- @include flex();
- height: 100%;
- flex: 1 1 0;
- padding-left: $global-spacing;
- padding-right: $global-spacing;
- padding-bottom: $global-spacing;
-
- &--centered {
- @include flex();
+ p {
+ margin-top: 30px;
+ line-height: 1.5;
+ }
}
- &--caption {
- margin-top: 5px;
+ #videoImage {
+ cursor: pointer;
}
- &--valuestatement {
- padding-top: 50px;
+ &__caption {
+ padding: 10px $global-spacing 0;
}
}
- &__list {
- list-style-type: none;
-
- li {
- margin-bottom: $global-spacing;
-
- i {
- position: relative;
- top: 2px;
- margin-right: 10px;
- }
- }
+ &--button {
+ margin-top: 50px;
}
+}
+.ms-MessageBar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ text-align: left;
+ z-index: 99;
+ width: 100%;
+}
+.hidden {
+ display: none;
+}
- &__action {
- &--primary {
- &.ms-Button {
- align-self: center;
- margin-top: 65px;
- border: solid 2px $ms-fontColor-white;
- width: calc(100vw - 40px);
- padding: 10px;
- @include inline-flex(center, center);
- span.ms-Button-label {
- color: $ms-fontColor-white;
- }
- @include focus-states(#FFFFFF, $ms-fontColor-themePrimary, false);
- }
- }
- }
+// &__header {
+// padding: $global-spacing;
+// min-height: 160px;
+// max-height: 250px;
+// @include flex();
- &__button {
- padding-top: $global-spacing;
- @include center-flex();
- }
-}
+// h1 {
+// letter-spacing: 5px;
+// }
+
+// p {
+// margin-top: 7px;
+// }
+
+// &--skip {
+// text-align: right;
+// }
+
+// &--image {
+// @include background-fill(cover) {
+// background-image: url('../../../assets/video-placeholder.png');
+// }
+
+// margin-top: 15px;
+// @include stretch-flex();
+// @include focus-states(url('../../../assets/video-placeholder.png') center center no-repeat/cover);
+
+// flex: 0 1 0;
+// min-height: 200px;
+// }
+// }
+
+
+// &__welcome {
+// width: 100%;
+// height: 100%;
+// flex: 1 1 0;
+// @include center-flex();
+
+// img {
+// height: 100px;
+// }
+// }
+
+// &__player {
+// width: 100%;
+// height: 100%;
+// @include stretch-flex();
+
+// img {
+// height: 100%;
+// }
+// }
+
+
+// &__content {
+// @include flex();
+// height: 100%;
+// flex: 1 1 0;
+// padding-left: $global-spacing;
+// padding-right: $global-spacing;
+// padding-bottom: $global-spacing;
+
+// &--centered {
+// @include flex();
+// }
+
+// &--caption {
+// margin-top: 5px;
+// }
+
+// &--valuestatement {
+// padding-top: 50px;
+// }
+// }
+
+// &__list {
+// list-style-type: none;
+
+// li {
+// margin-bottom: $global-spacing;
+
+// i {
+// position: relative;
+// top: 2px;
+// margin-right: 10px;
+// }
+// }
+// }
+
+
+
+// &__action {
+// &--primary {
+// &.ms-Button {
+// align-self: center;
+// margin-top: 65px;
+// border: solid 2px $ms-fontColor-white;
+// width: calc(100vw - 40px);
+// padding: 10px;
+// @include inline-flex(center, center);
+
+// span.ms-Button-label {
+// color: $ms-fontColor-white;
+// }
+
+// @include focus-states(#FFFFFF, $ms-fontColor-themePrimary, false);
+// }
+// }
+// }
+
+// &__button {
+// padding-top: $global-spacing;
+// @include center-flex();
+// }
+// }
diff --git a/src/templates/first-run/video-placemat/video.placemat.ts b/src/templates/first-run/video-placemat/video.placemat.ts
new file mode 100644
index 0000000..eab785d
--- /dev/null
+++ b/src/templates/first-run/video-placemat/video.placemat.ts
@@ -0,0 +1,110 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo.
+
+
+declare var fabric: any;
+var dialog:any;
+
+(($) => {
+ "use strict";
+
+ let overlay:any;
+
+ Office.initialize = () => {
+ $(document).ready(() => {
+
+ let OverlayElement = document.querySelector('.ms-Overlay');
+ overlay = new fabric['Overlay'](OverlayElement);
+
+ function showMessage() {
+ // Direct the user to view the video.
+ $('.ms-MessageBar').attr('class', 'ms-MessageBar');
+ }
+
+ function removeMessage() {
+ // Remove the messageBar from the task pane.
+ $('.ms-MessageBar').attr('class', 'ms-MessageBar hidden');
+ };
+
+ function reEnableParentUI() {
+ // Enable the button because they launched the video and then closed the dialog.
+ $("#buttonGetStarted").prop("disabled", false);
+ }
+
+ $('#videoImage').click(()=>{
+ overlay.show();
+ showMessage();
+ reEnableParentUI();
+ openDialog();
+ });
+
+ function dialogCallback(asyncResult:any) {
+ if (asyncResult.status == "failed") {
+
+ // In addition to general system errors, there are 3 specific errors for
+ // displayDialogAsync that you can handle individually.
+ switch (asyncResult.error.code) {
+ case 12004:
+ console.log("Domain is not trusted");
+ break;
+ case 12005:
+ console.log("HTTPS is required");
+ break;
+ case 12007:
+ console.log("A dialog is already opened.");
+ break;
+ default:
+ console.log(asyncResult.error.message);
+ break;
+ }
+ }
+ else {
+ dialog = asyncResult.value;
+ /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
+ dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
+
+ /*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
+ dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
+ }
+ }
+
+
+ function messageHandler(arg:any) {
+ dialog.close();
+ console.log(arg.message);
+ }
+
+
+ function eventHandler(arg:any) {
+
+ // In addition to general system errors, there are 2 specific errors
+ // and one event that you can handle individually.
+ switch (arg.error) {
+ case 12002:
+ console.log("Cannot load URL, no such page or bad URL syntax.");
+ break;
+ case 12003:
+ console.log("HTTPS is required.");
+ break;
+ case 12006:
+ // The dialog was closed, typically because the user the pressed X button.
+ console.log("Dialog closed by user");
+ $('.ms-MessageBar').attr('class', 'ms-MessageBar hidden');
+ overlay.hide();
+ break;
+ default:
+ console.log("Undefined error in dialog window");
+ break;
+ }
+ }
+
+ function openDialog() {
+ let fullUrl = "https://localhost:3000/templates/first-run/video-placemat/dialog.html";
+
+ Office.context.ui.displayDialogAsync(fullUrl,
+ { height: 50, width: 50 }, dialogCallback);
+ }
+
+ });
+ };
+})(jQuery);
+
+