Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Add a statusbar with word and/or character counter and resize function #61

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add a statusbar with word and/or character counter and resize function #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d60a506
Add a statusbar with word and/or character counter and resize function
elso May 23, 2013
085716a
- fix failure on drag raw-html-editing-mode (thx cyberbeat)
elso Oct 19, 2013
87fd22c
Update README.md
elso Dec 16, 2013
5e6c36a
add options to show/hide maximum words and/or chars value
elso Dec 3, 2015
8c35679
Merge branch 'master' of ssh://[email protected]:443/elso/mooeditabl…
elso Dec 3, 2015
f14b1b9
Ignores
elso Dec 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/.project
/.settings/
40 changes: 38 additions & 2 deletions Assets/MooEditable/MooEditable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,12 @@

.mooeditable-textarea{
margin: 0 !important;
padding: 0 !important;
padding: 16px !important;
border: 0 !important;
width: 100% !important;
resize: none !important; /* disable resizable textareas in Webkit */
outline: 0 !important; /* disable focus ring in Safari */
box-sizing: border-box;
}

.mooeditable-ui-dialog{
Expand Down Expand Up @@ -176,6 +177,41 @@
-webkit-outline: 0;
}

.mooeditable-ui-button-overlay .overlay-content{
.mooeditable-ui-statusbar{
background-color: #eee;
border-top: 1px solid #aaa;
position: relative;
height: 37px;
}

.mooeditable-ui-statusbar-nodepath{
padding: 10px;
float: left;
}

.mooeditable-ui-statusbar-nodepath .node{
cursor: pointer;
}

.mooeditable-ui-statusbar-nodepath .node:hover{
text-decoration: underline;
}

.mooeditable-ui-statusbar-wordcount{
float: right;
text-align: right;
padding: 10px;
}

.mooeditable-ui-statusbar-resize{
background: transparent url(Other/resize.png) no-repeat 0 0px;
display: inline-block;
clear: both;
bottom: 0;
height: 16px;
margin: 0;
position: absolute;
right: 0;
visibility: visible;
width: 16px;
}
Binary file added Assets/MooEditable/Other/resize.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions Demos/MooEditable/MooEditable.UI.Statusbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MooEditable basic example</title>

<style type="text/css">
body{
font-family: sans-serif;
font-size: .9em;
}
#textarea-1,
#textarea-2{
width: 700px;
height: 200px;
border: 2px solid #ddd;
}
</style>

<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.css">
<script type="text/javascript" src="../assets/mootools-core-1.4.4.js"></script>
<script type="text/javascript" src="../assets/mootools-more-1.4.0.1.js"></script>
<script type="text/javascript" src="../../Source/MooEditable/MooEditable.js"></script>
<script type="text/javascript" src="../../Source/MooEditable/MooEditable.UI.Statusbar.js"></script>


<script type="text/javascript">
window.addEvent('domready', function(){
new MooEditable('textarea-1',{});
new MooEditable('textarea-2', {actions: 'bold italic underline strikethrough', maxwords: 10});

// Post submit
$('theForm').addEvent('submit', function(e){
alert($('textarea-1').value);
return true;
});
});
</script>

</head>
<body>

<h1>MooEditable statusbar examples</h1>

<form id="theForm" method="post" action="http://form-data.appspot.com/">

<label for="textarea-1">Textarea without Limit</label>
<textarea id="textarea-1" name="editable1">
&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is cool!&lt;/p&gt;
</textarea>

<input type="submit">
<p></p>
<label for="textarea-2">Textarea with Word Limit (max. 10)</label>
<textarea id="textarea-2" name="editable2">
&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is very cool!&lt;/p&gt;
</textarea>

</form>

<div id="data"></div>

</body>
</html>
526 changes: 526 additions & 0 deletions Demos/assets/mootools-core-1.4.4.js
View file
Open in desktop

Large diffs are not rendered by default.

751 changes: 751 additions & 0 deletions Demos/assets/mootools-more-1.4.0.1.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading