wisemapping-open-source/wise-webapp/src/main/webapp/jsp/mindmapPublish.jsp

<%@ include file="/jsp/init.jsp" %>


<form method="post" id="publishForm" action="#" class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label for="enablePublicView" class="control-label">Enable Sharing:
                <input type="checkbox" id="enablePublicView" name="publicView" class="control"
                        <c:if test="${mindmap.public}">
                            checked="checked"
                        </c:if>/>
            </label>
        </div>
    </fieldset>
</form>

<p><span class="label label-important">Warning</span> <spring:message code="PUBLISH_DETAILS"/></p>

<div id="sharingPanel">

    <ul class="nav nav-tabs">
        <li class="active"><a href="#embedTab" data-toggle="pill">Embed</a></li>
        <li><a href="#publicUrlTab" data-toggle="pill">Public URLs</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade active in" id="embedTab">

            <spring:message code="BLOG_INCLUSION"/>

            <form class="form-inline" action="#" style="text-align: center">
                <fieldset>

                    <label for="frameWith">Frame width:</label>
                    <input type="number" id="frameWith" name="frameWith" value="600" class="span1" min="0"/>

                    <label for="frameHeight" class="control-label">Frame height:</label>
                    <input type="number" id="frameHeight" name="frameHeight" value="400" class="span1" min="0"/>

                    <label for="mapZoom">Zoom %:</label>
                    <input type="number" id="mapZoom" name="mapZoom" value="80" class="span1" min="10"
                           max="200" step="10"/>
                </fieldset>
            </form>
            <label><spring:message code="BLOG_SNIPPET"/></label>
                <pre id="embedCode">&lt;iframe style="width:600px;height:400px;border: 1px
solid black" src="http://www.wisemapping.com/c/embeddedView.htm?mapId=${mindmap.id}&zoom=1"&gt; &lt;/iframe&gt;</pre>
        </div>

        <div class="tab-pane fade" id="publicUrlTab">
            <spring:message code="URL"/>:
            <input name="url" value="http://www.wisemapping.com/c/publicView.htm?mapId=${mindmap.id}"
                   style="width:400px"
                   readonly="readonly"/>
        </div>
    </div>
</div>

<script type="text/javascript">
    // Update tabs display status ...
    var checkboxElems = $('#publishForm input:checkbox');
    var updateTabsDisplay = function() {
        var divElem = $('#sharingPanel');
        checkboxElems[0].checked ? divElem.show() : divElem.hide();
    };
    checkboxElems.change(updateTabsDisplay);
    updateTabsDisplay();

    // Change snippet code based on the user options ...
    var replaceCode = function(regExpr, strReplace, factor) {
        var preElem = $('#sharingPanel #embedCode')[0];
        var fieldValue = this.value;
        if (!isNaN(fieldValue) && fieldValue.length > 0) {
            var textVal = $(preElem).text().replace(regExpr, strReplace.replace('%s', fieldValue * factor));
            $(preElem).text(textVal);
        }
    };

    $('#sharingPanel #frameWith').keyup(function() {
        replaceCode.bind(this)(/width:[0-9]+px/g, "width:%spx", 1);
    });

    $('#sharingPanel #frameWith').change(function() {
        replaceCode.bind(this)(/width:[0-9]+px/g, "width:%spx", 1);
    });

    $('#sharingPanel #frameHeight').keyup(function() {
        replaceCode.bind(this)(/height:[0-9]+px/g, "height:%spx", 1);
    });

    $('#sharingPanel #frameHeight').change(function() {
        replaceCode.bind(this)(/height:[0-9]+px/g, "height:%spx", 1);
    });

    $('#sharingPanel #mapZoom').keyup(function() {
        replaceCode.bind(this)(/zoom=.+\"/g, "zoom=%s\"", 0.1);
    });

    $('#sharingPanel #mapZoom').change(function() {
        replaceCode.bind(this)(/zoom=.+\"/g, "zoom=%s\"", 0.01);
    });


    // Save status on click ...
    $('#publishForm').submit(function(event) {
        jQuery.ajax("service/maps/${mindmap.id}/publish", {
            async:false,
            dataType: 'json',
            data: $('#publishForm #enablePublicView')[0].checked ? 'true' : 'false',
            type: 'PUT',
            contentType:"text/plain",
            success : function(data, textStatus, jqXHR) {
                $('#publish-dialog-modal').modal('hide');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
        event.preventDefault();
    });

</script>