[PE mobile] Insert images.

This commit is contained in:
Julia Radzhabova 2016-11-30 12:02:20 +03:00
parent 88848300b3
commit 1d6e1db6b2
6 changed files with 347 additions and 9 deletions

View file

@ -149,8 +149,8 @@ require([
// 'EditHyperlink',
'AddContainer',
// 'AddTable',
'AddShape'
// 'AddImage',
'AddShape',
'AddImage'
// 'AddOther'
]
});
@ -214,8 +214,8 @@ require([
// 'presentationeditor/mobile/app/controller/edit/EditHyperlink',
'presentationeditor/mobile/app/controller/add/AddContainer',
// 'presentationeditor/mobile/app/controller/add/AddTable',
'presentationeditor/mobile/app/controller/add/AddShape'
// 'presentationeditor/mobile/app/controller/add/AddImage',
'presentationeditor/mobile/app/controller/add/AddShape',
'presentationeditor/mobile/app/controller/add/AddImage'
// 'presentationeditor/mobile/app/controller/add/AddOther'
], function() {

View file

@ -160,8 +160,8 @@ require([
// 'EditHyperlink',
'AddContainer',
// 'AddTable',
'AddShape'
// 'AddImage',
'AddShape',
'AddImage'
// 'AddOther'
]
});
@ -225,8 +225,8 @@ require([
// 'presentationeditor/mobile/app/controller/edit/EditHyperlink',
'presentationeditor/mobile/app/controller/add/AddContainer',
// 'presentationeditor/mobile/app/controller/add/AddTable',
'presentationeditor/mobile/app/controller/add/AddShape'
// 'presentationeditor/mobile/app/controller/add/AddImage',
'presentationeditor/mobile/app/controller/add/AddShape',
'presentationeditor/mobile/app/controller/add/AddImage'
// 'presentationeditor/mobile/app/controller/add/AddOther'
], function() {
app.start();

View file

@ -126,7 +126,9 @@ define([
addViews.push({
caption: me.textImage,
id: 'add-image',
layout: me._dummyEditController().getLayout()
layout: PE.getController('AddImage')
.getView('AddImage')
.rootLayout()
});
addViews.push({

View file

@ -0,0 +1,134 @@
/*
*
* (c) Copyright Ascensio System Limited 2010-2016
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
* EU, LV-1021.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* AddImage.js
* Presentation Editor
*
* Created by Julia Radzhabova on 11/30/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'presentationeditor/mobile/app/view/add/AddImage'
], function (core) {
'use strict';
PE.Controllers.AddImage = Backbone.Controller.extend(_.extend((function() {
//
return {
models: [],
collections: [],
views: [
'AddImage'
],
initialize: function () {
Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
this.addListeners({
'AddImage': {
'page:show' : this.onPageShow
}
});
},
setApi: function (api) {
this.api = api;
},
onLaunch: function () {
this.createView('AddImage').render();
},
initEvents: function () {
var me = this;
$('#add-image-file').single('click', _.bind(me.onInsertByFile, me));
},
onPageShow: function () {
var me = this;
$('#addimage-insert a').single('click', _.buffered(me.onInsertByUrl, 100, me));
$('#addimage-url input[type=url]').single('input', _.bind(me.onUrlChange, me));
_.delay(function () {
$('#addimage-link-url input[type=url]').focus();
}, 1000);
},
// Handlers
onInsertByFile: function (e) {
PE.getController('AddContainer').hideModal();
if (this.api) {
this.api.asc_addImage();
}
},
onUrlChange: function (e) {
$('#addimage-insert').toggleClass('disabled', _.isEmpty($(e.currentTarget).val()));
},
onInsertByUrl: function (e) {
var me = this,
$input = $('#addimage-link-url input[type=url]');
if ($input) {
var value = ($input.val()).replace(/ /g, '');
if (!_.isEmpty(value)) {
if ((/((^https?)|(^ftp)):\/\/.+/i.test(value))) {
PE.getController('AddContainer').hideModal();
_.defer(function () {
me.api.AddImageUrl(value);
});
} else {
uiApp.alert(me.txtNotUrl);
}
} else {
uiApp.alert(me.textEmptyImgUrl);
}
}
},
textEmptyImgUrl : 'You need to specify image URL.',
txtNotUrl : 'This field should be a URL in the format \"http://www.example.com\"'
}
})(), PE.Controllers.AddImage || {}))
});

View file

@ -0,0 +1,70 @@
<!-- Root view -->
<div id="addimage-root-view">
<div class="list-block">
<ul>
<li>
<a id="add-image-file" class="item-link no-indicator no-fastclick">
<div class="item-content">
<div class="item-media">
<i class="icon icon-image-library"></i>
</div>
<div class="item-inner">
<div class="item-title"><%= scope.textFromLibrary %></div>
</div>
</div>
</a>
</li>
<li>
<a id="add-image-url" class="item-link">
<div class="item-content">
<div class="item-media">
<i class="icon icon-link"></i>
</div>
<div class="item-inner">
<div class="item-title"><%= scope.textFromURL %></div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- Url view -->
<div id="addimage-url-view">
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding"><%= scope.textLinkSettings %></div>
</div>
</div>
<div class="page" id="addimage-url">
<div class="page-content">
<div class="content-block-title"><%= scope.textAddress %></div>
<div class="list-block">
<ul>
<li>
<div id="addimage-link-url" class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="url" placeholder="<%= scope.textImageURL %>">
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-block disabled" id="addimage-insert">
<% if (android) { %>
<a href="#" class="button button-fill button-raised" style="margin: 20px 16px;"><%= scope.textInsertImage %></a>
<% } else { %>
<ul>
<li>
<a href="#" class="list-button item-link"><%= scope.textInsertImage %></a>
</li>
</ul>
<% } %>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,132 @@
/*
*
* (c) Copyright Ascensio System Limited 2010-2016
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
* EU, LV-1021.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* AddImage.js
* Presentation Editor
*
* Created by Julia Radzhabova on 11/30/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!presentationeditor/mobile/app/template/AddImage.template',
'jquery',
'underscore',
'backbone'
], function (addTemplate, $, _, Backbone) {
'use strict';
PE.Views.AddImage = Backbone.View.extend(_.extend((function() {
// private
return {
// el: '.view-main',
template: _.template(addTemplate),
events: {
},
initialize: function () {
Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
},
initEvents: function () {
var me = this;
$('#add-image-url').single('click', _.bind(me.showImageUrl, me));
me.initControls();
},
// Render layout
render: function () {
this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
scope : this
}));
return this;
},
rootLayout: function () {
if (this.layout) {
return this.layout
.find('#addimage-root-view')
.html();
}
return '';
},
initControls: function () {
//
},
showPage: function (templateId) {
var rootView = PE.getController('AddContainer').rootView;
if (rootView && this.layout) {
var $content = this.layout.find(templateId);
// Android fix for navigation
if (Framework7.prototype.device.android) {
$content.find('.page').append($content.find('.navbar'));
}
rootView.router.load({
content: $content.html()
});
this.fireEvent('page:show', this);
}
},
showImageUrl: function () {
this.showPage('#addimage-url-view');
},
textFromLibrary: 'Picture from Library',
textFromURL: 'Picture from URL',
textBack: 'Back',
textLinkSettings: 'Link Settings',
textAddress: 'Address',
textImageURL: 'Image URL',
textInsertImage: 'Insert Image'
}
})(), PE.Views.AddImage || {}))
});