Jump to content

LanguageFieldTabs


adamspruijt

Recommended Posts

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

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

post-778-0-32333900-1372433237.png

UI IN "UNIFY" ADMIN THEME

post-778-0-97857000-1371961376.png

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

post-778-0-97857000-1371961376_thumb.png

post-778-0-32333900-1372433237_thumb.png

  • Like 19
Link to comment
Share on other sites

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();
		}
	});
  • Like 1
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

  • Like 1
Link to comment
Share on other sites

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. 

post-2-0-13403500-1372413876_thumb.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

attachicon.gifScreen 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.

  • Like 1
Link to comment
Share on other sites

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'. 

  • Like 2
Link to comment
Share on other sites

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 by adamspruijt
Link to comment
Share on other sites

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.

post-100-0-50761800-1372447949_thumb.png

  • Like 1
Link to comment
Share on other sites

/*
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

Link to comment
Share on other sites

/*
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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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? 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...