├── LICENSE ├── README.md ├── assets ├── admin_enqueue_css.css ├── admin_enqueue_js.js ├── front_enqueue_css.css ├── front_enqueue_iframe_css.css ├── front_enqueue_js.js └── js │ └── test_element.js ├── test_vc_map.php └── vc_templates └── test_element.php /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | vc-dev-example 2 | ============== 3 | 4 | Basic example to show how you can work with backbone views in Visual Composer http://vc.wpbakery.com 5 | -------------------------------------------------------------------------------- /assets/admin_enqueue_css.css: -------------------------------------------------------------------------------- 1 | .wpb_test_element.wpb_content_element > .wpb_element_wrapper { 2 | background: #f1f2a4; /* To check if this css is working */ 3 | } -------------------------------------------------------------------------------- /assets/admin_enqueue_js.js: -------------------------------------------------------------------------------- 1 | console && console.log('admin_enqueue_js.js is loaded'); 2 | // Come from vc_map -> 'js_view' => 'ViewTestElement' 3 | window.ViewTestElement = vc.shortcode_view.extend({ 4 | // Render method called after element is added( cloned ), and on first initialisation 5 | render: function () { 6 | console && console.log('ViewTestElement: render method called.'); 7 | window.ViewTestElement.__super__.render.call(this); //make sure to call __super__. To execute logic fron inherited view. That way you can extend original logic. Otherwise, you will fully rewrite what VC will do at this event 8 | 9 | return this; 10 | }, 11 | ready: function (e) { 12 | console && console.log('ViewTestElement: ready method called.'); 13 | window.ViewTestElement.__super__.ready.call(this, e); 14 | 15 | return this; 16 | }, 17 | //Called every time when params is changed/appended. Also on first initialisation 18 | changeShortcodeParams: function (model) { 19 | console && console.log('ViewTestElement: changeShortcodeParams method called.'); 20 | console && console.log(model.getParam('value') + ': this was maped in vc_map() "param_name" => "value"'); 21 | window.ViewTestElement.__super__.changeShortcodeParams.call(this, model); 22 | }, 23 | changeShortcodeParent: function (model) { 24 | console && console.log('ViewTestElement: changeShortcodeParent method called.'); 25 | window.ViewTestElement.__super__.changeShortcodeParent.call(this, model); 26 | }, 27 | deleteShortcode: function (e) { 28 | console && console.log('ViewTestElement: deleteShortcode method called.'); 29 | window.ViewTestElement.__super__.deleteShortcode.call(this, e); 30 | }, 31 | editElement: function (e) { 32 | console && console.log('ViewTestElement: editElement method called.'); 33 | window.ViewTestElement.__super__.editElement.call(this, e); 34 | }, 35 | clone: function (e) { 36 | console && console.log('ViewTestElement: clone method called.'); 37 | window.ViewTestElement.__super__.clone.call(this, e); 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /assets/front_enqueue_css.css: -------------------------------------------------------------------------------- 1 | /* Custom CSS for editor in frontend */ 2 | body { 3 | background: #a4ddf2; /* To check if this css is working */ 4 | margin-top: 20px; 5 | } 6 | body:before { 7 | content: "This comes from assets/front_enqueue_css.css file"; 8 | display: block; 9 | position: relative; 10 | top: 55px; 11 | } -------------------------------------------------------------------------------- /assets/front_enqueue_iframe_css.css: -------------------------------------------------------------------------------- 1 | .vc_element.vc_test_element { 2 | background: #d2f2a4; /* To check if this css is working */ 3 | } -------------------------------------------------------------------------------- /assets/front_enqueue_js.js: -------------------------------------------------------------------------------- 1 | console && console.log('front_enqueue_js.js is loaded'); 2 | 3 | // This name is defined automatically (InlineShortcodeView_you, for Frontend editor only 4 | window.InlineShortcodeView_test_element = window.InlineShortcodeView.extend({ 5 | // Render called every time when some of attributes changed. 6 | render: function () { 7 | console && console.log('InlineShortcodeView_test_element: render called.'); 8 | window.InlineShortcodeView_test_element.__super__.render.call(this); // it is recommended to call parent method to avoid new versions problems. 9 | 10 | // There is a place where you can implement logic for rendering / element param changing and all other javascript logic what you can imagine. 11 | this.myCustomMethodToDebugShortcode(); 12 | return this; 13 | }, 14 | /* 15 | * Show shortcode mapped parameters 16 | */ 17 | myCustomMethodToDebugShortcode: function () { 18 | var $i = this.model.settings; // shortcode settings from VC_MAP! also available in global variable "vc_mapper" 19 | var str = ''; 20 | _.each($i, function (settings, key) { 21 | var obj = {}; 22 | obj[key] = settings; 23 | str += JSON.stringify(obj) + '
'; 24 | }, this); 25 | jQuery('
Green background will be visible only in fronteditor mode and css is stored in assets/front_enqueue_iframe_css.css

This json styled info was created "on the fly" from available settings:
' + str + '
').appendTo(this.$el); 26 | }, 27 | updated: function () { 28 | console && console.log('InlineShortcodeView_test_element: updated called.'); 29 | window.InlineShortcodeView_test_element.__super__.updated.call(this); 30 | 31 | // This is example how you can re-render pieChart Doughnut in frontend editor. 32 | var $i = this.$el.find('canvas'); 33 | window.vc.frame_window.TestElementRender($i); 34 | }, 35 | parentChanged: function () { 36 | console && console.log('InlineShortcodeView_test_element: parentChanged called.'); 37 | window.InlineShortcodeView_test_element.__super__.parentChanged.call(this); 38 | } 39 | // Available other methods too, see in InlineShortcodeView model (file: js_composer/assets/js/frontend_editor/frontend_editor.js 40 | }); -------------------------------------------------------------------------------- /assets/js/test_element.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Chart.js 3 | * http://chartjs.org/ 4 | * 5 | * Copyright 2013 Nick Downie 6 | * Released under the MIT license 7 | * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md 8 | * Modified by Pavel for only Doughnut char with value label 9 | */ 10 | window.Chart = function (context) { 11 | 12 | var chart = this; 13 | 14 | //Easing functions adapted from Robert Penner's easing equations 15 | //http://www.robertpenner.com/easing/ 16 | 17 | var animationOptions = { 18 | linear: function (t) { 19 | return t; 20 | }, 21 | easeInQuad: function (t) { 22 | return t * t; 23 | }, 24 | easeOutQuad: function (t) { 25 | return -1 * t * (t - 2); 26 | }, 27 | easeInOutQuad: function (t) { 28 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t; 29 | return -1 / 2 * ((--t) * (t - 2) - 1); 30 | }, 31 | easeInCubic: function (t) { 32 | return t * t * t; 33 | }, 34 | easeOutCubic: function (t) { 35 | return 1 * ((t = t / 1 - 1) * t * t + 1); 36 | }, 37 | easeInOutCubic: function (t) { 38 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t; 39 | return 1 / 2 * ((t -= 2) * t * t + 2); 40 | }, 41 | easeInQuart: function (t) { 42 | return t * t * t * t; 43 | }, 44 | easeOutQuart: function (t) { 45 | return -1 * ((t = t / 1 - 1) * t * t * t - 1); 46 | }, 47 | easeInOutQuart: function (t) { 48 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t; 49 | return -1 / 2 * ((t -= 2) * t * t * t - 2); 50 | }, 51 | easeInQuint: function (t) { 52 | return 1 * (t /= 1) * t * t * t * t; 53 | }, 54 | easeOutQuint: function (t) { 55 | return 1 * ((t = t / 1 - 1) * t * t * t * t + 1); 56 | }, 57 | easeInOutQuint: function (t) { 58 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t * t; 59 | return 1 / 2 * ((t -= 2) * t * t * t * t + 2); 60 | }, 61 | easeInSine: function (t) { 62 | return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1; 63 | }, 64 | easeOutSine: function (t) { 65 | return 1 * Math.sin(t / 1 * (Math.PI / 2)); 66 | }, 67 | easeInOutSine: function (t) { 68 | return -1 / 2 * (Math.cos(Math.PI * t / 1) - 1); 69 | }, 70 | easeInExpo: function (t) { 71 | return (t == 0) ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1)); 72 | }, 73 | easeOutExpo: function (t) { 74 | return (t == 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1); 75 | }, 76 | easeInOutExpo: function (t) { 77 | if (t == 0) return 0; 78 | if (t == 1) return 1; 79 | if ((t /= 1 / 2) < 1) return 1 / 2 * Math.pow(2, 10 * (t - 1)); 80 | return 1 / 2 * (-Math.pow(2, -10 * --t) + 2); 81 | }, 82 | easeInCirc: function (t) { 83 | if (t >= 1) return t; 84 | return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1); 85 | }, 86 | easeOutCirc: function (t) { 87 | return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t); 88 | }, 89 | easeInOutCirc: function (t) { 90 | if ((t /= 1 / 2) < 1) return -1 / 2 * (Math.sqrt(1 - t * t) - 1); 91 | return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1); 92 | }, 93 | easeInElastic: function (t) { 94 | var s = 1.70158; 95 | var p = 0; 96 | var a = 1; 97 | if (t == 0) return 0; 98 | if ((t /= 1) == 1) return 1; 99 | if (!p) p = 1 * .3; 100 | if (a < Math.abs(1)) { 101 | a = 1; 102 | var s = p / 4; 103 | } 104 | else var s = p / (2 * Math.PI) * Math.asin(1 / a); 105 | return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p)); 106 | }, 107 | easeOutElastic: function (t) { 108 | var s = 1.70158; 109 | var p = 0; 110 | var a = 1; 111 | if (t == 0) return 0; 112 | if ((t /= 1) == 1) return 1; 113 | if (!p) p = 1 * .3; 114 | if (a < Math.abs(1)) { 115 | a = 1; 116 | var s = p / 4; 117 | } 118 | else var s = p / (2 * Math.PI) * Math.asin(1 / a); 119 | return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1; 120 | }, 121 | easeInOutElastic: function (t) { 122 | var s = 1.70158; 123 | var p = 0; 124 | var a = 1; 125 | if (t == 0) return 0; 126 | if ((t /= 1 / 2) == 2) return 1; 127 | if (!p) p = 1 * (.3 * 1.5); 128 | if (a < Math.abs(1)) { 129 | a = 1; 130 | var s = p / 4; 131 | } 132 | else var s = p / (2 * Math.PI) * Math.asin(1 / a); 133 | if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p)); 134 | return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * .5 + 1; 135 | }, 136 | easeInBack: function (t) { 137 | var s = 1.70158; 138 | return 1 * (t /= 1) * t * ((s + 1) * t - s); 139 | }, 140 | easeOutBack: function (t) { 141 | var s = 1.70158; 142 | return 1 * ((t = t / 1 - 1) * t * ((s + 1) * t + s) + 1); 143 | }, 144 | easeInOutBack: function (t) { 145 | var s = 1.70158; 146 | if ((t /= 1 / 2) < 1) return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)); 147 | return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2); 148 | }, 149 | easeInBounce: function (t) { 150 | return 1 - animationOptions.easeOutBounce(1 - t); 151 | }, 152 | easeOutBounce: function (t) { 153 | if ((t /= 1) < (1 / 2.75)) { 154 | return 1 * (7.5625 * t * t); 155 | } else if (t < (2 / 2.75)) { 156 | return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + .75); 157 | } else if (t < (2.5 / 2.75)) { 158 | return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375); 159 | } else { 160 | return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375); 161 | } 162 | }, 163 | easeInOutBounce: function (t) { 164 | if (t < 1 / 2) return animationOptions.easeInBounce(t * 2) * .5; 165 | return animationOptions.easeOutBounce(t * 2 - 1) * .5 + 1 * .5; 166 | } 167 | }; 168 | 169 | //Variables global to the chart 170 | var width = context.canvas.width; 171 | var height = context.canvas.height; 172 | 173 | //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale. 174 | if (window.devicePixelRatio) { 175 | context.canvas.style.width = width + "px"; 176 | context.canvas.style.height = height + "px"; 177 | context.canvas.height = height * window.devicePixelRatio; 178 | context.canvas.width = width * window.devicePixelRatio; 179 | context.scale(window.devicePixelRatio, window.devicePixelRatio); 180 | } 181 | 182 | this.Doughnut = function (data, options) { 183 | 184 | chart.Doughnut.defaults = { 185 | segmentShowStroke: true, 186 | segmentStrokeColor: "#fff", 187 | segmentStrokeWidth: 2, 188 | percentageInnerCutout: 50, 189 | animation: true, 190 | animationSteps: 100, 191 | animationEasing: "easeOutBounce", 192 | animateRotate: true, 193 | animateScale: false, 194 | onAnimationComplete: null 195 | }; 196 | 197 | var config = (options) ? mergeChartConfig(chart.Doughnut.defaults, options) : chart.Doughnut.defaults; 198 | 199 | return new Doughnut(data, config, context); 200 | 201 | }; 202 | 203 | var clear = function (c) { 204 | c.clearRect(0, 0, width, height); 205 | }; 206 | 207 | var Doughnut = function (data, config, ctx) { 208 | var segmentTotal = 0; 209 | 210 | //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge. 211 | var doughnutRadius = Min([height / 2, width / 2]) - 5; 212 | 213 | var cutoutRadius = doughnutRadius * (config.percentageInnerCutout / 100); 214 | //var max=-1; 215 | for (var i = 0; i < data.length; i++) { 216 | segmentTotal += data[i].value; 217 | /*if(data[i].value>max) { 218 | max=data[i].value; 219 | }*/ 220 | } 221 | 222 | animationLoop(config, null, drawPieSegments, ctx); 223 | 224 | function drawPieSegments(animationDecimal) { 225 | var cumulativeAngle = -Math.PI / 2, 226 | scaleAnimation = 1, 227 | rotateAnimation = 1; 228 | if (config.animation) { 229 | if (config.animateScale) { 230 | scaleAnimation = animationDecimal; 231 | } 232 | if (config.animateRotate) { 233 | rotateAnimation = animationDecimal; 234 | } 235 | } 236 | for (var i = 0; i < data.length; i++) { 237 | var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (Math.PI * 2)); 238 | ctx.beginPath(); 239 | ctx.arc(width / 2, height / 2, scaleAnimation * doughnutRadius, cumulativeAngle, cumulativeAngle + segmentAngle, false); 240 | ctx.arc(width / 2, height / 2, scaleAnimation * cutoutRadius, cumulativeAngle + segmentAngle, cumulativeAngle, true); 241 | ctx.closePath(); 242 | ctx.fillStyle = data[i].color; 243 | ctx.fill(); 244 | 245 | if (config.segmentShowStroke) { 246 | ctx.lineWidth = config.segmentStrokeWidth; 247 | ctx.strokeStyle = config.segmentStrokeColor; 248 | ctx.stroke(); 249 | } 250 | cumulativeAngle += segmentAngle; 251 | } 252 | 253 | ctx.textAlign = "center"; 254 | ctx.textBaseline = "middle"; 255 | ctx.font = '20pt Calibri'; 256 | ctx.fillStyle = '#000'; 257 | //alert(max); 258 | ctx.fillText(data[0].value, width / 2, height / 2 + 4); 259 | } 260 | 261 | } 262 | 263 | function calculateOffset(val, calculatedScale, scaleHop) { 264 | var outerValue = calculatedScale.steps * calculatedScale.stepValue; 265 | var adjustedValue = val - calculatedScale.graphMin; 266 | var scalingFactor = CapValue(adjustedValue / outerValue, 1, 0); 267 | return (scaleHop * calculatedScale.steps) * scalingFactor; 268 | } 269 | 270 | function animationLoop(config, drawScale, drawData, ctx) { 271 | var animFrameAmount = (config.animation) ? 1 / CapValue(config.animationSteps, Number.MAX_VALUE, 1) : 1, 272 | easingFunction = animationOptions[config.animationEasing], 273 | percentAnimComplete = (config.animation) ? 0 : 1; 274 | 275 | if (typeof drawScale !== "function") drawScale = function () { 276 | }; 277 | 278 | requestAnimFrame(animLoop); 279 | 280 | function animateFrame() { 281 | var easeAdjustedAnimationPercent = (config.animation) ? CapValue(easingFunction(percentAnimComplete), null, 0) : 1; 282 | clear(ctx); 283 | if (config.scaleOverlay) { 284 | drawData(easeAdjustedAnimationPercent); 285 | drawScale(); 286 | } else { 287 | drawScale(); 288 | drawData(easeAdjustedAnimationPercent); 289 | } 290 | } 291 | 292 | function animLoop() { 293 | //We need to check if the animation is incomplete (less than 1), or complete (1). 294 | percentAnimComplete += animFrameAmount; 295 | animateFrame(); 296 | //Stop the loop continuing forever 297 | if (percentAnimComplete <= 1) { 298 | requestAnimFrame(animLoop); 299 | } 300 | else { 301 | if (typeof config.onAnimationComplete == "function") config.onAnimationComplete(); 302 | } 303 | 304 | } 305 | 306 | } 307 | 308 | //Declare global functions to be called within this namespace here. 309 | 310 | // shim layer with setTimeout fallback 311 | var requestAnimFrame = (function () { 312 | return window.requestAnimationFrame || 313 | window.webkitRequestAnimationFrame || 314 | window.mozRequestAnimationFrame || 315 | window.oRequestAnimationFrame || 316 | window.msRequestAnimationFrame || 317 | function (callback) { 318 | window.setTimeout(callback, 1000 / 60); 319 | }; 320 | })(); 321 | 322 | function calculateScale(drawingHeight, maxSteps, minSteps, maxValue, minValue, labelTemplateString) { 323 | var graphMin, graphMax, graphRange, stepValue, numberOfSteps, valueRange, rangeOrderOfMagnitude, decimalNum; 324 | 325 | valueRange = maxValue - minValue; 326 | 327 | rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange); 328 | 329 | graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude); 330 | 331 | graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude); 332 | 333 | graphRange = graphMax - graphMin; 334 | 335 | stepValue = Math.pow(10, rangeOrderOfMagnitude); 336 | 337 | numberOfSteps = Math.round(graphRange / stepValue); 338 | 339 | //Compare number of steps to the max and min for that size graph, and add in half steps if need be. 340 | while (numberOfSteps < minSteps || numberOfSteps > maxSteps) { 341 | if (numberOfSteps < minSteps) { 342 | stepValue /= 2; 343 | numberOfSteps = Math.round(graphRange / stepValue); 344 | } 345 | else { 346 | stepValue *= 2; 347 | numberOfSteps = Math.round(graphRange / stepValue); 348 | } 349 | } 350 | ; 351 | 352 | var labels = []; 353 | populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue); 354 | 355 | return { 356 | steps: numberOfSteps, 357 | stepValue: stepValue, 358 | graphMin: graphMin, 359 | labels: labels 360 | 361 | } 362 | 363 | function calculateOrderOfMagnitude(val) { 364 | return Math.floor(Math.log(val) / Math.LN10); 365 | } 366 | 367 | } 368 | 369 | //Populate an array of all the labels by interpolating the string. 370 | function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) { 371 | if (labelTemplateString) { 372 | //Fix floating point errors by setting to fixed the on the same decimal as the stepValue. 373 | for (var i = 1; i < numberOfSteps + 1; i++) { 374 | labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))})); 375 | } 376 | } 377 | } 378 | 379 | //Max value from array 380 | function Max(array) { 381 | return Math.max.apply(Math, array); 382 | }; 383 | //Min value from array 384 | function Min(array) { 385 | return Math.min.apply(Math, array); 386 | }; 387 | //Default if undefined 388 | function Default(userDeclared, valueIfFalse) { 389 | if (!userDeclared) { 390 | return valueIfFalse; 391 | } else { 392 | return userDeclared; 393 | } 394 | }; 395 | //Is a number function 396 | function isNumber(n) { 397 | return !isNaN(parseFloat(n)) && isFinite(n); 398 | } 399 | 400 | //Apply cap a value at a high or low number 401 | function CapValue(valueToCap, maxValue, minValue) { 402 | if (isNumber(maxValue)) { 403 | if (valueToCap > maxValue) { 404 | return maxValue; 405 | } 406 | } 407 | if (isNumber(minValue)) { 408 | if (valueToCap < minValue) { 409 | return minValue; 410 | } 411 | } 412 | return valueToCap; 413 | } 414 | 415 | function getDecimalPlaces(num) { 416 | var numberOfDecimalPlaces; 417 | if (num % 1 != 0) { 418 | return num.toString().split(".")[1].length 419 | } 420 | else { 421 | return 0; 422 | } 423 | 424 | } 425 | 426 | function mergeChartConfig(defaults, userDefined) { 427 | var returnObj = {}; 428 | for (var attrname in defaults) { 429 | returnObj[attrname] = defaults[attrname]; 430 | } 431 | for (var attrname in userDefined) { 432 | returnObj[attrname] = userDefined[attrname]; 433 | } 434 | return returnObj; 435 | } 436 | 437 | //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/ 438 | var cache = {}; 439 | 440 | function tmpl(str, data) { 441 | // Figure out if we're getting a template, or if we need to 442 | // load the template - and be sure to cache the result. 443 | var fn = !/\W/.test(str) ? 444 | cache[str] = cache[str] || 445 | tmpl(document.getElementById(str).innerHTML) : 446 | 447 | // Generate a reusable function that will serve as a template 448 | // generator (and which will be cached). 449 | new Function("obj", 450 | "var p=[],print=function(){p.push.apply(p,arguments);};" + 451 | 452 | // Introduce the data as local variables using with(){} 453 | "with(obj){p.push('" + 454 | 455 | // Convert the template into pure JavaScript 456 | str 457 | .replace(/[\r\t\n]/g, " ") 458 | .split("<%").join("\t") 459 | .replace(/((^|%>)[^\t]*)'/g, "$1\r") 460 | .replace(/\t=(.*?)%>/g, "',$1,'") 461 | .split("\t").join("');") 462 | .split("%>").join("p.push('") 463 | .split("\r").join("\\'") 464 | + "');}return p.join('');"); 465 | 466 | // Provide some basic currying to the user 467 | return data ? fn(data) : fn; 468 | }; 469 | }; 470 | 471 | function TestElementRender($i) { 472 | param1 = [ 473 | { 474 | value: parseInt($i.attr("data-value-first")), 475 | color: $i.attr("data-value-first-color") 476 | }, 477 | { 478 | value: parseInt($i.attr("data-value-second")), 479 | color: $i.attr("data-value-second-color") 480 | } 481 | ]; 482 | param2 = { 483 | animation: $i.attr("data-animation") == "true", 484 | segmentShowStroke: $i.attr("data-segment-stroke-show") == "true", 485 | segmentStrokeColor: $i.attr("data-segment-stroke-color"), 486 | segmentStrokeWidth: $i.attr("data-segment-stroke-width"), 487 | percentageInnerCutout: $i.attr("data-percentage-inner-cutout") 488 | }; 489 | new Chart($i.get(0).getContext("2d")).Doughnut( 490 | param1, param2 491 | ); 492 | } 493 | 494 | //Define the global Chart Variable as a class. 495 | /* 496 | data-value-first="VAL1" data-value-second="VAL2" data-value-first-color="COL1" data-value-second-color="COL2" data-animation="ANIMATION" data-segment-stroke-show="SHOWSTROKE" data-segment-stroke-color="STROKECOLOR" data-segment-stroke-width="STROKEWIDTH" data-percentage-inner-cutout="INNERFILL"*/ 497 | (function ($) { 498 | $(document).ready(function () { 499 | $(".piechartex").each(function (i, item) { 500 | $i = $(item); 501 | TestElementRender($i); 502 | }); 503 | }); 504 | })(jQuery); -------------------------------------------------------------------------------- /test_vc_map.php: -------------------------------------------------------------------------------- 1 | 21 |

'.sprintf(__('%s requires Visual Composer plugin to be installed and activated on your site.', 'vc_extend'), $plugin_data['Name']).'

22 | '; 23 | } 24 | } 25 | add_action( 'admin_notices', 'test_vc_map_dependencies' ); 26 | 27 | function text_vc_map_init() { 28 | // Note that all keys=values in mapped shortcode can be used with javascript variable vc.map, and php shortcode settings variable. 29 | $settings = array( 30 | 'name' => __( 'Test element', 'js_composer' ), 31 | // shortcode name 32 | 33 | 'base' => 'test_element', 34 | // shortcode base [test_element] 35 | 36 | 'category' => __( 'Test elements', 'js_composer' ), 37 | // param category tab in add elements view 38 | 39 | 'description' => __( 'Test element description', 'js_composer' ), 40 | // element description in add elements view 41 | 42 | 'show_settings_on_create' => false, 43 | // don't show params window after adding 44 | 45 | 'weight' => - 5, 46 | // Depends on ordering in list, Higher weight first 47 | 48 | 'html_template' => dirname( __FILE__ ) . '/vc_templates/test_element.php', 49 | // if you extend VC within your theme then you don't need this, VC will look for shortcode template in "wp-content/themes/your_theme/vc_templates/test_element.php" automatically. In this example we are extending VC from plugin, so we rewrite template 50 | 51 | 'admin_enqueue_js' => preg_replace( '/\s/', '%20', plugins_url( 'assets/admin_enqueue_js.js', __FILE__ ) ), 52 | // This will load extra js file in backend (when you edit page with VC) 53 | // use preg replace to be sure that "space" will not break logic 54 | 55 | 'admin_enqueue_css' => preg_replace( '/\s/', '%20', plugins_url( 'assets/admin_enqueue_css.css', __FILE__ ) ), 56 | // This will load extra css file in backend (when you edit page with VC) 57 | 58 | 'front_enqueue_js' => preg_replace( '/\s/', '%20', plugins_url( 'assets/front_enqueue_js.js', __FILE__ ) ), 59 | // This will load extra js file in frontend editor (when you edit page with VC) 60 | 61 | 'front_enqueue_css' => preg_replace( '/\s/', '%20', plugins_url( 'assets/front_enqueue_css.css', __FILE__ ) ), 62 | // This will load extra css file in frontend editor (when you edit page with VC) 63 | 64 | 'js_view' => 'ViewTestElement', 65 | // JS View name for backend. Can be used to override or add some logic for shortcodes in backend (cloning/rendering/deleting/editing). 66 | 67 | 'params' => array( 68 | array( 69 | "type" => "textfield", 70 | "heading" => __( "Chart value(1-100)", "js_composer" ), 71 | "param_name" => "value", 72 | "description" => __( "Chart value(number).", "js_composer" ) 73 | ), 74 | array( 75 | 'type' => 'textarea_html', 76 | 'holder' => 'div', 77 | 'class' => 'custom_class_for_element', //will be outputed in the backend editor 78 | 'heading' => __( 'Content', 'js_composer' ), 79 | 'param_name' => 'content', //param_name for textarea_html must be named "content" 80 | 'value' => __( '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo..

', 'js_composer' ), 81 | 'description' => __( 'Dummy text for content element.', 'js_composer' ) 82 | ), 83 | ) 84 | ); 85 | vc_map( $settings ); 86 | 87 | if ( class_exists( "WPBakeryShortCode" ) ) { 88 | // Class Name should be WPBakeryShortCode_Your_Short_Code 89 | // See more in vc_composer/includes/classes/shortcodes/shortcodes.php 90 | class WPBakeryShortCode_Test_Element extends WPBakeryShortCode { 91 | 92 | public function __construct( $settings ) { 93 | parent::__construct( $settings ); // !Important to call parent constructor to active all logic for shortcode. 94 | $this->jsCssScripts(); 95 | } 96 | 97 | public function vcLoadIframeJsCss() { 98 | wp_enqueue_style( 'test_element_iframe' ); 99 | } 100 | 101 | public function contentInline( $atts, $content ) { 102 | $this->vcLoadIframeJsCss(); 103 | } 104 | 105 | // Register scripts and styles there (for preview and frontend editor mode). 106 | public function jsCssScripts() { 107 | wp_register_script( 'test_element', plugins_url( 'assets/js/test_element.js', __FILE__ ), array( 'jquery' ), time(), false ); 108 | wp_register_style( 'test_element_iframe', plugins_url( 'assets/front_enqueue_iframe_css.css', __FILE__ ) ); 109 | } 110 | 111 | // Some custom helper function that can be used in content element template (vc_templates/test_element.php) 112 | // This function check some string if it matches "yes","true",1,"1" return TRUE if yes, false if NOT. 113 | public function checkBool( $in ) { 114 | if ( strlen( $in ) > 0 && in_array( strtolower( $in ), array( 115 | "yes", 116 | "true", 117 | "1", 118 | 1 119 | ) ) 120 | ) { 121 | return true; 122 | } 123 | return false; 124 | } 125 | 126 | } 127 | } // End Class 128 | } 129 | 130 | 131 | add_action('vc_after_init', 'text_vc_map_init'); 132 | 133 | -------------------------------------------------------------------------------- /vc_templates/test_element.php: -------------------------------------------------------------------------------- 1 | 100, 5 | 'bgcolor' => '#e0e4e1', 6 | 'actcolor' => '#9fcb61', 7 | 'cssanim' => true, 8 | 'showstroke' => false, 9 | 'strokecolor' => '#fff', 10 | 'strokewidth' => 2, 11 | 'innerfill' => 50, 12 | 'radius' => 50 13 | ), $atts ) ); 14 | 15 | $value = (int) $attributes['value']; 16 | if ( $value > 100 ) { 17 | $value = 100; 18 | } else if ( $value < 0 ) { 19 | $value = 0; 20 | } 21 | 22 | // Enqueue Custom JS Script 23 | wp_enqueue_script( 'test_element' ); 24 | 25 | // Enqueue Custom CSS Style 26 | //wp_enqueue_style( 'test_element_css' ); // Must be previously registered in constructor (class WPBakeryShortCode_Test_Element extends WPBakeryShortCode). 27 | 28 | // attributes for html 29 | $radius = 2 * (int) $attributes['radius']; 30 | $val1 = $value; 31 | $val2 = 100 - $value; 32 | $col1 = $attributes['actcolor']; 33 | $col2 = $attributes['bgcolor']; 34 | $animation = ( $this->checkBool( $attributes['cssanim'] ) ? "true" : "false" ); 35 | $show_stroke = ( $this->checkBool( $attributes['showstroke'] ) ? "true" : "false" ); 36 | $stroke_color = $attributes['strokecolor']; 37 | $stroke_width = (int) $attributes['strokewidth']; 38 | $inner_fill = (int) $attributes['innerfill']; 39 | 40 | ?> 41 | 42 | 53 | 54 |
55 | 56 |
57 | 58 | --------------------------------------------------------------------------------