-
-
-
-
-
+
-
-
+
+
L21's-Logo
-
+
-
+
diff --git a/src/taskpane/taskpane.ts b/src/taskpane/taskpane.ts
index d0564cf..b678136 100644
--- a/src/taskpane/taskpane.ts
+++ b/src/taskpane/taskpane.ts
@@ -7,16 +7,35 @@
import { base64Images } from "../../base64Image";
import * as M from "../../lib/materialize/js/materialize.min";
-import Shape = PowerPoint.Shape;
+import { runPowerPoint } from "./powerPointUtil";
+import { columnLineName, rowLineName, createColumns, createRows } from "./rowsColumns";
-const rowLineName = "RowLine";
-const columnLineName = "ColumnLine";
-const SLIDE_WIDTH = 960;
-const SLIDE_HEIGHT = 540;
-const SLIDE_MARGIN = 8;
-const CONTENT_MARGIN = { top: 126, bottom: 60, right: 54, left: 58 };
-const CONTENT_HEIGHT = SLIDE_HEIGHT - CONTENT_MARGIN.top - CONTENT_MARGIN.bottom;
-const CONTENT_WIDTH = SLIDE_WIDTH - CONTENT_MARGIN.right - CONTENT_MARGIN.left;
+function initStickerButtons() {
+ document.querySelectorAll(".sticker-button").forEach((button) => {
+ const color = window.getComputedStyle(button as HTMLElement).backgroundColor;
+ (button as HTMLElement).onclick = () => insertSticker(color);
+ });
+
+ document.getElementById("save-initials").onclick = () =>
+ localStorage.setItem("initials", (
document.getElementById("initials")).value);
+}
+
+function initRowsAndColumnsButtons() {
+ document.getElementById("create-rows").onclick = () =>
+ createRows(+(document.getElementById("number-of-rows")).value);
+ document.getElementById("delete-rows").onclick = () => deleteShapesByName(rowLineName);
+ document.querySelectorAll(".row-button").forEach((button) => {
+ (button as HTMLElement).onclick = () =>
+ createRows(Number(button.getAttribute("data-value")));
+ });
+
+ document.querySelectorAll(".column-button").forEach((button) => {
+ (button as HTMLElement).onclick = () => createColumns(Number(button.getAttribute("data-value")));
+ });
+ document.getElementById("create-columns").onclick = () =>
+ createColumns(+(document.getElementById("number-of-columns")).value);
+ document.getElementById("delete-columns").onclick = () => deleteShapesByName(columnLineName);
+}
Office.onReady((info) => {
if (info.host === Office.HostType.PowerPoint) {
@@ -25,47 +44,18 @@ Office.onReady((info) => {
let initials = document.getElementById("initials");
initials.value = localStorage.getItem("initials");
- document.getElementById("fill-background").onclick = () => {
+ document.getElementById("fill-background").onclick = async () => {
const colorPicker = document.getElementById("background-color");
const selectedColor = colorPicker.value;
- addBackground(selectedColor);
+ await addBackground(selectedColor);
};
- document.getElementById("yellow-sticker").onclick = () => insertSticker("yellow");
- document.getElementById("cyan-sticker").onclick = () => insertSticker("#00ffff");
- document.getElementById("save-initials").onclick = () =>
- localStorage.setItem("initials", (document.getElementById("initials")).value);
- document.getElementById("create-rows").onclick = () =>
- createRows(+(document.getElementById("number-of-rows")).value);
- document.getElementById("delete-rows").onclick = () => deleteShapesByName(rowLineName);
- document.getElementById("two-rows").onclick = () => createRows(2);
- document.getElementById("three-rows").onclick = () => createRows(3);
- document.getElementById("four-rows").onclick = () => createRows(4);
- document.getElementById("create-columns").onclick = () =>
- createColumns(+(document.getElementById("number-of-columns")).value);
- document.getElementById("delete-columns").onclick = () => deleteShapesByName(columnLineName);
- document.getElementById("two-columns").onclick = () => createColumns(2);
- document.getElementById("three-columns").onclick = () => createColumns(3);
- document.getElementById("four-columns").onclick = () => createColumns(4);
- // Connects the logo dropdown menu buttons with the base64 image
- // with text
- document.getElementById("black-logo-with-text").onclick = () =>
- insertImageByBase64("logoTextBlack");
- document.getElementById("blue-logo-with-text").onclick = () =>
- insertImageByBase64("logoTextBlue");
- document.getElementById("pink-logo-with-text").onclick = () =>
- insertImageByBase64("logoTextPink");
- document.getElementById("white-logo-with-text").onclick = () =>
- insertImageByBase64("logoTextWhite");
- // without text
- document.getElementById("black-logo-without-text").onclick = () =>
- insertImageByBase64("logoBlack");
- document.getElementById("blue-logo-without-text").onclick = () =>
- insertImageByBase64("logoBlue");
- document.getElementById("pink-logo-without-text").onclick = () =>
- insertImageByBase64("logoPink");
- document.getElementById("white-logo-without-text").onclick = () =>
- insertImageByBase64("logoWhite");
+ initStickerButtons();
+ initRowsAndColumnsButtons();
+
+ document.querySelectorAll(".logo-button").forEach((button) => {
+ (button as HTMLElement).onclick = () => insertImageByBase64(button.getAttribute("data-value"));
+ });
}
});
@@ -87,12 +77,9 @@ async function deleteShapesByName(name: string) {
}
function insertImageByBase64(base64Name: string) {
- // Call Office.js to insert the image into the document.
Office.context.document.setSelectedDataAsync(
base64Images[base64Name],
- {
- coercionType: Office.CoercionType.Image
- },
+ { coercionType: Office.CoercionType.Image },
(asyncResult) => {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
console.error("Action failed. Error: " + asyncResult.error.message);
@@ -101,147 +88,42 @@ function insertImageByBase64(base64Name: string) {
);
}
-export async function createRows(numberOfRows: number) {
- await runPowerPoint(async (powerPointContext) => {
- const singleSelectedShapeOrNull = await getSingleSelectedShapeOrNull(powerPointContext);
- if (singleSelectedShapeOrNull) {
- await createRowsForObject(numberOfRows, singleSelectedShapeOrNull, powerPointContext);
- } else {
- await createRowsForSlide(numberOfRows, powerPointContext);
- }
- });
-}
-
-export async function createColumns(numberOfRows: number) {
- await runPowerPoint(async (powerPointContext) => {
- const singleSelectedShapeOrNull = await getSingleSelectedShapeOrNull(powerPointContext);
- if (singleSelectedShapeOrNull) {
- await createColumnsForObject(numberOfRows, singleSelectedShapeOrNull, powerPointContext);
- } else {
- await createColumnsForSlide(numberOfRows, powerPointContext);
- }
- });
-}
-
-export async function createRowsForSlide(numberOfRows: number, powerPointContext: PowerPoint.RequestContext) {
- const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
-
- const lineDistance = CONTENT_HEIGHT / numberOfRows;
- let top = CONTENT_MARGIN.top;
-
- await renderRows(shapes, numberOfRows, top, lineDistance, SLIDE_WIDTH - SLIDE_MARGIN * 2, SLIDE_MARGIN)
- await powerPointContext.sync();
-}
-
-export async function createRowsForObject(numberOfColumns: number, selectedShape: Shape, powerPointContext: PowerPoint.RequestContext) {
- await powerPointContext.sync();
- const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
-
-
- const lineDistance = selectedShape.height / numberOfColumns;
- const selectedShapeRight = selectedShape.left + selectedShape.width;
- const lineWidth = SLIDE_WIDTH - CONTENT_MARGIN.right - selectedShapeRight;
-
- let top = selectedShape.top;
-
- await renderRows(shapes, numberOfColumns, top, lineDistance, lineWidth, selectedShapeRight)
- await powerPointContext.sync();
-}
-
-export async function renderRows(
- shapes: PowerPoint.ShapeCollection,
- numberOfRows: number, initialTop: number,
- lineDistance: number, lineWidth: number, left: number) {
- let top = initialTop;
- for (let _i = 0; _i <= numberOfRows; _i++) {
- const line = shapes.addLine(
- PowerPoint.ConnectorType.straight,
- { height: 0.5, left: left, top: top, width: lineWidth }
- );
- line.name = rowLineName;
- line.lineFormat.color = "#000000";
-
- top += lineDistance;
- }
-}
-
-export async function createColumnsForSlide(numberOfColumns: number, powerPointContext: PowerPoint.RequestContext) {
- const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
-
- const lineDistance = CONTENT_WIDTH / numberOfColumns;
-
- let left = CONTENT_MARGIN.left;
-
- await renderColumns(shapes, numberOfColumns, left, lineDistance, SLIDE_HEIGHT - SLIDE_MARGIN * 2, SLIDE_MARGIN)
- await powerPointContext.sync();
-}
-
-export async function createColumnsForObject(numberOfColumns: number, selectedShape: Shape, powerPointContext: PowerPoint.RequestContext) {
- await powerPointContext.sync();
- const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
- const lineDistance = selectedShape.width / numberOfColumns;
- const selectedShapeBottom = selectedShape.top + selectedShape.height;
- const lineHeight = SLIDE_HEIGHT - CONTENT_MARGIN.bottom - selectedShapeBottom;
-
- let left = selectedShape.left;
-
- await renderColumns(shapes, numberOfColumns, left, lineDistance, lineHeight, selectedShapeBottom)
- await powerPointContext.sync();
-}
-
-export async function renderColumns(
- shapes: PowerPoint.ShapeCollection,
- numberOfColumns: number, initialLeft: number,
- lineDistance: number, lineHeight: number, top: number) {
- let left = initialLeft;
- for (let _i = 0; _i <= numberOfColumns; _i++) {
- const line = shapes.addLine(
- PowerPoint.ConnectorType.straight,
- { height: lineHeight, left: left, top: top, width: 0.5 }
+export async function insertSticker(color) {
+ await runPowerPoint((powerPointContext) => {
+ const today = new Date();
+ console.log(rgbToHex(color))
+ const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
+ const textBox = shapes.addTextBox(
+ localStorage.getItem("initials") + ", " + today.toDateString() + "\n",
+ { height: 50, left: 50, top: 50, width: 150 }
);
- line.name = columnLineName;
- line.lineFormat.color = "#000000";
-
- left += lineDistance;
- }
+ textBox.name = "Square";
+ textBox.fill.setSolidColor(rgbToHex(color));
+ setStickerFontProperties(textBox);
+ });
}
-
-export async function getSingleSelectedShapeOrNull(context: PowerPoint.RequestContext) {
- let selectedShapes = context.presentation.getSelectedShapes();
- let clientResult = selectedShapes.getCount();
- await context.sync();
- let selectedShapesCount = clientResult.value;
- if (selectedShapesCount != 1) {
- console.log("error 154");
- // TODO error handling
- return null;
+function rgbToHex(rgb: String) {
+ const regex = /(\d+),\s*(\d+),\s*(\d+)/;
+ const matches = rgb.match(regex);
+ console.log(matches);
+ function componentToHex(c: String) {
+ const hex = Number(c).toString(16);
+ return hex.length === 1 ? "0" + hex : hex;
}
- let selectedShape = selectedShapes.getItemAt(0);
- return selectedShape.load();
+ return "#" + componentToHex(matches[2]) + componentToHex(matches[2]) + componentToHex(matches[3]);
}
-export async function insertSticker(color) {
- await runPowerPoint((powerPointContext) => {
- const today = new Date();
- const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
- const textbox = shapes.addTextBox(localStorage.getItem("initials") + ", " + today.toDateString() + "\n");
- textbox.left = 50;
- textbox.top = 50;
- textbox.height = 50;
- textbox.width = 150;
- textbox.name = "Square";
- textbox.fill.setSolidColor(color);
- textbox.textFrame.textRange.font.bold = true;
- textbox.textFrame.textRange.font.name = "Arial";
- textbox.textFrame.textRange.font.size = 12;
- textbox.textFrame.textRange.font.color = "#5A5A5A";
- textbox.lineFormat.visible = true;
- textbox.lineFormat.color = "#000000";
- textbox.lineFormat.weight = 1.25;
- });
+function setStickerFontProperties(textbox: PowerPoint.Shape) {
+ textbox.textFrame.textRange.font.bold = true;
+ textbox.textFrame.textRange.font.name = "Arial";
+ textbox.textFrame.textRange.font.size = 12;
+ textbox.textFrame.textRange.font.color = "#5A5A5A";
+ textbox.lineFormat.visible = true;
+ textbox.lineFormat.color = "#000000";
+ textbox.lineFormat.weight = 1.25;
}
export async function addBackground(backgroundColor?: string) {
@@ -251,10 +133,3 @@ export async function addBackground(backgroundColor?: string) {
selectedImage.fill.setSolidColor(backgroundColor);
});
}
-
-export async function runPowerPoint(updateFunction: (context: PowerPoint.RequestContext) => void) {
- await PowerPoint.run(async (context) => {
- updateFunction(context);
- await context.sync();
- });
-}
From f150bb3a3d050557e91f15d98461f0e657dfca98 Mon Sep 17 00:00:00 2001
From: Kyrylo Zakurdaiev <25233423+kerilz@users.noreply.github.com>
Date: Tue, 2 Jul 2024 13:59:05 +0200
Subject: [PATCH 2/3] fix css loaders
---
webpack.config.js | 10 +---------
1 file changed, 1 insertion(+), 9 deletions(-)
diff --git a/webpack.config.js b/webpack.config.js
index 75b047c..4e1c9c2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,18 +25,10 @@ module.exports = async (env, options) => {
clean: true,
},
resolve: {
- extensions: [".ts", ".tsx", ".html", ".js", ".css", ".scss"],
+ extensions: [".ts", ".tsx", ".html", ".js"],
},
module: {
rules: [
- {
- test: /\.css$/,
- use: ["style-loader", "css-loader"],
- },
- {
- test: /\.scss$/,
- use: ["style-loader", "css-loader", "sass-loader"],
- },
{
test: /\.ts$/,
exclude: /node_modules/,
From 84414528b5913d0ea928ff92001e7e96e7be7010 Mon Sep 17 00:00:00 2001
From: Kyrylo Zakurdaiev <25233423+kerilz@users.noreply.github.com>
Date: Tue, 2 Jul 2024 23:04:58 +0200
Subject: [PATCH 3/3] adjust styling
---
src/taskpane/taskpane.css | 22 +++++++-------
src/taskpane/taskpane.html | 20 ++++++-------
src/taskpane/taskpane.ts | 59 +++++++++++++++++++-------------------
3 files changed, 50 insertions(+), 51 deletions(-)
diff --git a/src/taskpane/taskpane.css b/src/taskpane/taskpane.css
index 92edb3c..67c1c8c 100644
--- a/src/taskpane/taskpane.css
+++ b/src/taskpane/taskpane.css
@@ -92,13 +92,12 @@ ul {
width: 100%;
}
-.sticker-buttons-container{
+.sticker-buttons-container {
display: flex;
justify-content: space-evenly;
}
-.sticker-yellow {
- background-color: yellow;
+.sticker-button {
border: none;
padding: 30px 64px;
display: inline-block;
@@ -108,15 +107,12 @@ ul {
border-radius: 0.375rem;
}
+.sticker-yellow {
+ background-color: yellow;
+}
+
.sticker-cyan {
background-color: #00ffff;
- border: none;
- padding: 30px 64px;
- display: inline-block;
- margin: 16px 2px 2px;
- cursor: pointer;
- box-shadow: 2px 2px 4px #7D7D7D;
- border-radius: 0.375rem;
}
.content {
@@ -130,11 +126,15 @@ ul {
.content-vertical {
display: flex;
flex-direction: row;
- /*margin: 0 auto;*/
+ justify-content: space-evenly;
gap: 5px;
width: 100%;
}
+.dropdown-trigger {
+ width: 100%;
+}
+
.save-button {
width: 31%;
}
diff --git a/src/taskpane/taskpane.html b/src/taskpane/taskpane.html
index b14526a..ae6c084 100644
--- a/src/taskpane/taskpane.html
+++ b/src/taskpane/taskpane.html
@@ -90,20 +90,20 @@ Columns
L21's-Logo
-
+
-
+