Farveskema i Umbraco - fra idé til property editor

Vi gør os meget i ordsproget “selvgjort er velgjort” i min arbejdsplads. Det samme skal siges i forhold til brug af datatyper i Umbraco.

 

Jeg har i hvert fald som en af de seneste achievements opnået af udvikle en interaktiv farvepalette i form af en property editor, hvor man ved hjælp af 4 slider-værktøjer kan fremkalde hvilken som helst farve i RGB-skemaet.

 


Ideen om frihed til at vælge

Farveskema forhåndsvisning

Vi har tit oplevet, at værktøjer kun giver begrænsede muligheder for farvevalg. For eksempel Umbracos indbyggede TinyMCE har kun muligheden for at vælge farve udfra prædefinerede værdier fra en tinyMCEconfig.config fil. Den samme opsætning har man i property editoren Color Picker, hvor man også skal prædefinere standardfarver. For en redaktør eller ejer af et website kan dette nogle gange bare ikke være tilfredsstillende nok – ikke, hvis de som redaktør ikke har adgang til opsætning af datatyper.

 

 

Behovet for frihed fik mig derfor til ideen om en property editor, hvor man har hele RGB-farveskemaet til rådighed.

 

 

Et af mine krav var, at man nemt skulle kunne bruge et par håndtag til at ændre på farveresultatet. Farveskema håndtag eksempel

 

 

Derudover skulle resultatet også fremvises i HEX-kode, så man kunne kopiere og genbruge den samme farve andre steder om nødvendigt. 

 

Samtidig fik jeg også ideen til, at der skulle være to property editors: en hvor man kun skal vælge 1 farve, og en hvor man kan vælge 2 farver til i en lineær overgang.

 

 

En sidste detalje, jeg fik til de nye property editors, var at man skulle kunne definere transparens-værdien for den udvalgte farve. Dette giver nemlig den effekt, at man ved hjælp af CSS kan lægge den udvalgte farve eller gradient som et overlay over et baggrundsbillede.

 

 

 

 


 

 

 

 

Sammensætningen af en property editor

 

Til at begynde med fik jeg hjælp af Umbracos guide til opsætning af property editors. Du kan læse guiden her.

 

 

Der skulle basalt set laves en standard opsætning af en property editor. Det vil sige, at opsætningen i package.manifest filen ville være fuldstændig efter guidens anbefalinger.

 

 

Det magiske ved værktøjet skulle udvikles i filerne customEditor.html og customEditor.controller.js. Her ville jeg gøre brug af de sliders, som stilles til rådighed af JQuery UI. Der skulle derfor udvikles funktionalitet ved en kombination af angularJS og JQuery UI.

 

 

Hvis du ønsker at høre mere om hvordan jeg fik udviklet funktionaliteten bag denne property editor, er du velkomment til at kontakte mig på E-mail: peter@prmedia.dk.