Skip to content
This repository has been archived by the owner on Aug 6, 2018. It is now read-only.

Commit

Permalink
Fix non-initialized angular app when adding matrix field
Browse files Browse the repository at this point in the history 
Rewrite how anguilar app initialization occurs, making it more robust,
more crafty and smaller
  • Loading branch information
@nervetattoo
nervetattoo committed Jan 16, 2015
1 parent 0f490f4 commit d6ad69c
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 36 deletions.
7 changes: 3 additions & 4 deletions fieldtypes/Mediaflow_MediaFieldType.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 0 additions & 10 deletions resources/bootstrap.js
View file

This file was deleted.

3 changes: 0 additions & 3 deletions resources/mediaflow-ng.js
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
15 changes: 10 additions & 5 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -101,6 +103,9 @@
</div>
</div>
</div>

{% endraw %}

{% includeJsResource "mediaflow/angularjs-file-upload.js" %}
{% includeJsResource "mediaflow/mediaflow-ng.js" %}
{% includeCssResource "mediaflow/style.css" %}
Expand Down
26 changes: 12 additions & 14 deletions templates/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 %}

0 comments on commit d6ad69c

Please sign in to comment.