after add/delete, order is changing; there's been a regression in the add/delete logic

@zackbrown do you know if we could get access to the famous.js file from a CDN that will be release on May 19th ? Or maybe a repository with the concatenated file ? Will it be on bower ?
It would probably simplify the distribution of famous-angular a lot.

I'm refering to the latest newsletter with:

Additionally, we will provide famous.js from the Famo.us CDN so you can just point to famous.js in the head section of your index.html, just like jQuery.

I just got access to the library today and started to go down the list of steps in the readme and realized i didnt have gulp installed. I had to go through a bit of a list of modules in order to get it to where i could run the examples enclosed. I thought since I saved the list of modules I could contribute it back and you could document it on the install procedure as needed.

gulp
gulp-ruby-sass
gulp-stylus
gulp-autoprefixer
gulp-minify-css
gulp-jshint
gulp-uglify
gulp-imagemin
gulp-rename
gulp-clean
gulp-concat
gulp-notify
gulp-cache
gulp-livereload
tiny-lr
gulp-util
gulp-exec
express
connect-livereload

Would be so nice. Any plan?

I cannot for the life of me get fa-scroll-view to work. I have followed the instructions in both the F/A docs and the famo.us docs and I cannot work out what it is I am doing wrong.

<fa-app style="height: 600px;">
    <fa-scroll-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 1</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 2</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 3</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 4</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 5</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 6</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 7</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 8</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 9</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 10</fa-surface>
        </fa-view>
    </fa-scroll-view>
</fa-app>

As you can see from the example code I have provided, my example app is 600px in height, each surface is 100px in height, meaning I should see six surfaces on screen and be able to scroll down to the remaining four.

But I have no scroll bar, and I cannot use the mouse wheel either. Am I do something wrong?

I have also tried placing all of the surfaces inside the fa-view element but this just results in the stacking on top of one another rather than being laid out sequentially.

The method $famous.find(selector) finds just one element, since it uses element.querySelector instead of element.querySelectorAll.

134 var elems = angular.element(window.document.querySelector(selector));

should be

134 var elems = angular.element(window.document.querySelectorAll(selector));

Hi, I don't see jquery listed as a dependency in bower.json, though it seems to be required.

There is one instance where $ is called directly:
#569 var famousContainer = $(element.find('.famous-angular-container'))[0];
(should be angular.element instead $, no?)
and element.find is used with classes in query all over, which only works when it replaces jqLite.

Or am I missing something?

"famous/views/Deck" needs to be added to the requirements list in src/scripts/services/famous.js

I believe that's what's happening. You can see in MVCAngular , commit 3701d542a5f73887eb6bc561f80c3bc3dcd21c2d,

that if you drag some of the tasks down past the edge of the screen, when you drag the tasks back up, some will be blank.

If you'd prefer not to update the entire famous core that ang.us is using, the following section in ViewSequence must be deleted:

if(start === this.firstIndex) {
for (var i = 0; i < removeCount; i++) {
this.firstNode = this.firstNode.getNext();
}
this.firstNode.index = this.firstIndex;
}

Would be great to know if anyone found the best way to implement routing into the app (with nested views). I know than zackbrown mentioned it as big-roadmap feature.

At the beginning I've thought about using ng-switch & ng-include but the code is far away from being neat. ui-router seems to be perfect but it requires solid alterations.

Are there any plans ( or work in progress ), is there anything I can start from?

Q: when is the ContainerSurface going to be implemented?, kind of missing the overflow hidden option.

This is interesting...the famous submodule is still pointing to 2bd1bd7. Tried cloning famous-angular from scratch and got the same submodule error. I'll look into this more when I get the chance. But changing the submodule commit will definitely fix this issue.

Is there a simple way to get angular bindings to these attributes? Or is it by design (scale and translate do work)?

Don't you think it would be nice to have a changelog to list the changes between the versions ?
Or at least document each release with a list of the changes.
Maybe the versions are released too fast at the moment, but it would be nice to have it at some point.

are there any?

I ran into some trouble running NPM start, in particular this message popped up:

Cloning into 'famous-angular-docs'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
Clone of '[email protected]:thomasstreet/famous-angular-docs.git' into submodule path 'famous-angular-docs' failed

I was able to fix this in my situation after reading Fatal Error when updating submodule using GIT.

I changed the submodules in .gitmodules and .config to reference the public urls (e.g. 'https://' vs 'git@' as mentioned in the Stackoverflow post.

Creating a fa-app without jQuery included throws ReferenceError: $ is not defined at line 20 of fa-app. Can we do without jQuery?

Test case here: http://files.heisenberg.co/famous-angular-bug-20140612/ (zip)

Steps: run test.doSomething() in JS console multiple times

Expected result: page contents replaced with the contents of test.data each time

Actual result: contents of test.data appended to the page each time

Because the Famo.us framework creates its own version of the DOM, when we use Famous-Angular to define Famous surfaces we end up with ghost elements in the DOM that CSS is being applied to, requiring us to set ng-hide=true on elements that have CSS applied. Is there another way around this?

e.g. let's say we have a surface as follows

<fa-modifier fa-translate="[400,50]">
    <fa-surface fa-size="[100,100]" class="box">
        Text
    </fa-surface>
</fa-modifier>

and css

.box {
    padding: 10px;
    background-color: #333;
    color: #fff;
    border-style: solid;
    border-width: 2px;
    border-color: #444;
}

You will see an unsized copy of the surface at position [0,0].

Currently, if you have a custom directive in the directives folder, like 'task.js' for example in MVCAngular, it's concatenated into famous.angular.js, resulting in angular throwing an error that it doesn't recognize the module, because the module is used before it's defined.

My current fix is using a 'custom-directives' folder.

When i make 'npm start'

The symlink doesn't work on windows, and you can't use the app without it.
I have updated the gulp script to replace the symlink file with the completed concatenated file (instead of outputting it in the dist folder).
Do you see any reason why I shouldn't do that ?
Should i PR this change ?

Is there any reason why the concatenated file should stay in the dist folder ?

It would be nice to have a twitter account linked to famous-angular so that we could use it when we tweet about articles / examples / ... and it would retweet it to the followers.
It would also be easier to follow the releases and It would probably give more credit to the lib too.
I know that we can follow @zackbrown but it would make more sense to have a specific twitter account I think.

I'm getting the following error when running my F/A app

Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element '<html ng-app="integrationApp" data-ember-extension="1" class="ng-scope">'

The issue doesn't stop the app from working, it's just concerning ... it seems to think I've assigned ng-app twice.
I've only added it in the index.html

<html ng-app="integrationApp">

Given the amount of layers here how would you recommend sizing elements as fractions of overall dimensions? (ye olde percent?)

I'm translating a surface along the Z-axis but it seems that perspective rendering is not on by default, so the size of the surface doesn't change.

I noticed that there's an fa-perspective attribute on ```... I tried setting this to a value and to an array, but it didn't affect the rendering. Is this feature not working yet? Or am I doing something wrong?

I've been working on the script to generate the documentation. I've made a lot of progress and been able to make it work.
Since I didn't know how we wanted to show the documentation, I've decided to generate markdown files that can be served by a jekyll server (such as the ones from github.io).

Here is a quick demo I've made:

For the moment it's all in local. I'm not sure how you want me to push my updates.

• Do I push only the scripts / templates and people will generate the doc on their own ?
• Do I generate the files and commit them too ? In what folder ?
• We can generate the docs in markdown and host them in the repository (no style other than markdown).
• We can make a branch, generate the docs in html/markdown and serve it via github.io using jekyll (we can use our own custom domain too: https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages)
• Do I generate a very basic documentation that will be included in a bigger website ?
• Or do I generate an independant complete website ?
• Where do we stand on ng.us ? Will there be anything ready for the release date ? If you have an idea of the design it would help me for the templates. Otherwise I will keep everything very light so that we can decorate it later. For the moment I've been using the styles from ionic: http://ionicframework.com/docs/api/

If we don't want to use github.io, we should probably switch from jekyll to a node based static generator, such as wintersmith so that we can include the static generation into the gulp tasks (if we use github.io we won't need to generate the static files as it will be automatic)

Edit: metalsmith seems even better than wintersmith since it can emulate the static site generation from jekyll: https://github.com/segmentio/metalsmith/tree/master/examples/jekyll

I don't seem to be able to declare 2 animations next to each other on the same view and trigger them independently.

Below is what I'm trying to do ... sometimes I want to trigger the first and sometimes the second animation. I only seem to be able to trigger the last declared animation. (i.e. 'in-animation-'+$index)
If I swap them around the out-animation is the only one that will trigger.

What am I doing wrong?

main.html

<fa-app>
    <fa-view
             ng-repeat="box in boxes"
             fa-size="[250, 50]">
        <fa-modifier fa-translate="[offset, 50*$index, 0]">
            <fa-modifier id="{{'box-' + $index}}" origin="[-100,0,0]">
                <fa-surface
                            fa-background-color="box.bg_color"
                            fa-color="box.color"
                            fa-size="[250, 50]">
                    <table>
                        <tr>
                            <td>
                                <input style="width: 50px" ng-model="box.bg_color"/><br>
                                <input style="width: 50px" ng-model="box.color"/>
                            </td>
                            <td align="center" fa-click="click($index)">
                                {{text}} {{$index + 1}}
                            </td>
                        </tr>
                    </table>
                </fa-surface>
            </fa-modifier>
        </fa-modifier>

        <fa-animation id="{{'out-animation-' + $index}}" duration="2000">
            <animate  targetModSelector="{{'#box-' + $index}}"
                     field="translate"
                     startValue="[0,0,0]"
                     endValue="[-100,0,0]"
                     curve="outElastic"/>
        </fa-animation>
        <fa-animation id="{{'in-animation-' + $index}}" duration="2000">
            <animate  targetModSelector="{{'#box-' + $index}}"
                     field="translate"
                     startValue="[-100,0,0]"
                     endValue="[0,0,0]"
                     curve="outElastic"/>
        </fa-animation>

    </fa-view>
</fa-app>

for the Controller I'm using is this

angular.module('integrationApp')
.controller('MainCtrl',function ($scope, $famous) {
    $scope.number = 6;
    $scope.offset = 200;
    $scope.text = "TEXT";
    $scope.boxes = [];
    $scope.selected = 0;

    $scope.$watch('number', function (num) {
        var arr = [];
        for (var i = 0; i < $scope.number; i++) {
            arr.push({bg_color: '#333', color: '#ccc'});
        }
        $scope.boxes = arr;
    });

    $scope.click = function (index) {
        console.log('clicked', index);
        $famous.find('#out-animation-' + $scope.selected)[0].replay();
        $famous.find('#in-animation-' + index)[0].replay();
        $scope.selected = index;
    };
});

Require.js is usually used only in development. For production almond + r.js is usually used to create a minified source for the entire application. This workflow does not make a ton of sense for an angular application though, and trying to support require may "over time" lead to problems.

Internally we have discussed making a single file famous.min.js that has a global object that has keys associated with each of the modules offered. So something like Famous["core/Context"] will return the context object... this is pretty much the exact same pattern you guys are already using

Once this version of famous.min.js is available I think moving forward should be rather painless!

When an fa-scroll-view contains a ng-repeat with a directive that uses templateUrl for a template with fa-surface, the order messes up if the array length is greater than 10. Arrays with 9 elements or less work fine.

Controller code:
$scope.array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

Main view html:

<fa-scroll-view>
  <directive ng-repeat="num in array" test-index="$index"></directive>
</fa-scroll-view>

Directive code:

  .directive('directive', function () {
    return {
      templateUrl: '/template/directive.html',
      restrict: 'E',
      scope: {
        'testIndex': '='
      }
  })

Fetched template:

<fa-surface fa-size="[undefined, 20]">
 <div>{{testIndex}}<div>
</fa-surface>

If I remove the fa-surface in the fetched template, the order is fine.
If I inline the html from the fetched template, the order is fine.

Here it is in Chrome: http://cl.ly/image/0V0i2V0f1C2Q.
Here it is in Safari/Firefox: http://cl.ly/image/3T253L2u0U03.

The left column is when the directive uses templateUrl with the fa-surface. The right column is when the fa-surface is inlined in the view.

Hi All,

Not sure where to put stuff like this but thought Id create a github issue :) Let me know if there's a better place to put this stuff.

I have an existing angular app which I have integrated the famous libs correctly (tested by adding a "hello world" surface in one of my partials)

I'm having problems with ng-repeat and am not sure if I was doing this correctly.

The following is in one of my partials where all I am trying to do is repeat an image

<fa-app style="height: 568px; width: 320px; margin: 0;" fa-background-color="blue" >
    <fa-surface ng-repeat="tile in user.tiles" >
        <fa-image-surface fa-image-url="{{tile.image}}" fa-size="[320, 120]" ></fa-image-surface>
    </fa-surface>
</fa-app>

However, the following HTML gets generated which doesn't seem right. I'm not sure if its a bug with the framework or I am setting it up wrong? The highlighted fa-app elements in the attached screen seem to be repeated whereas I was expecting only the image surface to be repeated? Is there something I have missed?

$scope.move = function(){
//return transitionable
}

//doesn't work
fa modifier fa-translate=move

//works
fa modifier fa-translate=move()

Clicking on a fa-surface does not register the click event.
@zackbrown I mentioned this the other day, just posting it here so that it stays on the radar. You can close it whenever.

If i am using ng-show="false" somewhere within fa-surface, then nothing will be displayed, even sibling divs that should not be affected by ngShow:

<fa-app class="full-screen">
  <fa-modifier fa-origin="[.5, .5]">
    <fa-surface class="center-box" fa-size="[500, 100]" >
      <div ng-show="false"> I am not shown</div>
      <div> I am not shown either, even though i should be </div>
    </fa-surface>
  </fa-modifier>
</fa-app>

Would be nice to see a Yeoman Generator for Famous-Angular like there is for vanilla Famous: https://github.com/Famous/generator-famous

<fa-modifier> catches and stops registerChild events, but it doesn't catch and stop unregisterChild events. This means that the unregisterChild continues on to the parent. In one case, a <fa-scrollview> was catching its grandchildren's unregisterChild, and removing its children from its _children array.

We could embed codepen examples in the doc such as what you can see on the ionic website: http://ionicframework.com/docs/api/directive/ionTabs/
It would be as easy as adding the following line in the ndoc tags: @codepen KbrzJ
See https://github.com/driftyco/ionic/blob/master/js/angular/directive/tabs.js for example.
It will then be parsed by the doc generation and the include should be generated for jenkins.
I haven't tested it yet, but it's something I kept from the ionic doc generation and it should be easy enough to make it work (if it doesn't already).
We would have to update the website to include the example in a nice way but I'm sure @andrelevi can do something nice with it.

The hard work would be to take the time to write the examples, but I think that it would be a really nice addition to the doc and easier to use than the current example repository.

This may be a non issue but I thought I would suggest it. There is already a tag called animate in SVG so perhaps a name change for the <animate> tag might be in order? Perhaps <fa-animate>.

Super new but been trying to get this to work to not avail.

Unless Im misunderstanding:

    <fa-app>
      <fa-view>
        <fa-surface  fa-size="[undefined, undefined]" fa-background-color="'blue'"></fa-surface>
      </fa-view>
     </fa-app>

Should be enough to have the fa surface take up the entire viewport. (undefined,undefined should == max height/width of viewport right?)

Digging into it, it looks like the width is being set properly by undefined, but not the height. But didnt dig any deeper. Do you know about this and this is a bug right? Seems like pretty game breaking functionality unless Im missing something...?

I'm trying to slide some content up from the bottom of the app with fa-translate. The problem is that whenever I insert a transitionable into the directive, it breaks the surface and renders it in the top left corner.

I've got the following Transitionable declared in my controller:

var _height = 568;
$scope.detailsGridTranslationY = new Transitionable(_height);

and the following is my html

<fa-modifier 
        id="start-airport-details-modifier" 
        fa-origin="origins.startAirportDetails" 
        fa-translate="[0, detailsGridTranslationY,0]">
       <fa-surface id="start-airport-details" class="details-style" fa-size="sizes.detailsGrid" >
             SOME TEXT
      </fa-surface>
</fa-modifier>

I should note that the fa-translate directive works when I put in all integers ([0,0,0]) or when I put in normal scope variables (non Transitionable integers).

I've been banging my head on this for 3 days now and I haven't had any progress. Any insight would be helpful

Add "famous/utilities/KeyCodes" to requirements.

I've been trying to understand the way that famous-angular is built and included into a new project.
I found the 2 stubs that are wrapped around the directives.
These 2 stubs are just 2 parts of a requirejs wrapper + a provider that will load the AMD famous modules, push them into an array that will be synchronously available for the directives via a service.
It will then call a global function that will bootstrap the app and launch it (you need to define that global function in your own app).

This all seems really "counter-angular" to me. Angular has been built upon the principle of dependency injection and you should not have to worry if your lib has been loaded.

Correct me if I'm wrong but you probably did this because the whole famous library is based on AMD and it will load asynchronously no matter what, so you prefer delaying the bootstrap and make sure that you have loaded everything before you launch the app.

I've made some modifications to the way the app is loaded that will remove the need to bootstrap.
You will be able to load the app like a regular angular app (with the directive ng-app, or with bootstrap if you really like it).
I also removed the need to use the stubs, famous will be a simple service that will load all the requirejs stuff before the app starts, just like it is right know but without all the directives in the middle.

We should be able to decouple this service from the directives and the users will be able to load only the directives that they need.
For the moment I built everything into one file, because it's easier that way and I don't know if you want to make multiple files or only one.

I will make a PR with all this once you have accepted the PR #7, because my update is based on the new gulp build task.

Still trying to get presenters to work. When I define a new presenter, I continue getting the following error:

Error: [ng:areq] Argument 'TaskPres' is not a function, got undefined

See commit fd6102521bc2b8f94d67b7425e9ddf274e505cbe on 'integrate' branch of MVCAngular in famous private beta.

Here's what I've tried to fix it:

• remove ng-controller from DOM
• copy fa-directive code from famous.angular.js into a fa-directive.js file in the directives folder (in my repo, I don't have separate files for each directive).

When creating a surface with class="class1 class2" it seems to fails to add class2 and gives an error.

Adding class="' class1 class2 '" it does work but it adds 2x ' as class aswell, also ng-class is not working correctly.

http://famo.us/docs/views/RenderController
looks something but I'm not sure. I'd like to confirm if there's already a way.

trying to use spring animations but not sure how to set up the controller or html

<fa-app class="full-screen">
  <fa-modifier fa-origin="[.5, 0]" fa-translate="[bouncy.get]">
    <fa-surface fa-size="[100, 100]" fa-background-color="'rgb(5,22,48)'">
    </fa-surface>
  </fa-modifier>
</fa-app>

'use strict';

angular.module('famousAngularStarter')
  .controller('MainCtrl', function ($scope, $famous) {
    var Transitionable = $famous['famous/transitions/Transitionable'];
    var SpringTransition = $famous['famous/transitions/SpringTransition'];
    Transitionable.registerMethod('spring', SpringTransition);
    var spring = {
      method: 'spring',
      period: 1000,
      dampingRatio: 0.3
    };

    $scope.bouncy = new Transitionable(0);
    $scope.buttonFlyDown = function(){
      $scope.bouncy.set(100, {method : 'spring', dampingRatio : 0.5, period : 500});
    }
    $scope.buttonFlyDown();
    //$scope.movement = {
    //  springDown: Transform.translate(0, 300, 0), spring;
   // }
  });