Merge branch 'hotfix/0.1.2'

CHANGELOG.md

@@ -1,6 +1,16 @@
 # w11k-flash Changelog
 
 
+<a name="0.1.2"></a>
+## 0.1.2 (2014-07-02)
+
+
+### Bug Fixes
+
+* **config:** merge default config and instance config recursive ([bf5a1591](https://github.com/w11k/w11k-flash/commit/bf5a15916cbbdc0de4b9cb75ed285a4bb10b07e8))
+* **defaults:** update default for required flash player version to current version 14 ([4d1f3770](https://github.com/w11k/w11k-flash/commit/4d1f377056aaa3751e9a76190ec962f507a7eb19))
+
+
 <a name="0.1.1"></a>
 ## 0.1.1 (2014-07-02)
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "w11k-flash",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "AngularJS module to include flash movies or flex applications",
   "keywords": [ "angular", "angularjs", "flash", "flex", "migration" ],
   "homepage": "https://github.com/w11k/w11k-flash",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "w11k-flash",
-  "version": "0.1.1",
+  "version": "0.1.2",
 
   "description": "AngularJS module to include flash movies or flex applications",
   "keywords": [ "angular", "angularjs", "flash", "flex", "migration" ],

src/js/w11k-flash.js

@@ -67,25 +67,25 @@ angular.module('w11k.flash').run(function ($window, w11kFlashRegistry) {
 angular.module('w11k.flash').constant('w11kFlashConfig', {
   templateUrl: 'w11k-flash.tpl.html',
   swfObject: {
-    minFlashVersion: '10.2.0',
+    minFlashVersion: '14.0.0',
     width: 800,
-    height: 600,
-    flashvars: {
-    },
-    params: {
-      quality: 'high',
-      bgcolor: '#ffffff',
-      allowfullscreen: 'false',
-      allowScriptAccess: 'always',
-      wmode: 'opaque'
-    },
-    attributes: {
-      align: 'middle'
-    }
+    height: 600
   }
 });
 
 angular.module('w11k.flash').directive('w11kFlash', function (swfobject, $window, $q, w11kFlashConfig, $timeout, w11kFlashRegistry) {
+  var deepMerge = function (destination, source) {
+    for (var property in source) {
+      if (source[property] && source[property].constructor && source[property].constructor === Object) {
+        destination[property] = destination[property] || {};
+        deepMerge(destination[property], source[property]);
+      } else {
+        destination[property] = source[property];
+      }
+    }
+    return destination;
+  };
+
   return {
     restrict: 'EA',
     templateUrl: w11kFlashConfig.templateUrl,
@@ -122,7 +122,15 @@ angular.module('w11k.flash').directive('w11kFlash', function (swfobject, $window
 
         var flashId = w11kFlashRegistry.getFlashId();
 
-        var config = angular.extend({ flashvars: {}}, w11kFlashConfig.swfObject, customConfig);
+        var config = {
+          flashvars: {},
+          params: {},
+          attributes: {}
+        };
+
+        deepMerge(config, w11kFlashConfig.swfObject);
+        deepMerge(config, customConfig);
+
         config.flashvars.w11kFlashId = flashId;
 
         flashContainer.append(flashElement);

test/flash/test.mxml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="100"
+			   xmlns:mx="library://ns.adobe.com/flex/mx" width="600" height="200"
 			   creationComplete="application_creationCompleteHandler(event)"
 			   >
 
@@ -19,6 +19,7 @@
 				angularjs = AngularJSAdapter.getInstance();
 				
 				this.currentState = defaultState.name;
+				ExternalInterface.addCallback("talkToMe", talkToMe);
 				ExternalInterface.addCallback("navigateTo", setState);
 				
 				angularjs.fireFlashReady();
@@ -28,14 +29,26 @@
 				this.currentState = state;
 			}
 			
+			protected function talkToMe(message :String) :String {
+				this.message = message;
+				response = 'Hello! My name is ' + myName + '.';
+				
+				return response;
+			}
+			
+			[Bindable]
+			private var message :String = "";
+			
+			
 			[Bindable]
-			private var text :String = "";
+			private var response :String = "";
+			
+			[Bindable]
+			private var myName :String = "Flex";
 			
 			protected function button_clickHandler() :void {
-				text = "";
-				text += angularjs.call('talkToMe("Flex")');
-				text += " ";
-				text += angularjs.call('talkToMe(name)', { name: 'Again' });
+				message = 'Hello! My name is ' + myName + '. What is your name?';
+				response = angularjs.call('talkToMe(message)', { message: message });
 			}
 			
 		]]>
@@ -47,12 +60,29 @@
 		<s:State name="content2" />
 	</s:states>
 
-	<s:Group width="100%" height="100%" textAlign="center">
-		<s:VGroup includeIn="default" width="100%" height="100%">
-			<s:Button click="button_clickHandler()">Talk to AngularJS</s:Button>
-			<s:Label text="{text}" />
-		</s:VGroup>
-		<s:Label includeIn="content1">Content 1</s:Label>
-		<s:Label includeIn="content2">Content 2</s:Label>
-	</s:Group>
+	<s:VGroup paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5">
+		<s:HGroup paddingBottom="10">
+			<s:Label fontSize="18">Flash Content</s:Label>
+		</s:HGroup>
+		<s:Group width="100%" height="100%">
+			<s:VGroup includeIn="default" width="100%" height="100%">
+				<s:HGroup>
+					<s:FormItem label="My Name:">
+						<s:TextInput text="@{myName}" width="200" />
+					</s:FormItem>
+					<s:Button click="button_clickHandler()">Talk to AngularJS</s:Button>
+				</s:HGroup>
+
+				<s:Label>Message:</s:Label>
+				<s:Label text="{message}" />
+
+				<s:Label>Response:</s:Label>
+				<s:Label text="{response}" />
+			</s:VGroup>
+			<s:Label includeIn="content1">Content 1</s:Label>
+			<s:Label includeIn="content2">Content 2</s:Label>
+		</s:Group>
+	</s:VGroup>
+
+
 </s:Application>

test/index.html

@@ -4,66 +4,135 @@
     <script type="text/javascript" src="../bower_components/swfobject/swfobject/swfobject.js"></script>
     <script type="text/javascript" src="../src/js/w11k-flash.js"></script>
 
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="../dist/js/w11k-flash.css"/>
 
-    <style type="text/css">
-      body, div {
-        margin: 1em;
-      }
-
-      div.w11k-flash-container {
-        margin: 0;
-      }
-    </style>
-
     <script type="text/javascript">
       var module = angular.module('test', ['w11k.flash']);
 
       module.config(function (w11kFlashConfig) {
-        w11kFlashConfig.templateUrl = '../src/js/w11k-flash.html'
+        w11kFlashConfig.templateUrl = '../src/js/w11k-flash.tpl.html'
       });
 
       module.controller('TestCtrl', function ($scope) {
         $scope.flash = {
           visible: false,
           config: {
             swfUrl: '../bin-release/test.swf',
-            width: 300,
-            height: 100,
+            width: 600,
+            height: 180,
             callback: function (readyPromise) {
               $scope.flash.ready = readyPromise;
             }
           }
         };
 
+        $scope.nonFlash = {
+          style: {
+            height: $scope.flash.config.height + 'px'
+          }
+        };
+
         $scope.toggle = function () {
           $scope.flash.visible = !$scope.flash.visible;
         };
 
-        $scope.talkToMe = function (name) {
-          return 'Hello, ' + name + '! How are you?';
-        }
+        $scope.me = {
+          name: 'AngularJS'
+        };
+
+        $scope.talkToMe = function (message) {
+          $scope.message = message;
+          $scope.response = 'Hello! My name is ' + $scope.me.name + '.'
+
+          return $scope.response;
+        };
+
+        $scope.talkToFlex = function () {
+          if (angular.isDefined($scope.flash.ready)) {
+            $scope.flash.ready.then(function (flash) {
+              $scope.message = 'Hello! My name is ' + $scope.me.name + '. What is your name?';
+              // call exposed ActionScript function
+              $scope.response = flash.talkToMe($scope.message);
+            });
+          }
+        };
 
         $scope.navigateFlashTo = function (state) {
-          $scope.flash.ready.then(function (flash) {
-            // call exposed ActionScript function
-            flash.navigateTo(state);
-          });
+          if (angular.isDefined($scope.flash.ready)) {
+            $scope.flash.ready.then(function (flash) {
+              // call exposed ActionScript function
+              flash.navigateTo(state);
+            });
+          }
         };
       });
     </script>
 
   </head>
   <body ng-app="test" ng-controller="TestCtrl">
-    <div>
-      <button ng-click="toggle()">Toggle Flash Visible</button>
-      <button ng-click="navigateFlashTo('default')">Default Content</button>
-      <button ng-click="navigateFlashTo('content1')">Content 1</button>
-      <button ng-click="navigateFlashTo('content2')">Content 2</button>
+
+  <div class="jumbotron">
+    <div class="container">
+      <h1>w11k-flash - Test Page</h1>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="well">
+      <div class="row">
+        <div class="col-sm-4 col-md-3">
+          <div class="form-group">
+            <label>Toggle Flash Visibility</label><br>
+            <button class="btn btn-default" ng-click="toggle()">
+              <span ng-show="flash.visible">Hide</span>
+              <span ng-hide="flash.visible">Show</span>
+            </button>
+          </div>
+        </div>
+        <div class="col-sm-8 col-md-9">
+          <div class="form-group">
+            <label>Switch Flash Content</label><br/>
+            <div class="btn-group">
+              <button class="btn btn-default" ng-click="navigateFlashTo('default')">Conversation</button>
+              <button class="btn btn-default" ng-click="navigateFlashTo('content1')">Content 1</button>
+              <button class="btn btn-default" ng-click="navigateFlashTo('content2')">Content 2</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="well">
+      <div ng-hide="flash.visible" ng-style="nonFlash.style">
+        <h4>Non-Flash Content</h4>
+        Content rendered by AngularJS
+      </div>
+      <div w11k-flash="flash.config" w11k-flash-visible="flash.visible"></div>
+    </div>
+
+    <div class="well">
+      <div class="form-group">
+        <label for="me.name">My Name</label>
+        <div class="input-group">
+          <input type="text" class="form-control" id="me.name" ng-model="me.name" placeholder="Please enter your name" />
+          <span class="input-group-addon" ng-click="talkToFlex()">Talk to Flex</span>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label>Message</label>
+        <div>{{message}}</div>
+      </div>
+
+      <div class="form-group">
+        <label>Response</label>
+        <div>{{response}}</div>
+      </div>
     </div>
-    <div>Header</div>
-    <div ng-hide="flash.visible">No Flash Content</div>
-    <div w11k-flash="flash.config" w11k-flash-visible="flash.visible"></div>
-    <div>Footer</div>
+  </div>
+
+
+
   </body>
 </html>