Merge pull request #16 from reactivewebstudio/dev

Dev

.gitignore

@@ -8,6 +8,7 @@ node_modules
 
 # Build generated files
 dist
+config
 lib
 release
 solution

README.md

@@ -21,35 +21,28 @@ The Blurb web part offers a clean and stylish way to combine text and images. It
 
 | Version | Date             | Comments        |
 | ------- | ---------------- | --------------- |
-| 0.0.1     | October 20, 2024 | Development release |
+| 0.0.5   | November 22, 2024 | Development release |
+| 0.0.1   | October 20, 2024  | Development release |
 
 ## Disclaimer
 
 **THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
 
 ---
 
-## Minimal Path to Awesome
-
-- Clone this repository
-- Ensure that you are at the solution folder
-- in the command-line run:
-  - **npm install**
-  - **gulp serve**
-
 ## Blurb Web Part Features
 
 - **Customizable Layout**:
 The Blurb web part allows users to display information in up to four customizable content containers. Each container can be independently styled and displayed in a single row, making it easy to organize and present multiple pieces of important content side by side. 
 
 - **Text and Image Combination**:
-Each container supports a combination of rich text and imagery. Users can add a title, formatted text, and hyperlinks, making it flexible for various types of content. Whether it’s a brief announcement or detailed information, the Blurb web part adapts to different needs.
+Each container supports a combination of ~~rich~~ text and imagery. Users can add a title, ~~formatted~~ text, and hyperlinks, making it flexible for various types of content. Whether it’s a brief announcement or detailed information, the Blurb web part adapts to different needs. Rich text editor will be added in a future update.
 
 - **Customizable Appearance**:
 You can tailor the appearance of each container by setting different border colors and background colors, ensuring that the Blurb fits seamlessly with the design of your SharePoint page.
 
 - **Icon Options**:
-Users have the option to choose between an icon or a custom image for each container. Icons are available for quick selection, while custom images can be uploaded to personalize each blurb further.
+Users have the option to choose between an icon or ~~a custom image~~ for each container. Icons are available for quick selection, while custom images will be added in a future update.
 
 - **Easy Editing Experience**:
 The web part includes an intuitive Edit Web Part panel where users can manage and style containers without leaving the edit mode of the page. The layout and design controls are centralized, simplifying customization.

TODO.md

@@ -11,10 +11,12 @@
 - Release version 1.0
 
 ## For Version 1.x.x
+- ~~Add icon for Blurb web part solution~~
 - Add TopActions
     - Add Blurb layout options (Image/Icon Top or Image/Icon Left)
 - ~~Integrate Office UI Fabric~~
 - Add icon size adjustment
 - Add feature to upload a custom image
-- Add custom link field to Blurb
-- Clean up Blurb Properties Pane design/layout
+- ~~Add custom link field to Blurb~~
+- Clean up Blurb Properties Pane design/layout
+- Fix icon selection, currently not saving correctly

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sharepoint-blurb-web-part",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "private": true,
   "engines": {
     "node": ">=18.17.1 <19.0.0"

src/webparts/blurb/BlurbWebPart.manifest.json

@@ -15,8 +15,8 @@
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
     "group": { "default": "Advanced" },
     "title": { "default": "Blurb" },
-    "description": { "default": "Blurb description" },
-    "officeFabricIconFontName": "Page",
+    "description": { "default": "A clean and stylish way to combine text and images" },
+    "officeFabricIconFontName": "CannedChat",
     "properties": {
       "description": "Blurb"
     }

src/webparts/blurb/BlurbWebPart.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-import { IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneSlider } from '@microsoft/sp-property-pane';
+import { IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneSlider, PropertyPaneDropdown } from '@microsoft/sp-property-pane';
 import * as strings from 'BlurbWebPartStrings';
 import { Blurb } from './components/Blurb';
 import { IBlurbProps } from './components/IBlurbProps';
 import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
 import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';
 import { initializeIcons } from '@fluentui/react/lib/Icons';
+import { DisplayMode } from '@microsoft/sp-core-library';
 
 export interface IBlurbWebPartProps {
   description: string;
@@ -20,9 +21,10 @@ export interface IBlurbWebPartProps {
     borderRadius: string;
     title: string;
     text: string;
+    linkUrl?: string;
+    linkTarget?: string;
   }>;
 }
-
 export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartProps> {
   private _isDarkTheme: boolean = false;
   private _environmentMessage: string = '';
@@ -40,56 +42,61 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
         userDisplayName: this.context.pageContext.user.displayName,
         containers: this.properties.containers || [],
         containerCount: this.properties.containerCount || 1,
-
+        isEditMode: this.displayMode === DisplayMode.Edit,
+        displayMode: this.displayMode, // Pass display mode
         onContainerClick: async (index: number) => {
-          // Close the property pane if it's already open
-          if (this.context.propertyPane.isRenderedByWebPart()) {
-            this.context.propertyPane.close();
+          if (this.displayMode === DisplayMode.Edit) {
+            if (this.context.propertyPane.isRenderedByWebPart()) {
+              this.context.propertyPane.close();
+            }
+            await new Promise(resolve => setTimeout(resolve, 10));
+            this.selectedContainerIndex = index;
+            this._isEditMode = true;
+            this.context.propertyPane.refresh();
+            this.context.propertyPane.open();
           }
-          // Delay to ensure the pane has closed
-          await new Promise(resolve => setTimeout(resolve, 10));
-
-          // Set the selected container and enter edit mode
-          this.selectedContainerIndex = index;
-          this._isEditMode = true;
-          this.context.propertyPane.refresh();
-          this.context.propertyPane.open();
         },
         onEditClick: async (index: number) => {
-          // Handle edit click by closing and reopening the property pane
-          this.selectedContainerIndex = index;
-          this._isEditMode = true;
-
-          if (this.context.propertyPane.isRenderedByWebPart()) {
-            this.context.propertyPane.close();
+          if (this.displayMode === DisplayMode.Edit) {
+            this.selectedContainerIndex = index;
+            this._isEditMode = true;
+
+            if (this.context.propertyPane.isRenderedByWebPart()) {
+              this.context.propertyPane.close();
+            }
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            this.context.propertyPane.refresh();
+            this.context.propertyPane.open();
           }
-
-          await new Promise(resolve => setTimeout(resolve, 10)); // Delay for smooth reopening
-          this.context.propertyPane.refresh();
-          this.context.propertyPane.open();
         },
         onMoveClick: (index: number, direction: 'up' | 'down') => {
-          if (direction === 'up' && index > 0) {
-            const temp = this.properties.containers[index];
-            this.properties.containers[index] = this.properties.containers[index - 1];
-            this.properties.containers[index - 1] = temp;
-          } else if (direction === 'down' && index < this.properties.containers.length - 1) {
-            const temp = this.properties.containers[index];
-            this.properties.containers[index] = this.properties.containers[index + 1];
-            this.properties.containers[index + 1] = temp;
+          if (this.displayMode === DisplayMode.Edit) {
+            if (direction === 'up' && index > 0) {
+              const temp = this.properties.containers[index];
+              this.properties.containers[index] = this.properties.containers[index - 1];
+              this.properties.containers[index - 1] = temp;
+            } else if (direction === 'down' && index < this.properties.containers.length - 1) {
+              const temp = this.properties.containers[index];
+              this.properties.containers[index] = this.properties.containers[index + 1];
+              this.properties.containers[index + 1] = temp;
+            }
+            this.render();
           }
-          this.render(); // Re-render to reflect the new order
         },
         onRemoveClick: (index: number, updatedCount: number) => {
-          this.properties.containers.splice(index, 1);
-          this.properties.containerCount = updatedCount; // Update the container count
-          this.render(); // Re-render the component to reflect the changes
+          if (this.displayMode === DisplayMode.Edit) {
+            this.properties.containers.splice(index, 1);
+            this.properties.containerCount = updatedCount;
+            this.render();
+          }
         },
       }
     );
-
+  
     ReactDom.render(element, this.domElement);
   }
+
 
   protected async onInit(): Promise<void> {
     initializeIcons();
@@ -111,7 +118,9 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
           borderRadius: '0',
           fontColor: '#323130',
           title: ``,
-          text: ''
+          text: '',
+          linkUrl: '',
+          linkTarget: '_self',
         });
       }
     } else if (this.properties.containerCount < currentContainerCount) {
@@ -132,7 +141,7 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
     this._isEditMode = false;
     this.selectedContainerIndex = -1;
   }
-
+  
   private async _getEnvironmentMessage(): Promise<string> {
     if (!!this.context.sdks.microsoftTeams) {
       const context = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
@@ -169,7 +178,9 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
             borderRadius: '0',
             fontColor: '#323130',
             title: ``,
-            text: ''
+            text: '',
+            linkUrl: '',
+            linkTarget: '_self',
           });
         }
       } else if (newContainerCount < currentContainerCount) {
@@ -180,7 +191,7 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
     super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
     this.render();
   }
-
+  // The blurb properties pane
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     if (this._isEditMode && this.selectedContainerIndex !== -1) {
       const selectedContainer = this.properties.containers[this.selectedContainerIndex] || {};
@@ -212,9 +223,22 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
                   PropertyPaneTextField(`containers[${this.selectedContainerIndex}].text`, {
                     label: `Blurb Text ${this.selectedContainerIndex + 1}`,
                     value: selectedContainer.text || '',
-                    multiline: true, // Multi-line text input
-                    resizable: true // Allows vertical resizing
+                    multiline: true,
+                    resizable: true
+                  }),
+                  PropertyPaneTextField(`containers[${this.selectedContainerIndex}].linkUrl`, {
+                    label: `Blurb Link URL ${this.selectedContainerIndex + 1}`,
+                    value: selectedContainer.linkUrl || '',
+                    placeholder: "Enter a clickable link URL",
                   }),
+                  PropertyPaneDropdown(`containers[${this.selectedContainerIndex}].linkTarget`, {
+                    label: `Link Target ${this.selectedContainerIndex + 1}`,
+                    options: [
+                      { key: '_self', text: 'Open in same tab' },
+                      { key: '_blank', text: 'Open in new tab' }
+                    ],
+                    selectedKey: selectedContainer.linkTarget || '_self',
+                  }),                  
                   PropertyFieldColorPicker(`containers[${this.selectedContainerIndex}].fontColor`, {
                     label: "Font Color",
                     selectedColor: selectedContainer.fontColor,
@@ -257,7 +281,7 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
         ]
       };
     }
-
+    // The main web part properties pane
     return {
       pages: [
         {

src/webparts/blurb/components/Blurb.module.scss

@@ -55,3 +55,8 @@
     color: #f3f2f1;
   }
 }
+
+.clickableBlurb {
+  text-decoration: none; /* Remove underline from links */
+  display: block; /* Ensure the entire block is clickable */
+}