Firt version of publish dialog.

This commit is contained in:
Paulo Gustavo Veiga
2012-05-20 21:46:55 -03:00
parent 93da41dcf5
commit fdc4a20667
13 changed files with 223 additions and 273 deletions

View File

@@ -37,38 +37,27 @@
</div>
<div class="tab-pane fade" id="publish">
<ul class="unstyled">
<c:choose>
<c:when test="${wisemapDetail.public}">
<li><strong><spring:message code="PUBLIC"/>: </strong><spring:message code="ALL_VIEW_PUBLIC"/>
</li>
<li><<strong><spring:message code="URL"/>: </strong>
<input name="url"
<c:choose>
<c:when test="${wisemapDetail.public}">
<ul class="unstyled">
<p><spring:message code="ALL_VIEW_PUBLIC"/></p>
<li><strong><spring:message code="URL"/>:</strong>
<li><input name="url"
value="http://www.wisemapping.com/c/publicView.htm?mapId=${wisemapDetail.id}"
style="width:400px" readonly="readonly"/>
</li>
<li><strong><spring:message code="DIRECT_LINK"/>: </strong>
<textarea style="width:400px;height:30px;overflow:hidden;" cols="55" rows="3"
readonly="readonly">
&lt;a
href="http://www.wisemapping.com/c/publicView.htm?mapId=${wisemapDetail.id}">${wisemapDetail.title}&lt;/a></textarea>
<li><strong><spring:message code="BLOG_INCLUSION"/>: </strong>
<textarea style="width:400px;height:70px;overflow:hidden;" cols="55" rows="5"
readonly="readonly">
&lt;iframe
style="border:0;width:600px;height:400px;border: 1px solid black"
src="http://www.wisemapping.com/c/embeddedView.htm?mapId=${wisemapDetail.id}&amp;amzoom=1"&gt;
&lt;/iframe&gt;
</textarea>
<li><strong><spring:message code="BLOG_SNIPPET"/></strong>
<pre>&lt;iframe style="border:0;width:600px;height:400px;border: 1px solid black" src="http://www.wisemapping.com/c/embeddedView.htm?mapId=${wisemapDetail.id}&amp;amzoom=1"&gt;&lt;/iframe&gt;</pre>
</li>
<li><spring:message code="EMBEDDED_MAP_SIZE"/></li>
</c:when>
<c:otherwise>
<li><strong><spring:message code="PUBLIC"/>:</strong><spring:message code="ONLY_VIEW_PRIVATE"/>
</li>
</c:otherwise>
</c:choose>
</ul>
</ul>
</c:when>
<c:otherwise>
<p><spring:message code="ONLY_VIEW_PRIVATE"/></p>
</c:otherwise>
</c:choose>
</div>
</div>
</div>

View File

@@ -16,7 +16,6 @@
<script type="text/javascript" language="javascript" src="bootstrap/js/bootstrap.js"></script>
<script src="js/less.js" type="text/javascript"></script>
<!--jQuery DataTables-->
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="js/mymaps.js"></script>
@@ -25,20 +24,20 @@
<script type="text/javascript" language="javascript" src="js/jquery.timeago.js"></script>
<script type="text/javascript" charset="utf-8">
var principalEmail = '${principal.email}';
$(function() {
var jQueryDataTable = $('#mindmapListTable').dataTable({
bProcessing : true,
sAjaxSource : "../service/maps",
sAjaxDataProp: 'mindmapsInfo',
fnInitComplete: function() {
$('#mindmapListTable tbody').change(updateToolbar);
$('#mindmapListTable tbody').change(updateStatus);
},
aoColumns: [
{
sTitle : '<input type="checkbox" id="selectAll"/>',
sWidth : "15px",
sClass : "select center",
sClass : "select",
bSortable : false,
bSearchable : false,
fnRender : function(obj) {
@@ -46,7 +45,6 @@
}
},
{
sClass : "columName",
sTitle : "Name",
bUseRendered : false,
mDataProp: "title",
@@ -54,9 +52,15 @@
return '<a href="c/map/' + obj.aData.id + '/edit.htm">' + obj.aData.title + '</a>';
}
},
{
bVisible: false,
bSearchable : false,
sTitle : "Owner Email",
mDataProp: "ownerEmail"
},
{
sTitle : "Owner",
mDataProp :"creator"
mDataProp :"owner"
},
{
bSearchable : false,
@@ -98,11 +102,9 @@
$('#nPageBtn').click(function() {
$('#mindmapListTable_next').click();
});
$('#pPageBtn').click(function() {
$('#pPageBtn').click(function() {
$('#mindmapListTable_previous').click();
});
});
</script>
@@ -216,17 +218,18 @@
}
});
$("#exportBtn").click(function() {
$("#publishBtn").click(function() {
var mapIds = $('#mindmapListTable').dataTableExt.getSelectedMapsIds();
if (mapIds.length > 0) {
$('#export-dialog-modal .modal-body').load("c/map/" + mapIds[0] + "/export.htm", function() {
$('#export-dialog-modal').modal();
});
$('#publish-dialog-modal .modal-body').load("c/map/" + mapIds[0] + "/publish.htm",
function() {
$('#publish-dialog-modal .btn-accept').click(function() {
$('#publish-dialog-modal #publishForm').submit();
});
$('#publish-dialog-modal').modal();
});
}
});
$("#actionButtons .publishMap").click(function() {
});
$("#actionButtons .shareMap").click(function() {
});
@@ -250,7 +253,7 @@
</script>
</head>
<body>
<div class="content">
<div style="min-height: 500px">
<jsp:include page="header.jsp">
<jsp:param name="removeSignin" value="false"/>
<jsp:param name="showLogout" value="true"/>
@@ -261,21 +264,21 @@
<div id="buttonsToolbar" class="btn-toolbar">
<div class="btn-group">
<button class="btn" id="newBtn"><i class="icon-file"></i> New</button>
<button class="btn" id="importBtn"><i class="icon-upload"></i> Import</button>
<button class="btn btn-info" id="newBtn"><i class="icon-file icon-white"></i> New</button>
<button class="btn btn-info" id="importBtn"><i class="icon-upload icon-white"></i> Import</button>
</div>
<div class="btn-group act-multiple" id="deleteBtn" style="display:none">
<button class="btn"><i class="icon-trash"></i> Delete</button>
<button class="btn btn-info"><i class="icon-trash icon-white"></i> Delete</button>
</div>
<div class="btn-group act-single" id="infoBtn" style="display:none">
<button class="btn"><i class="icon-exclamation-sign"></i> Info</button>
<button class="btn btn-info"><i class="icon-exclamation-sign icon-white"></i> Info</button>
</div>
<div class="btn-group act-single" id="actionsBtn" style="display:none">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<i class="icon-asterisk"></i> More
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<i class="icon-asterisk icon-white"></i> More
<span class="caret"></span>
</button>
@@ -284,10 +287,8 @@
Duplicate</a></li>
<li id="renameBtn"><a href="#" onclick="return false"><i class="icon-edit"></i> Rename</a></li>
<li id="printBtn"><a href="#" onclick="return false"><i class="icon-print"></i> Print</a></li>
<li id="publishMap"><a href="#" onclick="return false"><i class="icon-globe"></i>Publish</a></li>
<li id="exportBtn"><a href="#" onclick="return false"><i class="icon-download-alt"></i> Export</a>
</li>
<li id="shareMap"><a href="#" onclick="return false"><i class="icon-share"></i> Share</a></li>
<li id="publishBtn"><a href="#" onclick="return false"><i class="icon-globe"></i>Publish</a></li>
<li id="shareBtn"><a href="#" onclick="return false"><i class="icon-share"></i> Share</a></li>
<li id="tagMap"><a href="#" onclick="return false"><i class="icon-tags"></i> Tag</a></li>
</ul>
</div>
@@ -423,20 +424,21 @@
</div>
</div>
<div id="export-dialog-modal" class="modal fade" style="display: none">
<!-- Publish Dialog Config -->
<div id="publish-dialog-modal" class="modal fade" style="display: none">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Export</h3>
<h3>Publish</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-cancel" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-accept" data-loading-text="Saving...">Accept</button>
<button class="btn btn-cancel" data-dismiss="modal">Cancel</button>
</div>
</div>
<div id="map-table">
<table class="table table-bordered" id="mindmapListTable">
@@ -445,7 +447,6 @@
</div>
</div>
</div>

View File

@@ -1,124 +1,123 @@
<%@ include file="/jsp/init.jsp" %>
<h1>
<spring:message code="PUBLISH"/>
'${mindmap.title}'
</h1>
<h2>
<spring:message code="PUBLISH_DETAILS"/>
</h2>
<div>
<form method="post" id="publishForm" name="publishForm" action="<c:url value="publish.htm"/>" style="height:100%;">
<input type="hidden" name="actionId" value="save"/>
<input type="hidden" name="mapId" value="${mindmap.id}"/>
<table>
<colgroup>
<col width="20%"/>
<col width="80%"/>
</colgroup>
<tbody>
<tr>
<td>
&nbsp;
</td>
<td>
<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>
<input type="checkbox" id="publicViewId" name="publicView" value="true"
<c:if test="${mindmap.public}">
<p><span class="label label-important">Warning</span> <spring:message code="PUBLISH_DETAILS"/></p>
checked="checked"
</c:if>
<div id="sharingPanel">
/>
<spring:message code="PUBLISH_MAP_TO_INTERNET"/>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<div id="disabledPanel"
style="position:absolute;background-color:white;opacity:0.8;width:600px;height:160px;left:10px;visibility:hidden;">
<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>
</td>
</tr>
<tr>
<td class="formLabel">
<spring:message code="URL"/>:
</td>
<td style="padding-bottom: 5px;">
<input name="url" value="http://www.wisemapping.com/c/publicView.htm?mapId=${mindmap.id}"
style="width:400px" readonly="readonly"/>
</td>
</tr>
<tr>
<td class="formLabel">
<spring:message code="DIRECT_LINK"/>:
</td>
<td>
<textarea style="width:400px;height:30px;overflow:hidden;" cols="55" rows="3" readonly="readonly">
&lt;a href="http://www.wisemapping.com/c/publicView.htm?mapId=${mindmap.id}">${mindmap.title}&lt;/a></textarea>
</td>
</tr>
<tr>
<td class="formLabel">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
<tr>
<td class="formLabel" style="white-space:normal;">
<spring:message code="BLOG_INCLUSION"/>:
</td>
<td>
<textarea style="width:400px;height:70px;overflow:hidden;" cols="55" rows="5" readonly="readonly">
&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;
</textarea>
<div class="tab-content">
<div class="tab-pane fade active in" id="embedTab">
<p><spring:message code="EMBEDDED_MAP_SIZE"/></p>
</td>
</tr>
<tr>
<td style="text-align:center;margin-top:30px;" colspan="2">
<input type="submit" id="ok" value="<spring:message code="OK"/>" class="btn-primary">
<input type="button" value="<spring:message code="CANCEL"/>" class="btn-secondary" id="cancelBtn">
</td>
</tr>
</tbody>
</table>
</form>
<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();
var isPublicPanelEnabled = false;
var panelEnabler = function()
{
if (isPublicPanelEnabled)
{
$('disabledPanel').setStyle("visibility", "hidden");
} else
{
$('disabledPanel').setStyle("visibility", "visible");
// 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);
}
isPublicPanelEnabled = !isPublicPanelEnabled;
};
if (${mindmap.public==false})
{
panelEnabler();
}
$('publicViewId').addEvent('click', panelEnabler);
$('cancelBtn').addEvent('click', function(event) {
MooDialog.Request.active.close();
$('#sharingPanel #frameWith').keyup(function() {
replaceCode.bind(this)(/width:[0-9]+px/g, "width:%spx", 1);
});
</script>
$('#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>