From d6ad69c23d6f5ca545b248333b113ef2d41e5e0e Mon Sep 17 00:00:00 2001
From: Raymond Julin <raymond.julin@gmail.com>
Date: Fri, 16 Jan 2015 11:15:57 +0100
Subject: [PATCH] Fix non-initialized angular app when adding matrix field

Rewrite how anguilar app initialization occurs, making it more robust,
more crafty and smaller
---
 fieldtypes/Mediaflow_MediaFieldType.php |  7 +++----
 resources/bootstrap.js                  | 10 ----------
 resources/mediaflow-ng.js               |  3 ---
 templates/index.html                    | 15 +++++++++-----
 templates/input.html                    | 26 ++++++++++++-------------
 5 files changed, 25 insertions(+), 36 deletions(-)
 delete mode 100644 resources/bootstrap.js

diff --git a/fieldtypes/Mediaflow_MediaFieldType.php b/fieldtypes/Mediaflow_MediaFieldType.php
index 4c6c1f6..c5175b3 100644
--- a/fieldtypes/Mediaflow_MediaFieldType.php
+++ b/fieldtypes/Mediaflow_MediaFieldType.php
@@ -10,12 +10,11 @@ public function getName()
 
     public function getInputHtml($name, $value)
     {
-        $id = craft()->templates->formatInputId($name);
-        $class = get_class($this->element);
-        $inMatrix = $class === 'Craft\Mediaflow_MediaFieldType';
+        $id = craft()->templates->namespaceInputId($name);
+        $js = "angular.bootstrap(document.querySelector('#{$id}-field .mediaflow-app'), ['mediaflow']);";
+        craft()->templates->includeJs($js);
         $emptyDefaults = array('id' => null);
         return craft()->templates->render('mediaflow/input', array(
-            'inMatrix' => $inMatrix,
             'id' => $id,
             'name'  => $name,
             'value' => $value ? $value->getAttributes() : $emptyDefaults,
diff --git a/resources/bootstrap.js b/resources/bootstrap.js
deleted file mode 100644
index d6c505b..0000000
--- a/resources/bootstrap.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function mediaflowBootstrap() {
-    var elems = document.querySelectorAll('.mediaflow-app');
-    var l = elems.length, i;
-    for (i = 0; i < l; i++) {
-        elems[i].classList.remove('mediaflow-app');
-        angular.bootstrap(elems[i], ['mediaflow']);
-    }
-};
-
-(function() { mediaflowBootstrap(); })();
diff --git a/resources/mediaflow-ng.js b/resources/mediaflow-ng.js
index 343a5c9..9d9cf48 100644
--- a/resources/mediaflow-ng.js
+++ b/resources/mediaflow-ng.js
@@ -1,7 +1,4 @@
 var mediaflow = angular.module('mediaflow', ['angularFileUpload']);
-mediaflow.config(function ($interpolateProvider) {
-    $interpolateProvider.startSymbol('[[').endSymbol(']]');
-});
 
 mediaflow.filter('sizeConverter', function () {
     return function (size, precision) {
diff --git a/templates/index.html b/templates/index.html
index f86b25b..f0a27af 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -33,6 +33,8 @@
 {% endset %}
 
 {% set content %}
+
+{% raw %}
 <div ng-app="mediaflow" ng-controller="MediaFlowCtrl">
     <div ng-hide="connection" class="error ng-cloak">Failed to connect to Mediaflow using current settings</div>
     <div class="elementindex" ng-show="connection" ng-controller="MediaFlowBrowseCtrl">
@@ -74,12 +76,12 @@
                         <tr ng-repeat="medium in media|filter:searchText">
                             <td scope="row">
                                 <div class="element hasthumb">
-                                    <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="[[medium.thumb]]" />
-                                    <div class="label"><span class="title">[[medium.name]]</span>
+                                    <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="{{medium.thumb}}" />
+                                    <div class="label"><span class="title">{{medium.name}}</span>
                                     </div>
                                 </div>
                             </td>
-                            <td data-title="Size">[[medium.file.size|sizeConverter]]</td>
+                            <td data-title="Size">{{medium.file.size|sizeConverter}}</td>
                         </tr>
                         </tbody>
                     </table>
@@ -90,8 +92,8 @@
                 <ul class="thumbsview">
                     <li ng-repeat="medium in media|filter:searchText">
                         <div class="element hasthumb">
-                            <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="[[medium.thumb]]" />
-                            <div class="label"><span class="title">[[medium.name]]</span>
+                            <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="{{medium.thumb}}" />
+                            <div class="label"><span class="title">{{medium.name}}</span>
                             </div>
                         </div>
                     </li>
@@ -101,6 +103,9 @@
         </div>
     </div>
 </div>
+
+{% endraw %}
+
 {% includeJsResource "mediaflow/angularjs-file-upload.js" %}
 {% includeJsResource "mediaflow/mediaflow-ng.js" %}
 {% includeCssResource "mediaflow/style.css" %}
diff --git a/templates/input.html b/templates/input.html
index 108b4b4..94239a8 100644
--- a/templates/input.html
+++ b/templates/input.html
@@ -3,31 +3,32 @@
         Failed to connect to Mediaflow using current settings
     </div>
     <div ng-show="connection" ng-controller="MediaFlowFieldCtrl">
+        {% raw %}
         <div class="mediaflow-preview clearafter" ng-show="selected.id">
             <div class="thumb">
-                <img ng-src="[[selected.thumb]]">
+                <img ng-src="{{selected.thumb}}">
             </div>
                 <table class="mediaflow-meta">
                     <tbody>
                         <tr>
                             <th>Name</th>
-                            <td>[[selected.name]]</td>
+                            <td>{{selected.name}}</td>
                         </tr>
                         <tr>
                             <th>Width</th>
-                            <td>[[selected.file.width]]</td>
+                            <td>{{selected.file.width}}</td>
                         </tr>
                         <tr>
                             <th>Height</th>
-                            <td>[[selected.file.height]]</td>
+                            <td>{{selected.file.height}}</td>
                         </tr>
                         <tr ng-show="selected.uploaded">
                             <th>Uploaded</th>
-                            <td>[[selected.uploaded|date:'short']]</td>
+                            <td>{{selected.uploaded|date:'short'}}</td>
                         </tr>
                         <tr>
                             <th>Size</th>
-                            <td>[[selected.file.size|sizeConverter]]</td>
+                            <td>{{selected.file.size|sizeConverter}}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -68,24 +69,21 @@
                 <ul>
                     <li ng-repeat="medium in media">
                         <img ng-show="medium.isImage"
-                            ng-src="[[medium.thumb]]"
+                            ng-src="{{medium.thumb}}"
                             ng-click="select(medium)"
                         >
                     </li>
                 </ul>
             </div>
         </div>
+        {% endraw %}
         <div ng-init="selected={{value|json_encode()}}"></div>
-        <input type="hidden" value="[[selected|json]]" name="{{name}}" />
+        <input type="hidden"
+            {% raw %}value="{{selected|json}}"{% endraw %}
+            name="{{name}}" />
     </div>
 </div>
 {% includeJsResource "mediaflow/angular.min.js" %}
 {% includeJsResource "mediaflow/angularjs-file-upload.js" %}
 {% includeJsResource "mediaflow/mediaflow-ng.js" %}
-{% includeJsResource "mediaflow/bootstrap.js" %}
 {% includeCssResource "mediaflow/style.css" %}
-{% if inMatrix %}
-<script>
-    mediaflowBootstrap();
-</script>
-{% endif %}