adamspruijt Posted June 23, 2013 Share Posted June 23, 2013 ------------------------------------------------------------------- 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 fieldsv1.0.4 Fixed tabs destroy error Moved toggle into Inputfield ui-widget-header 19 Link to comment Share on other sites More sharing options...
kongondo Posted June 23, 2013 Share Posted June 23, 2013 This looks nice! Thanks.. Link to comment Share on other sites More sharing options...
fenton Posted June 23, 2013 Share Posted June 23, 2013 wow, this look great! Link to comment Share on other sites More sharing options...
Martijn Geerts Posted June 23, 2013 Share Posted June 23, 2013 Thank you Adam, Lovely addition !! Link to comment Share on other sites More sharing options...
arjen Posted June 23, 2013 Share Posted June 23, 2013 Really nice UI solution when working with more than 2 languages. Most often the simplest solutions are the most difficult to think of. 1 Link to comment Share on other sites More sharing options...
Martijn Geerts Posted June 24, 2013 Share Posted June 24, 2013 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(); } }); 1 Link to comment Share on other sites More sharing options...
ryan Posted June 27, 2013 Share Posted June 27, 2013 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. 4 Link to comment Share on other sites More sharing options...
adamspruijt Posted June 27, 2013 Author Share Posted June 27, 2013 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 More sharing options...
adamspruijt Posted June 27, 2013 Author Share Posted June 27, 2013 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 More sharing options...
Martijn Geerts Posted June 27, 2013 Share Posted June 27, 2013 @adamspruijt, Will check it tomorrow. Link to comment Share on other sites More sharing options...
kongondo Posted June 27, 2013 Share Posted June 27, 2013 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... 1 Link to comment Share on other sites More sharing options...
adamspruijt Posted June 27, 2013 Author Share Posted June 27, 2013 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. 4 Link to comment Share on other sites More sharing options...
ryan Posted June 28, 2013 Share Posted June 28, 2013 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. Link to comment Share on other sites More sharing options...
adamspruijt Posted June 28, 2013 Author Share Posted June 28, 2013 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 More sharing options...
Wanze Posted June 28, 2013 Share Posted June 28, 2013 This looks amazing! Thanks very much Link to comment Share on other sites More sharing options...
adamspruijt Posted June 28, 2013 Author Share Posted June 28, 2013 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. 1 Link to comment Share on other sites More sharing options...
ryan Posted June 28, 2013 Share Posted June 28, 2013 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'. 2 Link to comment Share on other sites More sharing options...
adamspruijt Posted June 28, 2013 Author Share Posted June 28, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
landitus Posted June 28, 2013 Share Posted June 28, 2013 This looks great! Can't wait to try it! Congratulations Adam! Link to comment Share on other sites More sharing options...
Soma Posted June 28, 2013 Share Posted June 28, 2013 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. 1 Link to comment Share on other sites More sharing options...
WillyC Posted June 28, 2013 Share Posted June 28, 2013 /* 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 More sharing options...
adamspruijt Posted June 29, 2013 Author Share Posted June 29, 2013 /* 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 More sharing options...
ryan Posted July 2, 2013 Share Posted July 2, 2013 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 More sharing options...
adamspruijt Posted July 2, 2013 Author Share Posted July 2, 2013 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. 2 Link to comment Share on other sites More sharing options...
ryan Posted July 12, 2013 Share Posted July 12, 2013 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? 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now