jonjamz / blaze-tabs Goto Github PK

At https://atmospherejs.com/templates/tabs I see

Build any tabbed interface: * really easily. * with custom templates. * with router integration. * and sticky tab states.

Re-publish maybe? If that doesn't fix it, https://github.com/percolatestudio/atmosphere/issues

Is there a easy way to add an icon, from say the Meteor Font Awesome package, to the tab in addition to the normal text that's displayed?

Please do not use colon character (:) in file names as this conflicts on Windows systems.

When attempting to install the package as it's current, an ENOENT error is prompted regarding templates:tabs.html not being found in the temp folder. Full error log:

C:\Users\myusername\AppData\Local\.meteor\packages\meteor-tool\1.1.10\mt-os.windows
.x86_32\dev_bundle\lib\node_modules\fibers\future.js:278
                                                throw(ex);
                                                      ^
Error: ENOENT, open 'C:\Users\myusername\AppData\Local\Temp\tempfolder\web.browser\t
emplates:tabs.html'
    at [...]

Temporary solution found :

1. Create a new folder templates_tabs with a subfolder for the version (e.g. 2.2.1).
2. Download the archive of the project and extract the files without colons to the version folder or simply fetch the files using git.
3. Unless git took care of it already: Create new files replacing the colons with underscores and copy their contents respectively.
4. Create a new isopack.json for the package. I won't go in details here as there are enough documentation regarding this or simply copy an isopack from another package.
5. Move the package folder to C:\Users\myusername\AppData\Local\.meteor\packages\
6. Run meteor add templates:tabs and launch your application. Enjoy.

I have a "basicTabs" interface working, and want to add "activeTab" functionality so that I can route directly into a tab.

Adding the "activeTab" parameter to the tabs container "works", except that the tab then renders completely blank. Clicking to another tab and then back to the one I made "active" then makes the content appear... but the initial render is completely blank.

Using FlowRouter for routing, in case that helps?

Some code snippets below; let me know what else I can do to help provide a reproducible example:

Diff of change to tab-container:
'- {{#basicTabs name="tab-container" tabs=tabs}} <<< this was working
'+ {{#basicTabs name="tab-container" tabs=tabs activeTab=activeTab}} <<< this now fails

Simplified template helper:
activeTab: function () {
return 'plan';
// return FlowRouter.getParam('activetab');
}

HTML; "plan" is a valid slug:
{{#tabContent slug='plan'}}
{{>planSettings}}
{{/tabContent}}

I am trying to group autoform fields into individual tabs but the data on an 'update' form is all blank.
I am just using the basic tabs example. Here is what the autoform template looks like...

<template name="updateRecipe">
    <h1>Update Recipe - {{recipeName}}</h1>

    {{#basicTabs name="" tabs=tabs}}

        {{#autoForm collection="Recipes" id="updateRecipeForm" type="method-update" meteormethod="updateRecipe" doc=this class="form-inline"}}

          {{#tabContent slug="details"}}
              {{> afQuickField name='recipeName'}}
              {{> afQuickField name='purpose'}}
              {{> afQuickField name='source'}}
              {{> afQuickField name='description' rows=6}}
              {{> afQuickField name='image'}}
          {{/tabContent}}

          {{#tabContent slug="ingredients"}}
              <h3>Ingredients</h3>
              {{> afQuickField name='yieldWeightPerUnit'}}
              {{> afQuickField name='yieldNumberOfUnits'}}
              {{> afArrayField name='recipeIngredients'}}
          {{/tabContent}}

          {{#tabContent slug="method"}}
              <h3>Method</h3>
              {{> afArrayField name='method'}}
          {{/tabContent}}

          <button type="submit" class="btn btn-primary">Update</button>

        {{/autoForm}}

    {{/basicTabs}}

</template>

Not sure if it's related but I am using iron router for the update page like this...

Router.route('/recipes/update/:_id', function () {
  var item = Recipes.findOne({_id: this.params._id});
  this.render('updateRecipe', {data: item});
}, {
  name: 'recipe.show'
});

So just to clarify. If I don't use the tabs in the template, all the data from the document shows up as it should. If I use the tabs, all the fields are blank.

Thanks

When I try to use this package in another package it complains that it can't find "basicTabs". If I paste the "basicsTab" template in to the html of my package then I get "Error: No such function: isActiveTab".
I've tried to include the package in all possible load orders but still no luck. Any one knows whats going on ?

Hey @jonjamz, thanks for the awesome package! Does it support Flow Router? The documentation only mentions Iron Router. (I've recently began using React so needed to switch from IR to Flow).

Thanks,
Kris

First, thank you for this package. This is awesome!

I want to use this within my project, though am unsure how to leverage Meteor template helpers within the individual tabs. My thought is that I would like to move the Meteor.subscribe methods to the individual tab render functions and remove them from the iron router waitOn functions. That way I could speed up the load time a bit and not bring back all the data at once.

Currently I'm using iron router and the waitOn: method to subscribe to a few collections.

waitOn: function() {
return [Meteor.subscribe('colors', this.params._id), etc.....];
},

On the parent template, I have blocks of code that loop through the collection data to list out all the entries.

Per your docs and so I have seen, each tab has it's own scope, which is awesome, just not sure the best way to go about leveraging meteor helpers within the tab render callback (if that is even feasible).

Any help would be appreciated. Thanks in advance and again, thank you! -Chris

been trying various things and can't get the styles applied. it seems something is dynamically overriding styles on load.

This is going to be hastily reported, sorry in advance, let me know if you need more details.

In my routes:

this.render("toptemplate",{data:{info1: "hi", info2: 7}})

Template:

<template name="toptemplate">
  {{#dynamicTabs name="app_sections" tabs=tabs }}
     {{ahelper}}
     {{#tabContent slug="tab1"}}
     tab1 
     {{/tabContent}}
  {{/dynamicTabs}}
</template>

toptemplate.js:

Template.toptemplate.helpers({
  ahelper: function(){
    console.log(Template.currentData().info1) //undefined
    console.log(Template.parentData().info1) //"hi"
  }
})

I guess it should be documented that the template's data is moved to parentData() under those circumstances. It was unexpected for me and took me a bit of time to work out what was wrong.
Great lib btw - cheers!

I find the use of the word name in this project ambiguous. I would think name would refer to what is displayed on the screen, but it is also used to refer to a CSS class:

<template name="basicTabs">
  <div class="basicTabs-container {{name}}">
...

I wonder if it wouldn't be better to name it something else, for example:

<template name="basicTabs">
  <div class="basicTabs-container {{klass}}">
...

It would also be nice if there were a similar functionality in BasicTabs for assigning classes to tab-item's, for example:

    <ul class="tabs-list">
      {{#each tabs}}
        <li class="tab-item {{klass}} {{isActiveTab slug}}">{{name}}</li>
      {{/each}}
    </ul>

Is there a way to conditionally (maybe based upon the value of a helper) show/hide a tab?

I haven't tried this package yet, but it looks very promising. Does it support stateful/sticky routes, similar to Angular's ui-router-extras?. For the best UX, form inputs, scroll state, text selection etc. should be preserved when navigating back to a route. iron:router doesn't yet support this. If tabs does, it would be a major distinguishing feature to add to the About heading of the README.

The README says:

      There are two ways to define content for your tabs:

      1. Wrap each tabbed section in a blank `<div></div>`.
         Sections must correspond with the order of the tabs you specified.

      2. Wrap each tabbed section in the provided block helper (RECOMMENDED!).
         `{{#tabContent slug="nameOfSlug"}} ... {{/tabContent}}`
         These can be defined in any order you like.

Is 1 really an option? If so, how is one supposed to "unhide" it (since the block helper is responsible for setting the active class that changes the display setting)?

FYI, I'm just trying to add a class to the <section>'s without forking, so I'd again be satisfied with:

<template name="tabContent">
  <section class="tabs-content {{klass}} {{isActiveTab slug}}" data-tab={{slug}}>