Add a markdown input directive and convert both uses of the editor to the directive
This commit is contained in:
Joseph Schorr
parent
9beb627ab0
commit
fd68564b3f
6 changed files with 86 additions and 71 deletions
|
|
@ -649,9 +649,8 @@ p.editable {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
p.editable .content:empty:after {
|
||||
p.editable .empty {
|
||||
display: inline-block;
|
||||
content: "(Click to add)";
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
|
|
|
|||
31
static/directives/markdown-input.html
Normal file
31
static/directives/markdown-input.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<div class="markdown-input-container">
|
||||
<p ng-class="'lead ' + (canWrite ? 'editable' : 'noteditable')" ng-click="editContent()">
|
||||
<span class="markdown-view" content="content"></span>
|
||||
<span class="empty" ng-show="!content && canWrite">(Click to set {{ fieldTitle }})</span>
|
||||
<i class="fa fa-edit"></i>
|
||||
</p>
|
||||
|
||||
<!-- Modal editor -->
|
||||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Edit {{ fieldTitle }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="wmd-panel">
|
||||
<div id="wmd-button-bar-description-{{id}}"></div>
|
||||
<textarea class="wmd-input" id="wmd-input-description-{{id}}" placeholder="Enter {{ fieldTitle }}">{{ content }}</textarea>
|
||||
</div>
|
||||
|
||||
<div id="wmd-preview-description-{{id}}" class="wmd-panel wmd-preview"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="saveContent()">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div>
|
||||
|
|
@ -312,6 +312,54 @@ quayApp.directive('organizationHeader', function () {
|
|||
});
|
||||
|
||||
|
||||
quayApp.directive('markdownInput', function () {
|
||||
var counter = 0;
|
||||
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
templateUrl: '/static/directives/markdown-input.html',
|
||||
replace: false,
|
||||
transclude: false,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'content': '=content',
|
||||
'canWrite': '=canWrite',
|
||||
'contentChanged': '=contentChanged',
|
||||
'fieldTitle': '=fieldTitle'
|
||||
},
|
||||
controller: function($scope, $element) {
|
||||
var elm = $element[0];
|
||||
|
||||
$scope.id = (counter++);
|
||||
|
||||
$scope.editContent = function() {
|
||||
if (!$scope.canWrite) { return; }
|
||||
|
||||
if (!$scope.markdownDescriptionEditor) {
|
||||
var converter = Markdown.getSanitizingConverter();
|
||||
var editor = new Markdown.Editor(converter, '-description-' + $scope.id);
|
||||
editor.run();
|
||||
$scope.markdownDescriptionEditor = editor;
|
||||
}
|
||||
|
||||
$('#wmd-input-description-' + $scope.id)[0].value = $scope.content;
|
||||
$(elm).find('.modal').modal({});
|
||||
};
|
||||
|
||||
$scope.saveContent = function() {
|
||||
$scope.content = $('#wmd-input-description-' + $scope.id)[0].value;
|
||||
$(elm).find('.modal').modal('hide');
|
||||
|
||||
if ($scope.contentChanged) {
|
||||
$scope.contentChanged($scope.content);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
});
|
||||
|
||||
|
||||
quayApp.directive('entitySearch', function () {
|
||||
var number = 0;
|
||||
var directiveDefinitionObject = {
|
||||
|
|
|
|||
|
|
@ -248,23 +248,8 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $tim
|
|||
$scope.setTag($location.search().tag, false);
|
||||
});
|
||||
|
||||
$scope.editDescription = function() {
|
||||
if (!$scope.repo.can_write) { return; }
|
||||
|
||||
if (!$scope.markdownDescriptionEditor) {
|
||||
var converter = Markdown.getSanitizingConverter();
|
||||
var editor = new Markdown.Editor(converter, '-description');
|
||||
editor.run();
|
||||
$scope.markdownDescriptionEditor = editor;
|
||||
}
|
||||
|
||||
$('#wmd-input-description')[0].value = $scope.repo.description;
|
||||
$('#editModal').modal({});
|
||||
};
|
||||
|
||||
$scope.saveDescription = function() {
|
||||
$('#editModal').modal('hide');
|
||||
$scope.repo.description = $('#wmd-input-description')[0].value;
|
||||
$scope.updateForDescription = function(content) {
|
||||
$scope.repo.description = content;
|
||||
$scope.repo.put();
|
||||
};
|
||||
|
||||
|
|
@ -1003,23 +988,6 @@ function NewRepoCtrl($scope, $location, $http, $timeout, UserService, Restangula
|
|||
});
|
||||
};
|
||||
|
||||
$scope.editDescription = function() {
|
||||
if (!$scope.markdownDescriptionEditor) {
|
||||
var converter = Markdown.getSanitizingConverter();
|
||||
var editor = new Markdown.Editor(converter, '-description');
|
||||
editor.run();
|
||||
$scope.markdownDescriptionEditor = editor;
|
||||
}
|
||||
|
||||
$('#wmd-input-description')[0].value = $scope.repo.description;
|
||||
$('#editModal').modal({});
|
||||
};
|
||||
|
||||
$scope.saveDescription = function() {
|
||||
$('#editModal').modal('hide');
|
||||
$scope.repo.description = $('#wmd-input-description')[0].value;
|
||||
};
|
||||
|
||||
$scope.createNewRepo = function() {
|
||||
$('#repoName').popover('hide');
|
||||
|
||||
|
|
|
|||
|
|
@ -39,10 +39,8 @@
|
|||
|
||||
<div class="section">
|
||||
<strong>Description:</strong><br>
|
||||
<p class="description lead editable" ng-click="editDescription()">
|
||||
<span class="markdown-view content" content="repo.description"></span>
|
||||
<i class="fa fa-edit"></i>
|
||||
</p>
|
||||
<div class="description markdown-input" content="repo.description" can-write="true"
|
||||
field-title="'repository description'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,12 +52,8 @@
|
|||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="description">
|
||||
<p ng-class="'lead ' + (repo.can_write ? 'editable' : 'noteditable')" ng-click="editDescription()">
|
||||
<span class="markdown-view content" content="repo.description"></span>
|
||||
<i class="fa fa-edit"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="description markdown-input" content="repo.description" can-write="repo.can_write"
|
||||
content-changed="updateForDescription" field-title="'repository description'"></div>
|
||||
|
||||
<!-- Empty message -->
|
||||
<div class="repo-content" ng-show="!currentTag.image && !repo.is_building">
|
||||
|
|
@ -183,29 +179,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal edit for the description -->
|
||||
<div class="modal fade" id="editModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Edit Repository Description</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="wmd-panel">
|
||||
<div id="wmd-button-bar-description"></div>
|
||||
<textarea class="wmd-input" id="wmd-input-description" placeholder="Enter description">{{ repo.description }}</textarea>
|
||||
</div>
|
||||
|
||||
<div id="wmd-preview-description" class="wmd-panel wmd-preview"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="saveDescription()">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue