sclough Posted May 12, 2017 Share Posted May 12, 2017 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 More sharing options...
Graham Quince Posted May 12, 2017 Share Posted May 12, 2017 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 More sharing options...
Chris.Smith Posted May 16, 2017 Share Posted May 16, 2017 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 More sharing options...
sclough Posted May 22, 2017 Author Share Posted May 22, 2017 Hi @Chris.Smith Thanks for that. It has fixed the issue. Thanks for the code snippets that you send through for the Progresso widget too. I've been having a look at that today. I'm going to go back to having a look at that widget soon. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now