Permalink
Browse files

Proper.

  • Loading branch information...
0 parents commit 159cf98c6c4d5955a5795df1827da985b337f663 michael committed Dec 7, 2010
Showing with 488 additions and 0 deletions.
  1. +22 −0 LICENSE
  2. +14 −0 README.md
  3. +44 −0 index.html
  4. +166 −0 lib/jquery-1.4.3.min.js
  5. +135 −0 proper.js
  6. +43 −0 stylesheets/page.css
  7. +64 −0 stylesheets/proper.css
22 LICENSE
@@ -0,0 +1,22 @@
+Copyright (c) 2010 Michael Aufreiter, Quasipartikel.at
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,14 @@
+PROPER™ — Semantic Texteditor
+==================
+
+PROPER is a Semantic Texteditor based on HTML's `contenteditable` attribute. It's being developed in the context of [Substance](http://github.com/michael/substance), a data driven document authoring engine.
+
+The goal is to output proper semantic HTML by restricting the set of possible tags. We'll implement a sanitizer in order to guarantee valid output as browsers tend to mess up the markup.
+
+
+This is a work in progress ...
+
+
+![Screenshot](http://quasipartikel.at/proper/proper.png)
+
+
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>PROPER&trade; - Semantic Richtext Editor</title>
+
+ <!-- Styles -->
+ <link href="stylesheets/page.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="stylesheets/proper.css" media="screen" rel="stylesheet" type="text/css" />
+
+ <!-- Libraries -->
+ <script src="lib/jquery-1.4.3.min.js"></script>
+
+ <!-- Source -->
+ <script src="proper.js"></script>
+
+ <script>
+ // Proper Init
+ $(function() {
+ var editor = new Proper({
+ elements: '.content'
+ });
+ });
+ </script>
+
+</head>
+<body>
+ <h1>PROPER&trade; - Semantic Text Editor</h1>
+
+ <div class="content">
+ <p>Text wants to be <b>editable</b>.<br/>But text also wants to be <b>meaningful</b>.</p>
+ </div>
+
+ <div class="content">
+ <p>Even more content, ready to be edited.</p>
+ </div>
+
+ <div class="credits">
+ Straight from the labs of <a href="http://quasipartikel.at">Quaspartikel</a>
+ and <a href="http://gestaltungsbureau.at/">Gestaltungsbureau</a>.
+ </div>
+
+ <a href="http://github.com/michael/proper"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://assets2.github.com/img/71eeaab9d563c2b3c590319b398dd35683265e85?repo=&url=http%3A%2F%2Fs3.amazonaws.com%2Fgithub%2Fribbons%2Fforkme_right_gray_6d6d6d.png&path=" alt="Fork me on GitHub"></a>
+</body>
+</html>

Large diffs are not rendered by default.

Oops, something went wrong.
135 proper.js
@@ -0,0 +1,135 @@
+// (c) 2010 Michael Aufreiter
+// Proper is freely distributable under the MIT license.
+// For all details and documentation:
+// http://github.com/michael/proper
+
+(function(){
+
+ // Initial Setup
+ // -------------
+
+ controlsTpl = ' \
+ <div class="proper-commands"> \
+ <a href="/" class="command strong" command="strong"><div>Bold</div></a> \
+ <a href="/" class="command em" command="em"><div>Emphasis</div></a> \
+ <div class="separator">|</div> \
+ <a href="/" class="command ul" command="ul"><div>Bullets List</div></a> \
+ <a href="/" class="command ol" command="ol"><div>Numbered List</div></a> \
+ <a href="/" class="command indent" command="indent"><div>Indent</div></a> \
+ <a href="/" class="command outdent" command="outdent"><div>Outdent</div></a> \
+ <div class="separator">|</div> \
+ <a href="/" class="command link" command="link"><div>Link</div></a> \
+ </div> \
+ ';
+
+ // Proper
+ // -----------
+
+ this.Proper = function(options) {
+ var elements = $(options.elements), // all watched elements
+ activeElement = null, // element that is being edited
+ $controls = $(controlsTpl), // the controls panel
+ self = {};
+
+
+ // Commands
+ // -----------
+
+ var commands = {
+ execEM: function() {
+ document.execCommand('italic', false, true);
+ return false;
+ },
+
+ execSTRONG: function() {
+ document.execCommand('bold', false, true);
+ return false;
+ },
+
+ execUL: function() {
+ document.execCommand('insertUnorderedList', false, null);
+ return false;
+ },
+
+ execOL: function() {
+ document.execCommand('insertOrderedList', false, null);
+ return false;
+ },
+
+ execINDENT: function() {
+ document.execCommand('indent', false, null);
+ return false;
+ },
+
+ execOUTDENT: function() {
+ document.execCommand('outdent', false, null);
+ return false;
+ },
+
+ execLINK: function() {
+ document.execCommand('CreateLink', false, prompt('URL:'));
+ return false;
+ },
+
+ showHTML: function() {
+ alert($(this.el).html());
+ }
+ };
+
+ // Activate editor for a given element
+
+ function deactivate() {
+ $(activeElement).attr('contenteditable', 'false');
+ $controls.hide();
+ }
+
+ function activate(el) {
+
+ if (el !== activeElement) {
+ // Deactivate previously active element
+ deactivate();
+
+ // Make editable
+ $(el).attr('contenteditable', true);
+ activeElement = el;
+
+ // Show and reposition controls
+ $controls.show();
+ var offset = $(el).offset();
+ $controls.css('left', offset.left)
+ .css('top', offset.top-$controls.height()-10);
+ }
+ }
+
+ // Instance methods
+ // -----------
+
+
+
+ // Initialize
+ // -----------
+
+ // Activate editor on click
+ elements.each(function(index, el) {
+ $(el).click(function() {
+ activate(el);
+ });
+ });
+
+ // Set up the controls
+ $controls.prependTo($('body')).hide();
+
+ // Bind events for controls
+ $('.proper-commands a.command').click(function(e) {
+ commands['exec'+ $(e.currentTarget).attr('command').toUpperCase()]();
+ return false;
+ });
+
+
+ // Expose public API
+ // -----------
+
+ return self;
+ };
+
+})();
@@ -0,0 +1,43 @@
+/* Page Setup
+/* ------------ */
+
+body {
+ padding: 50px;
+ color:#444;
+ font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;
+ font-size:14px;
+ line-height:1.5em;
+}
+
+* {
+ box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ -moz-box-sizing:border-box;
+}
+
+:focus {
+ outline: 0;
+}
+
+html {overflow:auto;}
+a { color:rgba(148,207,13,1);text-decoration:none; }
+h1 { margin-left: 10px; color:rgba(148,207,13,1); }
+
+.credits {
+ margin-top: 80px;
+ margin-left: 10px;
+ color: #ccc;
+}
+
+.content {
+ margin-top: 70px; padding: 10px;
+ -webkit-border-radius:5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ border: 1px dashed transparent;
+}
+
+.content:hover {
+ border: 1px dashed #eee;
+}
+.content[contenteditable=true] { border-color: #aaa; }

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 159cf98

Please sign in to comment.