Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[com_fields] Add Joomla loading overlay when form submit is triggered by category selector change #13320

Merged
merged 11 commits into from
Jan 14, 2017

Conversation

ggppdk
Copy link
Contributor

@ggppdk ggppdk commented Dec 21, 2016

Pull Request for Issue #13267

Summary of Changes

After comments in this PR, i have made usage of

Joomla.loadingLayer('load');
Joomla.loadingLayer('show');

thus replacing the fixed message and the inline styles,
that were originally proposed by this PR

NOTE:
-- in all cases the semi-transparent overlay and the image should shown
-- in some older browsers (IE8 / IE9) the image animation may freezing a little, but that is not a problem, it is expected

Testing Instructions

  1. Apply patch
  2. Go to an article form that has custom fields
  3. Change category so that form submit to display the fields assigned to newly selected category
  4. The following picture should be shown

Also same effect on new field form, go to fields, click new field button,
and change field type in the new field form, the same overlay should appear

loading_please_wait

Documentation Changes Required

none

@tonypartridge
Copy link
Contributor

What about simplifying it with a simple rotating circle? The text to me looks a bit crud..

@zero-24
Copy link
Contributor

zero-24 commented Dec 21, 2016

@dgrammatiko
Copy link
Contributor

@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 21, 2016

Animated image in most browsers

  • will freeze during / after form submision

so displaying a frozen image is not much of an option

A CSS3 solution animation (circle or similar) works,
... but it will not work in IE8-IE9 (... for IE9 i will need to check)

@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 21, 2016

You will even need to set a small timeout for form submission to be delayed a little
so that DOM will be updated and show the image and then it will be shown frozen or mostly frozen

@dgrammatiko
Copy link
Contributor

dgrammatiko commented Dec 21, 2016

@ggppdk my point was that we already have some code for this, maybe enhance it to render text for css spinner...

@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 21, 2016

my point was that we already have some code for this, maybe enhance it to render text for css spinner...

yes, thanks, i was asking if this or similar existed,

just as said above, animated images in IE8-IE10 and even IE11 ? will not be animated well, during: form submit / page reload

and will need a good delay before we do the form submit, so that DOM is updated to even show them

[EDIT]
partly the problem is image loading, if we add the animated image on page load and just toggle their display, then image will show without need to add delay to form submit, but still it will not animate well

So, i think currently proposed solution offers best browser compatibility

@joomla-cms-bot joomla-cms-bot added the Language Change This is for Translators label Dec 21, 2016
@laoneo
Copy link
Member

laoneo commented Dec 22, 2016

For me the styling and also the old javascript code are added on the wrong place. But unfortunately I don't have a better way to suggest. Any ideas?

@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 23, 2016

@dgt41 , @laoneo

I checked CSS3 animations, when navigating to other URLs (or reloading current URL)
do not work at all with IE8 / IE9

About Joomla.loadingLayer()
yes i was asking if there is an already usuable overlay-loading JS method

  • and i see it already has an option to preload the animation image (and hide it) into the DOM doing:
    Joomla.loadingLayer('load');

But there are 2 other issues with Joomla.loadingLayer()


Problem 1:
The image itself is not suitable because it is Joomla LOGO
(it was meant for Joomla Installation / Update tasks) so it does not look appropriate for showing such an image (Joomla LOGO) to users editing content, especially in frontend

Solution: I think either replace with a neutral one, like a spining circle or add option to the loadingLayer() method to use either Joomla logo or a neutral one


Problem 2:
Image animation only shows if doing AJAX tasks

  • usually image animation not done / not showing well, when navigating to other URL (or reloading current)

To summarize, proposed solution by this PR is best

@dgt41 ... can we add the case proposed by this PR to Joomla.loadingLayer ?
introducing a "type" parameter to the method ?

type: 0, overlay + Joomla logo animation
type: 1, overlay + Neutral image animation
type: 2, overlay + Static text loading message

type 0 and 1 good for AJAX requests
type 2 good for navigating to other URL / or reopening current URL

@dgrammatiko
Copy link
Contributor

@ggppdk adding one more flag to that function should be ok (if there is a fallback for the case that this flag is not set, to current behaviour).

I will suggest to pass the image link through addScriptOptions, so no inline script needs to be introduced. e.g.
JFactory::getDocument()->addScriptOption('loadingLayer', 'path/to/image.gif');

@Bakual Bakual changed the title Add overlay box and message box for form submit and reload due to category selector change [com_fields] Add overlay box and message box for form submit and reload due to category selector change Dec 23, 2016
@Bakual
Copy link
Contributor

Bakual commented Dec 23, 2016

The image itself is not suitable because it is Joomla LOGO
(it was meant for Joomla Installation / Update tasks) so it does not look appropriate for showing such an image (Joomla LOGO) to users editing content, especially in frontend

That's not true. It's meant as a "loading" spinner that can be used in any case where we have a delay. It's perfectly fine to be used in 3rd party extensions.

Image animation only shows if doing AJAX tasks
usually image animation not done / not showing well, when navigating to other URL (or reloading current)

In the language installer we use the regular loading spinner just fine (https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_installer/views/languages/tmpl/default.php#L19-L30). I think it's a similar case as here as the form is submitted and reloaded.

If the spinner isn't animated in some older browsers, then so be it. It's not that important that it is animated. Your message box wouldn't be animated as well :)

So please don't invent other ways to do the same thing. Just use the one already present. Don't make things complicater than needed 😄

@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 23, 2016

In the language installer we use the regular loading spinner just fine

Yes, agreed, that the image solution is good , and in the above case it is always shown properly,
because it is preloaded (as i mentioned above, in case it is preloaded with: Joomla.loadingLayer('load'); it always shown)

-- and then image animation depends on the browser and its current load too
i do not disagree with this solution, it is good

but the image itself is a problem, (please read below)

That's not true. It's meant as a "loading" spinner that can be used in any case where we have a delay. It's perfectly fine to be used in 3rd party extensions.

hhmm, i meant it like this:

e.g. i have a website made by Joomla and i have frontend editors
... and i do not want to show JOOMLA! LOGO as loading animation to them
when they edit an article in frontend and they change the category

= which is advertising to frontend users that website is using Joomla

do you see the problem ? or maybe the above is ok, i do not mind it personally

@@ -11,6 +11,7 @@
JLoader::register('FieldsHelperInternal', JPATH_ADMINISTRATOR . '/components/com_fields/helpers/internal.php');
JLoader::register('JFolder', JPATH_LIBRARIES . '/joomla/filesystem/folder.php');


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this can be removed ;)

@joomla-cms-bot joomla-cms-bot removed the Language Change This is for Translators label Dec 23, 2016
@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 23, 2016

@Bakual , @dgt41

I have made usage of

Joomla.loadingLayer('load');
Joomla.loadingLayer('show');

replacing the fixed message and the inline styles,
it should work well now,
later if someone adds a different image file as animation,
then at the same PR he / she should update this code to use that new image ...

@Bakual
Copy link
Contributor

Bakual commented Dec 23, 2016

I don't see it as an issue if a frontend editor gets to see the logo of the CMS they use for free. If they even recognize the logo 😄

@laoneo
Copy link
Member

laoneo commented Dec 24, 2016

The page got also reloaded when you create a new field and do change the type. Can we add that functionality there as well? Code is here https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_fields/models/fields/type.php#L149

@tonypartridge
Copy link
Contributor

Why are we reloading the whole page btw? Would it not make sense to make a Json call or use the Ajax component and just fetch the relevant data and insert it in the current view? a whole page reload seems a bit slow an excessive to me.

@Bakual
Copy link
Contributor

Bakual commented Dec 24, 2016

@tonypartridge Because basically more or less the whol form may change and need preprocessing on server side. While it could be done using AJAX, it's just way easier doing it this way as we can use the existing API.

@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 24, 2016

Why are we reloading the whole page btw? Would it not make sense to make a Json call or use the Ajax component and just fetch the relevant data and insert it in the current view? a whole page reload seems a bit slow an excessive to me.

Because basically more or less the whol form may change and need preprocessing on server side

I think currently the above is not happening / not needed

The biggest problem is that adding the fields HTML is not enough,
problems:

  1. any inline JS code will not be execute
  2. any header added JS and JS files will not be retrieved
  3. any header added CSS and CSS files will not retrieved

Only inline style blocks are ok

All fields would need to converted to provide an AJAX safe display() method ...
-- providing a JSON response with:

  1. their HTML
  2. their otherwise header-added JS
  3. their otherwise header-added CSS

and then their JS will need to be appropriate so that it executes without errors ...
and then also care that features like showon do not break

Then also you need to apply the JS-based template styles and other initialization stuff, and currently the templates do not conform to some API / do not implements some "Interface" to provide such a method for this ...

  • never the less there is a "common" JS code to apply bootstrap styling, in protostar and isis templates that is usually found in all templates that we could use ... and this "hack" is already done (i think) by subform field

@ggppdk ggppdk force-pushed the jfields_waiting_for_cat_change branch from d6a0004 to 82ae6df Compare December 24, 2016 09:57
@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 24, 2016

I have fixed code styling, and updated the testing instructions

This PR is easy and quick to test if you already have some custom fields created,
please go ahead test it

@ggppdk ggppdk changed the title [com_fields] Add overlay box and message box for form submit and reload due to category selector change [com_fields] Add Joomla loading overlay when form submit is triggered by category selector change Dec 24, 2016
@laoneo
Copy link
Member

laoneo commented Dec 24, 2016

The page got also reloaded when you create a new field and do change the type. Can we add that functionality there as well? Code is here https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_fields/models/fields/type.php#L149

@ggppdk
Copy link
Contributor Author

ggppdk commented Dec 24, 2016

The page got also reloaded when you create a new field and do change the type. Can we add that functionality there as well? Code is here

Right, all similar cases should be in this PR,
will add there too, when i am at my workstation again, a little later today

jQuery( document ).ready(function() {
Joomla.loadingLayer('load');
});
function typeHasChanged(element){
var cat = jQuery(element);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is Joomla.loadingLayer('show'); needed, otherwise it doesn't show up when the type got changed.

@laoneo
Copy link
Member

laoneo commented Jan 7, 2017

I have tested this item ✅ successfully on 0ee2b7b


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13320.

@ghost
Copy link

ghost commented Jan 14, 2017

I have tested this item 🔴 unsuccessfully on 0ee2b7b

@Bakual
Copy link
Contributor

Bakual commented Jan 14, 2017

It ma ybe that this branch is a bit older. Due to the way the patchtester works, this may have an effect on testing.
I've updated the branch now so it's up to date with staging, can you test again?

@dgrammatiko
Copy link
Contributor

I have tested this item ✅ successfully on 56fc576


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13320.

1 similar comment
@ghost
Copy link

ghost commented Jan 14, 2017

I have tested this item ✅ successfully on 56fc576


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13320.

@jeckodevelopment
Copy link
Member

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13320.

@joomla-cms-bot joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Jan 14, 2017
@jeckodevelopment jeckodevelopment added this to the Joomla 3.7.0 milestone Jan 14, 2017
@wilsonge wilsonge merged commit 4f53774 into joomla:staging Jan 14, 2017
@joomla-cms-bot joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Jan 14, 2017
rdeutz pushed a commit to rdeutz/joomla-cms that referenced this pull request Jan 17, 2017
… by category selector change (joomla#13320)

* Added overlay box and message box for submit and reload form after category change

* Removed commented testing code

* Added language strings

* CS fix, added missing spaces

* Used Joomla logo spinner instead of fixed message

* Reverted changes in admin lang file

* CS

* Revert frontend lang changes

* Added Joomla loading overlay to new field form when changing field type

* Added Joomla.loadingLayer show to typeHasChanged JS method too
wilsonge pushed a commit that referenced this pull request Jan 23, 2017
* tinymce 4.5.2

Version 4.5.2 - January 4, 2017

* Clean up JModelForm

* xml update version

* Catch "expects parameter 2 to be string" error

* Remove multiple parameter from user field

* Remove default value from the field params to inherit from plugin

* It's 2017. Happy New Year

* Some improvements in tests #3: (#13402)

* Some improvements in tests #3:
- call static methods correctly

* Fix T_PAAMAYIM_NEKUDOTAYIM (for all PHP 5.x)

* Remove forgotten call

* Changed a few things after conversation with @mbabker

* Fixes according to @andrepereiradasilva's comments

* Unnecessary double quotes in  /libraries/joomla (#13372)

* Replace unnecessary double quotes in /libraries/joomla

* Formatting

* CS Fix

* Fixes, based on @andrepereiradasilva's comments.

* Change remove string concatenations for some occurrences.

* Fixes, based on @andrepereiradasilva's comments.

* Fixes, based on @andrepereiradasilva's comments.

* Fixes, based on @andrepereiradasilva's comments.

* Fixing search for MySQL (#13571)

* Use $query->castAsChar instead of casting to integer

* Codestyle

* Clean up old code in cache.php file (#12183)

* Clean up in cache - part 1

* Remove old php4 style to catch exception which currently is useless.
* Add shorten version of ternary pperators.

* Add fix for contains()

* Add more email cloaking unit tests and fix email cloaking bug (#13446)

* Rsponsive article edit fields (#13586)

* Fix BS grid (#13560)

* Fixing Showon in plugins/modules/templates (#13549)

* Adding field group to JFormHelper::parseShowOnConditions and rearranged argument order.

* codestyle

* $field->assigned_cat_ids may not exist. (#13570)

* Clean up ModulesModelModule class (#13380)

* Make the calendar work in the subform field (#13153)

* [com_fields] Add Joomla loading overlay when form submit is triggered by category selector change (#13320)

* Added overlay box and message box for submit and reload form after category change

* Removed commented testing code

* Added language strings

* CS fix, added missing spaces

* Used Joomla logo spinner instead of fixed message

* Reverted changes in admin lang file

* CS

* Revert frontend lang changes

* Added Joomla loading overlay to new field form when changing field type

* Added Joomla.loadingLayer show to typeHasChanged JS method too

* PostgreSQL - return the same string each time of call __toString() on update query (#13284)

* TranslateFormat in all other forms (#13158)

* TranslateFormat in all other forms

* Revert for tracks filter bar

* Fix for issue #13531 (#13535)

* Fix for issue #13531
- [AND] and [OR] operators were not functioning correctly. Fixed.
- some cleanup of whitespaces in XML file and removal of rulers when the encapsulated fields are not showing.

* Removed $key, as it was an unused leftover

* CS Fix

* Whitespace Fix

* Whitespace Fix

* Whitespace Fix#2

* Conflict resolution (hopefully, Don't have a complete dev-environment right now.)

* Added css classes to the mod_login submit buttons (#13379)

* Added css classes to the mod_login submit buttons

* Added css classes to the mod_login submit buttons

* Changed class to login-button in both modules

* PHPMailer update (#13575)

* Correcting sidebar display LTR and RTL (replaces #13548) (#13593)

* Fix for Issue #13588 - mod_articles_categories - Fatal error: Class 'ContentHelperRoute' not found... (#13590)

* Update helper.php

Remove JLoader::register('ContentHelperRoute', JPATH_SITE . '/components/com_content/helpers/route.php');

* Update mod_articles_categories.php

* Make clear Exception messages in JTable (#13603)

* Fix issue where fields is false (#13574)

* Update jQuery Autocomplete to 1.2.27 (#13282)

* Show text "No Information Entered" in users profile when no value is set (#13589)

* Delete UCM content entries when Joomla articles are deleted (#13592)

* [com_fields] Add base list plugin class which activates the list plugin (#13546)

* Add base list plugin class

* Update fieldslistplugin.php

* Fixes #13177: Added where clause with block status (#13545)

* Menu manager for Joomla Backend Menu (#13036)

* Added client id column to menu_type table.
Allow creating and editing of "menutype" records with client_id = 1
Add client_id filters in menu and menu items list views
Sync menu type filter and client_id filter allowing only menu type in the URL query parameter (B/C)
Both Lists now also filtered by client id.
Client id selection updates the menu type list options to show choices only for that client id

TBD:
Reserved menu types: main & menu

* In modal list view we currently hide client_id filter and show only site menu types, will be updated once we have more clear vision.
Menu type assignment to backend mod_menu config from both menu manager and module manager. Though that is not functional within the module itself.

* Add/edit menu item redirect with clientId from list filter.
Load menu item form based on active client id
Menu type dropdown choices limited to active client id value
Show menu-item-type choices (modal) trigger with client id parameter in the url
Switch edit layout based on client id

* Menu item type loading from component metadata xml or mvc not identifies backend and frontend application separately. Not yet able to load menu item type from backend so returns empty list. Front-end is still intact and unaffected.

* Edit menu item and create menu item set to follow client id and menu type value consistenty.
When creating menu item alias, the referenced menu must also belong to same client id.
Client id field removed from form, this should be auto-calculated from the menu type when saving.

* Adding layout metadata xml in backend to reference menu item types as it was in front-end.
Removed unnecessary admin specific layout added earlier as it is so far same as original edit.php, may be added back when needed.
Remove page specific meta data fields from backend component type menu items.
For now disable/unsupport association for backend menu items.
Disallow change of client id for existing menu items, unexpected conflicts may occur if allowed so better be safe.

Ref to #2

* Created each backend menu items using menu manager as a replica of existing Joomla backend menu. These are to be used for testing during upgrading menu module.
language keys are not yet translated. Translation will be done as we are ready with most new or modified language keys application wide.
Backend menu items does not require all those parameters as that with front-end menu items. Therefore segregated entire menu item xml for backend/frontend.

Ref #2

* [a11y] Protostar back to top (#12446)

* [a11y] Protostar - back to top link

* Oops Andre was right

* add anchor for non-js enabled browsers

* Restructure mod_menu to load preset menu items as an option (default). Other options will be the menu-type and will cause us to load from database. Ref #2

* Disallow editing and set to home of protected menu type menu items viz. 'main' and 'menu'
Allow explicit filtering by protected menu type choices in menu items list view. Not limited to #__menutypes table entries only. Unfiltered list still excludes those menu items. (B/C ok)
Menu items created during installation of a component are now saved as published. When unpublished we won't load it in customised menu's component menu container. They will still be loaded irrespective of state as previously when preset is in use. (B/C ok)
Home page can now be set one per client instead of one overall.
Menu module only loads item from 'main' and 'menu' type menu items when requested for component menu items. This filter is now required because we are now going to have other custom menu types for backend which should not be included.

Ref #2

* Load menu items from databases in correct hierarchy. Remove any extra separator type menu items created due to exclusion of certain menu items based on various conditions.
Populate menu items loaded from db into the AdminCssMenu object for final rendering.
Load new installed components menu items dynamically under the specified menu item with “components container” flag. Any unpublished menu items from the protected menutypes (viz. “main” and “menu”) will be skipped.
When loading from system preset menu items, these components menu items are all included regardless of their published state. (B/C ok).

Ref #2

* View manifests for menu item type and related language key updates. ref #2

* Minor mistake fix.

* Translate menu item titles in list view. Ref #2

* Reset the preset menu structure to be same as the current J37 branch state, dropping implicit inclusion of #10657 improvement. Ref #2

* Allow the existing components to leverage the menu/submenu entries in their install manifest for admin menu manager menu link types.
This provides ability to create links for then without requiring them to add layout manifests. Hence, full B/C solution. Ref #2

* Minor fix

* Remove temporary dev phase files

* Preparing for PR, database and install script updates.
Ref #2

* Minor fix

* Codestyle fix

* CS fix

* Don’t sort menu items

* Sort lang keys
Allow ‘component’ as first level alias in admin menu items
Fix lang key
Remove ‘home’ setting from admin menu items

* apply in hathor

* menu item alias check for site only

* Post merge fixes.

* Fixes as suggested by @infograf768

1. Group menu types by client id in lists and default admin menu
2. Hide association tab for admin menu items.
3. Hide client id filter for association mapping modal.

* Add recovery mode for menu where the selected admin menu does not contain link to module manager and/or menu manager.

* minor bug fix

* Remove assoc column for admin menu items.
Make recovery mode message more straight forward.
Change radio to toggle buttons.

* Add SMS to External URL menu item type (#13615)

Allows data like sms://+15555555555 to be used instead of getting "Save Not Permitted"

* Adding the Multilanguage Associations Manager (#13537)

* Merge Associations rewrite

* updated searchtool with the new way

* udpated edit view title

* added contact associationshelper class

* temp fix

* fix for category filter

* added newsfeeds associations helper

* CAPS for params

* lang tag and added a helper function

* added land tags

* code style fix

* better title in associations view

* better title

* use the usual naming

* fix language tag, thanks to brian teeman and twitter :-)

* initial review

* on simple change

* on simple change 2

* simple

* some more helper changes

* Update associations.php

* Update associations.php

* app isn’t set a model property

* correct return value

* simplify code adn use helper method

* use typename directly

* changed the tooltip position

* Correct menu helper

* remove unreacable code

* correcting checked_out

* com_menus

* fixed not supportted message

* installation

* fix menu install

* Spaces -> tabs

* [com_associations] - mssql updates (#13617)

the missed mssql updates for #13537

* [com_fields] Improved description in the "description" tooltip Fixes #13392 (#13557)

* Fixes #13195: Added margin bottom to sidebar menu

* Fixes #13392: Changed description field tooltip

* Fixes #13392: Changed description field tooltip

* Fixes #13392: Changed description field tooltip

* sync admin menu menutype (#13618)

* Routing: Remove IDs from tags URLs, use menu item of tags view as default for tag view (#11166)

* Remove id from tags, use tags list menu item as default for tag

* Code style, remove useless code, feature: first Itemid for tags view, second Itemid for default tag view

* Updating install.xml en-GB administrator (#13623)

* run grunt
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants