# UDTextLoop Powershell Universal Component Module 🥳

By
,
Powershell
,
Modules
Published 2022-09-16

Maybe you like looping in time like this fella
Maybe you like looping in time like this fella

Link To Download UDTextLoop Module
https://www.powershellgallery.com/packages/UDTextLoop/1.0.3

GitHub Link to this UDTextLoop Repository
https://github.com/psDevUK/UDTextLoop

How this looks in action
How this looks in action

# Demo Dashboard 😎

I did tweet this exact dashboard, honestly there is so much tuning you can do with the looping effect but I thought this looked good for a demo purpose

New-UDDashboard -Title 'PowerShell Universal' -Content {
New-UDRow -Columns{
    New-UDColumn -Content {
New-UDStyle -Style '
    margin: 0;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 500;
    font-size: 3.25rem;
    line-height: 1.6;
    letter-spacing: 0.0075em;
    ' -Content { "Buy Powershell Universal because "
       New-UDTextLoop -Text @("Its Awesome","Versatile","Creative","Easy-to-use","React Driven","Powershell Code","Interactivity","Showing Ideas","Presentations","Dashboards","Applications","Charts","Background Jobs","API Information","Build Ideas","Use Components","No HTML","All Powershell","Imagination","Dynamic","Endless","Possibilities") -Interval 550 -Delay 10 -Stiffness 100 -AdjustingSpeed 550
    }
    } -LargeSize 6
}  

}

# Revisiting a component 🧐

It was only after building this module, like almost immediately after. I thought damn I am sure I have done a text loop before. However I am pretty sure this is using a slightly different package than the previous text looper. I have delayed writing this blog, as this component did not seem to be responding to a particular parameter. Ends up I was to blame. Although I try to be careful when I type, I had made a tiny-typo on the hashtable in the function, so the name was not matching the prop name being defined in the main component JSX file. Hence the parameter was not working fully. Once this was corrected it was time for me to cook up a demo dashboard displaying how to use this component should you so wish.

# Remember it is your imagination 🤯

Recently on the forum someone wanted a component to be displaying slightly wider. I was like I am sure you can get the result you want using New-UDStyle. I posted an example of how I am using this for the reading progress bar. Boom a few days later they replied to say they had solved it with New-UDStyle. I know to use this software Powershell Universal you do not need or require any HTML,JS or CSS knowledge, as the majority of the customization can be done via parameters built in. Or possibly choosing one of the hundreds and hundres of new themes the lovely Chrissy Lemaire spent time working on.

# Cascading Style Sheets 🤓

Only sometimes you need to dig-deep and try a little sprinkle of CSS. So without going off on a marjor side-track all about Cascading Style Sheets basically in a nut-shell this is what is used to apply certain styling to certain elements of the webpage. This gives greater flexibility and control how styling is done on only the elements of the webpage you want styled. For a complete break-down on what CSS is then just search the web to find out more information on it, but this is a brief introduction to what CSS is and why it is used. It is like a simple hash table, you have a key, then you have a value associated to that key.

# Making It Possible 😯

It really does seem anything is possible with Powershell Universal but yeah you might have to learn some new-tricks to make your exact vision of the perfect idea become a reality. For me CSS was almost like the missing ingredient I had to learn to make the perfect receipe for a nice visually looking display exactly how I wanted.

In hind-sight I suppose I could have wrapped this textloop with custom CSS styling built into the <div> it is nested in. Again having not used this software for a while these thing will come back to me or I can add a new version to the gallery if this is popular enough or requested by someone.

However as I mentioned early on in this blog New-UDStyle can add that bit of styling you want for your particular component. So this is why I have wrapped the demo in New-UDStyle as I wanted this to be bold and big on the page. I wanted all the text to have a big impact, so this is why I relied on CSS for the finishing touches.

# The Project 🏗️

Orginal React Component Here
https://www.npmjs.com/package/react-text-loop-next

Codebox Demo of the original component
https://codesandbox.io/s/react-text-loop-playground-br4q1

Again you may look on npmjs and be like wahoo this only has two dependencies, however that may not be quite true, as those two dependencies, might have sub-dependencies and so on. This had a total of ten different dependency packages that needed to be installed

Use this site to identify dependencies
https://npm.anvaka.com/#/view/2d/react-text-loop-next

# Normal Procedure 🗃️

After discovering that this needed a fair few dendencies I decided to do the normal procedure I follow of renaming files and certain bits of the files (please see previous blogs if un-sure on this process

I then copied this list into notepad then ran this one line to install all these dependencies

gc C:\Builds\dependencies.txt | % {npm i $_ --legacy-peer-deps}

This is the final version of the component JSX file:-

import React from 'react';
import { withComponentFeatures } from 'universal-dashboard';
import { TextLoop } from "react-text-loop-next";

const UDTextLoop = props => {
  return (
  <TextLoop
  key={props.id}
  children={props.children}
  interval={props.interval}
  delay={props.delay}
  adjustingSpeed={props.adjustingSpeed}
  fade={props.fade}
  mask={props.mask}
  springConfig={{stiffness: props.stiffness, damping: props.damping}}
  className={props.className}
/>
  );
}

export default withComponentFeatures(UDTextLoop)

So VSCode was not complaining about any of the code above, so now I needed to edit the .PSM1 and .PSD1 file to finish this component off before running invoke-build so this is my final PSD1 file below

#
# Module manifest for module 'UDTextLoop'
#
# Generated by: psdevuk
#
# Generated on: 14/09/2022
#

@{

# Script module or binary module file associated with this manifest.
RootModule = 'UDTextLoop.psm1'

# Version number of this module.
ModuleVersion = '1.0.1'

# Supported PSEditions
# CompatiblePSEditions = @()

# ID used to uniquely identify this module
GUID = '76de2c49-86a9-4b58-9247-edbe35fed09a'

# Author of this module
Author = 'psdevuk'

# Company or vendor of this module
CompanyName = 'Home'

# Copyright statement for this module
Copyright = '(c) psdevuk. All rights reserved.'

# Description of the functionality provided by this module
 Description = 'An animated loop of text nodes for your headings. Uses react-motion for the transition so it handles super fast animations and spring params'

# Minimum version of the PowerShell engine required by this module
# PowerShellVersion = ''

# Name of the PowerShell host required by this module
# PowerShellHostName = ''

# Minimum version of the PowerShell host required by this module
# PowerShellHostVersion = ''

# Minimum version of Microsoft .NET Framework required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
# DotNetFrameworkVersion = ''

# Minimum version of the common language runtime (CLR) required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
# ClrVersion = ''

# Processor architecture (None, X86, Amd64) required by this module
# ProcessorArchitecture = ''

# Modules that must be imported into the global environment prior to importing this module
# RequiredModules = @()

# Assemblies that must be loaded prior to importing this module
# RequiredAssemblies = @()

# Script files (.ps1) that are run in the caller's environment prior to importing this module.
# ScriptsToProcess = @()

# Type files (.ps1xml) to be loaded when importing this module
# TypesToProcess = @()

# Format files (.ps1xml) to be loaded when importing this module
# FormatsToProcess = @()

# Modules to import as nested modules of the module specified in RootModule/ModuleToProcess
# NestedModules = @()

# Functions to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no functions to export.
FunctionsToExport = 'New-UDtextLoop'

# Cmdlets to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no cmdlets to export.
CmdletsToExport = '*'

# Variables to export from this module
VariablesToExport = '*'

# Aliases to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no aliases to export.
AliasesToExport = '*'

# DSC resources to export from this module
# DscResourcesToExport = @()

# List of all modules packaged with this module
# ModuleList = @()

# List of all files packaged with this module
# FileList = @()

# Private data to pass to the module specified in RootModule/ModuleToProcess. This may also contain a PSData hashtable with additional module metadata used by PowerShell.
PrivateData = @{

    PSData = @{

        # Tags applied to this module. These help with module discovery in online galleries.
        Tags = @("ud-component","text","loop")

        # A URL to the license for this module.
        # LicenseUri = ''

        # A URL to the main website for this project.
         ProjectUri = 'https://github.com/psDevUK/UDTextLoop'

        # A URL to an icon representing this module.
        # IconUri = 'https://twitter.com/i/status/1571141595147407364'

        # ReleaseNotes of this module
        # ReleaseNotes = ''

        # Prerelease string of this module
        # Prerelease = ''

        # Flag to indicate whether the module requires explicit user acceptance for install/update/save
        # RequireLicenseAcceptance = $false

        # External dependent modules of this module
        # ExternalModuleDependencies = @()

    } # End of PSData hashtable

} # End of PrivateData hashtable

# HelpInfo URI of this module
# HelpInfoURI = ''

# Default prefix for commands exported from this module. Override the default prefix using Import-Module -Prefix.
# DefaultCommandPrefix = ''

}

To make the actual cmdlet behind this component you need to edit the pre-defined function in the .PSM1 file so this is my finished .PSM1 before running the invoke-build

$IndexJs = Get-ChildItem "$PSScriptRoot\index.*.bundle.js"
$AssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($IndexJs.FullName)

function New-UDTextLoop {
    <#
    .SYNOPSIS
    Creates a new text loop component
    
    .DESCRIPTION
    Creates a new text loop component. An animated loop of text nodes for your headings. Uses react-motion for the transition so it handles super fast animations and spring params.
    
    .PARAMETER Id
    The ID of this editor

    .PARAMETER Text
    The words you want to loop (required), this must be entered as an array @("item1","item2","item3")

    .PARAMETER Interval
    The frequency (in ms) that the words change. Can also pass an array if you want a different interval per children. Default 1000
    
    .PARAMETER Delay
    A delay (in ms) for the animation to start. This allows to use multiple instances to create a staggered animation effect for example. Default 0
    
    .PARAMETER AdjustingSpeed
    The speed that the container around each word adjusts to the next one (in ms). Usually you don't need to change this. Default 500

    .PARAMETER Fade
    Enable or disable the fade animation on enter and leave. Default true
    
    .PARAMETER Mask
    Mask the animation around the bounding box of the animated content. Default false
    
    .PARAMETER Stiffness
    Configuration for react-motion spring stiffness default 70

    .PARAMETER Damping
    Configuration for react-motion spring default 31

    .PARAMETER ClassName
    Any additional CSS classes you might want to use to style the component. Default udTextLoop

    .EXAMPLE
    New-UDTextLoop -Text @("item1","item2","item3") -Interval 100


    #>
    
    param(
        [Parameter()]
        [string]$Id = (New-Guid).ToString(),
        [Parameter()]
        [array]$Text,
        [Parameter()]
        [int]$Interval = 1000,
        [Parameter()]
        [int]$Delay = 0,
        [Parameter()]
        [int]$AdjustingSpeed = 500,
        [Parameter()]
        [bool]$Fade = $true,
        [Parameter()]
        [bool]$Mask = $false,
        [Parameter()]
        [int]$Stiffness = 70,
        [Parameter()]
        [int]$Damping = 31,
        [Parameter()]
        [string]$ClassName = "udTextLoop"
    )

    End {
        @{
            assetId  = $AssetId 
            isPlugin = $true 
            type     = "udtextloop"
            id       = $Id

            children = $text
            interval = $Interval
            delay = $Delay
            adjustingSpeed = $AdjustingSpeed
            fade = $Fade
            mask = $Mask
            stiffness = $Stiffness
            damping = $Damping
            className = $ClassName
        }
    }
}

Link to this module on marketplace
https://marketplace.universaldashboard.io/Dashboard/UDTextLoop

# 💥 That is how this Powershell module was done. Till next time, take care