I have never used the "ajaxified links" popup feature in lists, simply because I could never get it to work as expected.
Here are the issues...
1. The popup width and height settings specified in the list configuration do not work.
2. There is no way to drag the popup.
3. If the popup is scrolled the entire page (viewport) scrolls with it.
4. There is no title shown in the popup
5. The popup's close and expand icons don't seem to appear where you would expect them to be.
(See 'before1.png' attachment)
This weekend I decided to try to figure out why. Here's what I've found...
1. There was a typo in the fabrik.js file that was assigning the popup height value set in the list configuration as the popup width!
a. That was easy enough to fix by changing one word in the fabrik.js file. A pull request has been added at github.
b. The height works correctly unless there is an image in the popup (e.g. a google map) - in which case the height will expand to contain the image (or scroll if the popup height is greater than the browser viewport.) (see before2.png) I suppose I can live with that - but still, it's not respecting the 'popup height' setting set in the list configuration in all cases.
2. I have no idea why the Fabrik 'draggable' javascript code isn't working. (But it didn't work in the CSV Export popup either - which I've been trying to get my pull request fixes at github merged for 2 months now.) But, as with the CSV popup, that's easily fixed with the jQuery code below.
3. Also easily fixed with the jQuery code below.
4. Again, I'm not sure if the Fabrik javascript is supposed to be finding some title to use in the popup - but if it is, it just isn't working. This can be fixed (for form popups anyhow) with the jQuery code below.
5. By giving the popup a title, the close and expand icons then look like you would expect them to appear.
Adding these few lines of javascript/jQuery code to the 'makeWindow' function in windows.js file takes care of all the issues listed above...
(See 'after1.png' attachment)
Other than fixing the fabrik.js typo, I didn't do anything further at github because someone who is more familiar with the Fabrik javascript code might want to do it differently. Like maybe remove some of the javascript/mootools code in favor of jQuery - and/or add some of the other features I included in the CSV Export popup javascript - like better re-centering and handling of the popup when the popup is moved or the main viewport is resized. I'm just posting this so you know the issues and suggestions on how to fix them.
And finally, IMO, the preferred place to set the popup height and width for "ajaxified" links in a list would be on an individual basis - in the element's 'List view settings' - not a "one-size-fits-all" height/width setting in the list configuration. That would be a welcome fix that I'm sure all users would appreciate.
Here are the issues...
1. The popup width and height settings specified in the list configuration do not work.
2. There is no way to drag the popup.
3. If the popup is scrolled the entire page (viewport) scrolls with it.
4. There is no title shown in the popup
5. The popup's close and expand icons don't seem to appear where you would expect them to be.
(See 'before1.png' attachment)
This weekend I decided to try to figure out why. Here's what I've found...
1. There was a typo in the fabrik.js file that was assigning the popup height value set in the list configuration as the popup width!
a. That was easy enough to fix by changing one word in the fabrik.js file. A pull request has been added at github.
b. The height works correctly unless there is an image in the popup (e.g. a google map) - in which case the height will expand to contain the image (or scroll if the popup height is greater than the browser viewport.) (see before2.png) I suppose I can live with that - but still, it's not respecting the 'popup height' setting set in the list configuration in all cases.
2. I have no idea why the Fabrik 'draggable' javascript code isn't working. (But it didn't work in the CSV Export popup either - which I've been trying to get my pull request fixes at github merged for 2 months now.) But, as with the CSV popup, that's easily fixed with the jQuery code below.
3. Also easily fixed with the jQuery code below.
4. Again, I'm not sure if the Fabrik javascript is supposed to be finding some title to use in the popup - but if it is, it just isn't working. This can be fixed (for form popups anyhow) with the jQuery code below.
5. By giving the popup a title, the close and expand icons then look like you would expect them to appear.
Adding these few lines of javascript/jQuery code to the 'makeWindow' function in windows.js file takes care of all the issues listed above...
JavaScript:
/* adds draggable feature to modal popup */
jQuery('div.modal').draggable({
handle: '.modal-header'
});
jQuery('.modal-header').css('cursor','move');
/* Prevent browser window from being scrolled */
jQuery('body').css({'height':'100%','overflow':'hidden'});
/* Allow browser window to be scrolled again when modal is released from DOM */
jQuery('div.modal').on('remove', function () {
jQuery('body').css({'height':'initial','overflow':'initial'});
});
/* Use form title if modal handlelabel is blank */
if(jQuery('div.modal-header .handlelabel').text().length==0){
if(jQuery('div.itemContentPadder form').context.title.length){
jQuery('div.modal-header .handlelabel').text(jQuery('div.itemContentPadder form').context.title);
}
}
Other than fixing the fabrik.js typo, I didn't do anything further at github because someone who is more familiar with the Fabrik javascript code might want to do it differently. Like maybe remove some of the javascript/mootools code in favor of jQuery - and/or add some of the other features I included in the CSV Export popup javascript - like better re-centering and handling of the popup when the popup is moved or the main viewport is resized. I'm just posting this so you know the issues and suggestions on how to fix them.
And finally, IMO, the preferred place to set the popup height and width for "ajaxified" links in a list would be on an individual basis - in the element's 'List view settings' - not a "one-size-fits-all" height/width setting in the list configuration. That would be a welcome fix that I'm sure all users would appreciate.