feat(texteditor sections plugin): create the responsive sections plugin

fixes CodeCorico/allons-y-wiki#15

features/texteditor/views/css/texteditor-content.less

@@ -20,6 +20,15 @@ body {
 
  .textEditorStyles();
 
+ .column,
+ .columns {
+ width: 100%;
+ float: left;
+ box-sizing: border-box;
+ border: 1px dashed #333;
+ border-radius: 3px;
+ }
+
  .mceCover {
  cursor: default;
  position: relative;
@@ -60,3 +69,70 @@ body {
  }
 }
 
+@media (min-width: 450px) {
+ .column,
+ .columns {
+ margin-left: 4%;
+ }
+ .column:first-child,
+ .columns:first-child {
+ margin-left: 0;
+ }
+ .one.column,
+ .one.columns, .two.columns, .three.columns {
+ width: 22%;
+ }
+ .four.columns, .five.columns, .six.columns {
+ width: 48%;
+ }
+ .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns {
+ width: 100%;
+ margin-left: 0;
+ }
+ .twelve.columns {
+ width: 100%;
+ margin-left: 0;
+ }
+}
+
+@media (min-width: 850px) {
+ .one.columns {
+ width: 4.66666666667%;
+ }
+
+ .two.columns {
+ width: 13.3333333333%;
+ }
+
+ .three.columns {
+ width: 22%;
+ }
+
+ .four.columns {
+ width: 30.6666666667%;
+ }
+
+ .five.columns {
+ width: 39.3333333333%;
+ }
+
+ .seven.columns {
+ width: 56.6666666667%;
+ }
+
+ .eight.columns {
+ width: 65.3333333333%;
+ }
+
+ .nine.columns {
+ width: 74.0%;
+ }
+
+ .ten.columns {
+ width: 82.6666666667%;
+ }
+
+ .eleven.columns {
+ width: 91.3333333333%;
+ }
+}

features/texteditor/views/less/texteditor-styles.less

@@ -12,6 +12,12 @@
 
 .textEditorStyles() {
 
+ .clear {
+ clear: both;
+ height: 0;
+ overflow: hidden;
+ }
+
  a {
  color: @accentColor;
  text-decoration: none;
@@ -124,6 +130,12 @@
  }
  }
 
+ th, td, .columns {
+ h1, h2, h3, h4, h5, h6 {
+ margin-top: 0;
+ }
+ }
+
  table thead td, table thead th {
  background: #FAFAFA;
  font-size: 1.7rem;
@@ -332,4 +344,13 @@
  color: #FA9792;
  }
  }
+
+ .row {
+ margin-top: 0.5rem;
+ }
+
+ .columns {
+ border: 1px solid transparent;
+ min-height: 2.5rem;
+ }
 }

features/texteditor/views/texteditor.js

@@ -47,7 +47,7 @@
  _focused = false,
  _dataPlugins = $data && $data.plugins || '',
  _toolbar = [
- 'undo redo | image cover media table templates | pagebreak hr charmap blockquote codesample fontawesome',
+ 'undo redo | image cover media table sections templates | pagebreak hr charmap blockquote codesample fontawesome',
  [
  'bold italic underline strikethrough | forecolor backcolor',
  ' | alignleft aligncenter alignright | bullist numlist outdent indent',
@@ -123,7 +123,7 @@
  '10rem': '-1.3rem'
  },
  plugins: [
- 'autoresize anchor hr paste link lists table image codesample prismlinenumbers templates',
+ 'autoresize anchor hr paste link lists table image codesample prismlinenumbers sections templates',
  'charmap textcolor colorpicker media fontawesome noneditable cover pagebreak',
  _dataPlugins
  ].join(' '),

features/texteditor/views/tinymce-plugins/sections/css/sections.css

@@ -0,0 +1,10 @@
+.mce-plugin-sections-section {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin: 0;
+ padding: 0.5rem;
+ border: 0;
+ background-repeat: no-repeat;
+ background-position: center center;
+}

features/texteditor/views/tinymce-plugins/sections/langs/en.js

@@ -0,0 +1,8 @@
+(function() {
+ 'use strict';
+
+ window.tinymce.addI18n('en', {
+ 'Sections': 'Sections'
+ });
+
+})();

features/texteditor/views/tinymce-plugins/sections/plugin.js

@@ -0,0 +1,81 @@
+(function() {
+ 'use strict';
+
+ var tinymce = window.tinymce;
+
+ tinymce.PluginManager.requireLangPack('sections');
+ tinymce.PluginManager.add('sections', function(editor, pluginUrl) {
+
+ var LAYOUTS = ['6-6', '4-4-4', '3-6-3', '3-9', '4-8', '9-3', '8-4'],
+
+ _ = tinymce.util.I18n.translate,
+ _addedCss = false,
+ _numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'];
+
+ function _insertSection(layout) {
+ // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
+
+ var html = ['<div class="row" id="__mcenew">'];
+
+ layout.split('-').forEach(function(number, i) {
+ html.push('<div class="' + _numbers[parseInt(number, 10)] + ' columns' + '">column ' + (i + 1) + '</div>');
+ });
+
+ html.push('<div class="clear"></div>');
+ html.push('</div>');
+
+ editor.insertContent(html.join(''));
+
+ var section = editor.dom.get('__mcenew');
+ editor.dom.setAttrib(section, 'id', null);
+
+ while (!editor.dom.is(section.parentNode, 'body')) {
+ editor.dom.insertAfter(section, section.parentNode);
+ }
+
+ editor.selection.select($(section).find('div')[0]);
+ }
+
+ editor.addContextToolbar(
+ function(element) {
+ if (!editor.getBody().contains(element) || !tinymce.dom.DomQuery(element).hasClass('row')) {
+ return false;
+ }
+
+ return true;
+ },
+ 'backcolor'
+ );
+
+ editor.addButton('sections', {
+ type: 'menubutton',
+ tooltip: _('Responsive sections'),
+ icon: 'none fa fa-pause',
+ menu: LAYOUTS.map(function(layout) {
+ return {
+ classes: 'plugin-sections-section',
+ style: 'background-image: url(\'' + pluginUrl + '/resources/' + layout + '.png\')',
+ onclick: function() {
+ _insertSection(layout);
+ }
+ };
+ })
+ });
+
+ editor.on('init', function() {
+ var linkElm;
+
+ if (!_addedCss) {
+ _addedCss = true;
+
+ var linkElm = editor.dom.create('link', {
+ rel: 'stylesheet',
+ href: pluginUrl + '/css/sections.css'
+ });
+
+ document.getElementsByTagName('head')[0].appendChild(linkElm);
+ }
+ });
+ });
+
+})();

features/texteditor/views/tinymce-plugins/textcolor/plugin.js

@@ -167,18 +167,48 @@ tinymce.PluginManager.add('textcolor', function(editor) {
  return html;
  }
 
+ function getRow(format) {
+ if (format == 'hilitecolor') {
+ var row = tinymce.dom.DomQuery(editor.selection.getNode()).parents('.row');
+
+ if (row.length) {
+ return row[0];
+ }
+ }
+
+ return false;
+ }
+
  function applyFormat(format, value) {
  editor.undoManager.transact(function() {
  editor.focus();
- editor.formatter.apply(format, {value: value});
+
+ var row = getRow(format);
+
+ if (row) {
+ editor.dom.setAttrib(row, 'style', 'background-color: ' + value + ';');
+ }
+ else {
+ editor.formatter.apply(format, {value: value});
+ }
+
  editor.nodeChanged();
  });
  }
 
  function removeFormat(format) {
  editor.undoManager.transact(function() {
  editor.focus();
- editor.formatter.remove(format, {value: null}, null, true);
+
+ var row = getRow(format);
+
+ if (row) {
+ editor.dom.setAttrib(row, 'style', '');
+ }
+ else {
+ editor.formatter.remove(format, {value: null}, null, true);
+ }
+
  editor.nodeChanged();
  });
  }