Skip to content

Commit

Permalink
wysiwyg basic styling complete
Browse files Browse the repository at this point in the history
  • Loading branch information
Blake Callens committed May 13, 2015
1 parent baaa33f commit b4f9747
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 29 deletions.
45 changes: 19 additions & 26 deletions plugins/pencilblue/templates/admin/elements/wysiwyg_directive.html
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,47 @@
<div>
<div class="wysiwyg_buttons well well-sm" style="margin-bottom: 0">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm btn-group-format">
<button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.currentView === 'editable'}" ng-click="setLayoutView('editable')" title="^loc_WYSIWYG_VIEW^"><i class="fa fa-pencil-square-o"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.currentView === 'html'}" ng-click="setLayoutView('html')" title="^loc_HTML_VIEW^"><i class="fa fa-code"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.currentView === 'markdown'}" ng-click="setLayoutView('markdown')" title="^loc_MARKDOWN_VIEW^"><i class="fa fa-dot-circle-o"></i></button>
</div>

<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-sm" ng-show="wysiwyg.currentView === 'editable'">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="text_type_name" ng-bind="wysiwyg.currentElement.name"></span>&nbsp;<i class="fa fa-chevron-down"></i>
<span class="text_type_name" ng-bind="getCurrentElement().name"></span>&nbsp;<i class="fa fa-chevron-down"></i>
</button>
<ul class="dropdown-menu" id="format_type_dropdown" role="menu">
<li><a href="#" ng-click="setElement('p')">^loc_NORMAL_TEXT^</a></li>
<li><a href="#" ng-click="setElement('blockquote')">^loc_QUOTE^</a></li>
<li><a href="#" ng-click="setElement('pre')">^loc_PRE^</a></li>
<li><a href="#" ng-click="setElement('h1')">^loc_HEADING_1^</a></li>
<li><a href="#" ng-click="setElement('h2')">^loc_HEADING_2^</a></li>
<li><a href="#" ng-click="setElement('h3')">^loc_HEADING_3^</a></li>
<li><a href="#" ng-click="setElement('h4')">^loc_HEADING_4^</a></li>
<li><a href="#" ng-click="setElement('h5')">^loc_HEADING_5^</a></li>
<li><a href="#" ng-click="setElement('h6')">^loc_HEADING_6^</a></li>
<li ng-repeat="element in availableElements">
<a href="#" ng-click="setElement(element.type)" ng-bind="element.name"></a>
</li>
</ul>
</div>

<div class="btn-group btn-group-sm btn-group-format">
<div class="btn-group btn-group-sm btn-group-format" ng-show="wysiwyg.currentView === 'editable'">
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('bold')}" ng-click="formatAction('bold')" title="^loc_BOLD^"><i class="fa fa-bold"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('italic')}" ng-click="formatAction('italic')" title="^loc_ITALIC^"><i class="fa fa-italic"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('underline')}" ng-click="formatAction('underline')" title="^loc_UNDERLINE^"><i class="fa fa-underline"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('strikeThrough')}" ng-click="formatAction('strikeThrough')" title="^loc_STRIKETHROUGH^"><i class="fa fa-strikethrough"></i></button>
<button type="button" class="btn btn-default" ng-click="clearStyles()" title="^loc_CLEAR_STYLES^"><i class="fa fa-ban"></i></button>
</div>

<div class="btn-group btn-group-sm btn-group-format">
<div class="btn-group btn-group-sm btn-group-format" ng-show="wysiwyg.currentView === 'editable'">
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('justifyleft')}" ng-click="formatAction('justifyleft')" title="^loc_ALIGN_LEFT^"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('justifycenter')}" ng-click="formatAction('justifycenter')" title="^loc_ALIGN_CENTER^"><i class="fa fa-align-center"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('justifyright')}" ng-click="formatAction('justifyright')" title="^loc_ALIGN_RIGHT^"><i class="fa fa-align-right"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('justifyfull')}" ng-click="formatAction('justifyfull')" title="^loc_JUSTIFY^"><i class="fa fa-justify"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('justifyfull')}" ng-click="formatAction('justifyfull')" title="^loc_JUSTIFY^"><i class="fa fa-align-justify"></i></button>
</div>

<div class="btn-group btn-group-sm btn-group-format">
<div class="btn-group btn-group-sm btn-group-format" ng-show="wysiwyg.currentView === 'editable'">
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('insertorderedlist')}" ng-click="formatAction('insertorderedlist')" title="^loc_ORDERED_LIST^"><i class="fa fa-list-ol"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': isFormatActive('insertunorderedlist')}" ng-click="formatAction('insertunorderedlist')" title="^loc_UNORDERED_LIST^"><i class="fa fa-list-ul"></i></button>
</div>

<div class="btn-group btn-group-sm btn-group-format">
<button type="button" class="btn btn-default" ng-click="showInsertLinkModal()" title="^loc_INSERT_LINK^" ng-disabled="wysiwyg.currentView !== 'editable'"><i class="fa fa-link"></i></button>
<button type="button" class="btn btn-default" ng-click="showInsertMediaModal()" title="^loc_INSERT_MEDIA^" ng-if="!wysiwyg.hideMediaButton" ng-disabled="wysiwyg.currentView !== 'editable'"><i class="fa fa-picture-o"></i></button>
<button type="button" class="btn btn-default" ng-click="insertReadMore()" title="^loc_INSERT_READ_MORE^" ng-disabled="wysiwyg.currentView !== 'editable'"><i class="fa fa-compress"></i></button>
</div>

<div class="btn-group btn-group-sm btn-group-format">
<button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.currentView === 'editable'}" ng-click="setLayoutView('editable')" title="^loc_WYSIWYG_VIEW^"><i class="fa fa-pencil-square-o"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.currentView === 'html'}" ng-click="setLayoutView('html')" title="^loc_HTML_VIEW^"><i class="fa fa-code"></i></button>
<button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.currentView === 'markdown'}" ng-click="setLayoutView('markdown')" title="^loc_MARKDOWN_VIEW^"><i class="fa fa-dot-circle-o"></i></button>
<div class="btn-group btn-group-sm btn-group-format" ng-show="wysiwyg.currentView === 'editable'">
<button type="button" class="btn btn-default" ng-click="showInsertLinkModal()" title="^loc_INSERT_LINK^"><i class="fa fa-link"></i></button>
<button type="button" class="btn btn-default" ng-click="showInsertMediaModal()" title="^loc_INSERT_MEDIA^" ng-if="!wysiwyg.hideMediaButton"><i class="fa fa-picture-o"></i></button>
<button type="button" class="btn btn-default" ng-click="insertReadMore()" title="^loc_INSERT_READ_MORE^"><i class="fa fa-compress"></i></button>
</div>

<div class="btn-group btn-group-sm btn-group-format">
Expand All @@ -58,7 +51,7 @@
</div>

<div class="content_layout form-control">
<div class="layout_editable" ng-show="wysiwyg.currentView === 'editable'" ng-model="wysiwyg.layout" contenteditable></div>
<div class="layout_editable" ng-show="wysiwyg.currentView === 'editable'" ng-model="wysiwyg.layout" stylewithcss="false" contenteditable></div>
<textarea class="layout_code" ng-show="wysiwyg.currentView === 'html'" ng-model="wysiwyg.layout"></textarea>
<textarea class="layout_markdown" ng-show="wysiwyg.currentView === 'markdown'" ng-model="wysiwyg.markdown"></textarea>
</div>
Expand Down
69 changes: 66 additions & 3 deletions public/js/angular/directives/wysiwyg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,78 @@
markdown: toMarkdown(scope.layout ? scope.layout.toString() : '')
};

scope.availableElements = [{
name: loc.wysiwyg.NORMAL_TEXT,
type: 'p'
}, {
name: loc.wysiwyg.QUOTE,
type: 'blockquote'
}, {
name: loc.wysiwyg.PRE,
type: 'pre'
}, {
name: loc.wysiwyg.HEADING_1,
type: 'h1'
}, {
name: loc.wysiwyg.HEADING_2,
type: 'h2'
}, {
name: loc.wysiwyg.HEADING_3,
type: 'h3'
}, {
name: loc.wysiwyg.HEADING_4,
type: 'h4'
}, {
name: loc.wysiwyg.HEADING_5,
type: 'h5'
}, {
name: loc.wysiwyg.HEADING_6,
type: 'h6'
}];

scope.setLayoutView = function(view) {
scope.wysiwyg.currentView = view;
};

scope.setElement = function(type) {
scope.formatAction('formatblock', type);
scope.getCurrentElement();
};

scope.getCurrentElement = function() {
var block = $document[0].queryCommandValue('formatblock');

for(var i = 0; i < scope.availableElements.length; i++) {
if(scope.availableElements[i].type === block) {
return scope.availableElements[i];
}
}

return scope.availableElements[0];
}

scope.formatAction = function(action, arguments) {
console.log(action);
if(scope.wysiwyg.currentView !== 'editable') {
return;
}

$document[0].execCommand(action, false, arguments);
};

scope.isFormatActive = function(type) {
return $document[0].queryCommandState(type)
}

scope.$watch('wysiwyg.layout', function(newVal, oldVal) {
if(scope.wysiwyg.currentView !== 'layout') {
if(scope.wysiwyg.currentView !== 'editable') {
return;
}

// Remove crappy line-height spans in Chrome
editableDiv.find('span').each(function() {
angular.element(this).css('line-height', '');
});

if(newVal !== oldVal) {
scope.wysiwyg.markdown = toMarkdown(newVal);
}
Expand All @@ -48,8 +105,14 @@
var editableDiv = angular.element(element).find('[contenteditable]');
var range = rangy.createRange();
editableDiv.on('mouseup', function(event) {
if(!scope.wysiwyg.layout.length) {
scope.setElement(loc.wysiwyg.NORMAL_TEXT, 'p');
}

scope.$apply();

range.selectNodeContents(editableDiv[0]);
console.log(rangy.getSelection());
scope.editableRange = rangy.getSelection();
});
}
};
Expand Down
1 change: 1 addition & 0 deletions public/localization/de-de.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@ var loc = {
wysiwyg: {
NORMAL_TEXT: 'Normaler Text',
QUOTE: 'Zitat',
PRE: 'Code',
HEADING_1: 'Überschrift 1',
HEADING_2: 'Überschrift 2',
HEADING_3: 'Überschrift 3',
Expand Down
1 change: 1 addition & 0 deletions public/localization/en-us.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,7 @@ var loc =
wysiwyg: {
NORMAL_TEXT: 'Normal text',
QUOTE: 'Quote',
PRE: 'Code',
HEADING_1: 'Heading 1',
HEADING_2: 'Heading 2',
HEADING_3: 'Heading 3',
Expand Down
1 change: 1 addition & 0 deletions public/localization/es-es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,7 @@ var loc =
wysiwyg: {
NORMAL_TEXT: 'Texto normal',
QUOTE: 'Cita',
PRE: 'Code',
HEADING_1: 'Encabezado 1',
HEADING_2: 'Encabezado 2',
HEADING_3: 'Encabezado 3',
Expand Down
1 change: 1 addition & 0 deletions public/localization/pl-pl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,7 @@ var loc =
wysiwyg: {
NORMAL_TEXT: 'Normalny tekst',
QUOTE: 'Cytat',
PRE: 'Code',
HEADING_1: 'Nagłowek 1',
HEADING_2: 'Nagłowek 2',
HEADING_3: 'Nagłowek 3',
Expand Down
1 change: 1 addition & 0 deletions public/localization/ro-ro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,7 @@ var loc =
wysiwyg: {
NORMAL_TEXT: 'Text normal',
QUOTE: 'Citat',
PRE: 'Code',
HEADING_1: 'Heading 1',
HEADING_2: 'Heading 2',
HEADING_3: 'Heading 3',
Expand Down

0 comments on commit b4f9747

Please sign in to comment.