/EditableLink.html

## EditableLink.html
<html>
<head>
    <script src="./jquery183.js" type="text/javascript"></script>
    <style type="text/css">
        input.editable.passive {
            border: 1px solid transparent;
            border-bottom: 1px solid transparent;

            /* Override the default style for disabled=true. */
            font-style: normal;
            background: none;
        }
        input.editable.active {
            border: 1px solid silver;
        }

        input.editable.link.passive {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        input.editable.link.active {
            color: black;
            text-decoration: none;
        }

        input.editable.label.passive {
            border-bottom: 1px dashed #6ABE01;
        }

        input.editable.active {
            background: #ffffff; /* Old browsers */
            background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        }
    </style>
    <script type="text/javascript">
        window.$ = jQuery;

        function validateURL(val){
            return val.substring(0, 7) === "http://"
                || val.substring(0, 8) === "https://"
                || val.substring(0, 6) === "ftp://";
        }

        // this.disabled == true blocks any event (at least triggered by onclick=... etc.
        // TBD: Bind by addEventListener() ?

        var EditableLink = {
            activate: function(){
                $(this).removeClass('passive').addClass('active').focus();
                this.active = true;
                this.readOnly = false;
                //this.disabled = false;
                //alert('activ');
                this.focus();
                //alert(this);
            },
            passivate: function(){
                $(this).removeClass('active').addClass('passive');
                this.active = false;
                this.readOnly = true;
                //this.disabled = true;
                //alert('pasiv');
            },
            onclick: function(){
                if( this.active ) return;
                if(validateURL(this.value))
                    window.open(this.value, '', 'modal=true,alwaysRaised=yes');
            },
        };
    </script>
</head>
<body>

    <h2>Editable label - icon is a link</h2>
    <div>
        <img src="./icoExternalLink.png" width="16" height="16" alt="Edit the link"
             onclick="var url =  $(this).parent().children('input.editable.label').first().get(0).value;
                      if(validateURL(url))  window.open(url, '', 'modal=true,alwaysRaised=yes');"
             style="cursor: pointer;"
        />
        <input type="text" class="editable label passive"
               onfocus="$(this).removeClass('passive').addClass('active');"
               onblur ="$(this).removeClass('active').addClass('passive');"
               value="http://jboss.org/"
        />
    </div>

    <h2>Editable link - icon enables edit mode</h2>
    <div id="myLink" class="editable link" style="cursor: pointer">
        <img src="./icoEdit.png" width="16" height="16" alt="Edit the link"
             onclick="EditableLink.activate.apply(
                         $(this).parent().children('input.editable.link').first().get(0)
                      );"
        />
        <input type="text" class="editable link passive"
               xonfocus="$(this).removeClass('passive').addClass('active');"
               onblur ="EditableLink.passivate.apply(this);"
               onclick="if(validateURL(this.value) &amp;&amp; (!this.active) ){
                            window.open(this.value, '', 'modal=true,alwaysRaised=yes'); }"
               onselectstart="return this.active;"
               value="http://redhat.com/"
        />
    </div>

    <!-- disabled="<anything>" causes this.disabled == true, and blocks any event! -->
    <div onclick="alert('div clicked');">
        <input type="text" onclick=""
               value="http://redhat.com/"
        />
    </div>

</body>
</html>
	<html>
	<head>
	<script src="./jquery183.js" type="text/javascript"></script>
	<style type="text/css">
	input.editable.passive {
	border: 1px solid transparent;
	border-bottom: 1px solid transparent;

	/* Override the default style for disabled=true. */
	font-style: normal;
	background: none;
	}
	input.editable.active {
	border: 1px solid silver;
	}

	input.editable.link.passive {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
	}

	input.editable.link.active {
	color: black;
	text-decoration: none;
	}

	input.editable.label.passive {
	border-bottom: 1px dashed #6ABE01;
	}

	input.editable.active {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	}
	</style>
	<script type="text/javascript">
	window.$ = jQuery;

	function validateURL(val){
	return val.substring(0, 7) === "http://"
	\|\| val.substring(0, 8) === "https://"
	\|\| val.substring(0, 6) === "ftp://";
	}

	// this.disabled == true blocks any event (at least triggered by onclick=... etc.
	// TBD: Bind by addEventListener() ?

	var EditableLink = {
	activate: function(){
	$(this).removeClass('passive').addClass('active').focus();
	this.active = true;
	this.readOnly = false;
	//this.disabled = false;
	//alert('activ');
	this.focus();
	//alert(this);
	},
	passivate: function(){
	$(this).removeClass('active').addClass('passive');
	this.active = false;
	this.readOnly = true;
	//this.disabled = true;
	//alert('pasiv');
	},
	onclick: function(){
	if( this.active ) return;
	if(validateURL(this.value))
	window.open(this.value, '', 'modal=true,alwaysRaised=yes');
	},
	};
	</script>
	</head>
	<body>

	<h2>Editable label - icon is a link</h2>
	<div>
	<img src="./icoExternalLink.png" width="16" height="16" alt="Edit the link"
	onclick="var url = $(this).parent().children('input.editable.label').first().get(0).value;
	if(validateURL(url)) window.open(url, '', 'modal=true,alwaysRaised=yes');"
	style="cursor: pointer;"
	/>
	<input type="text" class="editable label passive"
	onfocus="$(this).removeClass('passive').addClass('active');"
	onblur ="$(this).removeClass('active').addClass('passive');"
	value="http://jboss.org/"
	/>
	</div>

	<h2>Editable link - icon enables edit mode</h2>
	<div id="myLink" class="editable link" style="cursor: pointer">
	<img src="./icoEdit.png" width="16" height="16" alt="Edit the link"
	onclick="EditableLink.activate.apply(
	$(this).parent().children('input.editable.link').first().get(0)
	);"
	/>
	<input type="text" class="editable link passive"
	xonfocus="$(this).removeClass('passive').addClass('active');"
	onblur ="EditableLink.passivate.apply(this);"
	onclick="if(validateURL(this.value) && (!this.active) ){
	window.open(this.value, '', 'modal=true,alwaysRaised=yes'); }"
	onselectstart="return this.active;"
	value="http://redhat.com/"
	/>
	</div>

	<!-- disabled="<anything>" causes this.disabled == true, and blocks any event! -->
	<div onclick="alert('div clicked');">
	<input type="text" onclick=""
	value="http://redhat.com/"
	/>
	</div>

	</body>
	</html>