Module LanguageFieldTabs

[adamspruijt]

-------------------------------------------------------------------

LanguageFieldTabs is now included in ProcessWire by default (version 2.4). Unless you are using version 2.3 DO NOT install this module, instead navigate to Modules and then core and you will find the module in the Language section

-------------------------------------------------------------------

LanguageFieldTabs 

Beautify and organize you Field Languages into tabs!

DOWNLOAD  - Github

DEFAULT UI

UI IN "UNIFY" ADMIN THEME

Sorry for the lack luster write up, will add to Modules Directory later, late, long day tomorrow. Enjoy! (very much beta maybe alpha, minimal testing, just quick evening idea at this point).

Changelog

v1.0.2

• Improved styling capabilities (added surrounding class "LangTabsContainer" )
• Added admin wide support
• Fixed description text order (was being pushed to bottom)

v1.0.3

• Added support for toggling tabs display and faded labels to represent empty fields

v1.0.4

• Fixed tabs destroy error
• Moved toggle into Inputfield ui-widget-header

[kongondo]

This looks nice! Thanks..

[fenton]

wow, this look great!

[Martijn Geerts]

Thank you Adam,

Lovely addition !!

[arjen]

Really nice UI solution when working with more than 2 languages. Most often the simplest solutions are the most difficult to think of.

[Martijn Geerts]

There's a little glitch in this module. It tries to create tabs in fieldsets.

Though not ideal, the code below will remove the unused div with uncomplete ul.

	$(".ui-tabs-nav").each(function(){
		if($(this).find('li').length == 0) {
			$(this).parent('.langTabs').remove();
		}
	});

[ryan]

I'm really liking this module. Thanks for making this! I used it yesterday, all day on a multi-language site that I'm developing with 5 different languages. It has really made the interface a lot nicer to look at and use.  It makes me think we should have this in the core. There are two things I think I'd personally add to it though:

• I'd make the tabs that have un-populated text a little different, perhaps a little faded or lighter text or something to indicate the empty state. Either that, or the populated tabs bold.
• I'd add an option to to switch between tabbed view and regular stacked view. The reason is that I anticipate clients have cases where they are translating and want to see the text in multiple languages at the same time. But overall tabbed view seems like a much better default than what we've got now. 

Has anyone tried this with Teppo's text version control module? I'm wondering if it would break that... will probably find out later today.

[adamspruijt]

I'm really liking this module. Thanks for making this! I used it yesterday, all day on a multi-language site that I'm developing with 5 different languages. It has really made the interface a lot nicer to look at and use.  It makes me think we should have this in the core. There are two things I think I'd personally add to it though:

• I'd make the tabs that have un-populated text a little different, perhaps a little faded or lighter text or something to indicate the empty state. Either that, or the populated tabs bold.
• I'd add an option to to switch between tabbed view and regular stacked view. The reason is that I anticipate clients have cases where they are translating and want to see the text in multiple languages at the same time. But overall tabbed view seems like a much better default than what we've got now. 

Has anyone tried this with Teppo's text version control module? I'm wondering if it would break that... will probably find out later today.

I hadn't thought of a toggle, but had planned to add an indicator for empty fields, maybe a strike-trough? I will see to adding both, thanks!

[adamspruijt]

There's a little glitch in this module. It tries to create tabs in fieldsets.

Though not ideal, the code below will remove the unused div with uncomplete ul.

	$(".ui-tabs-nav").each(function(){
		if($(this).find('li').length == 0) {
			$(this).parent('.langTabs').remove();
		}
	});

Is it possible I already fixed this? I have pushed a few minor tweaks as the module was a touch rough when I first made the thread. Anyway, I'm not seeing this happen maybe I'm just misunderstanding.

[Martijn Geerts]

@adamspruijt, Will check it tomorrow.

[kongondo]

I hadn't thought of a toggle, but had planned to add an indicator for empty fields, maybe a strike-trough? I will see to adding both, thanks!

I prefer the faded style suggested by Ryan rather than a strike-through...

[adamspruijt]

Added support for toggling tabs display and faded labels to represent empty fields. Rough for now but useful for feedback I'm sure. Thanks guys.

[ryan]

Wow that was quick – Thanks, great update! It seems to work well, but two issues I'm running into, at least on the default admin theme:

• Clicking the toggle button for the first time works, but throws a JS error. Clicking it a second time does not work. So you can switch to expanded view, but not switch back to tabs. The JS error is: "Uncaught Error: cannot call methods on tabs prior to initialization; attempted to call method 'destroy'." I did try to debug it a bit, but wasn't sure how to fix it. 
• Not a bug per se, but the position of the toggle icon seems a little unusual at least in the default profile (see screenshot). Maybe there is something that works better across themes, not sure? Though let me know if you think there is an issue in the default admin theme CSS that needs tweaking.   

Thanks for your great work on this module. It's already one of my favorites. 

[adamspruijt]

Yep, the toggle button issue is an odd one, if you keep click on it the fields will collapse eventually and after that should go back and fourth fine. I will tweak the styling for sure, the problem isn't so much with the default admin theme as it is just a limitation of the markup. I will focus on getting to look good with the default admin before I worry about it on any of my themes.

EDIT:

Might be an easy fix, it seems the number of repeat clicks is proportional to the number of Language Fields on the page, something bad in my loop.

[Wanze]

This looks amazing! Thanks very much

[adamspruijt]

Wow that was quick – Thanks, great update! It seems to work well, but two issues I'm running into, at least on the default admin theme:

• Clicking the toggle button for the first time works, but throws a JS error. Clicking it a second time does not work. So you can switch to expanded view, but not switch back to tabs. The JS error is: "Uncaught Error: cannot call methods on tabs prior to initialization; attempted to call method 'destroy'." I did try to debug it a bit, but wasn't sure how to fix it. 
• Not a bug per se, but the position of the toggle icon seems a little unusual at least in the default profile (see screenshot). Maybe there is something that works better across themes, not sure? Though let me know if you think there is an issue in the default admin theme CSS that needs tweaking.   

Thanks for your great work on this module. It's already one of my favorites. 

Screen shot 2013-06-28 at 5.51.57 AM.png

V1.0.4 pushed, should fix both issues, a bit more cleanup and optimization needed but I'm pretty happy with this where it is, just wondering how I can make the title text translatable if it's inserted using JS? Maybe I missed that in the docs.

[ryan]

V1.0.4 pushed, should fix both issues, a bit more cleanup and optimization needed but I'm pretty happy with this where it is, just wondering how I can make the title text translatable if it's inserted using JS? Maybe I missed that in the docs.

Thanks for the update–It works perfectly here!

I will submit a pull request to you that makes the title attribute translatable. I also moved the hook-attach logic to a ready() method (rather than init), and made it attach the hooks only if the page template is 'admin'. 

[adamspruijt]

Thanks for the update–It works perfectly here!

I will submit a pull request to you that makes the title attribute translatable. I also moved the hook-attach logic to a ready() method (rather than init), and made it attach the hooks only if the page template is 'admin'. 

Thanks for the quick addition Ryan, nice to see how the JS translatable string is handled, noted for next time.

Submitted to Module Directory

Edited June 28, 2013 by adamspruijt

[landitus]

This looks great! Can't wait to try it! Congratulations Adam!

[Soma]

Also wanted to chime in and say wow! It could be almost coming from me

Joke aside, I really thought about that the day Ryan implemented this, but never bothered as I'm not currently needing it. Really cool here's how it looks on my Teflon dev theme.

[WillyC]

/*
not looka.so nice on pages name.setting tab i changes js.file from this
*/

var $langField = $(".Inputfield").has(".LanguageSupport");

/*
to this.
*/

var $langField = $(".Inputfield:not(.InputfieldPageName)").has(".LanguageSupport");
 

uses daveleper.branch i do

[adamspruijt]

/*
not looka.so nice on pages name.setting tab i changes js.file from this
*/

var $langField = $(".Inputfield").has(".LanguageSupport");

/*
to this.
*/

var $langField = $(".Inputfield:not(.InputfieldPageName)").has(".LanguageSupport");
 

uses daveleper.branch i do

Are you using a specific admin theme? I just checked in a few and they all looked perfectly fine.

[ryan]

I think he's talking about the page name field on the settings tab. It says "Active" after each language name, like "English Active", "Spanish Active", etc. It looks like it's picking up the LanguageSupportPageNames checkbox label in the tab. As far as I can tell, WillyC's solution above was to prevent it from making tabs out of the page name field. Tested here and seems to work. 

[adamspruijt]

I think he's talking about the page name field on the settings tab. It says "Active" after each language name, like "English Active", "Spanish Active", etc. It looks like it's picking up the LanguageSupportPageNames checkbox label in the tab. As far as I can tell, WillyC's solution above was to prevent it from making tabs out of the page name field. Tested here and seems to work. 

Ok, gotcha. All fixed, my selector finding the label value wasn't specific enough. Pushed the changes.

[ryan]

One idea came up, and was just curious about the feasibility of it: What if the "active" tab was based on the current user's language? So if I had my language set as Spanish, I'd see the Spanish tabs active (rather than default language tab) when editing a page?