SEO configurator mockup
bzr revid: ddm@openerp.com-20130827070435-bqrhg887ynz1f6ys
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
@charset "utf-8";
|
||||
.oe_hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -267,3 +268,16 @@
|
||||
color: #e00101;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.oe_seo_configuration input {
|
||||
width: inherit;
|
||||
}
|
||||
.oe_seo_configuration textarea {
|
||||
width: inherit;
|
||||
}
|
||||
.oe_seo_configuration ul {
|
||||
list-style: none;
|
||||
}
|
||||
.oe_seo_configuration .oe_remove {
|
||||
color: #e00101;
|
||||
}
|
||||
|
||||
@@ -194,7 +194,7 @@
|
||||
|
||||
$mobile_preview_background: #000000
|
||||
$mobile_preview_border: #1A1A1A
|
||||
$mobile_preview_close: #E00101
|
||||
$icon_close: #E00101
|
||||
#mobile-preview.modal
|
||||
height: 660px
|
||||
background-color: $mobile_preview_background
|
||||
@@ -233,5 +233,15 @@ $mobile_preview_close: #E00101
|
||||
color: lightgrey
|
||||
opacity: 1
|
||||
.close:hover
|
||||
color: $mobile_preview_close
|
||||
color: $icon_close
|
||||
opacity: 1
|
||||
|
||||
.oe_seo_configuration
|
||||
input
|
||||
width: inherit
|
||||
textarea
|
||||
width: inherit
|
||||
ul
|
||||
list-style: none
|
||||
.oe_remove
|
||||
color: $icon_close
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
'click button[data-action=cancel]': 'cancel',
|
||||
'click button[data-action=snippet]': 'snippet',
|
||||
'click a[data-action=show-mobile-preview]': 'mobilePreview',
|
||||
'click a[data-action=promote-current-page]': 'promotePage',
|
||||
},
|
||||
container: 'body',
|
||||
customize_setup: function() {
|
||||
@@ -199,7 +200,47 @@
|
||||
mobilePreview: function () {
|
||||
$('body').addClass('oe_stop_scrolling');
|
||||
document.getElementById("mobile-viewport").src = window.location.href + "?mobile-preview=true";
|
||||
},
|
||||
promotePage: function () {
|
||||
(new website.seo.Configurator()).appendTo($('body'));
|
||||
},
|
||||
});
|
||||
|
||||
/* ----- SEO TOOLS ---- */
|
||||
website.seo = {};
|
||||
website.seo.Keyword = openerp.Widget.extend({
|
||||
template: 'website.seo_keyword',
|
||||
events: {
|
||||
'click a[data-action=remove-keyword]': 'destroy',
|
||||
},
|
||||
init: function (options) {
|
||||
this.keyword = options.keyword;
|
||||
}
|
||||
});
|
||||
website.seo.Configurator = openerp.Widget.extend({
|
||||
template: 'website.seo_configuration',
|
||||
events: {
|
||||
'click button[data-action=add]': 'add',
|
||||
'click a[data-action=update]': 'update',
|
||||
},
|
||||
container: 'body',
|
||||
start: function () {
|
||||
$('input[name=seo_page_url]').val(window.location.href);
|
||||
$('input[name=seo_page_title]').val($('title').text());
|
||||
|
||||
this.$el.modal();
|
||||
},
|
||||
addKeyword: function (word) {
|
||||
new website.seo.Keyword({
|
||||
keyword: word
|
||||
}).appendTo(this.$el.find('.seo-keywords-list'));
|
||||
},
|
||||
add: function () {
|
||||
var word = this.$el.find('input[name=seo_page_keywords]').val();
|
||||
this.addKeyword(word);
|
||||
},
|
||||
update: function () {
|
||||
// TODO: Persist changes
|
||||
},
|
||||
});
|
||||
|
||||
@@ -316,14 +357,14 @@
|
||||
}
|
||||
},
|
||||
vomify: function($el){
|
||||
var hue=0;
|
||||
var hue=0;
|
||||
var beat = false;
|
||||
var a = setInterval(function(){
|
||||
var a = setInterval(function(){
|
||||
$el.css({'-webkit-filter':'hue-rotate('+hue+'deg)'}); hue += 5;
|
||||
}, 10);
|
||||
setTimeout(function(){
|
||||
clearInterval(a);
|
||||
setInterval(function(){
|
||||
setInterval(function(){
|
||||
var filter = 'hue-rotate('+hue+'deg)'+ (beat ? ' invert()' : '');
|
||||
$('html').css({'-webkit-filter': filter}); hue += 5;
|
||||
if(hue % 35 === 0){
|
||||
@@ -367,7 +408,7 @@
|
||||
// setup widget and drag and drop
|
||||
start_snippets: function(){
|
||||
var self = this;
|
||||
|
||||
|
||||
this.$('.oe_snippet').draggable({
|
||||
helper: 'clone',
|
||||
zIndex: '1000',
|
||||
@@ -492,7 +533,7 @@
|
||||
|
||||
activate_overlay_zones: function(selector){
|
||||
var $targets = $(selector);
|
||||
|
||||
|
||||
function is_visible($el){
|
||||
return $el.css('display') != 'none'
|
||||
&& $el.css('opacity') != '0'
|
||||
@@ -507,7 +548,7 @@
|
||||
var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
|
||||
return parents.length === 0;
|
||||
});
|
||||
|
||||
|
||||
var zone_template = "<div class='oe_drop_zone oe_overlay'></div>";
|
||||
$('.oe_drop_zone').remove();
|
||||
|
||||
@@ -531,7 +572,7 @@
|
||||
var self = this;
|
||||
this.activate_overlay_zones('#wrap .container');
|
||||
var $snippets = $('.oe_drop_zone');
|
||||
|
||||
|
||||
for(var i = 0, len = $snippets.length; i < len; i++){
|
||||
var $snippet = $snippets.eq(i);
|
||||
var $manipulator = $(openerp.qweb.render('website.snippet_manipulator'));
|
||||
@@ -553,10 +594,10 @@
|
||||
var y = event.pageY;
|
||||
|
||||
var pt = $snippet.css('padding-top');
|
||||
var pb = $snippet.css('padding-bottom');
|
||||
var pb = $snippet.css('padding-bottom');
|
||||
pt = Number(pt.slice(0,pt.length - 2)) || 0; //FIXME something cleaner to remove 'px'
|
||||
pb = Number(pb.slice(0,pb.length - 2)) || 0;
|
||||
|
||||
|
||||
$manipulator.addClass('oe_hover');
|
||||
event.preventDefault();
|
||||
|
||||
@@ -568,7 +609,7 @@
|
||||
$snippet.css('padding-top',pt-dy+'px');
|
||||
self.cover_target($manipulator,$snippet);
|
||||
}else if($handle.hasClass('s') || $handle.hasClass('sw') || $handle.hasClass('se')){
|
||||
|
||||
|
||||
$snippet.css('padding-bottom',pb+dy+'px');
|
||||
self.cover_target($manipulator,$snippet);
|
||||
}
|
||||
@@ -580,7 +621,7 @@
|
||||
self.activate_snippet_manipulators();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
deactivate_snippet_manipulators: function(){
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<ul class="nav pull-right">
|
||||
<li><a data-action="show-mobile-preview" href="#mobile-preview" data-toggle="modal" role="button"><span title="Mobile preview" class="icon-mobile-phone"/></a></li>
|
||||
<li class="divider-vertical"></li>
|
||||
<li><a href="#">Promote<!-- <sup><span class="badge">1</span></sup> --></a></li>
|
||||
<li><a data-action="promote-current-page" href="#"><span title="Promote page on the web">Promote</span></a></li>
|
||||
<li><a href="#">Translate</a></li>
|
||||
<li class="dropdown">
|
||||
<a id="customize-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">Customize <span class="caret"></span></a>
|
||||
@@ -53,6 +53,54 @@
|
||||
|
||||
</t>
|
||||
|
||||
<t t-name="website.seo_configuration">
|
||||
<div class="modal hide fade oe_seo_configuration" tabindex="-1" role="dialog" aria-labelledby="seo-configuration-title" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button title="Close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="seo-configuration-title">Promote your page on the web</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="seo_page_url">URL</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="seo_page_url" required="True" size="70" readonly="readonly"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="seo_page_title">Title</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="seo_page_title" required="True" size="70"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="seo_page_description">Description</label>
|
||||
<div class="controls">
|
||||
<textarea name="seo_page_description" rows="3" cols="70" size="160"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="seo_page_keywords">Keywords</label>
|
||||
<div class="controls">
|
||||
<div class="input-append">
|
||||
<input type="text" name="seo_page_keywords" required="True" size="30" placeholder="New keyword"/>
|
||||
<button data-action="add" class="btn" type="button">Add</button>
|
||||
</div>
|
||||
<ul class="seo-keywords-list">
|
||||
<!-- filled in JS -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a data-action="update" href="#" class="btn btn-primary">Update page</a>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="website.seo_keyword">
|
||||
<li><a href="#" class="oe_remove" data-action="remove-keyword"><i class="icon-trash"/></a> <span class="label seo-keyword"><t t-raw="widget.keyword"/></span></li>
|
||||
</t>
|
||||
|
||||
<t t-name="website.carousel">
|
||||
<div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
|
||||
<div class='container'>
|
||||
|
||||
Reference in New Issue
Block a user