Simple Tabs for Forms about calipso HOT 29 CLOSED

define what you mean by "displayed on a single page"

would you like the .admin-page to be a certain height?

from calipso.

would you be opposed to third party tabs/accordion effects or do you think we should roll our own?

from calipso.

By single page I mean a page where the entire form is rendered in one go, using tabs to show/hide sections of it. The alternative is a multi-step form where you go back / forward between pages (e.g. a complex wizard).

The form library at the moment can render the html elements required to make tabs (there is a tabs:true parameter on a form object), but the theme needs to the take that div and ul and add the css/javascript that makes them tabs.

Given that the theme will be responsible, what I'm looking for is either a very light approach (e.g. roll our own) if added to cleanslate (speak to Dennis as he maintains that one), really something that can be used as an example of how to do it in a theme.

from calipso.

i am going to write my own using jquery in the cleanslate admin page. stay tuned for updates.

from calipso.

would the use of jquery be acceptable/lightweight enough for these tabs, or would you like to see it even more lightweight?

from calipso.

every time you make a change to xxxxx.module.js you must restart the server to see the changes, is their an easier or more immediate way to see those changes?

from calipso.

Not at the moment, the reason is that NodeJS loads modules via a Require,
and basically if you require something it is loaded into an internal in
memory cache, so if you require it again it doesn't actually reload it just
gives you the cached version. It watches and reloads the templates but
thats all at the moment (as that is easy).

The only option is to add something like node-supervisor aroudn the app that
monitors all the javascript and restarts the app - I think its somewhere on
the issue list? If not you should add it.

Clifton

On 26 May 2011 15:05, coleGillespie <
[email protected]>wrote:

every time you make a change to xxxxx.module.js you must restart the server
to see the changes, is their an easier or more immediate way to see those
changes?

Reply to this email directly or view it on GitHub:
#20 (comment)

from calipso.

either way, i am currently constructing the json to build a proper form in the admin module, i guess i will build it all up and test it when i am done instead of testing as i go along. as with all new systems come small growing pains =)

from calipso.

Excellent - look forward to seeing it - yes, there are still a few growing
pains, it is very early days after all (first commit was only in early
April!).

On 26 May 2011 15:13, coleGillespie <
[email protected]>wrote:

either way, i am currently constructing the json to build a proper form in
the admin module, i guess i will build it all up and test it when i am done
instead of testing as i go along. as with all new systems come small growing
pains =)

Reply to this email directly or view it on GitHub:
#20 (comment)

from calipso.

the admin form is a bit different from the content form, the admin form includes dynamic inputs that are rendered when the page is loaded. for example: languages and themes. Would we compensate that logic inside of json, loop over each language or theme? or would we pre build the language/themes object inside of showLanguages/init methods and then insert it inside of the json via a global var we create for the language/theme object? Or would we render it at loadtime inside of the admin.html just like we are doing now and not even worry about it in the json, this option actually would not work since we will not be building our form in the html. Suggestions?

from calipso.

modules would be another example...

from calipso.

Selects just require an array, and languages and themes are already stored
on the main calipso object or on the request object:

request.languages = Array of languages (this should probably be refactored
out and become a property of the calipso object).

The others are already all available via the data object (see lines 65 - 78)
in the admin.module init.

So you can get the themes via:

calipso.data.themes = Array of themes

You can iterate through the modules and add a new item to the form (the form
is just a json object, so you can create it first without the modules, then
iterate through the modules and add them as fields to the object, then
render it).

If you want to put what you have in a gist I can feedback?

Clifton

On 26 May 2011 15:57, coleGillespie <
[email protected]>wrote:

modules would be another example...

Reply to this email directly or view it on GitHub:
#20 (comment)

from calipso.

still working on a prototype

from calipso.

so in theory i should be able to say something like

{
   id:'form-section-theme',
   label:'Theme',
   fields:[
      {
         label:'Theme',
         name:'admin[theme]',
         type:'select',
         options:function()         {
            return calipso.data.themes
         },
         instruct:'Select the theme, this impacts the website theme.'
      }
   ]
}

from calipso.

Apologies, the calipso.data.themes object is an object array, it doesn't
need to be.

So, I would refactor lines 67 to:

calipso.data.themes = [];
calipso.lib.fs.readdir(app.path + '/themes', function(err, folders) {
  folders.forEach(function(name) {
    calipso.data.themes.push(name);
 }
});

And then

{
id:'form-section-theme',
label:'Theme',
fields:[
{
label:'Theme',
name:'admin[theme]',
type:'select',
options:calipso.data.themes,
instruct:'Select the theme, this impacts the websites theme.'
}
]
}

On 26 May 2011 16:31, coleGillespie <
[email protected]>wrote:

> so in theory i should be able to say something like
>
> ```json
> {
>   id:'form-section-theme',
>   label:'Theme',
>   fields:[
>      {
>         label:'Theme',
>         name:'admin[theme]',
>         type:'select',
>         options:function()         {
>            return calipso.data.themes
>         },
>         instruct:'Select the theme, this impacts the websites theme.'
>      }
>   ]
> }
> ```
>
> --
> Reply to this email directly or view it on GitHub:
> https://github.com/cliftonc/calipso/issues/20#comment_1243090
>

from calipso.

roger that

from calipso.

is there a public list of the accepted field types? i am guessing is it the same as w3c? are you using a node module to parse this json and build out the form? (sorry for all the questions, just trying to make sure i am clear on everything)

from calipso.

The form library is part of core, http://calip.so/dox/library/calipsoForm, and renders the json object. Easiest to take a look through that and you will see how it works and what it accepts. When I started I couldn't find a form rendering library that worked the way that I wanted, so rolled my own simple one.

from calipso.

changing calipso.data.themes.push(name); causes a validation error when trying to save

from calipso.

disregard that last comment fixed it

from calipso.

No problem!

from calipso.

do you have a good method of debugging? i would really like to be able to drill down into some of these objects i am creating

from calipso.

nevermind, console.log was not working before, now it is working great =)

from calipso.

console.dir, or sys.inspect - the latter lets you decide how many levels deep you want to go into objects. Also, using node-inspector with chrome is very useful.

from calipso.

by 'node-inspector' you are just talking about 'Elements' inside of the developer tools correct?

from calipso.

I meant this: http://howtonode.org/debugging-with-node-inspector

On 28 May 2011 21:38, coleGillespie <
[email protected]>wrote:

by 'node-inspector' you are just talking about 'Elements' inside of the
developer tools correct?

Reply to this email directly or view it on GitHub:
#20 (comment)

from calipso.

AWESOME! i almost have the whole admin form rendering from json, i just have to finish the modules section and then re write your tabs logic a little bit inside of the calipso form lib to render the right stuff for my tabs javascript and then i will be able to commit it to my fork for you to inspect

from calipso.

at this point should we close this issue?

from calipso.

Yes - thanks for the good work!

from calipso.