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

130 lines
4.7 KiB
Plaintext
Raw Normal View History

2012-06-30 07:26:21 +02:00
<%@page pageEncoding="UTF-8" %>
<%@include file="/jsp/init.jsp" %>
2012-05-27 23:15:46 +02:00
<style type="text/css">
#wizardContainer input {
width: 50px;
height: 25px;
display: inline-block;
}
</style>
<form method="post" id="dialogMainForm" action="#" class="well form-inline">
2012-06-30 20:25:24 +02:00
<label for="enablePublicView" class="control-label"><spring:message code="ENABLE_PUBLISHING"/>:
2012-05-27 23:15:46 +02:00
<input type="checkbox" id="enablePublicView" name="publicView"
<c:if test="${mindmap.public}">
checked="checked"
</c:if> />
</label>
2012-05-21 02:46:55 +02:00
</form>
2012-06-30 20:25:24 +02:00
<p><span class="label label-important"> <spring:message code="WARNING"/></span> <spring:message code="PUBLISH_DETAILS"/>
</p>
2012-05-21 02:46:55 +02:00
2012-05-27 23:15:46 +02:00
<div id="publishPanel">
2012-05-21 02:46:55 +02:00
<ul class="nav nav-tabs">
2012-06-30 20:25:24 +02:00
<li class="active"><a href="#embedTab" data-toggle="pill"><spring:message code="EMBED"/></a></li>
<li><a href="#publicUrlTab" data-toggle="pill"><spring:message code="PUBLIC_URL"/></a></li>
2012-05-21 02:46:55 +02:00
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="embedTab">
<spring:message code="BLOG_INCLUSION"/>
2012-05-27 23:15:46 +02:00
<div id="wizardContainer">
<form class="form-inline" action="#">
2012-06-30 20:25:24 +02:00
<label for="frameWidth"><spring:message code="FRAME_WIDTH"/>:</label>
<input type="number" id="frameWidth" name="frameWidth" value="600" class="span2" min="0"/>
2012-05-21 02:46:55 +02:00
2012-06-30 20:25:24 +02:00
<label for="frameHeight"><spring:message code="FRAME_HEIGHT"/>:</label>
2012-05-27 23:15:46 +02:00
<input type="number" id="frameHeight" name="frameHeight" value="400" class="span2" min="0"/>
2012-05-21 02:46:55 +02:00
2012-06-30 20:25:24 +02:00
<label for="mapZoom"><spring:message code="ZOOM"/> %:</label>
<input type="number" id="mapZoom" name="mapZoom" value="80" class="span2" min="10" max="200"
step="10"/>
2012-05-27 23:15:46 +02:00
</form>
</div>
2012-05-21 02:46:55 +02:00
<label><spring:message code="BLOG_SNIPPET"/></label>
<pre id="embedCode">&lt;iframe style="width:600px;height:400px;border: 1px
solid black" src="${baseUrl}/c/maps/${mindmap.id}/embed?zoom=1"&gt; &lt;/iframe&gt;</pre>
2012-05-21 02:46:55 +02:00
</div>
<div class="tab-pane fade" id="publicUrlTab">
2012-07-01 22:21:02 +02:00
<spring:message code="DIRECT_LINK"/>:
<input name="url" value="${baseUrl}/c/maps/${mindmap.id}/public"
2012-05-21 02:46:55 +02:00
style="width:400px"
readonly="readonly"/>
</div>
</div>
2009-06-07 20:59:43 +02:00
</div>
<script type="text/javascript">
2012-05-21 02:46:55 +02:00
// Update tabs display status ...
2012-05-27 23:15:46 +02:00
var checkboxElems = $('#dialogMainForm input:checkbox');
2012-06-30 20:25:24 +02:00
var updateTabsDisplay = function () {
2012-05-27 23:15:46 +02:00
var divElem = $('#publishPanel');
2012-05-21 02:46:55 +02:00
checkboxElems[0].checked ? divElem.show() : divElem.hide();
};
checkboxElems.change(updateTabsDisplay);
updateTabsDisplay();
2009-06-07 20:59:43 +02:00
2012-05-21 02:46:55 +02:00
// Change snippet code based on the user options ...
2012-06-30 20:25:24 +02:00
var replaceCode = function (regExpr, strReplace, factor) {
2012-05-27 23:15:46 +02:00
var preElem = $('#publishPanel #embedCode')[0];
2012-05-21 02:46:55 +02:00
var fieldValue = this.value;
if (!isNaN(fieldValue) && fieldValue.length > 0) {
var textVal = $(preElem).text().replace(regExpr, strReplace.replace('%s', fieldValue * factor));
$(preElem).text(textVal);
2009-06-07 20:59:43 +02:00
}
2011-10-17 02:42:02 +02:00
};
2009-06-07 20:59:43 +02:00
2012-06-30 20:25:24 +02:00
$('#publishPanel #frameWidth').keyup(function () {
2012-05-21 02:46:55 +02:00
replaceCode.bind(this)(/width:[0-9]+px/g, "width:%spx", 1);
});
2009-06-07 20:59:43 +02:00
2012-06-30 20:25:24 +02:00
$('#publishPanel #frameWidth').change(function () {
2012-05-21 02:46:55 +02:00
replaceCode.bind(this)(/width:[0-9]+px/g, "width:%spx", 1);
2011-10-17 02:42:02 +02:00
});
2012-05-21 02:46:55 +02:00
2012-06-30 20:25:24 +02:00
$('#publishPanel #frameHeight').keyup(function () {
2012-05-21 02:46:55 +02:00
replaceCode.bind(this)(/height:[0-9]+px/g, "height:%spx", 1);
});
2012-06-30 20:25:24 +02:00
$('#publishPanel #frameHeight').change(function () {
2012-05-21 02:46:55 +02:00
replaceCode.bind(this)(/height:[0-9]+px/g, "height:%spx", 1);
});
2012-06-30 20:25:24 +02:00
$('#publishPanel #mapZoom').keyup(function () {
2012-05-21 02:46:55 +02:00
replaceCode.bind(this)(/zoom=.+\"/g, "zoom=%s\"", 0.1);
});
2012-06-30 20:25:24 +02:00
$('#publishPanel #mapZoom').change(function () {
2012-05-21 02:46:55 +02:00
replaceCode.bind(this)(/zoom=.+\"/g, "zoom=%s\"", 0.01);
});
// Save status on click ...
2012-06-30 20:25:24 +02:00
$('#dialogMainForm').submit(function (event) {
2012-05-21 02:46:55 +02:00
jQuery.ajax("service/maps/${mindmap.id}/publish", {
async:false,
2012-06-30 20:25:24 +02:00
dataType:'json',
data:$('#dialogMainForm #enablePublicView')[0].checked ? 'true' : 'false',
type:'PUT',
2012-05-21 02:46:55 +02:00
contentType:"text/plain",
2012-06-30 20:25:24 +02:00
success:function (data, textStatus, jqXHR) {
2012-05-21 02:46:55 +02:00
$('#publish-dialog-modal').modal('hide');
},
2012-06-30 20:25:24 +02:00
error:function (jqXHR, textStatus, errorThrown) {
2012-05-21 02:46:55 +02:00
alert(textStatus);
}
});
event.preventDefault();
});
2012-05-27 23:15:46 +02:00
// Hook for interaction with the main parent window ...
2012-06-30 20:25:24 +02:00
var submitDialogForm = function () {
2012-05-27 23:15:46 +02:00
$('#dialogMainForm').submit();
}
2012-05-21 02:46:55 +02:00
</script>