Skip to content

Commit de21418

Browse files
shrameeshramee
committed
Address #20, #21, #22, #23, #24, #25, #27, #28, #29 
1 parent 456609e commit de21418

File tree

5 files changed

+105
-104
lines changed

5 files changed

+105
-104
lines changed

‎assets/front-end.css‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
}
2222

2323
#pootle-page-builder .pootle-slide .panel-row-style {
24-
height: 0!important;
2524
min-height: 0!important;
2625
}
2726

@@ -69,27 +68,31 @@
6968
font-style: normal;
7069
}
7170

72-
.flex-container a:hover, .flex-slider a:hover {
71+
.pootle-slider-wrap .flex-container a:hover,
72+
.pootle-slider-wrap .flex-slider a:hover {
7373
outline: 0;
7474
}
7575

76-
.flex-control-nav, .flex-direction-nav, .pootle-slider, .pootle-slider > li {
76+
.pootle-slider-wrap .flex-control-nav,
77+
.pootle-slider-wrap .flex-direction-nav,
78+
.pootle-slider,
79+
.pootle-slider > li {
7780
margin: 0;
7881
padding: 0;
7982
list-style: none;
8083
}
8184

82-
.flex-pauseplay span {
85+
.pootle-slider-wrap .flex-pauseplay span {
8386
text-transform: capitalize;
8487
}
8588

86-
.flex-direction-nav a,
87-
.flex-pauseplay a {
89+
.pootle-slider-wrap .flex-direction-nav a,
90+
.pootle-slider-wrap .flex-pauseplay a {
8891
text-decoration: none;
8992
display: block;
90-
width: 30px;
91-
height: 30px;
92-
line-height: 30px;
93+
width: 50px;
94+
height: 50px;
95+
line-height: 50px;
9396
border: none;
9497
margin: 0;
9598
position: absolute;
@@ -110,8 +113,8 @@
110113
.ppb-panels .tb-close-icon,
111114
.ppb-panels #TB_prev a,
112115
.ppb-panels #TB_next a,
113-
.flex-direction-nav a,
114-
.flex-pauseplay a {
116+
.pootle-slider-wrap .flex-direction-nav a,
117+
.pootle-slider-wrap .flex-pauseplay a {
115118
color: #fff;
116119
-moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
117120
-moz-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), -1px 1px 1px rgba(0, 0, 0, 0.5), -1px -1px 1px rgba(0, 0, 0, 0.5), 1px -1px 1px rgba(0, 0, 0, 0.5);
@@ -130,57 +133,56 @@
130133
opacity: 0.7;
131134
}
132135

133-
.flex-direction-nav a, .flex-control-nav {
136+
.pootle-slider-wrap .flex-direction-nav a, .flex-control-nav {
134137
-webkit-transition: all .3s ease-in-out;
135138
-moz-transition: all .3s ease-in-out;
136139
-ms-transition: all .3s ease-in-out;
137140
-o-transition: all .3s ease-in-out;
138141
transition: all .3s ease-in-out;
139142
}
140143

141-
.ppb-panels #TB_prev a:before,
142-
.ppb-panels #TB_next a:before,
143-
.flex-direction-nav a:before,
144-
.flex-pauseplay a:before {
144+
.pootle-slider-wrap .flex-direction-nav a:before,
145+
.pootle-slider-wrap .flex-pauseplay a:before {
145146
font-family: flexslider-icon;
146-
font-size: 20px;
147+
font-size: 44px;
147148
display: inline-block;
148149
content: '\f001';
150+
opacity: 0.5;
149151
}
150152

151-
.flex-pauseplay a:before {
153+
.pootle-slider-wrap .flex-pauseplay a:before {
152154
content: '\f004';
153155
}
154156

155-
.ppb-panels #TB_next a:before,
156-
.flex-direction-nav a.flex-next:before {
157+
.pootle-slider-wrap .flex-direction-nav a.flex-next:before {
157158
content: '\f002';
158159
}
159160

160-
.flex-direction-nav .flex-prev {
161-
right: 93px;
161+
.pootle-slider-wrap .flex-direction-nav .flex-prev {
162+
left: 0;
162163
}
163164

164-
.flex-direction-nav .flex-next {
165-
right: 25px;
165+
.pootle-slider-wrap .flex-direction-nav .flex-next {
166+
right: 0;
166167
}
167168

168-
.flex-direction-nav .flex-disabled {
169+
.pootle-slider-wrap .flex-direction-nav .flex-disabled {
169170
opacity: 0 !important;
170171
filter: alpha(opacity=0);
171172
cursor: default;
172173
z-index: -1;
173174
}
174175

175-
.flex-pauseplay a {right: 60px;}
176+
.pootle-slider-wrap .flex-pauseplay a {right: 60px;}
176177

177-
.flex-pauseplay a.flex-play:before {
178+
.pootle-slider-wrap .flex-pauseplay a.flex-play:before {
178179
content: '\f003';
179180
}
180181

181-
.flex-control-nav {
182+
.pootle-slider-wrap .flex-control-nav {
182183
z-index: 7;
183-
width: 100%;
184+
left: 0;
185+
right: 0;
184186
position: absolute;
185187
bottom: -7px;
186188
opacity: 0;
@@ -192,48 +194,48 @@
192194
opacity: 1;
193195
}
194196

195-
.flex-control-nav li {
196-
margin: 0 6px;
197+
.pootle-slider-wrap .flex-control-nav li {
198+
margin: 11px 16px;
197199
display: inline-block;
198200
zoom: 1;
199201
}
200202

201203
.pootle-slider-wrap .flex-control-paging a {
202-
width: 20px;
203-
height: 20px;
204+
width: 30px;
205+
height: 30px;
204206
display: block;
205207
background: rgba( 255,255,255,0.5 );
206208
cursor: pointer;
207209
text-indent: -9999px;
208-
-webkit-box-shadow: inset 0 0 3px rgba( 255,255,255,0.5 ), 0 0 2px 1px rgba( 0,0,0,0.7 );;
210+
-webkit-box-shadow: inset 0 0 3px rgba( 255,255,255,0.5 ), 0 0 2px 1px rgba( 0,0,0,0.7 );
209211
box-shadow: inset 0 0 3px rgba( 255,255,255,0.5 ), 0 0 2px 1px rgba( 0,0,0,0.7 );
210212
-webkit-border-radius: 20px;
211213
-moz-border-radius: 20px;
212214
border-radius: 20px;
213215
}
214216

215-
.flex-control-paging li a:hover {
217+
.pootle-slider-wrap .flex-control-paging li a:hover {
216218
background: #ddd;
217219
}
218220

219-
.flex-control-paging li a.flex-active {
221+
.pootle-slider-wrap .flex-control-paging li a.flex-active {
220222
background: #fff;
221223
cursor: default;
222224
}
223225

224-
.flex-control-thumbs {
226+
.pootle-slider-wrap .flex-control-thumbs {
225227
margin: 5px 0 0;
226228
position: static;
227229
overflow: hidden;
228230
}
229231

230-
.flex-control-thumbs li {
232+
.pootle-slider-wrap .flex-control-thumbs li {
231233
width: 25%;
232234
float: left;
233235
margin: 0;
234236
}
235237

236-
.flex-control-thumbs img {
238+
.pootle-slider-wrap .flex-control-thumbs img {
237239
width: 100%;
238240
height: auto;
239241
display: block;
@@ -247,11 +249,11 @@
247249
transition: all 1s ease;
248250
}
249251

250-
.flex-control-thumbs img:hover {
252+
.pootle-slider-wrap .flex-control-thumbs img:hover {
251253
opacity: 1;
252254
}
253255

254-
.flex-control-thumbs .flex-active {
256+
.pootle-slider-wrap .flex-control-thumbs .flex-active {
255257
opacity: 1;
256258
cursor: default;
257259
}
@@ -262,7 +264,7 @@
262264
width: 100%;
263265
}
264266

265-
.flex-pauseplay a {
267+
.pootle-slider-wrap .flex-pauseplay a {
266268
display: none;
267269
}
268270

@@ -272,12 +274,12 @@
272274
margin-top: -25px;
273275
}
274276

275-
.flex-direction-nav .flex-prev {
277+
.pootle-slider-wrap .flex-direction-nav .flex-prev {
276278
right: auto;
277279
left: 25px;
278280
}
279281

280-
.flex-direction-nav .flex-next {
282+
.pootle-slider-wrap .flex-direction-nav .flex-next {
281283
right: 25px;
282284
}
283285
}

‎assets/front-end.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
jQuery( function ( $ ) {
2+
var $bd = $( 'body' );
3+
if ( $bd.hasClass( 'single-pootle-slider' ) ) {
4+
var $ppb = $( '#pootle-page-builder' );
5+
6+
$( 'body *' )
7+
.not( '#pootlepb-modules-wrap, #pootlepb-modules-wrap *' )
8+
.not( '#wpadminbar, #wpadminbar *' )
9+
.not( '.ppb-widget, .ppb-widget *' )
10+
.not( '.pootlepb-dialog, .pootlepb-dialog *' )
11+
.not( '#pootle-page-builder, #pootle-page-builder *' )
12+
.not( $ppb.parents() )
13+
.hide();
14+
$bd.show();
15+
16+
$ppb.before(
17+
$( '<div/>' )
18+
.html(
19+
'<h1 style="margin:0">Welcome to the Pootle Slider live designer.</h1>' +
20+
"<h2 style='margin:0'>Start by dragging the 'New Slide' module over the + new icon.</h2>"
21+
)
22+
.css( {
23+
'text-align': 'center',
24+
'background-color': '#eee',
25+
margin: '0 -999px',
26+
padding: '25px 999px 16px'
27+
} )
28+
);
29+
};
30+
} );

‎assets/live-editing.js‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,40 +14,15 @@ jQuery( function ( $ ) {
1414
$setTitleDialog.ppbDialog( 'option', 'title', 'Set title of the slider' )
1515
$setTitleDialog.find( 'p' ).html( 'Please set the title for the slider' );
1616
}
17-
18-
var $ppb = $( '#pootle-page-builder' );
19-
$( 'body *' )
20-
.not( '#pootlepb-modules-wrap, #pootlepb-modules-wrap *' )
21-
.not( '#wpadminbar, #wpadminbar *' )
22-
.not( '.ppb-widget, .ppb-widget *' )
23-
.not( '.pootlepb-dialog, .pootlepb-dialog *' )
24-
.not( '#pootle-page-builder, #pootle-page-builder *' )
25-
.not( $ppb.parents() )
26-
.hide();
27-
$bd.show();
28-
29-
$ppb.before(
30-
$( '<div/>' )
31-
.html(
32-
'<h1 style="margin:0">Welcome to the Pootle Slider live designer.</h1>' +
33-
"<h2 style='margin:0'>Start by dragging the 'New Slide' module over the + new icon.</h2>"
34-
)
35-
.css( {
36-
'text-align': 'center',
37-
'background-color': '#ccc',
38-
margin: '0 -999px',
39-
padding: '25px 999px 16px'
40-
} )
41-
);
4217
}
4318

44-
window.ppbModules.pootleSliderSlide = function ( $t, ed ) {
45-
console.log( $t );
46-
var $tlbr = $t.closest( '.panel-grid' ).find( '.ppb-edit-row' );
47-
ed.execCommand( 'mceInsertContent', false, '<h1 style="color: #fff;">Write your cool headline here</h1>' );
48-
$tlbr.find( '.ui-sortable-handle' ).click();
49-
ppbData.grids[ppbRowI].style.full_width = true;
50-
ppbData.grids[ppbRowI].style.background_toggle = '.bg_image';
51-
ppbData.grids[ppbRowI].style.row_height = '500';
52-
}
19+
window.ppbModules.pootleSliderSlide = function ( $t, ed ) {
20+
console.log( $t );
21+
var $tlbr = $t.closest( '.panel-grid' ).find( '.ppb-edit-row' );
22+
ed.execCommand( 'mceInsertContent', false, '<h1 style="color: #fff;">Write your cool headline here</h1>' );
23+
$tlbr.find( '.ui-sortable-handle' ).click();
24+
ppbData.grids[ppbRowI].style.full_width = true;
25+
ppbData.grids[ppbRowI].style.background_toggle = '.bg_image';
26+
ppbData.grids[ppbRowI].style.row_height = '500';
27+
}
5328
} );

‎inc/class-public.php‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ public function enqueue() {
6868
$url = $this->url;
6969

7070
wp_enqueue_style( $token . '-css', $url . '/assets/front-end.css' );
71-
wp_enqueue_script( $token . '-js', $url . '/assets/live-editing.js', array( 'jquery', 'pootle-live-editor', ) );
71+
wp_enqueue_script( $token . '-js', $url . '/assets/front-end.js', array( 'jquery', ) );
72+
wp_enqueue_script( $token . '-le-js', $url . '/assets/live-editing.js', array( 'jquery', 'pootle-live-editor', ) );
7273
wp_enqueue_script( 'ppb-flex-slider', $url . '/assets/jquery.flexslider.min.js', array( 'jquery' ) );
7374
}
7475

@@ -153,9 +154,22 @@ private function script( $id ) {
153154
}
154155

155156
private function style( $id ) {
156-
echo <<<STYLE
157+
$ratio = $this->ratio;
158+
$ratio160p = $ratio * 1.60;
159+
$ratio250p = $ratio * 2.5;
160+
echo /** @lang html */
161+
<<<STYLE
157162
<style id="pootle-slider-style">
158-
#$id .pootle-slide .panel-row-style{padding-top: {$this->ratio}%;}
163+
#$id .pootle-slide .panel-row-style{padding-top: 160%;}
164+
@media screen and (min-width:475px) {
165+
#$id .pootle-slide .panel-row-style{padding-top: {$ratio250p}%;}
166+
}
167+
@media screen and (min-width:520px) {
168+
#$id .pootle-slide .panel-row-style{padding-top: {$ratio160p}%;}
169+
}
170+
@media screen and (min-width:800px) {
171+
#$id .pootle-slide .panel-row-style{padding-top: {$ratio}%;}
172+
}
159173
</style>
160174
STYLE;
161175
}

‎pootle-slider.php‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,10 @@
1717
/** Intantiating main plugin class */
1818
Pootle_Slider::instance( __FILE__ );
1919

20+
/**
21+
* Flush rewrite rules on activation
22+
*/
2023
register_activation_hook( __FILE__, function () {
2124
Pootle_Slider::instance( __FILE__ )->admin->register_post_type();
2225
flush_rewrite_rules();
2326
} );
24-
25-
26-
/** Addon update API */
27-
add_action( 'plugins_loaded', 'Pootle_Slider_api_init' );
28-
29-
/**
30-
* Instantiates Pootle_Page_Builder_Addon_Manager with current add-on data
31-
* @action plugins_loaded
32-
*/
33-
function Pootle_Slider_api_init() {
34-
//Return if POOTLEPB_DIR not defined
35-
if ( ! defined( 'POOTLEPB_DIR' ) ) { return; }
36-
/** Including PootlePress_API_Manager class */
37-
require_once POOTLEPB_DIR . 'inc/addon-manager/class-manager.php';
38-
/** Instantiating PootlePress_API_Manager */
39-
new Pootle_Page_Builder_Addon_Manager(
40-
Pootle_Slider::$token,
41-
'Pootle Slider',
42-
Pootle_Slider::$version,
43-
Pootle_Slider::$file,
44-
Pootle_Slider::$token
45-
);
46-
}

0 commit comments

Comments
 (0)