Glass Edit Frame - Custom frame wrapper and pop up handler

experience-editor.css

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* Glass Edit Frame Extensions */
.c-editframe {
    box-shadow: 3px 3px 6px rgba(0,0,0,0.275);
    position: absolute;
    right: .5rem;
    top: .5rem;
}

.c-editframe .btn-editframe {
    background-color: #fafafa;
    border-radius: 3px;
    border: solid 1px #ddd;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.275);
    color: #2b2b2b;
    display: block;
    font-size: 0.8em;
    font-family: Arial, sans-serif;
    height: auto;
    margin: 0;
    padding: .5em .7em;
}

.c-editframe .btn-editframe:hover {
    background-color: #ddd;
}

.c-editframe-wrapper {
    position: absolute;
    right: .5rem;
    top: .5rem;
}

.c-editframe-wrapper .c-editframe {
    float: left;
    margin-left: .3em;
    position: relative;
    right: initial;
    top: initial;
}

experience-editor.js

/**
 * Custom EditFrame Handler *
 * This code hooks into a custom Glass Edit Frame wrapper and ensures
 * the dialog opens immediately rather than using the webedit ribbon
 */

if (typeof Sitecore !== typeof undefined) {

    Sitecore.PageModes.PageEditor.glassEditFrameHandler = function() {
        $('.js-btn-editframe').not('.js-ef_attached')
            .on('click', function (e) {
                var data = JSON.parse($(this).prev('.scChromeData').html());
                eval(data.commands[0].click);
                e.stopPropagation();
            })
            .addClass('js-ef_attached');
    };

    // attach handlers on page load
    Sitecore.PageModes.PageEditor.onLoadComplete.observe(Sitecore.PageModes.PageEditor.glassEditFrameHandler);

    // attach handlers when new renderings are inserted
    Sitecore.PageModes.ChromeTypes.Placeholder = Sitecore.PageModes.ChromeTypes.Placeholder.extend({
        insertRendering: function(data, openProperties) {
            this.base(data, openProperties);
            Sitecore.PageModes.PageEditor.glassEditFrameHandler();
        }
    },
    {
        emptyLookFillerCssClass: Sitecore.PageModes.ChromeTypes.Placeholder.emptyLookFillerCssClass,
        getDefaultAjaxOptions: Sitecore.PageModes.ChromeTypes.Placeholder.getDefaultAjaxOptions
    });
}

GlassEditFrame.cs

using System;
using System.Linq.Expressions;
using System.Web;
using System.Web.Mvc;
using Glass.Mapper.Sc;

namespace MyProject.Custom.HtmlHelpers
{
    public static class GlassEditFrameExtensions
    {
        /// <summary>
        /// Outputs EditFrame with default icon only
        /// </summary>
        /// <param name="model">Glass Model</param>
        /// <param name="fields">Fields to edit</param>
        /// <returns>Renders Edit Frame</returns>
        public static IHtmlString EditFrame<T>(this HtmlHelper helper, T model, params Expression<Func<T, object>>[] fields) where T : class
        {
            return helper.EditFrame(model, null, false, null, fields);
        }

        /// <summary>
        /// Outputs EditFrame with default icon and allows text to be hidden
        /// </summary>
        /// <param name="model">Glass Model</param>
        /// <param name="showTitle">Show text on button?</param>
        /// <param name="fields">Fields to edit</param>
        /// <returns>Renders Edit Frame</returns>
        public static IHtmlString EditFrame<T>(this HtmlHelper helper, T model, bool showTitle, params Expression<Func<T, object>>[] fields) where T : class
        {
            return helper.EditFrame(model, null, showTitle, null, fields);
        }

        /// <summary>
        /// Outputs EditFrame and allows button icon to be overridden. Icon only, no text.
        /// </summary>
        /// <param name="model">Glass Model</param>
        /// <param name="buttonClass">CSS class for button to override icon</param>
        /// <param name="fields">Fields to edit</param>
        /// <returns>Renders Edit Frame</returns>
        public static IHtmlString EditFrame<T>(this HtmlHelper helper, T model, string buttonClass, params Expression<Func<T, object>>[] fields) where T : class
        {
            return helper.EditFrame(model, null, false, buttonClass, fields);
        }

        /// <summary>
        /// Outputs EditFrame and allows button text and icon to be overridden.
        /// </summary>
        /// <param name="model">Glass Model</param>
        /// <param name="title">Button text</param>
        /// <param name="buttonClass">CSS class for button to override icon</param>
        /// <param name="fields">Fields to edit</param>
        /// <returns>Renders Edit Frame</returns>
        public static IHtmlString EditFrame<T>(this HtmlHelper helper, T model, string title, string buttonClass, params Expression<Func<T, object>>[] fields) where T : class
        {
            return helper.EditFrame(model, title, true, buttonClass, fields);
        }

        /// <summary>
        /// Outputs EditFrame and allows button text and icon to be overridden, or text to be hidden.
        /// </summary>
        /// <param name="model">Glass Model</param>
        /// <param name="title">Button text</param>
        /// <param name="showTitle">Show text on button?</param>
        /// <param name="buttonClass">CSS class for button to override icon</param>
        /// <param name="fields">Fields to edit</param>
        /// <returns>Renders Edit Frame</returns>
        public static IHtmlString EditFrame<T>(this HtmlHelper helper, T model, string title, bool showTitle, string buttonClass, params Expression<Func<T, object>>[] fields) where T : class
        {
            if (!Sitecore.Context.PageMode.IsExperienceEditor)
                return new HtmlString("");

            var writer = helper.ViewContext.Writer;
            var sitecoreContext = SitecoreContextFactory.Default.GetSitecoreContext();
            
            // set up defaults
            var tooltip = string.IsNullOrEmpty(title) ? "Edit Properties" : title;
            title = showTitle ? $" {tooltip}" : string.Empty;
            buttonClass = string.IsNullOrEmpty(buttonClass) ? "fa-edit" : buttonClass;

            // render the wrapped editframe
            writer.Write("<div class=\"c-editframe\">");
            using(sitecoreContext.GlassHtml.EditFrame(model, title, writer, fields))
            {
                writer.Write($"<button class=\"btn-editframe js-btn-editframe\" title=\"{tooltip}\"><i class=\"fa {buttonClass}\"></i>{title}</button>");
            }
            writer.Write("</div>");

            return new HtmlString("");
        }

    }
}

GlassEditFrameWrapper.cs

using System;
using System.IO;
using System.Web.Mvc;

namespace MyProject.Custom.HtmlHelpers
{
    public static class GlassEditFrameWrapperExtensions
    {
        public static IDisposable EditFrameWrapper(this HtmlHelper helper)
        {
            return EditFrameWrapper(helper, string.Empty);
        }

        public static IDisposable EditFrameWrapper(this HtmlHelper helper, string cssClass)
        {
            if (!Sitecore.Context.PageMode.IsExperienceEditor)
                return new EmptyWrapper();

            var writer = helper.ViewContext.Writer;
            writer.Write($"<div class=\"c-editframe-wrapper {cssClass}\">");
            return new CloseWrapper(writer);
        }

        private class CloseWrapper : IDisposable
        {
            private readonly TextWriter _writer;
            public CloseWrapper(TextWriter writer)
            {
                _writer = writer;
            }

            public void Dispose()
            {
                _writer.Write("</div>");
            }
        }
        
        private class EmptyWrapper : IDisposable
        {
            public void Dispose() { }
        }
    }
}