Jump to content
sclough

Using Prefs in widget.ejs

Recommended Posts

Is there any way of using a widgets prefs in the widget.ejs file?

My main.ejs looks like this:

<div data-name="Widget.TRSImageFilter" class="widget-content">
    <div class="trs-image-filter">
        <img src="<%= app.prefs.selectImage.value %>" class="edited-image">
    </div>
</div>

and works perfectly. When I try and add the same to the widget.ejs file though, it just stops the whole widget from being selected:

<div data-name="Widget.TRSImageFilter" class="widget-content">
    <img src="externalapps/icon/607275C42001BC47828FFFE02B4F480E0F009D6CE5A1B109" />
    <h4><%= app._('widget.title', null, '607275C42001BC47828FFFE02B4F480E0F009D6CE5A1B109') %></h4>
    <div class="trs-image-filter">
        <img src="<%= app.prefs.selectImage.value %>" class="edited-image" />
    </div>
</div>

I'm trying to create an image editor using the canvas element. So the preview would need to be visible in edit mode.

Thanks,

Simon

Link to comment
Share on other sites

Hi,

Yes, there is a way of doing this.  You should think about replacing the current widget.edit section, with a widget.edit and widget.save

This example is from the office365 widget, but there's a few others on the alpha build:

        'widget.edit': function(el, ev, data) {
            this.renderPlaceholder();
        },
        'widget.save': function(el, ev, data) {      
            this.renderPlaceholder();
        },
        renderPlaceholder : function() {
            this.element.html(
                this.view('placeholder.ejs')
            );
            this.element.find('.placeholder').css("height",this.prefs.height.value+"px");
            this.element.find('.placeholder').css("line-height",this.prefs.height.value+"px");       
        }

This runs a function called renderPlaceholder which uses .find to update elements of placeholder.ejs 

You can also add the same function call in for the widget.live  function too.

Link to comment
Share on other sites

On 2017-5-12 at 14:16, Graham Quince said:

Hi,

Yes, there is a way of doing this.  You should think about replacing the current widget.edit section, with a widget.edit and widget.save

This example is from the office365 widget, but there's a few others on the alpha build:


        'widget.edit': function(el, ev, data) {
            this.renderPlaceholder();
        },
        'widget.save': function(el, ev, data) {      
            this.renderPlaceholder();
        },
        renderPlaceholder : function() {
            this.element.html(
                this.view('placeholder.ejs')
            );
            this.element.find('.placeholder').css("height",this.prefs.height.value+"px");
            this.element.find('.placeholder').css("line-height",this.prefs.height.value+"px");       
        }

This runs a function called renderPlaceholder which uses .find to update elements of placeholder.ejs 

You can also add the same function call in for the widget.live  function too.

@sclough,

Has this fixed your issue?

I have checked your widget out on the beta build and I can't see any errors!?

 

~ Chris

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...