Use '__mobiledoc-' prefix for element class names

* editor className 'ck-editor' -> '__mobiledoc-editor' * card element class name 'ck-card' -> '__mobiledoc-card' * tooltip class name 'ck-tooltip' -> '__mobiledoc-tooltip'
bustle · Nov 24, 2015 · 10eb490 · 10eb490
1 parent 5c890e2
commit 10eb490
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 20 deletions.
diff --git a/src/css/cards.less b/src/css/cards.less
@@ -1,3 +1,3 @@
-.ck-card {
+.__mobiledoc-card {
   display: inline-block;
 }
diff --git a/src/css/editor.less b/src/css/editor.less
@@ -6,7 +6,7 @@
 @themeColor     : rgb(62, 163, 255);
 @themeColorText : darken(@themeColor, 10%);
 
-.ck-editor {
+.__mobiledoc-editor {
   font-family: 'Lora', Georgia, serif;
   margin: 1em 0;
   color: #454545;
@@ -18,39 +18,39 @@
   font-size: 120%;
   line-height: 160%;
 }
-.ck-editor:focus {
+.__mobiledoc-editor:focus {
   outline: none;
 }
-.ck-editor:empty:before {
+.__mobiledoc-editor:empty:before {
   content: attr(data-placeholder);
   color: #bbb;
   cursor: text;
 }
-.ck-editor > * {
+.__mobiledoc-editor > * {
   position: relative;
 }
-.ck-editor a {
+.__mobiledoc-editor a {
   color: @themeColorText;
 }
-.ck-editor {
+.__mobiledoc-editor {
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-weight: 800;
     letter-spacing: -0.02em;
   }
 }
-.ck-editor blockquote {
+.__mobiledoc-editor blockquote {
   border-left: 4px solid @themeColorText;
   margin: 1em 0 1em -1.2em;
   padding-left: 1.05em;
   color: #a0a0a0;
 }
-.ck-editor img {
+.__mobiledoc-editor img {
   display: block;
   max-width: 100%;
   margin: 0 auto;
 }
-.ck-editor div,
-.ck-editor iframe {
+.__mobiledoc-editor div,
+.__mobiledoc-editor iframe {
   max-width: 100%;
 }
diff --git a/src/css/tooltip.less b/src/css/tooltip.less
@@ -11,7 +11,7 @@
   100% { opacity: 1; }
 }
 
-.ck-tooltip {
+.__mobiledoc-tooltip {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.7em;
   white-space: nowrap;
@@ -24,7 +24,7 @@
   -webkit-animation: fade-in 0.2s;
           animation: fade-in 0.2s;
 }
-.ck-tooltip:before {
+.__mobiledoc-tooltip:before {
   content: '';
   position: absolute;
   left: 50%;
@@ -36,18 +36,18 @@
   top: -0.4em;
   margin-left: -0.4em;
 }
-.ck-tooltip:after { /* help keeps mouseover state when moving from link to tooltip */
+.__mobiledoc-tooltip:after { /* help keeps mouseover state when moving from link to tooltip */
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: -0.4em;
   height: 0.4em; 
 }
-.ck-tooltip a {
+.__mobiledoc-tooltip a {
   color: #FFF;
   text-decoration: none;
 }
-.ck-tooltip a:hover {
+.__mobiledoc-tooltip a:hover {
   text-decoration: underline;
 }
diff --git a/src/js/editor/editor.js b/src/js/editor/editor.js
@@ -37,7 +37,7 @@ import {
 } from '../utils/paste-utils';
 import { DIRECTION } from 'mobiledoc-kit/utils/key';
 
-export const EDITOR_ELEMENT_CLASS_NAME = 'ck-editor';
+export const EDITOR_ELEMENT_CLASS_NAME = '__mobiledoc-editor';
 
 const ELEMENT_EVENTS = ['keydown', 'keyup', 'input', 'cut', 'copy', 'paste'];
 const DOCUMENT_EVENTS= ['mouseup'];

diff --git a/src/js/renderers/editor-dom.js b/src/js/renderers/editor-dom.js
@@ -14,6 +14,7 @@ import { addClassName } from '../utils/dom-utils';
 import { MARKUP_SECTION_ELEMENT_NAMES } from '../models/markup-section';
 import assert from '../utils/assert';
 
+const CARD_ELEMENT_CLASS_NAME = '__mobiledoc-card';
 export const NO_BREAK_SPACE = '\u00A0';
 export const SPACE = ' ';
 
@@ -85,7 +86,7 @@ function renderCard() {
   let wrapper = document.createElement('div');
   let cardElement = document.createElement('div');
   cardElement.contentEditable = false;
-  addClassName(cardElement, 'ck-card');
+  addClassName(cardElement, CARD_ELEMENT_CLASS_NAME);
   wrapper.appendChild(document.createTextNode('\u200c'));
   wrapper.appendChild(cardElement);
   wrapper.appendChild(document.createTextNode('\u200c'));

diff --git a/src/js/views/tooltip.js b/src/js/views/tooltip.js
@@ -7,7 +7,7 @@ export default class Tooltip extends View {
   constructor(options) {
     let { rootElement } = options;
     let timeout;
-    options.classNames = ['ck-tooltip'];
+    options.classNames = ['__mobiledoc-tooltip'];
     super(options);
 
     this.addEventListener(rootElement, 'mouseover', (e) => {

diff --git a/tests/unit/renderers/editor-dom-test.js b/tests/unit/renderers/editor-dom-test.js
@@ -189,7 +189,7 @@ test('renders a card section', (assert) => {
 
   // Use a wrapper an innerHTML to satisfy different browser attribute
   // ordering quirks
-  let expectedWrapper = $(`<div>${ZWNJ}<div contenteditable="false" class="ck-card">I am a card</div>${ZWNJ}</div>`);
+  let expectedWrapper = $(`<div>${ZWNJ}<div contenteditable="false" class="__mobiledoc-card">I am a card</div>${ZWNJ}</div>`);
   assert.equal(renderTree.rootElement.firstChild.innerHTML,
                expectedWrapper.html(),
               'card is rendered');