AngularJS Popup textarea

for editing big text with little space

by michaeldausmann

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div ng-app="myApp">
    <div ng-controller="mycontroller">
        raw text display... {{myValue}}
        <input ng-model="myValue" inputsplosion></input>
    </div>  
</div>

<!--input box plus an 'explode' button that pops the larger edit dialog-->
<div id="inputContainer">
    <input
    id="smallText"
    value="This is some text which is too big for editing in a small textbox."
    title="This is some text which is too big for editing in a small textbox.">
    </input>
    <button id="explode">...</button>
</div>

<!--Larger edit dialog containing a textarea for dealing with big text-->
<div id="editDialog">
    <textarea height="100%">This is some text which is too big for editing in a small textbox.</textarea>
</div>

CSS

</style>

<!--jquery ui does its ui magic-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />



<style>    
    textarea {
      width: 100%; /* make the text area fill the whole dialog */
      height: 100%;
      margin: 0; /* don't want to add to container size */
      border: 0; /* don't want to add to container size */
      resize: none; /* resize is delegated to the dialog */  
    }
    
    .noTitle .ui-dialog-titlebar {display:none} /* don't show the dialog titlebar */
    
    .ui-widget { font-size: 10px; }  /* default ui widget font is 1em, make it less chunky */

</style>

JavaScript

function mycontroller($scope) {
    $scope.myValue = "This is some text which is too big for editing in a small textbox.";
};

var app = angular.module('myApp', []);

app.directive('inputsplosion', function($compile) {
    return {
        link: function(scope, elm, attrs, ctrl) {
            console.log('link');
            elm.attr('title','here is the fricking title');
        }
    };
};



//turn the editDialog div into a hidden dialog to be opened with the 'explode' button
$("#editDialog").dialog({
    title: "myValue",  //not shown
    autoOpen: false,
    height: 140,
    width: 350,
    dialogClass: 'noTitle',
    position: {
        my: "left top",
        at: "left bottom",
        of: $("#inputContainer")
    },
    buttons: {
        Close: function() {
            $(this).dialog("close");
        }
    }
});

//use the button as a toggle for the dialog
$("#explode").click(function() {
    if ($("#editDialog").dialog("isOpen")) {
        $("#editDialog").dialog("close");
    } else {
        $("#editDialog").dialog("open");
    }
})