What sort of road blocks have you encountered
Feb 10, 2017 16:46:00 GMT -8
Peter and Chris like this
Post by Former Member on Feb 10, 2017 16:46:00 GMT -8
Ok, so I have a question.
I'm curious to see what kind of roadblocks/challenges you have faced when trying to develop a theme or a plugin.
What sort of tips you might give to people, who may face the same challenges somewhere down the line as you.
I myself have been disheartened in the past, even though I am an experienced developer(PHP|javascript|c#|x86) but sometimes you need to learn how to hack it together.
Intercepting/propagating and even augmenting knowledge is required to truely look under the hood.
I would also be curious to know how you develop themes/plugins, do you do it all in the browser? inside the admin panel or locally?
What sort of development tools do you use? Do you use build tools?(gulp|grunt|webpack) or vanilla ?
Ok so I guess I will start!
One of the first things that threw me was, I wanted to modify the JQuery Ui.dialog.
After quite a bit of searching I realized, this code was actually embedded in the combined.js file.
So the thinking behind it was, I wanted to modify the $.ui.dialog so that it would render on mobile/desktop and have a nice animation on open/close.
Easier said that done right?
After reading countless articles, I realized those methods posted online only worked for newer versions of the UI.
So at this point you need to put your Hackers cap on.
I had heard about this technique quite a few years back, although after reading it I was like? - "why would I ever need that, everything that goes on the server, I write) so why patch my own code? didn't make sense right!
So the technique I learned was Monkey Patching by the brilliant Paul Irish(who If you don't know is just a character and his video seminars are quite brilliant) although he calls it duck punching for some odd reason :)
Ok so after some digging in the console, I realized the options were under the $.ui.dialog prototype(not uncommon)
So what options did I need to set? Well I need to set resizeable/draggable/closeOnEscape to false? right. For mobile we don't want that behaviour.
So how cold we do this with jQuery....?
Well we override them using the $.extend function
Easy?
Well now we have to monkey patch the "open" and "close" methods, because we want an animation to happen.
So for the "open" method, I wanted to make sure the table layouts inside were "column" based using flex(and I used "foundation-flex-grid") to do this, I simply needed to assign those classes, when the dialog was open. If I just assigned all tables to use $('table').addClass('stack unstriped') it would have failed because ui-dialog was not loaded/in-view
So this was my implementation for that
Initially I also wanted to prevent ('touchmove mousescroll DOMScroll') on the ui-dialog because I wanted no scrolling/touches outside the ui-dialog, this did not work well however so I reverted to putting the body to fixed position, anyway
The close method is similar
Now, here is the thing, on the close method, the dialog just closes and uses "display:none", this cannot be animated, I tried using the beforeClose method, but believe it or not, that happens after the dialog is closed, so I had to bind a close method on the button, in the "open" method, then delay it a few seconds for the animation to trigger correctly.
Anyway, I hope my little trivial study, opens some debate between some fellow designers and developers.
Take care
I'm curious to see what kind of roadblocks/challenges you have faced when trying to develop a theme or a plugin.
What sort of tips you might give to people, who may face the same challenges somewhere down the line as you.
I myself have been disheartened in the past, even though I am an experienced developer(PHP|javascript|c#|x86) but sometimes you need to learn how to hack it together.
Intercepting/propagating and even augmenting knowledge is required to truely look under the hood.
I would also be curious to know how you develop themes/plugins, do you do it all in the browser? inside the admin panel or locally?
What sort of development tools do you use? Do you use build tools?(gulp|grunt|webpack) or vanilla ?
Ok so I guess I will start!
One of the first things that threw me was, I wanted to modify the JQuery Ui.dialog.
After quite a bit of searching I realized, this code was actually embedded in the combined.js file.
So the thinking behind it was, I wanted to modify the $.ui.dialog so that it would render on mobile/desktop and have a nice animation on open/close.
Easier said that done right?
After reading countless articles, I realized those methods posted online only worked for newer versions of the UI.
So at this point you need to put your Hackers cap on.
I had heard about this technique quite a few years back, although after reading it I was like? - "why would I ever need that, everything that goes on the server, I write) so why patch my own code? didn't make sense right!
So the technique I learned was Monkey Patching by the brilliant Paul Irish(who If you don't know is just a character and his video seminars are quite brilliant) although he calls it duck punching for some odd reason :)
Ok so after some digging in the console, I realized the options were under the $.ui.dialog prototype(not uncommon)
So what options did I need to set? Well I need to set resizeable/draggable/closeOnEscape to false? right. For mobile we don't want that behaviour.
So how cold we do this with jQuery....?
Well we override them using the $.extend function
$.extend($.ui.dialog.prototype.options, {
closeOnEscape : false,
modal : false,
resizable : false,
draggable : false
})Easy?
Well now we have to monkey patch the "open" and "close" methods, because we want an animation to happen.
So for the "open" method, I wanted to make sure the table layouts inside were "column" based using flex(and I used "foundation-flex-grid") to do this, I simply needed to assign those classes, when the dialog was open. If I just assigned all tables to use $('table').addClass('stack unstriped') it would have failed because ui-dialog was not loaded/in-view
So this was my implementation for that
var isOpen = $.ui.dialog.prototype.open;
$.ui.dialog.prototype.open = function()
{
console.info('opening dialog');
var dialog = $(this.uiDialog);
dialog
.removeClass('notvisible')
.addClass('visible')
.find('table')
.addClass('stack unstriped')
.parents('.ui-dialog')
.find('.ui-button')
.addClass('button expanded');
dialog
.find('a.ui-dialog-titlebar-close.ui-corner-all')
.on('click', $.proxy(handleCloseButtonDialog, this));
$(document.body).css({
"position": "fixed"
});
$(dialog).css({
"overflow-y": "scroll"
});
$.scrollTo(0);
return isOpen.apply(this, arguments);
}Initially I also wanted to prevent ('touchmove mousescroll DOMScroll') on the ui-dialog because I wanted no scrolling/touches outside the ui-dialog, this did not work well however so I reverted to putting the body to fixed position, anyway
The close method is similar
var isClosed = $.ui.dialog.prototype.close;
$.ui.dialog.prototype.close = function()
{
console.info('closing dialog');
var _self = this;
setTimeout(function(){
return isClosed.apply(_self, arguments);
}, 4000);
}Now, here is the thing, on the close method, the dialog just closes and uses "display:none", this cannot be animated, I tried using the beforeClose method, but believe it or not, that happens after the dialog is closed, so I had to bind a close method on the button, in the "open" method, then delay it a few seconds for the animation to trigger correctly.
Anyway, I hope my little trivial study, opens some debate between some fellow designers and developers.
Take care
