SEO configurator mockup

bzr revid: ddm@openerp.com-20130827070435-bqrhg887ynz1f6ys
This commit is contained in:
ddm
2013-08-27 09:04:35 +02:00
parent 667d96ff0c
commit bda0a4fa36
4 changed files with 127 additions and 14 deletions
+14
View File
@@ -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;
}
+12 -2
View File
@@ -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
+52 -11
View File
@@ -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(){
+49 -1
View File
@@ -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'>