Editable widget


In the last section, we have seen how to create a new widget using the code editor and how to create multiple versions.
In this section will try to make use of that widget and update its content without accessing the code. We will cover how can we:

- Edit text content inline
- Edit icons
- Edit images
- Edit color

Switching between versions

When we build multiple vesions of a widget we can switch between them without having to remove and add the new version to the page.

by clicking on "panel" icon in the widget control bar


fouita widgets


We will see the two versions we have created

fouita widgets


We notice the check mark on the widget version used inside the page, we just need to check the other version to switch between them, and the widget will update accordingly inside the page.

fouita widgets



Editing a text

To be able to edit the the text inside the page, the component need to be coded in a slightly different way.


Code sample
<script>
 // need to add editable to switch edit mode
 export let editable = true
 // need to export the edited value to be saved by fouita
 export let title = ""
</script>

<div class="font-mono bg-blue-100 p-2 text-center text-2xl dark:text-white">
  <!-- to know if edit mode is enabled in fouita -->
  {#if editable}
     <div contenteditable bind:innerHTML={title} />
  {:else}
     <div> {@html title} </div>
  {/if}
</div>

When we update (force update) the widget, and activate the "edit mode" we can see that we are able to change the content of the text inside our page.


That's it, now the data will be automatically saved and restored for this page.
You can disable edit mode and refresh the page and the data you written will be there!


Editing an icon

We have seen how to add icon from the icons library into our widget, but what if we like to be able to edit the icon inside the page, like we did with the text.
Todo that we need to adapt our code to manage icons selection in the edit mode.

<script>
 // default icon imported (as seen in the previous section)
 import EditOutlined from "./icons/EditOutlined.svelte"
 // need to add editable to switch edit mode
 export let editable = false
 // need to export the edited value to be saved by fouita
 export let icon = ""
 function showIcons() {
   // only show when on edit mode
   if (!editable) return
   // calling fouita utility function selectIcon
   Fouita.selectIcon((src) => { icon = src })
 }
</script>

<div class="font-mono bg-blue-100 p-2 text-center text-2xl dark:text-white">
  <div class="cursor-pointer" on:click={showIcons}>
   {#if icon}
     <div class="w-8 h-8">
       {@html icon}
     </div>
   {:else}
    <EditOutlined />
   {/if}
  </div>
</div>

Now when we enable edit mode and click on the icon we should be able to see the library of icons and search from it.

update icon fouita

When we select the icon, the one inside the page will change, and stay updated, you can refresh the page to make sure it's updated.

fouita icon

Edit images

Using the same technique used in selecting icons, we can use it to select images from the Medi Assets.
We just have to change selectIcon to selectMedia and use it in <img src={imgSrc} />

<script>
 // ... your code here
 export let editable = false
 export let imgSrc = "https://via.placeholder.com/150"
 function selectImage() {
    if(!editable) return
    Fouita.selectMedia((src) => {
      // you can alter the image type for optimazation
      // fouita offer an image optimizer 
      // read more about it at https://docs.imgproxy.net/
      imgSrc = src
    })
 }
</script>

<!-- Your html code -->
<div on:click={selectImage}>
  <img src={imgSrc} alt="img" />
</div>



Edit colors

To edit the colors inside the widget we need to be aware of how custom colors works in tailwindcss.

Theme colors
We use default theme colors, but you can use customized colors for each widget you create. The default colors can be found in tailwindcss config.

fouita tailwind config

The color names can be altered from theme config.

fouita theme



To use the theme colors inside the code we can just use the class name text-primary bg-secondary ...

<div class="text-primary bg-tertiary p-4">
  Content
</div>

Output

fouita color


Custom theme colors
To update theme colors we can use custom css variables, make sure you change them in the root element, or a parent element of the desired color changes.


<!-- changing the primary color to red -->
<div style="--ft-primary: 255 0 0">
 <div class="text-primary bg-tertiary p-4">
  Content
 </div>
</div>




We can use svelte variable to identify the color rgb value


<script>
 let brandColor = "255 255 0"
 let bgColor = "150 0 0"
</script>

<!-- changing the primary color to brandColor -->
<div style="--ft-primary: {brandColor}; --ft-tertiary: {bgColor};">
 <div class="text-primary bg-tertiary p-4">
  Content
 </div>
</div>



Editable colors
To be able to update the colors inside the page in edit mode without having to touch the code each time, we will use the same technique for updating the text, icons, and images.


<script>
  export let editable = false
  // exported values for fouita to save
  export let brandColor = "255 255 0"
  export let bgColor = "150 0 0"

  function pickColors() {
    if(!editable) return
    // send the color names that you like to see when picking the color
    Fouita.selectColors({ textColor: brandColor, background: bgColor }, (colors) => {
      brandColor = colors.textColor
      bgColor = colors.background
    })
  }
</script>

<!-- add on:click event listener to open the color picker -->
<div style="--ft-primary: {brandColor}; --ft-tertiary: {bgColor};" on:click={pickColors}>
 <div class="text-primary bg-tertiary p-4">
  Content
 </div>
</div>


You can test your code in the editor, by just changing editable = true

fouita colors editor

Note: When you save the widget and add it to a page, the changes of the colors will only be applied to that specific widget inside that page.

That's all you need to know about the edit mode of fouita and how to build an editable widget.
Details of how to handle the html structure and svelte components are limiteless, and you can find good tutorials about them online.

Next we will be looking into the stories and how to use them with widgets.


https://img.fouita.com/0x2729/media/imgs/logoblanc-1633435942147.png?/rs:fit:130:130
The missing pieces of your website.
kairouan, tunisia
built using fouita!