diff --git a/assets/css/style.scss b/assets/css/style.scss index 612c5881..cb776bde 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -2,10 +2,10 @@ #optimole-app { padding: 0 30px 0 20px; - $primary: #e7602a; + $primary: #EF686B; $success: #34a85e; - $danger: #d54222; - $info: #008ec2; + $danger: #D54222; + $info: #5180C1; @import "~bulma/bulma"; diff --git a/assets/img/logo.png b/assets/img/logo.png index 1a63da60..e0f058b2 100644 Binary files a/assets/img/logo.png and b/assets/img/logo.png differ diff --git a/assets/js/bundle.js b/assets/js/bundle.js index f40b6798..a60d209e 100644 --- a/assets/js/bundle.js +++ b/assets/js/bundle.js @@ -67,56 +67,56 @@ /* 0 */ /***/ (function(module, exports) { -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ -// css base code, injected by the css-loader -module.exports = function() { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - var result = []; - for(var i = 0; i < this.length; i++) { - var item = this[i]; - if(item[2]) { - result.push("@media " + item[2] + "{" + item[1] + "}"); - } else { - result.push(item[1]); - } - } - return result.join(""); - }; - - // import a list of modules into the list - list.i = function(modules, mediaQuery) { - if(typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for(var i = 0; i < this.length; i++) { - var id = this[i][0]; - if(typeof id === "number") - alreadyImportedModules[id] = true; - } - for(i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if(mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if(mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; - } - list.push(item); - } - } - }; - return list; -}; +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ +// css base code, injected by the css-loader +module.exports = function() { + var list = []; + + // return the list of modules as css string + list.toString = function toString() { + var result = []; + for(var i = 0; i < this.length; i++) { + var item = this[i]; + if(item[2]) { + result.push("@media " + item[2] + "{" + item[1] + "}"); + } else { + result.push(item[1]); + } + } + return result.join(""); + }; + + // import a list of modules into the list + list.i = function(modules, mediaQuery) { + if(typeof modules === "string") + modules = [[null, modules, ""]]; + var alreadyImportedModules = {}; + for(var i = 0; i < this.length; i++) { + var id = this[i][0]; + if(typeof id === "number") + alreadyImportedModules[id] = true; + } + for(i = 0; i < modules.length; i++) { + var item = modules[i]; + // skip already imported module + // this implementation is not 100% perfect for weird media query combinations + // when a module is imported multiple times with different media queries. + // I hope this will never occur (Hey this way we have smaller bundles) + if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { + if(mediaQuery && !item[2]) { + item[2] = mediaQuery; + } else if(mediaQuery) { + item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; + } + list.push(item); + } + } + }; + return list; +}; /***/ }), @@ -11342,27 +11342,27 @@ Vue.compile = compileToFunctions; /* 3 */ /***/ (function(module, exports) { -var g; - -// This works in non-strict mode -g = (function() { - return this; -})(); - -try { - // This works if eval is allowed (see CSP) - g = g || Function("return this")() || (1,eval)("this"); -} catch(e) { - // This works if the window reference is available - if(typeof window === "object") - g = window; -} - -// g can still be undefined, but nothing to do about it... -// We return undefined, instead of nothing here, so it's -// easier to handle this case. if(!global) { ...} - -module.exports = g; +var g; + +// This works in non-strict mode +g = (function() { + return this; +})(); + +try { + // This works if eval is allowed (see CSP) + g = g || Function("return this")() || (1,eval)("this"); +} catch(e) { + // This works if the window reference is available + if(typeof window === "object") + g = window; +} + +// g can still be undefined, but nothing to do about it... +// We return undefined, instead of nothing here, so it's +// easier to handle this case. if(!global) { ...} + +module.exports = g; /***/ }), @@ -11569,7 +11569,7 @@ if (false) {(function () { module.hot.accept() var hotAPI = require("vue-hot-reload-api") hotAPI.install(require("vue"), true) if (!hotAPI.compatible) return - var id = "/Users/selul/dev/optimole-wp/assets/vue/components/api-key-form.vue" + var id = "D:\\local\\optimolewp\\app\\public\\wp-content\\plugins\\optimole-wp\\assets\\vue\\components\\api-key-form.vue" if (!module.hot.data) { hotAPI.createRecord(id, module.exports) } else { @@ -13466,7 +13466,7 @@ if (false) {(function () { module.hot.accept() var hotAPI = require("vue-hot-reload-api") hotAPI.install(require("vue"), true) if (!hotAPI.compatible) return - var id = "/Users/selul/dev/optimole-wp/assets/vue/components/main.vue" + var id = "D:\\local\\optimolewp\\app\\public\\wp-content\\plugins\\optimole-wp\\assets\\vue\\components\\main.vue" if (!module.hot.data) { hotAPI.createRecord(id, module.exports) } else { @@ -13490,8 +13490,8 @@ if(content.locals) module.exports = content.locals; if(false) { // When the styles change, update the + '; + const WRONG_EXTENSION = ' http://example.org/wp-content/themes/twentyseventeen/assets/images/header.gif '; + const IMAGE_SIZE_DATA = ' + http://example.org/wp-content/uploads/optimole-wp/assets/img/logo-282x123.png + http://example.org/wp-content/plugins/optimole-wp/assets/img/test-282x123.png + '; + + const ELEMENTOR_DATA = '[{"id":"428f250c","elType":"section","settings":{"structure":"33","content_width":{"unit":"px","size":1140},"content_position":"middle","gap":"extended","padding":{"unit":"px","top":"10","right":"0","bottom":"10","left":"0","isLinked":false},"padding_mobile":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true}},"elements":[{"id":"1b041a88","elType":"column","settings":{"_column_size":25,"_inline_size":20.66,"_inline_size_tablet":25,"_inline_size_mobile":50,"content_position":"top"},"elements":[{"id":"34d685ef","elType":"widget","settings":{"image":{"id":36009,"url":"https:\/\/www.codeinwp.com\/wp-content\/uploads\/2018\/05\/codeinwp-logo.svg"},"image_size":"full","link_to":"custom","link":{"url":"https:\/\/www.codeinwp.com\/","is_external":"","nofollow":""},"align":"left","width":{"unit":"px","size":120},"space":{"unit":"%","size":100},"opacity":{"unit":"px","size":1},"_margin":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"_element_id":"logo"},"elements":[],"widgetType":"image"}],"isInner":false},{"id":"437f5756","elType":"column","settings":{"_column_size":50,"_inline_size":71.992000000000004,"_inline_size_tablet":70,"_inline_size_mobile":40,"padding_mobile":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true}},"elements":[{"id":"3c7d3ebf","elType":"widget","settings":{"align_items":"right","pointer":"none","color_menu_item":"#0a4266","menu_typography_typography":"custom","menu_typography_font_weight":"bold","menu_typography_text_transform":"lowercase","color_menu_item_hover":"#ec4646","color_menu_item_active":"#ec4646","menu_typography_font_size":{"unit":"px","size":18},"_margin":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"indicator":"none","dropdown":"mobile","full_width":"stretch","menu_typography_font_size_tablet":{"unit":"px","size":18},"padding_horizontal_menu_item_tablet":{"unit":"px","size":14},"toggle_size":{"unit":"px","size":25},"_padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"color_dropdown_item":"#0a4266","color_dropdown_item_hover":"#ec4646","background_color_dropdown_item_hover":"rgba(0,0,0,0)","dropdown_typography_typography":"custom","dropdown_typography_font_family":"proxima-nova","dropdown_typography_font_size":{"unit":"px","size":16},"menu_typography_font_size_mobile":{"unit":"px","size":18},"dropdown_typography_font_size_mobile":{"unit":"px","size":25},"dropdown_typography_text_transform":"lowercase","menu":"main-menu-homepage"},"elements":[],"widgetType":"nav-menu"}],"isInner":false},{"id":"7fafd26c","elType":"column","settings":{"_column_size":25,"_inline_size":7.3479999999999999,"_inline_size_tablet":5,"_inline_size_mobile":2},"elements":[{"id":"8f16004","elType":"widget","settings":{"image":{"url":"https:\/\/www.codeinwp.com\/wp-content\/uploads\/2018\/05\/test.png","id":36135},"image_size":"custom","width":{"unit":"px","size":30},"space":{"unit":"%","size":30},"_element_id":"header-trigger"},"elements":[],"widgetType":"image"}],"isInner":false}],"isInner":false}]'; + + public static $sample_post; + public static $sample_attachement; + + public function setUp() { + parent::setUp(); + $settings = new Optml_Settings(); + $settings->update( 'service_data', [ + 'cdn_key' => 'test123', + 'cdn_secret' => '12345', + 'whitelist' => [ 'example.com' ], + + ] ); + + Optml_Replacer::instance()->init(); + + self::$sample_post = self::factory()->post->create( [ + 'post_title' => 'Test post', + 'post_content' => self::IMG_TAGS + ] + ); + self::$sample_attachement = self::factory()->attachment->create_upload_object( OPTML_PATH . 'assets/img/logo.png' ); + + } + + public function test_image_tags() { + + $found_images = Optml_Replacer::parse_images_from_html( self::IMG_TAGS ); + + $this->assertCount( 4, $found_images ); + $this->assertCount( 1, $found_images['img_url'] ); + + $replaced_content = Optml_Replacer::instance()->filter_the_content( self::IMG_TAGS ); + + $this->assertContains( 'i.optimole.com', $replaced_content ); + $this->assertContains( '/2000/', $replaced_content ); + $this->assertContains( '/1200/', $replaced_content ); + $this->assertContains( 'i.optimole.com', $replaced_content ); + $this->assertNotContains( 'http://example.org', $replaced_content ); + } + + public function test_optimization_url() { + $replaced_content = Optml_Replacer::instance()->replace_urls( self::IMG_TAGS ); + + $this->assertContains( 'i.optimole.com', $replaced_content ); + $this->assertNotContains( 'http://example.org', $replaced_content ); + + $replaced_content = Optml_Replacer::instance()->replace_urls( self::IMG_URLS ); + + $this->assertEquals( substr_count( $replaced_content, 'i.optimole.com' ), 3 ); + } + + public function test_style_replacement() { + $replaced_content = Optml_Replacer::instance()->replace_urls( self::CSS_STYLE ); + + $this->assertContains( 'i.optimole.com', $replaced_content ); + $this->assertNotContains( 'http://example.org', $replaced_content ); + + } + + public function test_non_allowed_extensions() { + $replaced_content = Optml_Replacer::instance()->replace_urls( ( self::CSS_STYLE . self::IMG_TAGS . self::WRONG_EXTENSION ) ); + $this->assertContains( 'i.optimole.com', $replaced_content ); + //Test if wrong extension is still present in the output. + $this->assertContains( 'http://example.org/wp-content/themes/twentyseventeen/assets/images/header.gif', $replaced_content ); + + } + + public function test_elementor_data() { + $replaced_content = Optml_Replacer::instance()->replace_urls( ( self::ELEMENTOR_DATA ), 'elementor' ); + $this->assertContains( 'i.optimole.com', $replaced_content ); + //Test if wrong extension is still present in the output. + $this->assertNotContains( "https:\/\/www.codeinwp.com\/wp-content", $replaced_content ); + } + + public function test_max_size_height() { + $new_url = Optml_Replacer::instance()->get_imgcdn_url( 'http://example.org/wp-content/themes/test/assets/images/header.png', [ + 'width' => 99999, + 'height' => 99999 + ] ); + $this->assertContains( 'i.optimole.com', $new_url ); + //Test if wrong extension is still present in the output. + $this->assertNotContains( '99999', $new_url ); + + } + + public function test_post_content() { + Optml_Replacer::instance()->init(); + + $content = apply_filters( 'the_content', get_post_field( 'post_content', self::$sample_post ) ); + + $this->assertContains( 'i.optimole.com', $content ); + } + + public function test_strip_image_size() { + $replaced_content = Optml_Replacer::instance()->replace_urls( self::IMAGE_SIZE_DATA ); + + //Test fake sample image size. + $this->assertContains( 'i.optimole.com', $replaced_content ); + $this->assertContains( '282x123', $replaced_content ); + + //Test valid wordpress image size, it should strip the size suffix. + $attachement_url = wp_get_attachment_image_src( self::$sample_attachement, 'medium' ); + $replaced_content = Optml_Replacer::instance()->replace_urls( $attachement_url[0] ); + + $this->assertNotContains( '282x123', $replaced_content ); + } + + + public function test_custom_domain() { + define( 'OPTML_SITE_MIRROR', 'https://mycnd.com' ); + Optml_Replacer::instance()->init(); + + $replaced_content = Optml_Replacer::instance()->replace_urls( self::IMG_TAGS ); + + //Test custom source. + $this->assertContains( 'i.optimole.com', $replaced_content ); + $this->assertNotContains( 'http://example.org', $replaced_content ); + $this->assertNotContains( 'example.org', $replaced_content ); + $this->assertContains( 'mycnd.com', $replaced_content ); + + } + +} \ No newline at end of file diff --git a/themeisle-hash.json b/themeisle-hash.json index 1a91adf6..061c3454 100644 --- a/themeisle-hash.json +++ b/themeisle-hash.json @@ -1 +1 @@ -{"optimole-wp.php":"0b9f768d40ce5f1853725208805098c2"} \ No newline at end of file +{"optimole-wp.php":"abb54d3f46ded4432dc4dc1cef0f8bb5"} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 3b07f40c..a64ed3ac 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -56,7 +56,15 @@ module.exports = { exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { - presets: [ 'es2015' ] + presets: [ 'es2015', 'stage-0' ], + plugins: [ + ["transform-runtime", { + "helpers": false, + "polyfill": false, + "regenerator": true, + "moduleName": "babel-runtime" + }] + ] } }, {