Jump to content

Using Prefs in widget.ejs


sclough

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...