Skip to content

Commit

Permalink
Introduce Template7
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Aug 23, 2014
1 parent 4492886 commit 2a9fa4b
Show file tree
Hide file tree
Showing 7 changed files with 392 additions and 58 deletions.
2 changes: 2 additions & 0 deletions .jshintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@
"Document": true,
"window": true,
"$":true,
"t7": true,
"Framework7":true,
"Template7":true,
"Event":true,
"DocumentTouch":true,
"app":true
Expand Down
5 changes: 3 additions & 2 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ module.exports = function (grunt) {
'src/js/proto-support.js',
'src/js/proto-device.js',
'src/js/proto-plugins.js',
'src/js/wrap-end.js'
'src/js/wrap-end.js',
'src/js/template7.js'
];

// Project configuration.
Expand Down Expand Up @@ -208,7 +209,7 @@ module.exports = function (grunt) {
if (filename.indexOf('.js') >= 0) {
var addIndent = ' ';
filename = filename.replace('src/js/', '');
if (filename === 'wrap-start.js' || filename === 'wrap-end.js') {
if (filename === 'wrap-start.js' || filename === 'wrap-end.js' || filename === 'template7.js') {
addIndent = '';
}
var add4spaces = ('f7-intro.js f7-outro.js proto-device.js proto-plugins.js proto-support.js dom7-intro.js dom7-outro.js').split(' ');
Expand Down
3 changes: 2 additions & 1 deletion modules.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
"src/js/proto-support.js",
"src/js/proto-device.js",
"src/js/proto-plugins.js",
"src/js/wrap-end.js"
"src/js/wrap-end.js",
"src/js/template7.js"
],
"less" : [
"src/less/login-screen.less",
Expand Down
12 changes: 3 additions & 9 deletions src/js/f7-intro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,6 @@ window.Framework7 = function (params) {
swipePanelThreshold: 0,
panelsCloseByOutside: true,
// Modals
modalTemplate: '<div class="modal {{noButtons}}">' +
'<div class="modal-inner">' +
'{{if title}}<div class="modal-title">{{title}}</div>{{/if title}}' +
'<div class="modal-text">{{text}}</div>' +
'{{afterText}}' +
'</div>' +
'<div class="modal-buttons">{{buttons}}</div>' +
'</div>',
modalActionsTemplate: '<div class="actions-modal">{{buttons}}</div>',
modalButtonOk: 'OK',
modalButtonCancel: 'Cancel',
modalUsernamePlaceholder: 'Username',
Expand Down Expand Up @@ -96,6 +87,9 @@ window.Framework7 = function (params) {
// DOM lib
var $ = Dom7;

// Template7 lib
var t7 = Template7;

// Touch events
app.touchEvents = {
start: app.support.touch ? 'touchstart' : 'mousedown',
Expand Down
85 changes: 40 additions & 45 deletions src/js/modals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,24 @@
var _modalTemplateTempDiv = document.createElement('div');
app.modal = function (params) {
params = params || {};
/* @params example
{
title: 'Modal title',
text: 'Modal text',
afterText: 'Custom content after text',
buttons: [{
text:'Cancel',
bold: true,
onClick: function (){},
close:false
}],
onClick: function(index){}
}
*/
var buttonsHTML = '';
if (params.buttons && params.buttons.length > 0) {
for (var i = 0; i < params.buttons.length; i++) {
buttonsHTML += '<span class="modal-button' + (params.buttons[i].bold ? ' modal-button-bold' : '') + '">' + params.buttons[i].text + '</span>';
}
}
var modalTemplate = app.params.modalTemplate;
if (!params.title) {
modalTemplate = modalTemplate.split('{{if title}}')[0] + modalTemplate.split('{{/if title}}')[1];
var modalHTML = '';
if (app.params.modalTemplate) {
modalHTML = t7(app.params.modalTemplate, params);
}
else {
modalTemplate = modalTemplate.replace(/{{if\ title}}/g, '').replace(/{{\/if\ title}}/g, '');
var buttonsHTML = '';
if (params.buttons && params.buttons.length > 0) {
for (var i = 0; i < params.buttons.length; i++) {
buttonsHTML += '<span class="modal-button' + (params.buttons[i].bold ? ' modal-button-bold' : '') + '">' + params.buttons[i].text + '</span>';
}
}
var titleHTML = params.title ? '<div class="modal-title">' + params.title + '</div>' : '';
var textHTML = params.title ? '<div class="modal-text">' + params.text + '</div>' : '';
var afterTextHTML = params.afterText ? params.afterText : '';
var noButtons = !params.buttons || params.buttons.length === 0 ? 'modal-no-buttons' : '';
modalHTML = '<div class="modal ' + noButtons + '"><div class="modal-inner">' + (titleHTML + textHTML + afterTextHTML) + '</div><div class="modal-buttons">' + buttonsHTML + '</div></div>';
}
var modalHTML = modalTemplate
.replace(/{{title}}/g, params.title || '')
.replace(/{{text}}/g, params.text || '')
.replace(/{{afterText}}/g, params.afterText || '')
.replace(/{{buttons}}/g, buttonsHTML)
.replace(/{{noButtons}}/g, !params.buttons || params.buttons.length === 0 ? 'modal-no-buttons' : '');

_modalTemplateTempDiv.innerHTML = modalHTML;

var modal = $(_modalTemplateTempDiv).children();
Expand Down Expand Up @@ -180,21 +165,27 @@ app.actions = function (params) {
if (params.length > 0 && !$.isArray(params[0])) {
params = [params];
}
var modalHTML;

var actionsTemplate = app.params.modalActionsTemplate;
var buttonsHTML = '';
for (var i = 0; i < params.length; i++) {
for (var j = 0; j < params[i].length; j++) {
if (j === 0) buttonsHTML += '<div class="actions-modal-group">';
var button = params[i][j];
var buttonClass = button.label ? 'actions-modal-label' : 'actions-modal-button';
if (button.bold) buttonClass += ' actions-modal-button-bold';
if (button.color) buttonClass += ' color-' + button.color;
buttonsHTML += '<span class="' + buttonClass + '">' + button.text + '</span>';
if (j === params[i].length - 1) buttonsHTML += '</div>';
if (app.params.modalActionsTemplate) {
modalHTML = t7(app.params.modalActionsTemplate, params);
}
else {
var buttonsHTML = '';
for (var i = 0; i < params.length; i++) {
for (var j = 0; j < params[i].length; j++) {
if (j === 0) buttonsHTML += '<div class="actions-modal-group">';
var button = params[i][j];
var buttonClass = button.label ? 'actions-modal-label' : 'actions-modal-button';
if (button.bold) buttonClass += ' actions-modal-button-bold';
if (button.color) buttonClass += ' color-' + button.color;
buttonsHTML += '<span class="' + buttonClass + '">' + button.text + '</span>';
if (j === params[i].length - 1) buttonsHTML += '</div>';
}
}
modalHTML = '<div class="actions-modal">' + buttonsHTML + '</div>';
}
var modalHTML = actionsTemplate.replace(/{{buttons}}/g, buttonsHTML);

_modalTemplateTempDiv.innerHTML = modalHTML;
var modal = $(_modalTemplateTempDiv).children();
Expand Down Expand Up @@ -406,15 +397,17 @@ app.closeModal = function (modal) {
overlay.removeClass('modal-overlay-visible');

modal.trigger('close');

if (!isPopover) {
modal.removeClass('modal-in').addClass('modal-out').transitionEnd(function (e) {
if (modal.hasClass('modal-out')) modal.trigger('closed');
else modal.trigger('opened');

if (isPopup || isLoginScreen) {
modal.removeClass('modal-out').hide();
if (removeOnClose && modal.length > 0) modal.remove();
if (removeOnClose && modal.length > 0) {
modal.remove();
}
}
else {
modal.remove();
Expand All @@ -423,7 +416,9 @@ app.closeModal = function (modal) {
}
else {
modal.removeClass('modal-in modal-out').trigger('closed').hide();
if (removeOnClose) modal.remove();
if (removeOnClose) {
modal.remove();
}
}
return true;
};
Loading

0 comments on commit 2a9fa4b

Please sign in to comment.