Link Editor

by Trae

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<ul id="urlEditor" class="urlEditor">
    <li class="urlItem clearfix">
        <input type="text" placeholder="Name" />
        <input id="test" class="hidden" type="url" placeholder="http://" /> 
        <a href="#" class="fa fa-trash-o hidden" tabindex="-1"></a>
    </li>
    <li class="urlItem clearfix">
        <input type="text" placeholder="Name" />
        <input type="url" class="hidden" placeholder="http://" />
        <a href="#" class="fa fa-trash-o hidden" tabindex="-1"></a>

    </li>
    <li class="urlItem clearfix">
        <input type="text" placeholder="Name" />
        <input type="url" class="hidden" placeholder="http://" />
        <a href="#" class="fa fa-trash-o hidden" tabindex="-1"></a>

    </li>
    <li class="urlItem clearfix">
        <input type="text" placeholder="Name" />
        <input type="url" class="hidden" placeholder="http://" /> 
        <a href="#" class="fa fa-trash-o hidden" tabindex="-1"></a>

    </li>
</ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam provident corporis facilis tempore fugiat optio perferendis est dolorum repellat impedit temporibus et explicabo nisi architecto rerum illum at deserunt dolores.

CSS

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
::-moz-selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}
img {
    -ms-interpolation-mode: bicubic;
}

.hidden {
    display: none;
}

a {
    text-decoration: none;
}
.urlEditor {
    list-style-type: none;
}
.urlItem {
    border: 0px solid black;
    margin: 8px;
    position: relative;    
}
.urlItem > a {
}
.urlItem > input[type=text] {
    border-width: 0px;
}
.urlItem > input[type=url] {    
    clear:left;
}
.urlItem > input {
    float: left;
    margin: 4px;
    padding: 4px;
}

.urlItem.active {
    background-color: Gainsboro;
}
.urlItem.active > input {
    border-width: 1px;
}
.clearfix:after {
    content:" ";
    /* Older browser do not support empty content */
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

JavaScript

(function ($) {
    $("#urlEditor").on("focus", ":text", function _handleItemFocus(event) {
        var $li = $(event.currentTarget).parent();
        var $hideControls = $li.siblings().children().not("input[type=text]"); 
        //console.log($hideControls);
        $hideControls.hide({
            duration: 200,
            easing: "fold"
        });
        $li.siblings().removeClass("active");
        $li.addClass("active");
        $li.find("input[type=url]").show({
            duration: 200,
            easing: "fold",
            complete: function(){
                console.log(arguments);
                $li.find("a").show();
            }
        });
        //$("#test").removeClass("hidden", 1000);
        

    });
    
    $("#urlEditor").on("mouseover", "li", function _handleItemFocus(event) {
        var $li = $(event.currentTarget);
        var $hideControls = $li.siblings().children("a"); 
        $hideControls.hide();
        $li.find("a").show();
    });
})(jQuery);