├── README.md
├── includes
└── highlight
│ ├── CHANGES.md
│ ├── LICENSE
│ ├── README.md
│ ├── README.ru.md
│ ├── highlight.pack.js
│ └── styles
│ ├── arta.css
│ ├── ascetic.css
│ ├── atelier-dune.dark.css
│ ├── atelier-dune.light.css
│ ├── atelier-forest.dark.css
│ ├── atelier-forest.light.css
│ ├── atelier-heath.dark.css
│ ├── atelier-heath.light.css
│ ├── atelier-lakeside.dark.css
│ ├── atelier-lakeside.light.css
│ ├── atelier-seaside.dark.css
│ ├── atelier-seaside.light.css
│ ├── brown_paper.css
│ ├── brown_papersq.png
│ ├── dark.css
│ ├── default.css
│ ├── docco.css
│ ├── far.css
│ ├── foundation.css
│ ├── github.css
│ ├── googlecode.css
│ ├── idea.css
│ ├── ir_black.css
│ ├── magula.css
│ ├── mono-blue.css
│ ├── monokai.css
│ ├── monokai_sublime.css
│ ├── obsidian.css
│ ├── paraiso.dark.css
│ ├── paraiso.light.css
│ ├── pojoaque.css
│ ├── pojoaque.jpg
│ ├── railscasts.css
│ ├── rainbow.css
│ ├── school_book.css
│ ├── school_book.png
│ ├── solarized_dark.css
│ ├── solarized_light.css
│ ├── sunburst.css
│ ├── tomorrow-night-blue.css
│ ├── tomorrow-night-bright.css
│ ├── tomorrow-night-eighties.css
│ ├── tomorrow-night.css
│ ├── tomorrow.css
│ ├── vs.css
│ ├── xcode.css
│ └── zenburn.css
├── index.php
├── screenshot-media-library.png
├── screenshot.png
├── script.js
├── sections
├── Introduction
│ └── index.php
├── Old Media Modal
│ └── index.php
├── attachment_fields_to_edit
│ └── index.php
├── wp.Backbone.View
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media()
│ └── index.php
├── wp.media.controller.Region
│ ├── examples
│ │ ├── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ │ └── 2
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media.controller.State
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media.controller.StateMachine
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media.events
│ └── index.php
├── wp.media.view.MediaFrame.Post
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media.view.MediaFrame.Select
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media.view.Modal
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media.view.PriorityList
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
├── wp.media.view.UploaderWindow
│ ├── examples
│ │ └── 1
│ │ │ ├── index.php
│ │ │ ├── script.js
│ │ │ └── style.css
│ └── index.php
└── wp.media
│ └── index.php
├── style.css
└── templates
├── 404.php
├── menu.php
├── section.php
└── template.php
/README.md:
--------------------------------------------------------------------------------
1 | WordPress Media Javascript Guide
2 | ==============================
3 |
4 | Enabling this WordPress plugin will create a top-level admin page "Media Guide," where you'll find documentation on Javascript design patterns and reusable elements from the media experience.
5 |
6 | 
--------------------------------------------------------------------------------
/includes/highlight/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2006, Ivan Sagalaev
2 | All rights reserved.
3 | Redistribution and use in source and binary forms, with or without
4 | modification, are permitted provided that the following conditions are met:
5 |
6 | * Redistributions of source code must retain the above copyright
7 | notice, this list of conditions and the following disclaimer.
8 | * Redistributions in binary form must reproduce the above copyright
9 | notice, this list of conditions and the following disclaimer in the
10 | documentation and/or other materials provided with the distribution.
11 | * Neither the name of highlight.js nor the names of its contributors
12 | may be used to endorse or promote products derived from this software
13 | without specific prior written permission.
14 |
15 | THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
16 | EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18 | DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
25 |
--------------------------------------------------------------------------------
/includes/highlight/README.md:
--------------------------------------------------------------------------------
1 | # Highlight.js
2 |
3 | Highlight.js highlights syntax in code examples on blogs, forums and,
4 | in fact, on any web page. It's very easy to use because it works
5 | automatically: finds blocks of code, detects a language, highlights it.
6 |
7 | Autodetection can be fine tuned when it fails by itself (see "Heuristics").
8 |
9 |
10 | ## Basic usage
11 |
12 | Link the library and a stylesheet from your page and hook highlighting to
13 | the page load event:
14 |
15 | ```html
16 |
17 |
18 |
19 | ```
20 |
21 | This will highlight all code on the page marked up as `
..
`.
22 | If you use different markup or need to apply highlighting dynamically, read
23 | "Custom initialization" below.
24 |
25 | - You can download your own customized version of "highlight.pack.js" or
26 | use the hosted one as described on the download page:
27 |
28 |
29 | - Style themes are available in the download package or as hosted files.
30 | To create a custom style for your site see the class reference in the file
31 | [CSS classes reference][cr] from the downloaded package.
32 |
33 | [cr]: http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
34 |
35 |
36 | ## node.js
37 |
38 | Highlight.js can be used under node.js. The package with all supported languages is
39 | installable from NPM:
40 |
41 | npm install highlight.js
42 |
43 | Alternatively, you can build it from the source with only languages you need:
44 |
45 | python3 tools/build.py -tnode lang1 lang2 ..
46 |
47 | Using the library:
48 |
49 | ```javascript
50 | var hljs = require('highlight.js');
51 |
52 | // If you know the language
53 | hljs.highlight(lang, code).value;
54 |
55 | // Automatic language detection
56 | hljs.highlightAuto(code).value;
57 | ```
58 |
59 |
60 | ## AMD
61 |
62 | Highlight.js can be used with an AMD loader. You will need to build it from
63 | source in order to do so:
64 |
65 | ```bash
66 | $ python3 tools/build.py -tamd lang1 lang2 ..
67 | ```
68 |
69 | Which will generate a `build/highlight.pack.js` which will load as an AMD
70 | module with support for the built languages and can be used like so:
71 |
72 | ```javascript
73 | require(["highlight.js/build/highlight.pack"], function(hljs){
74 |
75 | // If you know the language
76 | hljs.highlight(lang, code).value;
77 |
78 | // Automatic language detection
79 | hljs.highlightAuto(code).value;
80 | });
81 | ```
82 |
83 |
84 | ## Tab replacement
85 |
86 | You can replace TAB ('\x09') characters used for indentation in your code
87 | with some fixed number of spaces or with a `` to give them special
88 | styling:
89 |
90 | ```html
91 |
98 | ```
99 |
100 | ## Custom initialization
101 |
102 | If you use different markup for code blocks you can initialize them manually
103 | with `highlightBlock(code)` function. It takes a DOM element containing the
104 | code to highlight and optionally a string with which to replace TAB
105 | characters.
106 |
107 | Initialization using, for example, jQuery might look like this:
108 |
109 | ```javascript
110 | $(document).ready(function() {
111 | $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
112 | });
113 | ```
114 |
115 | You can use `highlightBlock` to highlight blocks dynamically inserted into
116 | the page. Just make sure you don't do it twice for already highlighted
117 | blocks.
118 |
119 | If your code container relies on ` ` tags instead of line breaks (i.e. if
120 | it's not `
`) set the `useBR` option to `true`:
121 |
122 | ```javascript
123 | hljs.configure({useBR: true});
124 | $('div.code').each(function(i, e) {hljs.highlightBlock(e)});
125 | ```
126 |
127 |
128 | ## Heuristics
129 |
130 | Autodetection of a code's language is done using a simple heuristic:
131 | the program tries to highlight a fragment with all available languages and
132 | counts all syntactic structures that it finds along the way. The language
133 | with greatest count wins.
134 |
135 | This means that in short fragments the probability of an error is high
136 | (and it really happens sometimes). In this cases you can set the fragment's
137 | language explicitly by assigning a class to the `` element:
138 |
139 | ```html
140 |
...
141 | ```
142 |
143 | You can use class names recommended in HTML5: "language-html",
144 | "language-php". Classes also can be assigned to the `
` element.
145 |
146 | To disable highlighting of a fragment altogether use "no-highlight" class:
147 |
148 | ```html
149 |
...
150 | ```
151 |
152 |
153 | ## Export
154 |
155 | File export.html contains a little program that allows you to paste in a code
156 | snippet and then copy and paste the resulting HTML code generated by the
157 | highlighter. This is useful in situations when you can't use the script itself
158 | on a site.
159 |
160 |
161 | ## Meta
162 |
163 | - Version: 8.0
164 | - URL: http://highlightjs.org/
165 |
166 | For the license terms see LICENSE files.
167 | For authors and contributors see AUTHORS.en.txt file.
168 |
--------------------------------------------------------------------------------
/includes/highlight/README.ru.md:
--------------------------------------------------------------------------------
1 | # Highlight.js
2 |
3 | Highlight.js нужен для подсветки синтаксиса в примерах кода в блогах,
4 | форумах и вообще на любых веб-страницах. Пользоваться им очень просто,
5 | потому что работает он автоматически: сам находит блоки кода, сам
6 | определяет язык, сам подсвечивает.
7 |
8 | Автоопределением языка можно управлять, когда оно не справляется само (см.
9 | дальше "Эвристика").
10 |
11 |
12 | ## Простое использование
13 |
14 | Подключите библиотеку и стиль на страницу и повесть вызов подсветки на
15 | загрузку страницы:
16 |
17 | ```html
18 |
19 |
20 |
21 | ```
22 |
23 | Весь код на странице, обрамлённый в теги `
..
`
24 | будет автоматически подсвечен. Если вы используете другие теги или хотите
25 | подсвечивать блоки кода динамически, читайте "Инициализацию вручную" ниже.
26 |
27 | - Вы можете скачать собственную версию "highlight.pack.js" или сослаться
28 | на захостенный файл, как описано на странице загрузки:
29 |
30 |
31 | - Стилевые темы можно найти в загруженном архиве или также использовать
32 | захостенные. Чтобы сделать собственный стиль для своего сайта, вам
33 | будет полезен [CSS classes reference][cr], который тоже есть в архиве.
34 |
35 | [cr]: http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
36 |
37 |
38 | ## node.js
39 |
40 | Highlight.js можно использовать в node.js. Библиотеку со всеми возможными языками можно
41 | установить с NPM:
42 |
43 | npm install highlight.js
44 |
45 | Также её можно собрать из исходников с только теми языками, которые нужны:
46 |
47 | python3 tools/build.py -tnode lang1 lang2 ..
48 |
49 | Использование библиотеки:
50 |
51 | ```javascript
52 | var hljs = require('highlight.js');
53 |
54 | // Если вы знаете язык
55 | hljs.highlight(lang, code).value;
56 |
57 | // Автоопределение языка
58 | hljs.highlightAuto(code).value;
59 | ```
60 |
61 |
62 | ## AMD
63 |
64 | Highlight.js можно использовать с загрузчиком AMD-модулей. Для этого его
65 | нужно собрать из исходников следующей командой:
66 |
67 | ```bash
68 | $ python3 tools/build.py -tamd lang1 lang2 ..
69 | ```
70 |
71 | Она создаст файл `build/highlight.pack.js`, который является загружаемым
72 | AMD-модулем и содержит все выбранные при сборке языки. Используется он так:
73 |
74 | ```javascript
75 | require(["highlight.js/build/highlight.pack"], function(hljs){
76 |
77 | // Если вы знаете язык
78 | hljs.highlight(lang, code).value;
79 |
80 | // Автоопределение языка
81 | hljs.highlightAuto(code).value;
82 | });
83 | ```
84 |
85 |
86 | ## Замена TABов
87 |
88 | Также вы можете заменить символы TAB ('\x09'), используемые для отступов, на
89 | фиксированное количество пробелов или на отдельный ``, чтобы задать ему
90 | какой-нибудь специальный стиль:
91 |
92 | ```html
93 |
100 | ```
101 |
102 |
103 | ## Инициализация вручную
104 |
105 | Если вы используете другие теги для блоков кода, вы можете инициализировать их
106 | явно с помощью функции `highlightBlock(code)`. Она принимает DOM-элемент с
107 | текстом расцвечиваемого кода и опционально - строчку для замены символов TAB.
108 |
109 | Например с использованием jQuery код инициализации может выглядеть так:
110 |
111 | ```javascript
112 | $(document).ready(function() {
113 | $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
114 | });
115 | ```
116 |
117 | `highlightBlock` можно также использовать, чтобы подсветить блоки кода,
118 | добавленные на страницу динамически. Только убедитесь, что вы не делаете этого
119 | повторно для уже раскрашенных блоков.
120 |
121 | Если ваш блок кода использует ` ` вместо переводов строки (т.е. если это не
122 | `
`), включите опцию `useBR`:
123 |
124 | ```javascript
125 | hljs.configure({useBR: true});
126 | $('div.code').each(function(i, e) {hljs.highlightBlock(e)});
127 | ```
128 |
129 |
130 | ## Эвристика
131 |
132 | Определение языка, на котором написан фрагмент, делается с помощью
133 | довольно простой эвристики: программа пытается расцветить фрагмент всеми
134 | языками подряд, и для каждого языка считает количество подошедших
135 | синтаксически конструкций и ключевых слов. Для какого языка нашлось больше,
136 | тот и выбирается.
137 |
138 | Это означает, что в коротких фрагментах высока вероятность ошибки, что
139 | периодически и случается. Чтобы указать язык фрагмента явно, надо написать
140 | его название в виде класса к элементу ``:
141 |
142 | ```html
143 |
...
144 | ```
145 |
146 | Можно использовать рекомендованные в HTML5 названия классов:
147 | "language-html", "language-php". Также можно назначать классы на элемент
148 | `
`.
149 |
150 | Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
151 |
152 | ```html
153 |
...
154 | ```
155 |
156 |
157 | ## Экспорт
158 |
159 | В файле export.html находится небольшая программка, которая показывает и дает
160 | скопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода.
161 | Это может понадобится например на сайте, на котором нельзя подключить сам скрипт
162 | highlight.js.
163 |
164 |
165 | ## Координаты
166 |
167 | - Версия: 8.0
168 | - URL: http://highlightjs.org/
169 |
170 | Лицензионное соглашение читайте в файле LICENSE.
171 | Список авторов и соавторов читайте в файле AUTHORS.ru.txt
172 |
--------------------------------------------------------------------------------
/includes/highlight/highlight.pack.js:
--------------------------------------------------------------------------------
1 | var hljs=new function(){function k(v){return v.replace(/&/gm,"&").replace(//gm,">")}function t(v){return v.nodeName.toLowerCase()}function i(w,x){var v=w&&w.exec(x);return v&&v.index==0}function d(v){return Array.prototype.map.call(v.childNodes,function(w){if(w.nodeType==3){return b.useBR?w.nodeValue.replace(/\n/g,""):w.nodeValue}if(t(w)=="br"){return"\n"}return d(w)}).join("")}function r(w){var v=(w.className+" "+(w.parentNode?w.parentNode.className:"")).split(/\s+/);v=v.map(function(x){return x.replace(/^language-/,"")});return v.filter(function(x){return j(x)||x=="no-highlight"})[0]}function o(x,y){var v={};for(var w in x){v[w]=x[w]}if(y){for(var w in y){v[w]=y[w]}}return v}function u(x){var v=[];(function w(y,z){for(var A=y.firstChild;A;A=A.nextSibling){if(A.nodeType==3){z+=A.nodeValue.length}else{if(t(A)=="br"){z+=1}else{if(A.nodeType==1){v.push({event:"start",offset:z,node:A});z=w(A,z);v.push({event:"stop",offset:z,node:A})}}}}return z})(x,0);return v}function q(w,y,C){var x=0;var F="";var z=[];function B(){if(!w.length||!y.length){return w.length?w:y}if(w[0].offset!=y[0].offset){return(w[0].offset"}function E(G){F+=""}function v(G){(G.event=="start"?A:E)(G.node)}while(w.length||y.length){var D=B();F+=k(C.substr(x,D[0].offset-x));x=D[0].offset;if(D==w){z.reverse().forEach(E);do{v(D.splice(0,1)[0]);D=B()}while(D==w&&D.length&&D[0].offset==x);z.reverse().forEach(A)}else{if(D[0].event=="start"){z.push(D[0].node)}else{z.pop()}v(D.splice(0,1)[0])}}return F+k(C.substr(x))}function m(y){function v(z){return(z&&z.source)||z}function w(A,z){return RegExp(v(A),"m"+(y.cI?"i":"")+(z?"g":""))}function x(D,C){if(D.compiled){return}D.compiled=true;D.k=D.k||D.bK;if(D.k){var z={};function E(G,F){if(y.cI){F=F.toLowerCase()}F.split(" ").forEach(function(H){var I=H.split("|");z[I[0]]=[G,I[1]?Number(I[1]):1]})}if(typeof D.k=="string"){E("keyword",D.k)}else{Object.keys(D.k).forEach(function(F){E(F,D.k[F])})}D.k=z}D.lR=w(D.l||/\b[A-Za-z0-9_]+\b/,true);if(C){if(D.bK){D.b=D.bK.split(" ").join("|")}if(!D.b){D.b=/\B|\b/}D.bR=w(D.b);if(!D.e&&!D.eW){D.e=/\B|\b/}if(D.e){D.eR=w(D.e)}D.tE=v(D.e)||"";if(D.eW&&C.tE){D.tE+=(D.e?"|":"")+C.tE}}if(D.i){D.iR=w(D.i)}if(D.r===undefined){D.r=1}if(!D.c){D.c=[]}var B=[];D.c.forEach(function(F){if(F.v){F.v.forEach(function(G){B.push(o(F,G))})}else{B.push(F=="self"?D:F)}});D.c=B;D.c.forEach(function(F){x(F,D)});if(D.starts){x(D.starts,C)}var A=D.c.map(function(F){return F.bK?"\\.?\\b("+F.b+")\\b\\.?":F.b}).concat([D.tE]).concat([D.i]).map(v).filter(Boolean);D.t=A.length?w(A.join("|"),true):{exec:function(F){return null}};D.continuation={}}x(y)}function c(S,L,J,R){function v(U,V){for(var T=0;T";U+=Z+'">';return U+X+Y}function N(){var U=k(C);if(!I.k){return U}var T="";var X=0;I.lR.lastIndex=0;var V=I.lR.exec(U);while(V){T+=U.substr(X,V.index-X);var W=E(I,V);if(W){H+=W[1];T+=w(W[0],V[0])}else{T+=V[0]}X=I.lR.lastIndex;V=I.lR.exec(U)}return T+U.substr(X)}function F(){if(I.sL&&!f[I.sL]){return k(C)}var T=I.sL?c(I.sL,C,true,I.continuation.top):g(C);if(I.r>0){H+=T.r}if(I.subLanguageMode=="continuous"){I.continuation.top=T.top}return w(T.language,T.value,false,true)}function Q(){return I.sL!==undefined?F():N()}function P(V,U){var T=V.cN?w(V.cN,"",true):"";if(V.rB){D+=T;C=""}else{if(V.eB){D+=k(U)+T;C=""}else{D+=T;C=U}}I=Object.create(V,{parent:{value:I}})}function G(T,X){C+=T;if(X===undefined){D+=Q();return 0}var V=v(X,I);if(V){D+=Q();P(V,X);return V.rB?0:X.length}var W=z(I,X);if(W){var U=I;if(!(U.rE||U.eE)){C+=X}D+=Q();do{if(I.cN){D+="
"}H+=I.r;I=I.parent}while(I!=W.parent);if(U.eE){D+=k(X)}C="";if(W.starts){P(W.starts,"")}return U.rE?0:X.length}if(A(X,I)){throw new Error('Illegal lexeme "'+X+'" for mode "'+(I.cN||"")+'"')}C+=X;return X.length||1}var M=j(S);if(!M){throw new Error('Unknown language: "'+S+'"')}m(M);var I=R||M;var D="";for(var K=I;K!=M;K=K.parent){if(K.cN){D=w(K.cN,D,true)}}var C="";var H=0;try{var B,y,x=0;while(true){I.t.lastIndex=x;B=I.t.exec(L);if(!B){break}y=G(L.substr(x,B.index-x),B[0]);x=B.index+y}G(L.substr(x));for(var K=I;K.parent;K=K.parent){if(K.cN){D+="
The WordPress media library interfaces (the media modal) are a Javascript heavy
5 | feature written with Backbone.
6 | Backbone is a light, unopinionated framework that can be dropped into an existing
7 | web application without much investment, making it suitable for WordPress core, where
8 | new features need to play nicely with existing functionality and our commitment
9 | to backwards compatibility.
10 |
11 |
Javascript classes are documented in separate sections here.
12 |
13 |
FAQ
14 |
15 |
I'm writing a plugin/theme and need a user to select an attachment, and do something
16 | with that selection. Can I use the media modal to do this?
7 |
--------------------------------------------------------------------------------
/sections/wp.media.controller.Region/examples/1/script.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | $(document).ready( function() {
3 | $('.js--render-region').click( function( event ) {
4 | event.preventDefault();
5 |
6 | // A region requires a parent view to live inside.
7 | var RegionParentViewConstructor = wp.Backbone.View.extend({
8 | // When the view is initialized, bind events to callbacks.
9 | initialize: function() {
10 | // Regions trigger events on their parent views, which
11 | // the parent view should bind callbacks for.
12 |
13 | // When the region is created:
14 | // Events triggered: {region-id}:create and {region-id}:create:{mode}
15 | this.on( 'region-1:create', this.onCreateRegion, this );
16 |
17 | // When the region is rendered:
18 | // Events triggered: {region-id}:render and {region-id}:render:{mode}
19 | },
20 |
21 | /**
22 | * On the "create" event, the region controller is passed as an
23 | * argument.
24 | *
25 | * This is the time to create a view on the region.
26 | */
27 | onCreateRegion: function( region ) {
28 | // Create a basic view constructor that binds to a template.
29 | var RegionViewConstructor = wp.Backbone.View.extend({
30 | // assign a compiled template function.
31 | template: wp.template( 'view-1' )
32 | });
33 | // Create the view for the region, which is automatically
34 | // rendered later.
35 | region.view = new RegionViewConstructor();
36 | }
37 | });
38 | // Create an instance of the RegionParentView.
39 | var RegionParentView = new RegionParentViewConstructor({
40 | // Tie the view to an existing DOM element.
41 | el: '.region-parent-view'
42 | });
43 | // Render the region parent view.
44 | RegionParentView.render();
45 |
46 | // Create a new region
47 | var RegionOne = new wp.media.controller.Region({
48 | // Unique identifier.
49 | id: 'region-1',
50 | // The region's parent view.
51 | view: RegionParentView,
52 | // The selector for the element in the parent view's markup
53 | // that represents the region.
54 | selector: '.region-1'
55 | });
56 | // Render a mode on the region to trigger the {region}:create
57 | // event on the parent view.
58 | RegionOne.render( 'some-mode' );
59 | });
60 | });
61 | })(jQuery);
--------------------------------------------------------------------------------
/sections/wp.media.controller.Region/examples/1/style.css:
--------------------------------------------------------------------------------
1 | .region-1 {
2 | border: 1px dashed #ddd;
3 | margin-bottom: 1em;
4 | min-height: 100px;
5 | }
--------------------------------------------------------------------------------
/sections/wp.media.controller.Region/examples/2/index.php:
--------------------------------------------------------------------------------
1 |
4 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/sections/wp.media.controller.Region/examples/2/script.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | $(document).ready( function() {
3 | // A region requires a parent view to live inside.
4 | var RegionParentViewConstructor = wp.Backbone.View.extend({
5 | // When the view is initialized, bind events to callbacks.
6 | initialize: function() {
7 | // Regions trigger events on their parent views, which
8 | // the parent view should bind callbacks for.
9 |
10 | // When the region is created:
11 | // Events triggered: {region-id}:create and {region-id}:create:{mode}
12 | this.on( 'region-1:create:a-mode', this.onCreateRegionInAMode, this );
13 | this.on( 'region-1:create:b-mode', this.onCreateRegionInBMode, this );
14 |
15 | // When the region is rendered:
16 | // Events triggered: {region-id}:render and {region-id}:render:{mode}
17 | },
18 |
19 | /**
20 | * On the "region-1:create:a-mode" event, the region controller is passed as an
21 | * argument.
22 | *
23 | * This is the time to create a view on the region.
24 | *
25 | * Callback for rendering the region in "A mode".
26 | */
27 | onCreateRegionInAMode: function( region ) {
28 | // Create a basic view constructor that binds to a template.
29 | var RegionViewConstructor = wp.Backbone.View.extend({
30 | // assign a compiled template function.
31 | template: wp.template( 'view-1' )
32 | });
33 | // Create the view for the region, which is automatically
34 | // rendered later.
35 | region.view = new RegionViewConstructor();
36 | },
37 |
38 | /**
39 | * Callback for rendering the region in "B mode".
40 | */
41 | onCreateRegionInBMode: function( region ) {
42 | // Create a basic view constructor that binds to a template.
43 | var RegionViewConstructor = wp.Backbone.View.extend({
44 | // assign a compiled template function.
45 | template: wp.template( 'view-2' )
46 | });
47 | // Create the view for the region, which is automatically
48 | // rendered later.
49 | region.view = new RegionViewConstructor();
50 | }
51 | });
52 | // Create an instance of the RegionParentView.
53 | var RegionParentView = new RegionParentViewConstructor({
54 | // Tie the view to an existing DOM element.
55 | el: '.region-parent-view'
56 | });
57 | // Render the region parent view.
58 | RegionParentView.render();
59 |
60 | // Create a new region
61 | var RegionOne = new wp.media.controller.Region({
62 | // Unique identifier.
63 | id: 'region-1',
64 | // The region's parent view.
65 | view: RegionParentView,
66 | // The selector for the element in the parent view's markup
67 | // that represents the region.
68 | selector: '.region-1'
69 | });
70 | $('.js--switch-region-to-a-mode').click( function( event ) {
71 | event.preventDefault();
72 | // Trigger a mode change on the region, which will hit callbacks
73 | // on the RegionParentView ( RegionParentView.onCreateRegionInAMode() ).
74 | RegionOne.mode( 'a-mode' );
75 | });
76 | $('.js--switch-region-to-b-mode').click( function( event ) {
77 | event.preventDefault();
78 | RegionOne.mode( 'b-mode' );
79 | });
80 | });
81 | })(jQuery);
--------------------------------------------------------------------------------
/sections/wp.media.controller.Region/examples/2/style.css:
--------------------------------------------------------------------------------
1 | .region-1 {
2 | border: 1px dashed #ddd;
3 | margin-bottom: 1em;
4 | min-height: 100px;
5 | }
--------------------------------------------------------------------------------
/sections/wp.media.controller.Region/index.php:
--------------------------------------------------------------------------------
1 |
wp.media.controller.region
2 |
A region is a persistent section of a layout, which can hold a view, and can be replaced by a different view as the application requires.
3 |
A region allows multiple views to be swapped in and out of a section of the page without them having to know about each other.
4 |
Regions are generally managed by the frame, using callbacks for region-specific events.
jQuery selector of the region's containing element within the frame.
13 |
_mode
14 |
The active mode of the region.
15 |
16 |
Methods
17 |
18 |
mode( mode )
19 |
Activate a mode on a region.
20 | Triggers events on the frame controller:
21 | {region-id}:deactivate:{previous-mode}, {region-id}:deactivate, {region-id}:activate:{new-mode}, and {region-id}:activate
22 |
23 |
render( mode )
24 |
Render a mode on a region. Activates the mode if it isn't already.
25 | Triggers events on the frame controller:
26 | {region-id}:create:{mode}, {region-id}:create, {region-id}:render:{new-mode}, and {region-id}:render
27 |
28 |
get()
29 |
Get the region's view.
30 |
set()
31 |
Set the region's view as a subview of the frame using the region's .selector.
32 |
33 |
trigger( event )
34 |
Trigger events on the region's frame: {region-id}:{event}:{mode} and {region-id}:{event}
One region is created. A callback is bound to clicking either button, which triggers a mode switch on the region, filling in the region with a different view for each mode.
49 |
var stateConstructor = media.controller.State.extend({
7 | // autowired (see media.controller.State.constructor() ) to be called when a state
8 | // is activated (see media.controller.StateMachine.setState() )
9 | activate: function() {},
10 |
11 | // autowired (see media.controller.State.constructor() ) to be called when a state
12 | // is deactivated (see media.controller.StateMachine.setState() )
13 | deactivate: function() {},
14 |
15 | // autowired (see media.controller.State.constructor() ) to be called when a state
16 | // has the `reset` event triggered on it.
17 | reset: function() {}
18 |
19 | // autowired (see media.controller.State.constructor() ) to be called when a state
20 | // has the `ready` event triggered on it.
21 | ready: function() {}
22 |
23 | });
24 |
--------------------------------------------------------------------------------
/sections/wp.media.controller.StateMachine/examples/1/index.php:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/sections/wp.media.controller.StateMachine/examples/1/script.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | $(document).ready( function() {
3 | // Create a state machine.
4 | var StateMachine = new wp.media.controller.StateMachine();
5 |
6 | // A basic state constructor we will use for both of the states.
7 | var BasicStateConstructor = wp.media.controller.State.extend({
8 | // States expect a `frame` reference, so we'll fake it for this example.
9 | frame: { on: function() {}, off: function() {},
10 | title: { render: function() {} },
11 | $el: jQuery('')
12 | },
13 |
14 | /**
15 | * Activate callback.
16 | *
17 | * autowired (see media.controller.State.constructor() ) to be called when a state
18 | * is activated (see media.controller.StateMachine.setState() )
19 | */
20 | activate: function() {
21 | alert( 'The state is now ' + this.id );
22 | }
23 | });
24 |
25 | // Add an `on` and `off` state to the state machine.
26 | StateMachine.states.add( [
27 | new BasicStateConstructor({ id: 'on' }),
28 | new BasicStateConstructor({ id: 'off' })
29 | ] );
30 |
31 | // Bind click handlers to update the current state depending on which button
32 | // is clicked.
33 | $('.js--switch-to-on-state').click( function() {
34 | StateMachine.setState( 'on' );
35 | });
36 | $('.js--switch-to-off-state').click( function() {
37 | StateMachine.setState( 'off' );
38 | });
39 | });
40 | })(jQuery);
--------------------------------------------------------------------------------
/sections/wp.media.controller.StateMachine/examples/1/style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ericandrewlewis/wp-media-javascript-guide/15084fdc6ef863de8cf729bc06f1c0dfbacc74be/sections/wp.media.controller.StateMachine/examples/1/style.css
--------------------------------------------------------------------------------
/sections/wp.media.controller.StateMachine/index.php:
--------------------------------------------------------------------------------
1 |
The WordPress Javascript namespace for all media elements.
3 |
4 |
media( attributes )
5 |
Creates and returns a media frame with the given attributes.
6 |
media.View
7 |
The base media view.
8 |
media.ajax()Alias of wp.ajax.send.
9 |
Send a POST request to WordPress.
10 |
media.attachment( id )
11 |
Returns an existing attachment (or creates one if it doesn't exist) in the wp.media.Attachments.all collection. Does not fetch() from the server surprisingly.
12 |
media.audio
13 |
Manages modeling of audio shortcodes in the TinyMCE editor
14 |
media.coerce()
15 |
A helper mixin function to avoid truthy and falsey values being passed as an input that expects booleans.
Manages frames that are related to TinyMCE instances(editors), including inserting content into the editor after selection.
21 |
media.events
22 |
A shared event bus used to provide events into the media workflows that 3rd-party devs can use to hook in. A clone of Backbone.Events.
23 |
media.featuredImage
24 |
Manages the frame for the Featured Image metabox.
25 |
media.fit()
26 |
Scales a set of dimensions to fit within bounding dimensions.
27 |
media.frame
28 |
A reference to the last media frame instantiated via wp.media().
29 |
media.frames
30 |
List of current media frames.
31 |
media.gallery
32 |
Manages modeling of gallery shortcodes in the TinyMCE editor
33 |
media.mixin
34 |
Mixin object that includes common functions for manipulating mediaelement.js players
35 |
media.model
36 |
Namespace containing media models.
37 |
media.playlist
38 |
Manages modeling of audio and video playlist shortcodes in the TinyMCE editor
39 |
media.postAlias of wp.ajax.post.
40 |
Send a POST request to WordPress.
41 |
media.query( props )
42 |
Return a new attachments collection(wp.media.model.Attachments) with the given query properties.
43 |
media.selectionSync
44 |
um
45 |
media.string
46 |
Helper functions to create strings. audio, image, link, props, video.
47 |
media.template( id )
48 |
Fetches and compiles a micro-template by id, proxying to _.template
49 | Expects a prefix of 'tmpl-'. e.g. template( 'attachment-details' ) equals a selector of '#tmpl-attachment-details'.
50 |
media.transition
51 |
um
52 |
media.truncate()
53 |
Truncates a string by injecting an ellipsis into the middle.
54 |
media.video
55 |
Manages modeling of video shortcodes in the TinyMCE editor