Skip to content

Commit

Permalink
Merge pull request #20 from L21s/refactoring
Browse files Browse the repository at this point in the history 
Refactoring
  • Loading branch information
@kerilz
kerilz authored Jul 8, 2024
2 parents d0e59da + 8441452 commit 379091c
Show file tree
Hide file tree
Showing 6 changed files with 266 additions and 243 deletions.
6 changes: 6 additions & 0 deletions src/taskpane/powerPointUtil.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export async function runPowerPoint(updateFunction: (context: PowerPoint.RequestContext) => void) {
await PowerPoint.run(async (context) => {
updateFunction(context);
await context.sync();
});
}
130 changes: 130 additions & 0 deletions src/taskpane/rowsColumns.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import Shape = PowerPoint.Shape;
import { runPowerPoint } from "./powerPointUtil";

export const rowLineName = "RowLine";
export 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;

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) {
return null;
}

let selectedShape = selectedShapes.getItemAt(0);
return selectedShape.load();
}

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 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 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 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 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 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 }
);
line.name = columnLineName;
line.lineFormat.color = "#000000";

left += lineDistance;
}
}
34 changes: 24 additions & 10 deletions src/taskpane/taskpane.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,25 @@ ul {
width: 23%;
}

.number-input-container {
margin-top: 0;
margin-bottom: 0;
}

.button-row {
margin-bottom: 0;
}

.color-picker {
width: 100%;
}

.sticker-yellow {
background-color: yellow;
.sticker-buttons-container {
display: flex;
justify-content: space-evenly;
}

.sticker-button {
border: none;
padding: 30px 64px;
display: inline-block;
Expand All @@ -94,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 {
Expand All @@ -116,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%;
}
Expand Down
73 changes: 40 additions & 33 deletions src/taskpane/taskpane.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,67 +36,74 @@ <h1 class="ms-font-su">L21s Add-In</h1>
<section id="display-msg" class="ms-welcome__main">
<div class="padding">
<h3 class="ms-font-l">Sticker</h3>
<div>
Autor
<label for="initials"></label><input type="text" id="initials" />
<button class="save-button" id="save-initials">Save</button>
<div class="input-field">
<label for="initials">Autor</label><input type="text" id="initials" />
</div>
<button class="save-button btn" id="save-initials">Save</button>
<div class="sticker-buttons-container">
<button class="sticker-button sticker-yellow" id="yellow-sticker"></button>
<button class="sticker-button sticker-cyan" id="cyan-sticker"></button>
</div>
<button class="sticker-yellow" id="yellow-sticker"></button>
<button class="sticker-cyan" id="cyan-sticker"></button>

<h3 class="ms-font-l">Background</h3>
<div class="content">
<div>
<label for="background-color"></label><input class="color-picker" type="color" id="background-color"
name="head" value="#FFFFFF" />
<label for="background-color"></label>
<input class="color-picker" type="color" id="background-color" name="head" value="#FFFFFF" />
</div>
<button class="ms-Button" id="fill-background">Fill</button>
<button class="ms-Button btn" id="fill-background">Fill</button>
</div>

<h3 class="ms-font-l">Rows</h3>
<div class="content">
<div>
<button class="grid" id="two-rows">2</button>
<button class="grid" id="three-rows">3</button>
<button class="grid" id="four-rows">4</button>
<input class="grid" type="number" id="number-of-rows" name="head" value=5/>
<div class="row button-row">
<button class="grid row-button btn col s3" id="two-rows" data-value="2">2</button>
<button class="grid row-button btn col s3" id="three-rows" data-value="3">3</button>
<button class="grid row-button btn col s3" id="four-rows" data-value="4">4</button>
<div class="input-field col s3 number-input-container">
<label for="number-of-rows">Rows</label>
<input class="grid" type="number" id="number-of-rows" name="head" value=5 placeholder="5"/>
</div>
</div>
<div>
<button class="grid-button" id="create-rows">Create</button>
<button class="grid-button" id="delete-rows">Delete</button>
<button class="grid-button btn" id="create-rows">Create</button>
<button class="grid-button btn" id="delete-rows">Delete</button>
</div>
</div>

<h3 class="ms-font-l">Columns</h3>
<div class="content">
<div>
<button class="grid" id="two-columns">2</button>
<button class="grid" id="three-columns">3</button>
<button class="grid" id="four-columns">4</button>
<input class="grid" type="number" id="number-of-columns" name="head" value=5/>
<div class="row button-row">
<button class="grid column-button btn col s3" id="two-columns" data-value="2">2</button>
<button class="grid column-button btn col s3" id="three-columns" data-value="3">3</button>
<button class="grid column-button btn col s3" id="four-columns" data-value="4">4</button>
<div class="input-field col s3 number-input-container">
<label for="number-of-columns">Columns</label>
<input class="grid" type="number" id="number-of-columns" name="head" value=5 placeholder="5"/>
</div>
</div>
<div>
<button class="grid-button" id="create-columns">Create</button>
<button class="grid-button" id="delete-columns">Delete</button>
<button class="grid-button btn" id="create-columns">Create</button>
<button class="grid-button btn" id="delete-columns">Delete</button>
</div>
</div>

<h3 class="ms-font-l">L21's-Logo</h3>
<div class="content-vertical">
<button class="logo-button dropdown-trigger btn" id="logos-with-text" href='#' data-target='logos-with-text-dropdown'> with Text</button>
<button class="dropdown-trigger btn" id="logos-with-text" href='#' data-target='logos-with-text-dropdown'>with Text</button>
<ul id='logos-with-text-dropdown' class='dropdown-content'>
<li><a href="#!" id="black-logo-with-text">Black</a></li>
<li><a href="#!" id="white-logo-with-text">White</a></li>
<li><a href="#!" id="pink-logo-with-text">Pink</a></li>
<li><a href="#!" id="blue-logo-with-text">Blue</a></li>
<li class="logo-button" data-value="logoTextBlack"><a href="#!" id="black-logo-with-text">Black</a></li>
<li class="logo-button" data-value="logoTextWhite"><a href="#!" id="white-logo-with-text">White</a></li>
<li class="logo-button" data-value="logoTextPink"><a href="#!" id="pink-logo-with-text">Pink</a></li>
<li class="logo-button" data-value="logoTextBlue"><a href="#!" id="blue-logo-with-text">Blue</a></li>
</ul>

<button class="logo-button dropdown-trigger btn" id="logos-without-text" href='#' data-target='logos-without-text-dropdown'> without Text</button>
<button class="dropdown-trigger btn" id="logos-without-text" href='#' data-target='logos-without-text-dropdown'>without Text</button>
<ul class="dropdown-menu dropdown-content" id="logos-without-text-dropdown">
<li><a href="#!" id="black-logo-without-text">Black</a></li>
<li><a href="#!" id="white-logo-without-text">White</a></li>
<li><a href="#!" id="pink-logo-without-text">Pink</a></li>
<li><a href="#!" id="blue-logo-without-text">Blue</a></li>
<li class="logo-button" data-value="logoBlack"><a href="#!" id="black-logo-without-text">Black</a></li>
<li class="logo-button" data-value="logoWhite"><a href="#!" id="white-logo-without-text">White</a></li>
<li class="logo-button" data-value="logoPink"><a href="#!" id="pink-logo-without-text">Pink</a></li>
<li class="logo-button" data-value="logoBlue"><a href="#!" id="blue-logo-without-text">Blue</a></li>
</ul>
</div>

Expand Down
Loading

0 comments on commit 379091c

Please sign in to comment.