3665

pending completion

Build # 3665

Build Type

push

travis-ci

Committed by

web-flow

Commit Message

Merge pull request #3322 from summernote/fix-lite-styles

Remove duplicated codes and fix lite styles

Run Details

1032 of 1840 branches covered (56.09%)

4 of 4 new or added lines in 2 files covered. (100.0%)

4607 of 5860 relevant lines covered (78.62%)

500.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.76

/src/js/bs3/ui.js

import $ from 'jquery';
import renderer from '../base/renderer';

const editor = renderer.create('<div class="note-editor note-frame panel panel-default"/>');
const toolbar = renderer.create('<div class="note-toolbar panel-heading" role="toolbar"></div></div>');
const editingArea = renderer.create('<div class="note-editing-area"/>');
const codable = renderer.create('<textarea class="note-codable" role="textbox" aria-multiline="true"/>');
const editable = renderer.create('<div class="note-editable" contentEditable="true" role="textbox" aria-multiline="true"/>');
const statusbar = renderer.create([
  '<output class="note-status-output" aria-live="polite"/>',
  '<div class="note-statusbar" role="status">',
  '  <div class="note-resizebar" role="seperator" aria-orientation="horizontal" aria-label="Resize">',
  '    <div class="note-icon-bar"/>',
  '    <div class="note-icon-bar"/>',
  '    <div class="note-icon-bar"/>',
  '  </div>',
  '</div>',
].join(''));

const airEditor = renderer.create('<div class="note-editor"/>');
const airEditable = renderer.create([
  '<div class="note-editable" contentEditable="true" role="textbox" aria-multiline="true"/>',
  '<output class="note-status-output" aria-live="polite"/>',
].join(''));

const buttonGroup = renderer.create('<div class="note-btn-group btn-group">');

const dropdown = renderer.create('<ul class="note-dropdown-menu dropdown-menu" role="list">', function($node, options) {
  const markup = Array.isArray(options.items) ? options.items.map(function(item) {
    const value = (typeof item === 'string') ? item : (item.value || '');
    const content = options.template ? options.template(item) : item;
    const option = (typeof item === 'object') ? item.option : undefined;

    const dataValue = 'data-value="' + value + '"';
    const dataOption = (option !== undefined) ? ' data-option="' + option + '"' : '';
    return '<li role="listitem" aria-label="' + value + '"><a href="#" ' + (dataValue + dataOption) + '>' + content + '</a></li>';
  }).join('') : options.items;

  $node.html(markup).attr({ 'aria-label': options.title });
});

const dropdownButtonContents = function(contents, options) {
  return contents + ' ' + icon(options.icons.caret, 'span');
};

const dropdownCheck = renderer.create('<ul class="note-dropdown-menu dropdown-menu note-check" role="list">', function($node, options) {
  const markup = Array.isArray(options.items) ? options.items.map(function(item) {
    const value = (typeof item === 'string') ? item : (item.value || '');
    const content = options.template ? options.template(item) : item;
    return '<li role="listitem" aria-label="' + item + '"><a href="#" data-value="' + value + '">' + icon(options.checkClassName) + ' ' + content + '</a></li>';
  }).join('') : options.items;
  $node.html(markup).attr({ 'aria-label': options.title });
});

const palette = renderer.create('<div class="note-color-palette"/>', function($node, options) {
  const contents = [];
  for (let row = 0, rowSize = options.colors.length; row < rowSize; row++) {
    const eventName = options.eventName;
    const colors = options.colors[row];
    const colorsName = options.colorsName[row];
    const buttons = [];
    for (let col = 0, colSize = colors.length; col < colSize; col++) {
      const color = colors[col];
      const colorName = colorsName[col];
      buttons.push([
        '<button type="button" class="note-color-btn"',
        'style="background-color:', color, '" ',
        'data-event="', eventName, '" ',
        'data-value="', color, '" ',
        'title="', colorName, '" ',
        'aria-label="', colorName, '" ',
        'data-toggle="button" tabindex="-1"></button>',
      ].join(''));
    }
    contents.push('<div class="note-color-row">' + buttons.join('') + '</div>');
  }
  $node.html(contents.join(''));

  if (options.tooltip) {
    $node.find('.note-color-btn').tooltip({
      container: options.container,
      trigger: 'hover',
      placement: 'bottom',
    });
  }
});

const dialog = renderer.create('<div class="modal" aria-hidden="false" tabindex="-1" role="dialog"/>', function($node, options) {
  if (options.fade) {
    $node.addClass('fade');
  }
  $node.attr({
    'aria-label': options.title,
  });
  $node.html([
    '<div class="modal-dialog">',
    '  <div class="modal-content">',
    (options.title
      ? '    <div class="modal-header">' +
    '      <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>' +
    '      <h4 class="modal-title">' + options.title + '</h4>' +
    '    </div>' : ''
    ),
    '    <div class="modal-body">' + options.body + '</div>',
    (options.footer
      ? '    <div class="modal-footer">' + options.footer + '</div>' : ''
    ),
    '  </div>',
    '</div>',
  ].join(''));
});

const popover = renderer.create([
  '<div class="note-popover popover in">',
  '  <div class="arrow"/>',
  '  <div class="popover-content note-children-container"/>',
  '</div>',
].join(''), function($node, options) {
  const direction = typeof options.direction !== 'undefined' ? options.direction : 'bottom';

  $node.addClass(direction);

  if (options.hideArrow) {
    $node.find('.arrow').hide();
  }
});

const checkbox = renderer.create('<div class="checkbox"></div>', function($node, options) {
  $node.html([
    '<label' + (options.id ? ' for="' + options.id + '"' : '') + '>',
    ' <input role="checkbox" type="checkbox"' + (options.id ? ' id="' + options.id + '"' : ''),
    (options.checked ? ' checked' : ''),
    ' aria-checked="' + (options.checked ? 'true' : 'false') + '"/>',
    (options.text ? options.text : ''),
    '</label>',
  ].join(''));
});

const icon = function(iconClassName, tagName) {
  tagName = tagName || 'i';
  return '<' + tagName + ' class="' + iconClassName + '"/>';
};
const ui = {
  editor: editor,
  toolbar: toolbar,
  editingArea: editingArea,
  codable: codable,
  editable: editable,
  statusbar: statusbar,
  airEditor: airEditor,
  airEditable: airEditable,
  buttonGroup: buttonGroup,
  dropdown: dropdown,
  dropdownButtonContents: dropdownButtonContents,
  dropdownCheck: dropdownCheck,
  palette: palette,
  dialog: dialog,
  popover: popover,
  checkbox: checkbox,
  icon: icon,
  options: {},

  button: function($node, options) {
    return renderer.create('<button type="button" class="note-btn btn btn-default btn-sm" role="button" tabindex="-1">', function($node, options) {
      if (options && options.tooltip) {
        $node.attr({
          title: options.tooltip,
          'aria-label': options.tooltip,
        }).tooltip({
          container: (options.container !== undefined) ? options.container : 'body',
          trigger: 'hover',
          placement: 'bottom',
        }).on('click', (e) => {
          $(e.currentTarget).tooltip('hide');
        });
      }
    })($node, options);
  },

  toggleBtn: function($btn, isEnable) {
    $btn.toggleClass('disabled', !isEnable);
    $btn.attr('disabled', !isEnable);
  },

  toggleBtnActive: function($btn, isActive) {
    $btn.toggleClass('active', isActive);
  },

  onDialogShown: function($dialog, handler) {
    $dialog.one('shown.bs.modal', handler);
  },

  onDialogHidden: function($dialog, handler) {
    $dialog.one('hidden.bs.modal', handler);
  },

  showDialog: function($dialog) {
    $dialog.modal('show');
  },

  hideDialog: function($dialog) {
    $dialog.modal('hide');
  },

  createLayout: function($note, options) {
    const $editor = (options.airMode ? ui.airEditor([
      ui.editingArea([
        ui.airEditable(),
      ]),
    ]) : ui.editor([
      ui.toolbar(),
      ui.editingArea([
        ui.codable(),
        ui.editable(),
      ]),
      ui.statusbar(),
    ])).render();

    $editor.insertAfter($note);

    return {
      note: $note,
      editor: $editor,
      toolbar: $editor.find('.note-toolbar'),
      editingArea: $editor.find('.note-editing-area'),
      editable: $editor.find('.note-editable'),
      codable: $editor.find('.note-codable'),
      statusbar: $editor.find('.note-statusbar'),
    };
  },

  removeLayout: function($note, layoutInfo) {
    $note.html(layoutInfo.editable.html());
    layoutInfo.editor.remove();
    $note.show();
  },
};

export default ui;

1	import $ from 'jquery';	5✔
2	import renderer from '../base/renderer';	×
3		×
4	const editor = renderer.create('<div class="note-editor note-frame panel panel-default"/>');	×
5	const toolbar = renderer.create('<div class="note-toolbar panel-heading" role="toolbar"></div></div>');	×
6	const editingArea = renderer.create('<div class="note-editing-area"/>');	×
7	const codable = renderer.create('<textarea class="note-codable" role="textbox" aria-multiline="true"/>');	×
8	const editable = renderer.create('<div class="note-editable" contentEditable="true" role="textbox" aria-multiline="true"/>');	×
9	const statusbar = renderer.create([	×
10	'<output class="note-status-output" aria-live="polite"/>',	×
11	'<div class="note-statusbar" role="status">',
12	' <div class="note-resizebar" role="seperator" aria-orientation="horizontal" aria-label="Resize">',
13	' <div class="note-icon-bar"/>',
14	' <div class="note-icon-bar"/>',
15	' <div class="note-icon-bar"/>',
16	' </div>',
17	'</div>',
18	].join(''));
19
20	const airEditor = renderer.create('<div class="note-editor"/>');	×
21	const airEditable = renderer.create([	×
22	'<div class="note-editable" contentEditable="true" role="textbox" aria-multiline="true"/>',
23	'<output class="note-status-output" aria-live="polite"/>',
24	].join(''));
25		×
26	const buttonGroup = renderer.create('<div class="note-btn-group btn-group">');	×
27		×
28	const dropdown = renderer.create('<ul class="note-dropdown-menu dropdown-menu" role="list">', function($node, options) {	×
29	const markup = Array.isArray(options.items) ? options.items.map(function(item) {	×
30	const value = (typeof item === 'string') ? item : (item.value \|\| '');	×
31	const content = options.template ? options.template(item) : item;	×
32	const option = (typeof item === 'object') ? item.option : undefined;	×
33		×
34	const dataValue = 'data-value="' + value + '"';
35	const dataOption = (option !== undefined) ? ' data-option="' + option + '"' : '';	×
36	return '<li role="listitem" aria-label="' + value + '"><a href="#" ' + (dataValue + dataOption) + '>' + content + '</a></li>';
37	}).join('') : options.items;	×
38		×
39	$node.html(markup).attr({ 'aria-label': options.title });
40	});	×
41		×
42	const dropdownButtonContents = function(contents, options) {	×
43	return contents + ' ' + icon(options.icons.caret, 'span');	×
44	};	×
45
46	const dropdownCheck = renderer.create('<ul class="note-dropdown-menu dropdown-menu note-check" role="list">', function($node, options) {	×
47	const markup = Array.isArray(options.items) ? options.items.map(function(item) {
48	const value = (typeof item === 'string') ? item : (item.value \|\| '');	×
49	const content = options.template ? options.template(item) : item;	×
50	return '<li role="listitem" aria-label="' + item + '"><a href="#" data-value="' + value + '">' + icon(options.checkClassName) + ' ' + content + '</a></li>';	×
51	}).join('') : options.items;	×
52	$node.html(markup).attr({ 'aria-label': options.title });	×
53	});	×
54		×
55	const palette = renderer.create('<div class="note-color-palette"/>', function($node, options) {	×
56	const contents = [];	×
57	for (let row = 0, rowSize = options.colors.length; row < rowSize; row++) {	×
58	const eventName = options.eventName;	×
59	const colors = options.colors[row];
60	const colorsName = options.colorsName[row];
61	const buttons = [];
62	for (let col = 0, colSize = colors.length; col < colSize; col++) {
63	const color = colors[col];
64	const colorName = colorsName[col];
65	buttons.push([
66	'<button type="button" class="note-color-btn"',
67	'style="background-color:', color, '" ',
68	'data-event="', eventName, '" ',	×
69	'data-value="', color, '" ',
70	'title="', colorName, '" ',	×
71	'aria-label="', colorName, '" ',	×
72	'data-toggle="button" tabindex="-1"></button>',	×
73	].join(''));
74	}
75	contents.push('<div class="note-color-row">' + buttons.join('') + '</div>');
76	}
77	$node.html(contents.join(''));
78
79	if (options.tooltip) {	×
80	$node.find('.note-color-btn').tooltip({	×
81	container: options.container,	×
82	trigger: 'hover',
83	placement: 'bottom',	×
84	});
85	}
86	});	×
87
88	const dialog = renderer.create('<div class="modal" aria-hidden="false" tabindex="-1" role="dialog"/>', function($node, options) {
89	if (options.fade) {	×
90	$node.addClass('fade');
91	}
92	$node.attr({
93	'aria-label': options.title,
94	});
95	$node.html([	×
96	'<div class="modal-dialog">',
97	' <div class="modal-content">',
98	(options.title
99	? ' <div class="modal-header">' +
100	' <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</button>' +
101	' <h4 class="modal-title">' + options.title + '</h4>' +	×
102	' </div>' : ''
103	),
104	' <div class="modal-body">' + options.body + '</div>',
105	(options.footer
106	? ' <div class="modal-footer">' + options.footer + '</div>' : ''
107	),	×
108	' </div>',	×
109	'</div>',	×
110	].join(''));	×
111	});
112
113	const popover = renderer.create([	×
114	'<div class="note-popover popover in">',	×
115	' <div class="arrow"/>',	×
116	' <div class="popover-content note-children-container"/>',	×
117	'</div>',	×
118	].join(''), function($node, options) {	×
119	const direction = typeof options.direction !== 'undefined' ? options.direction : 'bottom';	×
120
121	$node.addClass(direction);
122
123	if (options.hideArrow) {	×
124	$node.find('.arrow').hide();	×
125	}	×
126	});
127		×
128	const checkbox = renderer.create('<div class="checkbox"></div>', function($node, options) {
129	$node.html([
130	'<label' + (options.id ? ' for="' + options.id + '"' : '') + '>',
131	' <input role="checkbox" type="checkbox"' + (options.id ? ' id="' + options.id + '"' : ''),
132	(options.checked ? ' checked' : ''),
133	' aria-checked="' + (options.checked ? 'true' : 'false') + '"/>',
134	(options.text ? options.text : ''),
135	'</label>',
136	].join(''));
137	});
138
139	const icon = function(iconClassName, tagName) {
140	tagName = tagName \|\| 'i';
141	return '<' + tagName + ' class="' + iconClassName + '"/>';
142	};
143	const ui = {
144	editor: editor,
145	toolbar: toolbar,
146	editingArea: editingArea,
147	codable: codable,	×
148	editable: editable,	×
149	statusbar: statusbar,	×
150	airEditor: airEditor,
151	airEditable: airEditable,
152	buttonGroup: buttonGroup,
153	dropdown: dropdown,	×
154	dropdownButtonContents: dropdownButtonContents,
155	dropdownCheck: dropdownCheck,
156	palette: palette,
157	dialog: dialog,	×
158	popover: popover,
159	checkbox: checkbox,
160	icon: icon,
161	options: {},
162
163	button: function($node, options) {	×
164	return renderer.create('<button type="button" class="note-btn btn btn-default btn-sm" role="button" tabindex="-1">', function($node, options) {	×
165	if (options && options.tooltip) {
166	$node.attr({
167	title: options.tooltip,	×
168	'aria-label': options.tooltip,
169	}).tooltip({
170	container: (options.container !== undefined) ? options.container : 'body',	×
171	trigger: 'hover',
172	placement: 'bottom',
173	}).on('click', (e) => {	×
174	$(e.currentTarget).tooltip('hide');
175	});
176	}	×
177	})($node, options);
178	},
179		×
180	toggleBtn: function($btn, isEnable) {
181	$btn.toggleClass('disabled', !isEnable);
182	$btn.attr('disabled', !isEnable);	×
183	},
184
185	toggleBtnActive: function($btn, isActive) {
186	$btn.toggleClass('active', isActive);
187	},
188
189	onDialogShown: function($dialog, handler) {
190	$dialog.one('shown.bs.modal', handler);
191	},
192
193	onDialogHidden: function($dialog, handler) {
194	$dialog.one('hidden.bs.modal', handler);	×
195	},	×
196
197	showDialog: function($dialog) {
198	$dialog.modal('show');
199	},
200
201	hideDialog: function($dialog) {
202	$dialog.modal('hide');
203	},
204
205	createLayout: function($note, options) {
206	const $editor = (options.airMode ? ui.airEditor([	×
207	ui.editingArea([	×
208	ui.airEditable(),	×
209	]),
210	]) : ui.editor([
211	ui.toolbar(),	×
212	ui.editingArea([
213	ui.codable(),
214	ui.editable(),
215	]),
216	ui.statusbar(),
217	])).render();
218
219	$editor.insertAfter($note);
220
221	return {
222	note: $note,
223	editor: $editor,
224	toolbar: $editor.find('.note-toolbar'),
225	editingArea: $editor.find('.note-editing-area'),
226	editable: $editor.find('.note-editable'),
227	codable: $editor.find('.note-codable'),
228	statusbar: $editor.find('.note-statusbar'),
229	};
230	},
231
232	removeLayout: function($note, layoutInfo) {
233	$note.html(layoutInfo.editable.html());
234	layoutInfo.editor.remove();
235	$note.show();
236	},
237	};
238
239	export default ui;

summernote / summernote / 3665

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous