diff --git a/README.md b/README.md index c95bc86..52e2647 100644 --- a/README.md +++ b/README.md @@ -26,11 +26,23 @@ To get up and running simply... 3. Bind the events on the `document` with `grande.init()` 4. You are set! +### Included files + There are two CSS files that come with the included demo: - `editor.css`: this file provides the style for the `contenteditable` elements on the page - `menu.css`: this file provides the toolbar styling to appear as it does below +## Options to grande.bind + +The `bind` function currently accepts two parameters: bindableNodes and an options list. + +The calling code can pass in a `NodeList` as the first parameter that will bind to these elements and enable `contentEditable` on them, if nothing is passed in it defaults to elements that match the selector `.g-body article`. + +The second parameter is an `options` object that accepts the following keys: + +- `animate`: if true, this will trigger the CSS animations (defaults to true). Useful to turn to false if `subpixel-antialised` is needed in Safari. + ![image](http://f.cl.ly/items/0O1M1R1g2w1P213C0S3Z/Screen%20Shot%202013-08-21%20at%2011.53.55%20PM.png) The following tag stylings are available: ``, ``, `

`, `

`, `
`, ``, `
    `, `
      `, `
      ` @@ -44,3 +56,4 @@ Roadmap ------- - Images (figure) - execCommand to support `` and `` +- CSS animations to match the `pop-upwards` on Medium diff --git a/css/editor.css b/css/editor.css index 8a9780e..2137650 100644 --- a/css/editor.css +++ b/css/editor.css @@ -2,91 +2,82 @@ font-family: medium-icons; src: url("fonts/medium-icons.woff"); } - -body { +.g-body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - font-family: Georgia, serif; - min-width: 750px; - width: 100%; - color: #333332; - padding-top: 50px; -} - -.g-body h1, -.g-body p, -.g-body blockquote, -.g-body ol, -.g-body ul { - margin-bottom: 15px; -} - -.g-body article { - outline-style: none; -} - -/* Override webkit's
      default */ -.g-body h1 { - font-size: 2em; } - .g-body header { font-weight: bold; font-size: 52px; } - .g-body section { max-width: 750px; margin: auto; } - -.g-body blockquote { +.g-body article { + outline-style: none; + font-size: 16px; +} +.g-body header { + font-weight: bold; + font-size: 52px; +} +.g-body article h1, +.g-body article p, +.g-body article blockquote, +.g-body article ol, +.g-body article ul { + margin-bottom: 15px; +} +.g-body article h1 { + /* Override webkit's
      default */ + font-size: 32px; +} +.g-body article h2 { + font-size: 24px; +} +.g-body article blockquote { font-weight: 400; font-style: italic; border-left: 6px solid #60d778; padding-left: 20px; margin-left: -26px; } - -.g-body a { +.g-body article a { text-decoration: underline; - color: #333332; + color: inherit; } - -.g-body ol, .g-body ul { +.g-body article ol, +.g-body article ul { list-style: none; list-style-image: none; margin-left: 0; margin-top: 0; padding-left: 0; } - -.g-body ol li:before, -.g-body ul li:before { +.g-body article ol li:before, +.g-body article ul li:before { width: 30px; display: inline-block; } - -.g-body ol { +.g-body article ol { counter-reset: post; } - -.g-body ol li:before { +.g-body article ol li:before { font-weight: bold; counter-increment: post; content: counter(post) "."; } - -.g-body ul li:before { +.g-body article ul li:before { font-family: "medium-icons"; content: "\e028"; text-decoration: none; font-size: 14px; } - -.g-body hr { +.g-body article hr { display: block; width: 20%; margin: 30px auto 20px auto; - border: 1px solid #dededc; -} + border-top: 1px solid #dededc; + border-bottom: 1px solid #dededc; +} \ No newline at end of file diff --git a/css/menu.css b/css/menu.css index a9451a6..a1a1ce5 100644 --- a/css/menu.css +++ b/css/menu.css @@ -60,43 +60,32 @@ } } -.g-body .text-menu { +.text-menu { -webkit-transition: opacity 180ms, margin 180ms; -ms-transition: opacity 180ms, margin 180ms; transition: opacity 180ms, margin 180ms; - position: absolute; - color: #fff; + color: #ffffff; margin-top: -20px; margin-left: -115px; } -.g-body .text-menu.active { +.text-menu.active { -webkit-animation:pop-upwards 180ms forwards linear; -ms-animation:pop-upwards 180ms forwards linear; animation:pop-upwards 180ms forwards linear; } -.url { - font-size: 16px !important; - font-family: 'icomoon' !important; -} - .text-menu.hide { left: -999px; top: -999px; } - .text-menu.fade { opacity: 0; margin-top: -5px; } -.text-menu .active { - color: #60d778; -} - -.text-menu button { +.text-menu .options button { -webkit-transition: opacity 400ms; -ms-transition: opacity 400ms; transition: opacity 400ms; @@ -107,10 +96,12 @@ font-size: 16px; color: inherit; padding: 0px; - height: 32px; - width: 25px; + height: 30px; + width: 28px; border: 0px; outline: none; + float: left; + margin-right: 1px; -webkit-touch-callout: none; -webkit-user-select: none; @@ -120,7 +111,7 @@ user-select: none; } -.options { +.text-menu .options { background-color: #262625; box-shadow: 0 0 2px #262625; position: absolute; @@ -131,55 +122,41 @@ padding: 5px 4px 5px 5px; width: 176px; height: 33px; - -webkit-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } -.options.url-mode { +.text-menu .options.url-mode { width: 176px; } - -.options.url-mode .header1, -.options.url-mode .header2, -.options.url-mode .bold, -.options.url-mode .italic, -.options.url-mode .quote, -.options.url-mode .url { +.text-menu .options.url-mode .header1, +.text-menu .options.url-mode .header2, +.text-menu .options.url-mode .bold, +.text-menu .options.url-mode .italic, +.text-menu .options.url-mode .quote, +.text-menu .options.url-mode .url { width: 0px; overflow: hidden; margin-right: 0px; opacity: 0; } -.options .italic { - font-style: italic; +.text-menu .options button.active { + color: #60d778; } - -.options .quote { - line-height: 54px !important; - font-size: 41px !important; +.text-menu .options button.url { + font-size: 16px; + font-family: 'icomoon'; } - -.options button { - float: left; - width: 28px; - height: 30px; - border-radius: 3px; - margin-right: 1px; +.text-menu .options button.italic { + font-style: italic; } - -.options.url-mode input{ - border-left: 2px solid transparent; - padding-right: 5px; - padding-left: 5px; - width: 155px; - background: transparent; - color: #fff; +.text-menu .options button.quote { + line-height: 54px; + font-size: 41px; } - -.options input { +.text-menu .options input { border-radius: 3px; overflow: hidden; outline: 0px; @@ -187,13 +164,33 @@ padding: 0px; margin: 0px; border: 0px; + font-size: 12px; float: left; width: 0px; + background: transparent; + color: #ffffff; + -webkit-transition: none; + -ms-transition: none; + transition: none; } - -.options:before { +.text-menu .options.url-mode input { + border-left: 2px solid transparent; + padding-right: 5px; + padding-left: 5px; + width: 155px; +} +.text-menu .options input:hover, +.text-menu .options input:focus { + -webkit-box-shadow: none; + -khtml-box-shadow: none; + -moz-box-shadow: none; + -ms-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} +.text-menu .options:before { content: ""; - border-top: 5px solid rgba(0,0,0,0.9); + border-top: 5px solid #262625; border-bottom: 5px solid transparent; border-right: 5px solid transparent; border-left: 5px solid transparent; diff --git a/index.html b/index.html index 65c7d92..72aef5f 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,18 @@ grande.js - + diff --git a/js/grande.js b/js/grande.js index 1b515b3..14e9cc9 100644 --- a/js/grande.js +++ b/js/grande.js @@ -5,13 +5,16 @@ document = this.document, // Safely store a document here for us to use editableNodes = document.querySelectorAll(".g-body article"), isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1, + options = { + animate: true + }, textMenu, optionsNode, urlInput, previouslySelectedText, grande = { - bind: function(bindableNodes) { + bind: function(bindableNodes, opts) { if (bindableNodes) { editableNodes = bindableNodes; } @@ -19,6 +22,8 @@ attachToolbarTemplate(); bindTextSelectionEvents(); bindTextStylingEvents(); + + options = opts || options; }, select: function() { triggerTextSelection(); @@ -434,10 +439,12 @@ textMenu.style.top = top + "px"; textMenu.style.left = left + "px"; - if (top === EDGE) { - textMenu.className = "text-menu hide"; - } else { - textMenu.className = "text-menu active"; + if (options.animate) { + if (top === EDGE) { + textMenu.className = "text-menu hide"; + } else { + textMenu.className = "text-menu active"; + } } }