Skip to content

Commit

Permalink
initial setup and synced different views
Browse files Browse the repository at this point in the history
  • Loading branch information
Blake Callens committed May 3, 2015
1 parent cffa69f commit f93ae9e
Show file tree
Hide file tree
Showing 7 changed files with 192 additions and 145 deletions.
42 changes: 42 additions & 0 deletions plugins/pencilblue/controllers/admin/elements/wysiwyg.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
Copyright (C) 2015 PencilBlue, LLC
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

module.exports = function WysiwygModule(pb) {

//pb dependencies
var util = pb.util;

/**
* Route controller for the wysiwyg AngularJS directive.
* @class WysiwygController
* @constructor
*/
function WysiwygController(){}
util.inherits(WysiwygController, pb.BaseController);

/**
* @see BaseController#render
*/
WysiwygController.prototype.render = function(cb) {
this.ts.load('admin/elements/wysiwyg_directive', function(error, result) {
cb({content: result});
});
};

//exports
return WysiwygController;
};
8 changes: 8 additions & 0 deletions plugins/pencilblue/include/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -997,6 +997,14 @@ module.exports = function Routes(pb){
auth_required: false,
controller: path.join(pb.config.docRoot, 'plugins', 'pencilblue', 'controllers', 'api', 'localization_controller.js'),
content_type: 'text/javascript'
},
{
method: 'get',
path: "/admin/elements/wysiwyg",
access_level: pb.SecurityService.ACCESS_WRITER,
auth_required: true,
controller: path.join(pb.config.docRoot, 'plugins', 'pencilblue', 'controllers', 'admin', 'elements', 'wysiwyg.js'),
content_type: 'text/javascript'
}
];
};
4 changes: 1 addition & 3 deletions plugins/pencilblue/templates/admin/content/articles/article_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,7 @@
</div>
<div class="form-group" ng-class="{'has-error': !isWysiwygValid('#article_wysiwyg')}">
<label>^loc_CONTENT^&nbsp;<span ng-bind="columnInches"></span></label>
<div id="article_wysiwyg">
^wysiwyg^
</div>
^tmp_admin=elements=wysiwyg^
<div class="form_error" ng-if="!isWysiwygValid('#article_wysiwyg')" style="margin-top: -1em">^loc_REQUIRED_FIELD^</div>
</div>
</div>
Expand Down
142 changes: 1 addition & 141 deletions plugins/pencilblue/templates/admin/elements/wysiwyg.html
100755 → 100644
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,3 @@
<div id="wysiwyg_^wys_id^" class="wysiwyg">
<div class="wysiwyg_buttons well well-sm" style="margin-bottom: 0">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="text_type_name">^loc_NORMAL_TEXT^</span>&nbsp;<i class="fa fa-chevron-down"></i>
</button>
<ul class="dropdown-menu" id="format_type_dropdown" role="menu">
<li><a href="#" onclick="formatBlock('^wys_id^', 'div', '^loc_NORMAL_TEXT^')" data-format-type="div">^loc_NORMAL_TEXT^</a></li>
<li><a href="#" onclick="formatBlock('^wys_id^', 'blockquote', '^loc_QUOTE^')" data-format-type="blockquote">^loc_QUOTE^</a></li>
<li><a href="#" onclick="formatBlock('^wys_id^', 'h1', '^loc_HEADING_1^')" data-format-type="h1">^loc_HEADING_1^</a></li>
<li><a href="#" onclick="formatBlock('^wys_id^', 'h2', '^loc_HEADING_2^')" data-format-type="h2">^loc_HEADING_2^</a></li>
<li><a href="#" onclick="formatBlock('^wys_id^', 'h3', '^loc_HEADING_3^')" data-format-type="h3">^loc_HEADING_3^</a></li>
<li><a href="#" onclick="formatBlock('^wys_id^', 'h4', '^loc_HEADING_4^')" data-format-type="h4">^loc_HEADING_4^</a></li>
<li><a href="#" onclick="formatBlock('^wys_id^', 'h5', '^loc_HEADING_5^')" data-format-type="h5">^loc_HEADING_5^</a></li>
<li><a href="#" onclick="formatBlock('^wys_id^', 'h6', '^loc_HEADING_6^')" data-format-type="h6">^loc_HEADING_6^</a></li>
</ul>
</div>
<div class="btn-group btn-group-sm btn-group-format">
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'bold')" data-format-type="bold" title="^loc_BOLD^"><i class="fa fa-bold"></i></button>
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'italic')" data-format-type="italic" title="^loc_ITALIC^"><i class="fa fa-italic"></i></button>
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'underline')" data-format-type="underline" title="^loc_UNDERLINE^"><i class="fa fa-underline"></i></button>
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'strikeThrough')" data-format-type="strikethrough" title="^loc_STRIKETHROUGH^"><i class="fa fa-strikethrough"></i></button>
<!--<button id="clear_button" type="button" class="btn btn-default" onclick="clearAllLayoutStyles()" title="^loc_CLEAR_STYLES^"><i class="fa fa-ban"></i></button>-->
</div>
<div class="btn-group btn-group-sm btn-group-format" data-toggle="buttons">
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'justifyleft')" data-format-type="justifyleft" title="^loc_ALIGN_LEFT^"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'justifycenter')" data-format-type="justifycenter" title="^loc_ALIGN_CENTER^"><i class="fa fa-align-center"></i></button>
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'justifyright')" data-format-type="justifyright" title="^loc_ALIGN_RIGHT^"><i class="fa fa-align-right"></i></button>
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'justifyfull')" data-format-type="justifyfull" title="^loc_JUSTIFY^"><i class="fa fa-align-justify"></i></button>
</div>
<div class="btn-group btn-group-sm btn-group-format">
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'insertorderedlist')" data-format-type="insertorderedlist" title="^loc_ORDERED_LIST^"><i class="fa fa-list-ol"></i></button>
<button type="button" class="btn btn-default" onclick="toolbarAction('^wys_id^', 'insertunorderedlist')" data-format-type="insertunorderedlist" title="^loc_UNORDERED_LIST^"><i class="fa fa-list-ul"></i></button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default editable_button" onclick="showContentLayoutModal('^wys_id^', 'add_layout_link')" title="^loc_INSERT_LINK^"><i class="fa fa-link"></i></button>
<button type="button" id="media_button" class="btn btn-default editable_button" onclick="showContentLayoutModal('^wys_id^', 'add_layout_media')" title="^loc_INSERT_MEDIA^" ng-if="!hideMediaButton"><i class="fa fa-picture-o"></i></button>
<button type="button" class="btn btn-default editable_button" onclick="insertReadMore('^wys_id^')" title="^loc_INSERT_READ_MORE^"><i class="fa fa-compress"></i></button>
</div>
<div class="btn-group btn-group-sm one_active">
<button type="button" class="btn btn-default active" onclick="showLayoutView('^wys_id^', 'editable')" title="^loc_WYSIWYG_VIEW^"><i class="fa fa-pencil-square-o"></i></button>
<button type="button" class="btn btn-default" onclick="showLayoutView('^wys_id^', 'code')" title="^loc_HTML_VIEW^"><i class="fa fa-code"></i></button>
<button type="button" class="btn btn-default" onclick="showLayoutView('^wys_id^', 'markdown')" title="^loc_MARKDOWN_VIEW^"><i class="fa fa-dot-circle-o"></i></button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default" data-toggle="button" onclick="toggleLayoutFullscreen('^wys_id^')" title="^loc_TOGGLE_FULLSCREEN^"><i class="fa fa-arrows-alt"></i></button>
</div>
</div>
</div>
<div class="content_layout form-control">
<div class="layout_editable" onkeyup="onLayoutEditableChanged('^wys_id^')" onmouseup="saveSelection('^wys_id^')" onmouseout="saveSelection('^wys_id^')" ng-bind-html="layout" contenteditable></div>
<textarea class="layout_code" style="display: none" onkeyup="onLayoutCodeChanged('^wys_id^')"></textarea>
<textarea class="layout_markdown" style="display: none" onkeyup="onLayoutMarkdownChanged('^wys_id^')"></textarea>
</div>
</div>

<div class="modal fade" id="wysiwyg_modal_^wys_id^">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="add_layout_link">^loc_ADD_LINK^</span>
<span class="add_layout_media">^loc_ADD_MEDIA^</span>
</div>
<div class="modal-body">
<span class="add_layout_link">
<div class="form-group">
<label>^loc_LINK_URL^</label>
<input type="text" id="layout_link_url" name="layout_link_url" class="form-control"></input>
</div>
<div class="form-group">
<label>^loc_LINK_TEXT^</label>
<input type="text" id="layout_link_text" name="layout_link_text" class="form-control"></input>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="link_in_tab">^loc_LINK_IN_TAB^
</label>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">
<i class="fa fa-ban"></i>&nbsp;^loc_CANCEL^
</button>
<button id="add_link_button" type="button" class="btn btn-success" onclick="window.open($('#layout_link_url').val(), '_blank')">
<i class="fa fa-eye"></i>&nbsp;^loc_TEST_LINK^
</button>
<button id="add_link_button" type="button" class="btn btn-primary" onclick="addLayoutLink('^wys_id^')">
<i class="fa fa-plus"></i>&nbsp;^loc_INSERT_LINK^
</button>
</span>
<span class="add_layout_media">
<label>^loc_SELECT_MEDIA^</label>
<div id="layout_media_options"></div>
<div id="layout_media_format" style="display: none; margin-bottom: .5em">
<label>^loc_MEDIA_FORMATTING^</label><br/>
<div id="media_position_radio" class="btn-group" data-toggle="buttons" style="margin-bottom: .5em">
<label class="btn btn-primary active">
<i class="fa fa-ban"></i>&nbsp;
<input type="radio" name="media_position" id="none">^loc_NONE^
</label>
<label class="btn btn-primary">
<i class="fa fa-align-left"></i>&nbsp;
<input type="radio" name="media_position" id="left">^loc_LEFT^
</label>
<label class="btn btn-primary">
<i class="fa fa-align-center"></i>&nbsp;
<input type="radio" name="media_position" id="center">^loc_CENTER^
</label>
<label class="btn btn-primary">
<i class="fa fa-align-right"></i>&nbsp;
<input type="radio" name="media_position" id="right">^loc_RIGHT^
</label>
</div>
<div class="spacer"></div>
<label>^loc_MAXIMUM_HEIGHT^</label>
<div class="input-group">
<input type="number" id="media_max_height" name="media_max_height" class="form-control"></input>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span id="media_max_height_unit">px</span>&nbsp;<span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:setMediaMaxHeightUnit('px')">px</a></li>
<li><a href="javascript:setMediaMaxHeightUnit('em')">em</a></li>
<li><a href="javascript:setMediaMaxHeightUnit('%')">%</a></li>
</ul>
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">
<i class="fa fa-ban"></i>&nbsp;^loc_CANCEL^
</button>
<button id="add_link_button" type="button" class="btn btn-primary" onclick="addLayoutMedia('^wys_id^')">
<i class="fa fa-plus"></i>&nbsp;^loc_INSERT_MEDIA^
</button>
</span>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="^he_src^"></script>
<wysiwyg layout="layout"></wysiwyg>
<script type="text/javascript" src="^to_markdown_src^"></script>
<script type="text/javascript" src="^markdown_src^"></script>
<script type="text/javascript" src="/js/admin/elements/wysiwyg.js"></script>
65 changes: 65 additions & 0 deletions plugins/pencilblue/templates/admin/elements/wysiwyg_directive.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<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">
<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>
</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>
</ul>
</div>

<div class="btn-group btn-group-sm btn-group-format">
<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">
<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>
</div>

<div class="btn-group btn-group-sm btn-group-format">
<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>

<div class="btn-group btn-group-sm btn-group-format">
<button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.fullscreen}" ng-click="toggleLayoutFullscreen()" title="^loc_TOGGLE_FULLSCREEN^"><i class="fa fa-arrows-alt"></i></button>
</div>
</div>
</div>

<div class="content_layout form-control">
<div class="layout_editable" ng-show="wysiwyg.currentView === 'editable'" ng-model="wysiwyg.layout" 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>
</div>
Loading

0 comments on commit f93ae9e

Please sign in to comment.