Skip to content

Commit

Permalink
feat: implement faFlipper directive
Browse files Browse the repository at this point in the history
  • Loading branch information
@zackbrown
Gilles H authored and zackbrown committed Jun 2, 2014
1 parent 0d29c45 commit 64c98b6
Show file tree
Hide file tree
Showing 2 changed files with 204 additions and 93 deletions.
65 changes: 65 additions & 0 deletions src/scripts/directives/fa-flipper.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* @ngdoc directive
* @name faFlipper
* @module famous.angular
* @restrict EA
* @description
* This directive will create a Famo.us Flipper containing the
* specified front and back elements. The provided `options` object
* will pass directly through to the Famo.us Flipper's
* constructor. See [https://famo.us/docs/0.2.0/views/Flipper/]
*
* @usage
* ```html
* <fa-flipper fa-options="scopeOptionsObject">
* <!-- two render nodes -->
* </fa-flipper>
* ```
*/

angular.module('famous.angular')
.directive('faFlipper', ["$famous", "$famousDecorator",
function ($famous, $famousDecorator) {
return {
template: '<div></div>',
restrict: 'E',
transclude: true,
scope: true,
compile: function (tElem, tAttrs, transclude) {
return {
pre: function (scope, element, attrs) {
var isolate = $famousDecorator.ensureIsolate(scope);
var Flipper = $famous["famous/views/Flipper"];
var options = scope.$eval(attrs.faOptions) || {};
isolate.renderNode = new Flipper(options);

var flip = function () {
isolate.renderNode.flip(options);
};

var childCount = 0;
scope.$on('registerChild', function (evt, data) {
if (evt.targetScope.$id != scope.$id) {
if (childCount == 0) {
isolate.renderNode.setFront(data.renderNode);
}
if (childCount == 1) {
isolate.renderNode.setBack(data.renderNode);
}
data.renderNode.on('click', flip);
childCount += 1;
evt.stopPropagation();
};
});
},
post: function (scope, element, attrs) {
var isolate = $famousDecorator.ensureIsolate(scope);
transclude(scope, function (clone) {
element.find('div').append(clone);
});
scope.$emit('registerChild', isolate);
}
};
}
};
}]);
232 changes: 139 additions & 93 deletions src/scripts/services/famous.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,53 +36,29 @@ var requirements = [
"famous/views/GridLayout",
"famous/views/RenderController",
"famous/views/Scroller",
"famous/views/Scrollview"
"famous/views/Scrollview",
"famous/views/Flipper"
]

//declare the module before the async callback so that
//it will be accessible to other synchronously loaded angular
//components
var ngFameApp = angular.module('famous.angular', []);

require(requirements, function(/*args*/) {
//capture 'arguments' in a variable that will exist in
//child scopes
var required = arguments;

/**
* @ngdoc provider
* @name $famousProvider
* @module famous.angular
* @description
* This provider is loaded as an AMD module and will keep a reference on the complete Famo.us library.
* We use this provider to avoid needing to deal with AMD on any other angular files.
*
* @usage
* You probably won't have to configure this provider
*
* ```js
* angular.module('mySuperApp', ['famous.angular']).config(
* function($famousProvider) {
*
* // Register your modules
* $famousProvider.registerModule('moduleKey', module);
*
* };
* });
* ```
*
*/
ngFameApp.provider('$famous', function() {
// hash for storing modules
var _modules = {};
require(requirements, function ( /*args*/ ) {
//capture 'arguments' in a variable that will exist in
//child scopes
var required = arguments;

/**
* @ngdoc method
* @name $famousProvider#registerModule
* @ngdoc provider
* @name $famousProvider
* @module famous.angular
* @description
* Register the modules that will be available in the $famous service
* This provider is loaded as an AMD module and will keep a reference on the complete Famo.us library.
* We use this provider to avoid needing to deal with AMD on any other angular files.
*
<<<<<<< HEAD
* @param {String} key the key that will be used to register the module
* @param {Misc} module the data that will be returned by the service
*/
Expand Down Expand Up @@ -117,19 +93,68 @@ require(requirements, function(/*args*/) {
* @returns {Array} an array of the isolate objects of the selected elements.
*
* @param {String} selector - the selector for the elements to look up
=======
>>>>>>> 52615ec... Implement faFlipper directive
* @usage
* View:
* ```html
* <fa-scroll-view id="myScrollView"></fa-scroll-view>
* ```
* Controller:
* ```javascript
* var scrollViewReference = $famous.find('#myScrollView')[0].renderNode;
* //Now scrollViewReference is pointing to the Famo.us Scrollview object
* //that we created in the view.
* You probably won't have to configure this provider
*
* ```js
* angular.module('mySuperApp', ['famous.angular']).config(
* function($famousProvider) {
*
* // Register your modules
* $famousProvider.registerModule('moduleKey', module);
*
* };
* });
* ```
*
*/

ngFameApp.provider('$famous', function () {
// hash for storing modules
var _modules = {};

/**
* @ngdoc method
* @name $famousProvider#registerModule
* @module famous.angular
* @description
* Register the modules that will be available in the $famous service
*
* @param {String} key the key that will be used to register the module
* @param {Misc} module the data that will be returned by the service
*/
this.registerModule = function (key, module) {
//TODO warning if the key is already registered ?
_modules[key] = module;
};

/**
* @ngdoc method
* @name $famousProvider#find
* @module famous.angular
* @description given a selector, retrieves
* the isolate on a template-declared scene graph element. This is useful
* for manipulating Famo.us objects directly after they've been declared in the DOM.
* As in normal Angular, this DOM look-up should be performed in the postLink function
* of a directive.
* @returns {Array} an array of the isolate objects of the selected elements.
*
* @param {String} selector - the selector for the elements to look up
* @usage
* View:
* ```html
* <fa-scroll-view id="myScrollView"></fa-scroll-view>
* ```
* Controller:
* ```javascript
* var scrollViewReference = $famous.find('#myScrollView')[0].renderNode;
* //Now scrollViewReference is pointing to the Famo.us Scrollview object
* //that we created in the view.
* ```
*/

<<<<<<< HEAD
_modules.find = function(selector){
var elems = angular.element(window.document.querySelector(selector));
var scopes = function(elems) {
Expand All @@ -148,55 +173,76 @@ require(requirements, function(/*args*/) {
}(scopes);
return isolates;
}

this.$get = function() {

/**
* @ngdoc service
* @name $famous
* @module famous.angular
* @description
* This service gives you access to the complete Famo.us library.
*
* @usage
* Use this service to access the registered Famo.us modules as an object.
*
* ```js
* angular.module('mySuperApp', ['famous.angular']).controller(
* function($scope, $famous) {
*
* // Access any registered module
* var EventHandler = $famous['famous/core/EventHandler'];
* $scope.eventHandler = new EventHandler();
*
* };
* });
* ```
*
*/
return _modules;
};
});

ngFameApp.config(['$famousProvider', function($famousProvider) {
for(var i = 0; i < requirements.length; i++) {
$famousProvider.registerModule(requirements[i], required[i]);
}
// console.log('registered modules', famousProvider.$get());
=======
_modules.find = function (selector) {
var elems = angular.element(window.document.querySelector(selector));
var scopes = function (elems) {
var _s = [];
angular.forEach(elems, function (elem, i) {
_s[i] = angular.element(elem).scope();
});
return _s;
}(elems);
var isolates = function (scopes) {
var _s = [];
angular.forEach(scopes, function (scope, i) {
_s[i] = scope.isolate[scope.$id];
});
return _s;
}(scopes);
return isolates;
}
>>>>>>> 52615ec... Implement faFlipper directive

this.$get = function () {

/**
* @ngdoc service
* @name $famous
* @module famous.angular
* @description
* This service gives you access to the complete Famo.us library.
*
* @usage
* Use this service to access the registered Famo.us modules as an object.
*
* ```js
* angular.module('mySuperApp', ['famous.angular']).controller(
* function($scope, $famous) {
*
* // Access any registered module
* var EventHandler = $famous['famous/core/EventHandler'];
* $scope.eventHandler = new EventHandler();
*
* };
* });
* ```
*
*/
return _modules;
};
});

ngFameApp.config(['$famousProvider',
function ($famousProvider) {
for (var i = 0; i < requirements.length; i++) {
$famousProvider.registerModule(requirements[i], required[i]);
}
// console.log('registered modules', famousProvider.$get());
}]);

angular.element(document).ready(function() {
// For some reason Karma evaluates angular.resumeBootstrap as undefined.
// Our versions of angular, angular-mocks and karma the latest stable
// releases, so not sure why this is happening.
// Quick fix until then.
if (angular.resumeBootstrap) {
angular.resumeBootstrap();
}
});

// To delay Karma's bootstrapping until $famous is ready, fire off a global
// event to allow karma to know when the $famous provider has been declared.
window.dispatchEvent(new Event('$famousModulesLoaded'));
angular.element(document).ready(function () {
// For some reason Karma evaluates angular.resumeBootstrap as undefined.
// Our versions of angular, angular-mocks and karma the latest stable
// releases, so not sure why this is happening.
// Quick fix until then.
if (angular.resumeBootstrap) {
angular.resumeBootstrap();
}
});

// To delay Karma's bootstrapping until $famous is ready, fire off a global
// event to allow karma to know when the $famous provider has been declared.
window.dispatchEvent(new Event('$famousModulesLoaded'));

});

0 comments on commit 64c98b6

Please sign in to comment.